/* ==========================================================================
   All Things PM — Blog styles
   Modernist design system (ported from the Claude Design "modernist" kit) +
   blog-specific layout for the home (journal) and article (leaf) pages.
   Self-hosted Archivo, zero external requests, theme-matched to the app.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/blog/fonts/Archivo-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/blog/fonts/Archivo-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/blog/fonts/Archivo-ExtraBold.ttf') format('truetype');
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;

  /* structural 2px lines/gutters: ink in light, a muted line in dark */
  --color-line: var(--color-text);
  /* backdrop behind hand-drawn illustrations: the illustrations' own paper white,
     in both light and dark, so there is no seam around them */
  --color-illo-bg: #ffffff;

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --maxw: 1200px;
}

/* Dark theme tokens (mirrors the app's dark palette). Applied when the reader's
   system prefers dark AND they haven't forced light, OR when they force dark with
   the toolbar toggle. Illustrations are NOT inverted — they read as light art tiles. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #1a1918;
    --color-surface: #2d2b2b;
    --color-text: #f3f2f2;
    --color-line: #4a4746;
    --color-illo-bg: #ffffff;
    --color-accent: #ff563c;
    --color-divider: color-mix(in srgb, #f3f2f2 16%, transparent);
    --color-neutral-100: #232221;
    --color-neutral-200: #111010;
    --color-neutral-300: #3a3838;
    --color-neutral-400: #555252;
    --color-neutral-500: #8d8988;
    --color-neutral-600: #a7a3a3;
    --color-neutral-700: #c9c5c5;
    --color-neutral-800: #e2dede;
    --color-neutral-900: #201e1d;
    --color-accent-100: rgba(255, 86, 60, 0.18);
    --color-accent-200: rgba(255, 86, 60, 0.26);
    --color-accent-600: #ff6f57;
    --color-accent-700: #ff9a86;
    --color-accent-800: #ffc9be;
  }
}
:root[data-theme='dark'] {
  --color-bg: #1a1918;
  --color-surface: #2d2b2b;
  --color-text: #f3f2f2;
  --color-line: #4a4746;
  --color-illo-bg: #f8f4f4;
  --color-accent: #ff563c;
  --color-divider: color-mix(in srgb, #f3f2f2 16%, transparent);
  --color-neutral-100: #232221;
  --color-neutral-200: #111010;
  --color-neutral-300: #3a3838;
  --color-neutral-400: #555252;
  --color-neutral-500: #8d8988;
  --color-neutral-600: #a7a3a3;
  --color-neutral-700: #c9c5c5;
  --color-neutral-800: #e2dede;
  --color-neutral-900: #201e1d;
  --color-accent-100: rgba(255, 86, 60, 0.18);
  --color-accent-200: rgba(255, 86, 60, 0.26);
  --color-accent-600: #ff6f57;
  --color-accent-700: #ff9a86;
  --color-accent-800: #ffc9be;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-neutral-200);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
h5 { font-size: 16px; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: 10px 15px;
}
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; padding: 3px 10px; white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — page frame — */
.page { padding: 40px 24px 96px; display: flex; justify-content: center; }
.frame {
  width: 100%; max-width: var(--maxw);
  background: var(--color-bg);
  border: 2px solid var(--color-line);
}

/* — nav — */
.site-header {
  display: flex; align-items: center; gap: 32px;
  padding: 20px 40px; border-bottom: 2px solid var(--color-line);
}
.brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap;
}
.brand .accent { color: var(--color-accent); }
.nav-links { display: flex; gap: 26px; margin-left: 20px; flex-wrap: wrap; }
.nav-links a { color: var(--color-text); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.nav-links a:hover, .nav-links a.active { color: var(--color-accent); }
.nav-cta { margin-left: auto; }

/* — site toolbar (replicates the app's SiteHeader; used on every blog page) — */
.site-topbar {
  position: sticky; top: 0; z-index: 100;
  width: 100%; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-neutral-300);
}
.topbar-inner {
  width: 100%; max-width: 1100px; padding: 0 40px;
  display: flex; align-items: center; gap: 32px;
}
.tb-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); white-space: nowrap; }
.tb-mark { width: 28px; height: 28px; background: var(--color-accent); flex: none; }
.tb-wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }
.tb-wordmark .accent { color: var(--color-accent); }
.tb-nav { flex: 1; display: flex; align-items: center; gap: 8px; }
.tb-nav a { padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--color-neutral-600); white-space: nowrap; }
.tb-nav a:hover, .tb-nav a.active { color: var(--color-accent); }
.tb-actions { display: flex; align-items: center; gap: 10px; }
.tb-toggle {
  width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-neutral-600);
}
.tb-toggle:hover { color: var(--color-accent); }
.tb-toggle .ic { display: none; }
.tb-toggle .ic-auto { display: block; }
:root[data-theme='light'] .tb-toggle .ic-auto { display: none; }
:root[data-theme='light'] .tb-toggle .ic-light { display: block; }
:root[data-theme='dark'] .tb-toggle .ic-auto { display: none; }
:root[data-theme='dark'] .tb-toggle .ic-dark { display: block; }
.tb-signin { font-size: 13px; font-weight: 600; color: var(--color-text); padding: 0 6px; white-space: nowrap; }
.tb-signin:hover { color: var(--color-accent); }
.site-topbar .btn { font-size: 13px; padding: 8px 14px; }

/* — masthead (home) — */
.masthead { padding: 56px 40px 40px; border-bottom: 2px solid var(--color-line); }
.kicker { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: var(--color-accent); margin: 0; }
.masthead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-top: 18px; }
.masthead h1 { font-size: 72px; line-height: 0.92; letter-spacing: -0.02em; max-width: 760px; }
.masthead-sub { font-size: 17px; line-height: 1.55; max-width: 380px; color: var(--color-neutral-700); }

/* — featured — */
.blog-card.featured {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-bottom: 2px solid var(--color-line); color: inherit;
}
.featured > .illo { border-right: 2px solid var(--color-line); min-height: 300px; }
.featured-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.featured-body h2 { font-size: 44px; line-height: 1.02; letter-spacing: -0.02em; }
.featured-body .excerpt { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); max-width: 440px; }
.meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-neutral-600); flex-wrap: wrap; }
.meta .who { font-weight: 600; color: var(--color-text); }
.readmore {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--color-accent); transition: gap 0.12s ease;
}
a:hover > .readmore, .readmore:hover { gap: 14px; }

/* — illustration cells + placeholder — */
.illo { overflow: hidden; background: var(--color-illo-bg); }
.illo img { width: 100%; height: 100%; display: block; }
.illo.contain img { object-fit: contain; padding: 18px; }
.illo.cover { background: var(--color-illo-bg); }
.illo.cover img { object-fit: cover; }
.featured > .illo.contain img { padding: 24px; }
.illo-ph {
  width: 100%; height: 100%; min-height: 180px;
  display: grid; place-items: center; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--color-text) 6%, transparent) 11px 12px),
    var(--color-neutral-100);
}
.illo-ph span {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 18px; letter-spacing: 0.02em; color: var(--color-neutral-500);
  text-transform: uppercase;
}

/* — section header (Latest / Keep reading) — */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 34px 40px 22px; }
.sec-head a { font-size: 13px; font-weight: 600; color: var(--color-neutral-600); }

/* — card grid — */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--color-line); border-top: 2px solid var(--color-line);
}
.blog-card { display: flex; flex-direction: column; background: var(--color-bg); color: inherit; transition: transform 0.12s ease; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card:hover .blog-card-title { color: var(--color-accent); }
.card-illo { aspect-ratio: 16 / 11; border-bottom: 2px solid var(--color-line); }
.card-inner { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-title { font-size: 23px; line-height: 1.08; letter-spacing: -0.01em; }
.card-inner .excerpt { font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); flex: 1; }
.card-meta { font-size: 12px; color: var(--color-neutral-600); }

/* — poster CTA — */
.poster {
  background: var(--color-accent); color: var(--color-bg);
  padding: 56px 44px; border-top: 2px solid var(--color-line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.poster .k { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; opacity: 0.85; }
.poster h2 { font-size: 46px; line-height: 0.98; letter-spacing: -0.02em; margin-top: 14px; max-width: 640px; color: var(--color-bg); }
.poster .btn { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }

/* — footer — */
.site-footer {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
  padding: 44px 40px; border-top: 2px solid var(--color-line);
}
.foot-brand .wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.foot-brand .wordmark .accent { color: var(--color-accent); }
.foot-brand p { margin-top: 12px; font-size: 13px; color: var(--color-neutral-600); max-width: 280px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.foot-col .h { font-weight: 700; margin-bottom: 2px; color: var(--color-text); }
.foot-col a { color: var(--color-neutral-700); }
.foot-col a:hover { color: var(--color-accent); }

/* ============================ ARTICLE (LEAF) ============================ */

.crumbs { padding: 18px 40px; border-bottom: 2px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-600); }
.crumbs a { color: var(--color-neutral-600); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs .sep { margin: 0 8px; }
.crumbs .here { color: var(--color-text); }

.article-head { padding: 56px 40px 40px; max-width: 820px; }
.article-head .tags { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.article-head h1 { font-size: 60px; line-height: 0.98; letter-spacing: -0.025em; }
.article-head .lede { margin-top: 24px; font-size: 21px; line-height: 1.5; color: var(--color-neutral-700); }
.article-head .meta { margin-top: 28px; font-size: 14px; }

.cover { border-top: 2px solid var(--color-line); border-bottom: 2px solid var(--color-line); background: var(--color-illo-bg); overflow: hidden; }
.cover img { width: 100%; height: 520px; object-fit: cover; object-position: center 30%; }
.cover-ph { border-top: 2px solid var(--color-line); border-bottom: 2px solid var(--color-line); min-height: 320px; }
.cover-cap { padding: 12px 40px; border-bottom: 2px solid var(--color-divider); font-size: 12px; color: var(--color-neutral-600); }

.article-grid { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 56px; padding: 52px 40px 40px; }

/* article body typography */
.post-body { font-size: 17px; line-height: 1.72; color: var(--color-text); }
.post-body > * + * { margin-top: 22px; }
.post-body h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; margin-top: 40px; }
.post-body h3 { font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; margin-top: 38px; margin-bottom: -6px; }
.post-body h4 { font-size: 20px; margin-top: 28px; }
.post-body ul, .post-body ol { margin: 22px 0; padding-left: 22px; }
.post-body li { margin: 8px 0; }
.post-body a { text-decoration: underline; }
/* In-body illustrations: a full-width light "paper" band (matching the illustration
   paper) with the illustration centered on it, so the space beside the smaller image
   stays a consistent horizontal white strip and it's easy to scroll past. */
.post-figure {
  margin: 22px 0;
  padding: 0;
  background: var(--color-illo-bg);
  line-height: 0;
}
.post-figure img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: min(100%, 540px);
  max-height: 500px;
}
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--color-neutral-100); padding: 2px 6px; }
.post-body pre { background: var(--color-neutral-900); color: var(--color-neutral-100); padding: 20px; overflow-x: auto; border: 2px solid var(--color-line); }
.post-body pre code { background: none; color: inherit; padding: 0; }
.post-body blockquote {
  border-left: 3px solid var(--color-accent); padding: 6px 0 6px 24px; margin: 34px 0;
}
.post-body blockquote p {
  font-family: var(--font-heading); font-weight: 800; font-size: 28px;
  line-height: 1.14; letter-spacing: -0.01em;
}
.post-body hr { border: 0; height: 2px; background: var(--color-divider); margin: 36px 0; }

/* sidebar */
.sidebar { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 24px; }
.side-toc { border: 2px solid var(--color-line); padding: 24px; }
.side-toc .h { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--color-neutral-600); }
.side-toc .links { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; font-size: 14px; }
.side-toc .links a { color: var(--color-text); }
.side-toc .links a:hover { color: var(--color-accent); }
.side-cta { border: 2px solid var(--color-line); border-top: 0; padding: 24px; background: var(--color-neutral-100); }
.side-cta .h { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.1; }
.side-cta p { margin: 10px 0 16px; font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); }

/* author strip */
.author-strip { display: flex; align-items: center; gap: 20px; padding: 28px 40px; border-top: 2px solid var(--color-line); border-bottom: 2px solid var(--color-line); flex-wrap: wrap; }
.avatar { width: 52px; height: 52px; background: var(--color-accent); color: var(--color-bg); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 20px; flex: none; }
.author-strip .who { flex: 1; min-width: 180px; }
.author-strip .who .n { font-weight: 700; }
.author-strip .who .d { font-size: 13px; color: var(--color-neutral-600); }
.author-strip .acts { display: flex; gap: 10px; }

.related-head { padding: 40px 40px 20px; }

/* ============================ RESPONSIVE ============================ */

@media (max-width: 900px) {
  .page { padding: 0 0 64px; }
  .frame { border-left: 0; border-right: 0; }
  .topbar-inner { padding: 0 20px; gap: 16px; }
  .tb-nav { display: none; }
  .site-header { gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
  .nav-links { margin-left: 0; gap: 16px; order: 3; width: 100%; }
  .nav-cta { margin-left: auto; }
  .masthead { padding: 36px 20px 28px; }
  .masthead h1 { font-size: 44px; }
  .featured { grid-template-columns: 1fr; }
  .featured > .illo { border-right: 0; border-bottom: 2px solid var(--color-line); min-height: 240px; max-height: 380px; }
  .featured-body { padding: 28px 20px; }
  .featured-body h2 { font-size: 32px; }
  .sec-head { padding: 24px 20px 16px; }
  .grid { grid-template-columns: 1fr; }
  .poster { padding: 36px 20px; }
  .poster h2 { font-size: 32px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px; }
  .crumbs { padding: 14px 20px; }
  .article-head { padding: 32px 20px 24px; }
  .article-head h1 { font-size: 38px; }
  .article-head .lede { font-size: 18px; }
  .cover img { height: 260px; }
  .cover-cap { padding: 10px 20px; }
  .article-grid { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px; }
  .sidebar { position: static; }
  .post-body { font-size: 16px; }
  .post-body blockquote p { font-size: 22px; }
  .author-strip { padding: 22px 20px; }
  .related-head { padding: 28px 20px 16px; }
}

@media (max-width: 560px) {
  .site-footer { grid-template-columns: 1fr; }
  .masthead h1 { font-size: 36px; }
}