/* Blog and newsletter pages: page head, card grid, post layout, subscribe block.
   Shared by blog.html, newsletter.html and blog/*.html. Cards follow the project grid on the home page. */

[hidden] { display: none !important; }

/* Page head */
.page-head { padding: 5rem 0 3.5rem; }
.page-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.page-head h1 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 50rem;
}
.page-head .lede {
  color: var(--ink-soft);
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}
.page-head .lede a { color: var(--accent); text-decoration: none; }
.page-head .lede a:hover { text-decoration: underline; }

/* Section head inside a page */
.list-section { padding: 0 0 1rem; }
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.list-head h2 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.link-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.link-mono:hover { text-decoration: underline; }

/* Card grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.post-featured + .post-grid { border-top: 0; }
/* closes the grid when the number of cards is odd; links to the subscribe block below */
.post-fill { background: var(--bg-alt); padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.post-fill-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.post-fill h3 { font-family: 'Funnel Display', sans-serif; font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.75rem; max-width: 18ch; }
.post-fill p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 34ch; }

/* Featured (latest) post: one wide cell above the grid */
.post-featured {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.post-featured:hover { background: var(--bg-alt); }
.post-featured .post-thumb { margin-bottom: 0; }
.post-featured-body { padding-right: 1rem; }
.post-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.post-featured .post-date { margin-bottom: 0.75rem; }
.post-featured h2 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem;
}
.post-featured p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.post-featured:hover .tag { background: #fff; }
.post-card {
  display: block;
  background: var(--bg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.post-card:hover { background: var(--bg-alt); }
.post-thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 1.125rem;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}
.post-date span { color: var(--ink-faint); }
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.post-meta h3 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
}
.post-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.post-card p {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.post-tags { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.tag {
  font-family: 'JetBrains Mono', monospace;
  padding: 0.1875rem 0.5rem;
  background: var(--bg-alt);
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: var(--ink-soft);
}
.post-card:hover .tag { background: #fff; }

/* "What to expect" cells (newsletter page) */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.expect-cell { background: var(--bg); padding: 1.5rem; }
.expect-cell .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.875rem;
}
.expect-cell h3 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
}
.expect-cell p { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.55; margin: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #0050cc; border-color: #0050cc; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Subscribe block */
.subscribe {
  margin: 4rem 0 6rem;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.subscribe-copy { padding: 2.5rem; border-right: 1px solid var(--line); }
.subscribe-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.subscribe h2 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.subscribe-copy p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; margin: 0; max-width: 28rem; }
.subscribe-form { padding: 2.5rem; display: grid; gap: 0.75rem; align-content: center; }
.subscribe-fields { display: grid; gap: 0.75rem; }
.subscribe-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 0.75rem; align-items: end; }
.subscribe-form label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.375rem;
}
.subscribe-form input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: #fff;
}
.subscribe-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12); }
.subscribe-form .btn { height: 2.875rem; }
.subscribe-note { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.subscribe-msg { display: none; padding: 0.875rem 1rem; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.5; }
.subscribe-msg.is-visible { display: block; }
.subscribe-msg.ok { background: #eef4ff; color: #0a3d91; }
.subscribe-msg.err { background: #fff1f0; color: #a8071a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Post page */
.post-head { padding: 4rem 0 2.5rem; }
.post-back {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 2rem;
  display: inline-block;
}
.post-back:hover { color: var(--accent); }
.post-back .post-back-label { margin-left: 0.5em; vertical-align: middle; }
/* The arrow is drawn, not typed, so the stroke stays hairline at any size. */
.post-back-arrow {
  width: 1.75rem;
  height: 0.875rem;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
/* The category reads as an outlined badge. `display: table` shrinks it to its
   own text while keeping its own line, which inline-block would not do here. */
.post-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: table;
  padding: 0.1875rem 0.4375rem;
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.post-head h1 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 64rem;
}
.post-meta-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
/* The author leads at every width, so the person is read before the numbers. */
.post-meta-line .post-author { order: -1; margin-right: 0.25rem; }
/* Byline items must never break mid-phrase; the row wraps instead. */
.post-meta-line > *, .post-meta-facts > * { white-space: nowrap; flex-shrink: 0; }
.post-meta-facts { display: inline-flex; align-items: center; gap: 0.75rem; }
.post-meta-line .sep { opacity: 0.5; }
/* The date is the one accent in the byline; the read time stays quiet.
   .post-date is also the list-card date, which is smaller and carries a
   bottom margin, so reset both here or the byline sits off its own baseline. */
.post-meta-line .post-date {
  color: var(--accent);
  font-size: inherit;
  letter-spacing: inherit;
  margin-bottom: 0;
}
/* Post byline: author photo + name */
.post-author { display: inline-flex; align-items: center; gap: var(--photo-gap); color: var(--ink);
  font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
/* One source of truth for the photo size and the gap beside it. */
.post-meta-line { --photo: 40px; --photo-gap: 0.625rem; }
.post-author-photo { width: var(--photo); height: var(--photo); border-radius: 50%;
  object-fit: cover; display: block; flex-shrink: 0; }
.post-hero { margin: 2rem 0 3rem; border: 1px solid var(--line); overflow: hidden; }
/* The hero is the last block in .post-head; without this its bottom margin
   stacks with the section padding and opens a dead gap above the text. */
.post-head .post-hero:last-child { margin-bottom: 0; }
.post-hero img { width: 100%; height: auto; display: block; }
.post-body { max-width: 42rem; margin: 0 auto; padding: 0 0 4rem; }
.post-body p { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); margin: 0 0 1.5rem; }
.post-body h2 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 3rem 0 1rem;
  color: var(--ink);
}
.post-body h3 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
  color: var(--ink);
}
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { margin: 0 0 1.5rem 1.25rem; padding: 0; }
.post-body li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); margin-bottom: 0.5rem; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-size: 0.9375rem; line-height: 1.5; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 0.75rem 0.875rem; border: 1px solid var(--line); }
.post-body th { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg-alt); }
.post-body td:first-child { font-weight: 500; color: var(--ink); }
.post-body td { color: var(--ink-soft); }
.table-wrap { overflow-x: auto; }
.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--ink-soft);
  font-style: italic;
}
.post-body img { width: 100%; height: auto; display: block; margin: 2rem 0; border: 1px solid var(--line); }
.post-body figure { margin: 2rem 0; }
.post-body figure img { margin: 0; }
.post-body figcaption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  text-align: left;
  margin-top: 0.4rem;
}
.post-cta { padding: 4rem 0; border-top: 1px solid var(--line); }
.post-cta-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.post-cta-row h2 {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 30rem;
  margin: 0;
}
.post-nav { padding: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.post-nav-card {
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s;
}
.post-nav-card:hover { opacity: 0.7; }
.post-nav-card.next { text-align: right; grid-column: 2; }
.post-nav-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.post-nav-title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Responsive */
@media (max-width: 68.75rem) and (min-width: 56.3125rem) {
  .expect-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 56.3125rem) {
  .page-head { padding: 3.5rem 0 2.5rem; }
  .post-grid { grid-template-columns: 1fr; }
  .post-featured { grid-template-columns: 1fr; gap: 1.125rem; align-items: start; }
  .post-fill { display: none; }
  .post-featured-body { padding-right: 0; }
  .expect-grid { grid-template-columns: repeat(2, 1fr); }
  .subscribe { grid-template-columns: 1fr; margin: 3rem 0 4rem; }
  .subscribe-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .subscribe-copy, .subscribe-form { padding: 1.75rem; }
  .subscribe-row { grid-template-columns: 1fr; }
  .post-cta-row { flex-direction: column; align-items: flex-start; }
  .post-nav { grid-template-columns: 1fr; gap: 0; }
  .post-nav-card.next { text-align: left; grid-column: auto; }
  /* Byline stacks here: the author leads and the date sits underneath, so the
     person is read before the numbers. The date lines up with the name, not
     with the photo, hence the indent of one photo plus its gap. */
  .post-meta-line { letter-spacing: 0.04em; flex-direction: column;
    align-items: flex-start; gap: 0.5rem; }
  .post-meta-line .post-author { margin-right: 0; }
  .post-meta-facts { gap: 0.5rem; }
}
@media (max-width: 40rem) {
  .expect-grid { grid-template-columns: 1fr; }
  .post-head { padding: 2.5rem 0 1.5rem; }
  /* Byline, mobile: the author leads, the date and read time sit underneath,
     so the person is read before the numbers. */
  .post-meta-line { --photo: 32px; }
  .post-hero { margin: 1.5rem 0 2rem; }
  /* Back link collapses to the arrow alone; the label is for wider screens.
     Alone on the line it carries no text, so it goes full black and larger. */
  .post-back { color: var(--ink); margin-bottom: 3rem; }
  .post-back .post-back-label { display: none; }
  .post-back-arrow { width: 2rem; height: 1rem; }
}