/*
  Vora blog — one stylesheet for all eleven pages.

  This used to be an inline <style> block duplicated byte-for-byte into every
  HTML file. Eleven copies meant eleven places to edit, which is how the blog
  drifted into being a fork of a design system the app no longer uses: a 72px
  grid overlay, a gradient body, gradient cards under drop shadows, 12px radii.

  It now matches the signed-in app: flat surfaces, hairline borders, 8px radii,
  no depth effects. The colour tokens were already identical to the app's dark
  theme, so only the chrome changed.

  Pill CTAs stay. The blog is a marketing surface, and the landing page uses
  pills too; the square-control rule applies to the signed-in app.
*/

:root {
  --bg: #0a0a0c;
  --surface: #131316;
  --elevated: #1b1b1f;
  --border: #2a2a2f;
  --border-accent: rgba(220, 220, 226, 0.46);
  --text: #eceef2;
  --muted: #9a9aa2;
  --tertiary: #6c6c74;
  --accent: #d6d6da;
  --accent-hover: #f2f2f4;
  --accent-subtle: rgba(220, 220, 226, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* Flat canvas. Was a radial gradient stacked on a linear gradient, plus a fixed
   72px grid overlay on top of that. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.7;
  font-size: 17px;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.brand, .brand:hover { text-decoration: none; }

/* 760px keeps articles at a comfortable reading measure. */
/* 1140px generous desktop wrap for header, grid, and footer */
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
.article-wrap { max-width: 820px; margin: 0 auto; }

header.site {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(12px);
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.nav-cta:hover {
  border-color: var(--border-accent);
  background: var(--surface);
  text-decoration: none;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }

/* Flat mark. Was a gradient fill with a drop shadow and an inset highlight. */
.logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-accent);
  background: var(--elevated);
}
.logo span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  line-height: 1;
}
.brand .name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
}

main { position: relative; z-index: 1; padding: 44px 0 78px; }

/* Matches the app's eyebrow: tertiary, not accent. Gold-on-every-section made
   each eyebrow read as a warning rather than a label. */
.eyebrow {
  color: var(--tertiary);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  font-weight: 500;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.18;
  margin: 14px 0 8px;
  letter-spacing: -0.01em;
}
h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 25px; margin: 40px 0 10px; }
h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; margin: 26px 0 6px; }

.meta {
  color: var(--tertiary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}

p { margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--text); }
ol, ul { padding-left: 22px; }
li { margin: 9px 0; }
strong { color: var(--text); font-weight: 600; }

/* Flat panel, hairline border, no shadow — same as .vora-panel in the app. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 30px 0;
}
.card h3 { margin-top: 0; }

/* Pill CTA, matching the landing page's primary button. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent-hover) 74%, var(--accent) 26%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 82%, var(--accent) 18%) 0%, var(--accent) 100%);
  color: #0a0f14;
}
.cta:hover {
  text-decoration: none;
  color: #0a0f14;
  border-color: var(--accent-hover);
}

/*
  Article index — responsive grid on desktop.
*/
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.post:hover {
  text-decoration: none;
  border-color: var(--border-accent);
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  transform: translateY(-2px);
}

.post h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 10px;
  transition: color 0.2s;
}
.post:hover h2 { color: var(--accent-hover); }

.post p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.disc {
  color: var(--tertiary);
  font-size: 13px;
  border-left: 2px solid var(--border);
  padding-left: 14px;
  margin-top: 34px;
}

footer.site {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  color: var(--tertiary);
  font-size: 13px;
  padding: 24px 0 60px;
}

@media (max-width: 639px) {
  .wrap {
    padding-inline: 20px;
  }

  main {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  .blog-grid {
    gap: 16px;
    margin-top: 28px;
  }

  .post {
    padding: 20px;
  }

  footer.site {
    line-height: 1.7;
    padding-top: 24px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
}