/* ==================================================================
   blog.css
   Slate and teal, mobile first. Light by default, dark automatically
   when the reader's system asks for it. Edit the variables below to
   retune the whole site at once.
   ================================================================== */

:root {
  /* Surfaces and text, Tailwind slate values for a perfect match
     with the main portfolio site. */
  --paper: #f8fafc;            /* slate-50  */
  --surface: #ffffff;
  --surface-raised: #f1f5f9;   /* slate-100 */
  --ink: #0f172a;              /* slate-900 */
  --ink-soft: #475569;         /* slate-600 */
  --ink-faint: #64748b;        /* slate-500 */
  --line: #e2e8f0;             /* slate-200 */

  /* Accent, Tailwind teal values. */
  --accent: #0f766e;           /* teal-700 */
  --accent-strong: #115e59;    /* teal-800 */
  --accent-bright: #14b8a6;    /* teal-500 */
  --accent-soft: #ccfbf1;      /* teal-100 */
  --accent-wash: #f0fdfa;      /* teal-50  */
  --chip-active-ink: #f8fafc;

  --shadow: 0 8px 24px rgba(15, 23, 42, 0.07);

  /* Featured hero panel, dark in both themes for contrast. */
  --hero-bg: #0f172a;          /* slate-900 */
  --hero-bg-soft: #1e293b;     /* slate-800 */
  --hero-ink: #f8fafc;         /* slate-50  */
  --hero-ink-soft: #cbd5e1;    /* slate-300 */
  --hero-accent: #5eead4;      /* teal-300  */
  --hero-line: rgba(148, 163, 184, 0.35);
  --cta-bg: #2dd4bf;           /* teal-400  */
  --cta-bg-hover: #5eead4;     /* teal-300  */
  --cta-ink: #0f172a;          /* slate-900 */

  /* Type. The display face carries headings and the masthead, the
     body face carries the essays, the UI face carries everything
     small and structural. */
  --font-display: "Avenir Next", "Avenir", "Segoe UI Variable Display",
    "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Charter", "Bitstream Charter", "Sitka Text", Cambria,
    Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f172a;          /* slate-900 */
    --surface: #1e293b;        /* slate-800 */
    --surface-raised: #334155; /* slate-700 */
    --ink: #ffffff;            /* pure white — max readability */
    --ink-soft: #f1f5f9;       /* slate-100 — was slate-300, now much brighter */
    --ink-faint: #e2e8f0;      /* slate-200 — was slate-400, now much brighter */
    --line: #334155;           /* slate-700 */

    --accent: #2dd4bf;         /* teal-400 */
    --accent-strong: #5eead4;  /* teal-300 */
    --accent-bright: #2dd4bf;
    --accent-soft: rgba(45, 212, 191, 0.18);
    --accent-wash: rgba(45, 212, 191, 0.08);
    --chip-active-ink: #0f172a;

    --shadow: 0 8px 24px rgba(2, 6, 23, 0.5);

    --hero-bg: #1e293b;        /* slate-800 */
    --hero-bg-soft: #334155;   /* slate-700 */
  }

  /* Extra guarantee: force prose body text to pure white in dark mode */
  body {
    color: #ffffff;
  }

  .prose {
    color: #ffffff;
  }

  .prose p,
  .prose li,
  .prose h2,
  .prose h3 {
    color: #ffffff;
  }

  .post-meta,
  .hero-byline,
  .card-excerpt {
    color: #e2e8f0;
  }
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-soft);
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--chip-active-ink);
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------
   The aimline. A reading progress bar styled after a CBM aimline,
   the signature element of the site. It fills as you read.
   ------------------------------------------------------------------ */

.aimline-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 50;
  pointer-events: none;
}

.aimline {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
  transition: width 0.08s linear;
}

/* ------------------------------------------------------------------
   Masthead, brand, site-nav, and footer
   These components are now rendered by the unified main-site navbar
   and site-footer-unified from ../styles.css (loaded before this file).
   The .wrap class used in <main> and footer containers is kept below.
   ------------------------------------------------------------------ */

/* The .wrap max-width container used for blog content */

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.hero {
  padding: 3rem 0 2rem;
}

.hero-compact {
  padding: 2.2rem 0 1.2rem;
}

.eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hero-tagline {
  margin: 0.9rem 0 0;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
}

.hero-byline {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Tag chips and the index filter row
   ------------------------------------------------------------------ */

.tag-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.72rem;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 999px;
  background: var(--surface, #f1f5f9);
  color: var(--ink-soft, #475569);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease,
    background-color 0.15s ease;
  /* Undo any button UA or reset stylesheet stripping */
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}

/* Filter-row buttons: always visible, slightly elevated surface */
.filter-row .tag-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

@media (prefers-color-scheme: dark) {
  .filter-row .tag-chip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
  }
}

.tag-chip:hover {
  border-color: var(--accent-bright);
  color: var(--accent);
}

.tag-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--chip-active-ink);
}

.tag-chip-small {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.7rem;
}

/* ------------------------------------------------------------------
   Post cards
   ------------------------------------------------------------------ */

.post-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem 1.25rem;
  transition: transform 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-bright);
  box-shadow: var(--shadow);
}

.post-card.is-hidden {
  display: none;
}

.card-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.card-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--accent);
}

.card-excerpt {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Post page
   ------------------------------------------------------------------ */

.post-back {
  margin: 1.6rem 0 0;
}

.post-back a {
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-decoration: none;
}

.post-back a:hover {
  color: var(--accent);
}

.post-header {
  margin: 0.9rem 0 2.1rem;
}

.post-title {
  margin: 0.3em 0 0.45em;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.post-meta {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.post-header::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 1.5rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
}

/* ------------------------------------------------------------------
   Prose, the essay typography
   ------------------------------------------------------------------ */

.prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ink);
}

.prose p {
  margin: 0 0 1.45em;
}

.prose h2,
.prose h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 2.2em 0 0.7em;
}

.prose h2 {
  font-size: 1.45rem;
}

.prose h3 {
  font-size: 1.18rem;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--accent-strong);
}

.prose blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid var(--accent-bright);
  color: var(--ink-soft);
  font-style: italic;
}

.prose ul,
.prose ol {
  margin: 0 0 1.45em;
  padding-left: 1.4em;
}

.prose li {
  margin-bottom: 0.45em;
}

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 2.6em 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.prose sup {
  font-family: var(--font-ui);
  font-size: 0.68em;
  line-height: 0;
}

.prose sup a {
  text-decoration: none;
  padding: 0 0.15em;
  font-weight: 600;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-raised);
  border-radius: 5px;
  padding: 0.12em 0.35em;
}

.prose pre {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  margin: 0 0 1.6em;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.prose th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Author card and author page
   ------------------------------------------------------------------ */

.author-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.35rem;
  margin: 3rem 0 2rem;
}

.author-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.author-name {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.author-name a {
  color: var(--ink);
  text-decoration: none;
}

.author-name a:hover {
  color: var(--accent);
}

.author-credentials {
  margin-left: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.author-bio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.author-page-bio {
  max-width: 64ch;
}

.section-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin: 2.4rem 0 1rem;
}

/* ------------------------------------------------------------------
   Older and newer pager
   ------------------------------------------------------------------ */

.post-pager {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0 0 3rem;
}

.pager-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.pager-link:hover {
  border-color: var(--accent-bright);
}

.pager-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.pager-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.35;
}

/* ------------------------------------------------------------------
   Tags index page
   ------------------------------------------------------------------ */

.tags-index {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
}

.tags-index li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tag-count {
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------------ */

@media (min-width: 640px) {
  .prose {
    font-size: 1.125rem;
  }

  .post-pager {
    grid-template-columns: 1fr 1fr;
  }

  .pager-next {
    text-align: right;
  }
}

/* ------------------------------------------------------------------
   Featured post hero. The newest post is the hero itself: a dark
   slate panel with the animated aimline motif behind it. The whole
   panel is one click target via the stretched link pattern, while
   the tag chips stay independently clickable above the overlay.
   ------------------------------------------------------------------ */

.hero-featured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 1.6rem 0 1.1rem;
  padding: 2rem 1.4rem 2.2rem;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(20, 184, 166, 0.18), transparent 55%),
    linear-gradient(160deg, var(--hero-bg-soft), var(--hero-bg) 60%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.hero-featured:focus-within {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.hero-aimline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}

.aim-goal {
  stroke: var(--hero-accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 9;
  opacity: 0.5;
}

.aim-data {
  fill: none;
  stroke: var(--cta-bg);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-aimline 1.4s ease-out 0.15s forwards;
}

.aim-dot {
  fill: var(--hero-accent);
  opacity: 0;
  animation: pop-dot 0.5s ease-out forwards;
}

@keyframes draw-aimline {
  to { stroke-dashoffset: 0; }
}

@keyframes pop-dot {
  to { opacity: 0.9; }
}

.featured-body {
  max-width: 56ch;
}

.featured-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

.featured-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.featured-link {
  color: var(--hero-ink);
  text-decoration: none;
}

/* The stretched link: this overlay makes the entire panel clickable. */
.featured-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}

.featured-excerpt {
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--hero-ink-soft);
}

.hero-featured .tag-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.35rem;
}

.hero-featured .tag-chip {
  background: transparent;
  border-color: var(--hero-line);
  color: var(--hero-ink-soft);
}

.hero-featured .tag-chip:hover {
  border-color: var(--hero-accent);
  color: var(--hero-accent);
}

.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.3rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.15s ease;
}

.hero-featured:hover .featured-cta {
  background: var(--cta-bg-hover);
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.hero-featured:hover .cta-arrow,
.post-card:hover .cta-arrow {
  transform: translateX(4px);
}

.site-strapline {
  margin: 0 0 2.2rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Card clickability. Same stretched link pattern: the title anchor
   covers the whole card, the tag chips float above it, and a visible
   Read post line removes any doubt that the card is a link.
   ------------------------------------------------------------------ */

.post-card {
  position: relative;
  cursor: pointer;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
}

.post-card .tag-row {
  position: relative;
  z-index: 2;
}

.post-card:focus-within {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.card-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Scroll reveal. Cards are only hidden when JavaScript runs and the
   reader allows motion, so the page is always complete without it.
   ------------------------------------------------------------------ */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------
   Wider screens, featured hero
   ------------------------------------------------------------------ */

@media (min-width: 640px) {
  .hero-featured {
    padding: 2.8rem 2.6rem 3rem;
  }

  .featured-excerpt {
    font-size: 1.08rem;
  }
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  .post-card:hover,
  .hero-featured:hover {
    transform: none;
  }

  .aim-data {
    stroke-dashoffset: 0;
  }

  .aim-dot {
    opacity: 0.9;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}