/* Pain Rebels — marketing site.
   Design system: see DESIGN.md. Every color, size and space below comes from
   the tokens in :root, which were measured from painrebels.com (Wix) so the
   new site matches the live brand exactly. Don't add raw hex values or pixel
   font sizes in rules; add or reuse a token. */

:root {
  /* ── Color ── */
  --pr-cream: #f6f4ee; /* page background, text on green */
  --pr-charcoal: #2c2627; /* body text, dark buttons */
  --pr-green: #438443; /* hero, bands, accent headings */
  --pr-sage: #8cb081; /* secondary bands, icon fill */
  --pr-mist: #dde2da; /* quiet fills, dividers on dark */
  --pr-white: #ffffff; /* accent line in the hero only */

  --pr-text: var(--pr-charcoal);
  /* Cream on green is 4.1:1: fine for headings 24px+, too low for body
     text. Small text on green uses white (4.55:1). */
  --pr-text-on-green-small: var(--pr-white);
  --pr-text-muted: rgba(44, 38, 39, 0.72);
  --pr-line: rgba(44, 38, 39, 0.16);
  --pr-line-on-dark: rgba(246, 244, 238, 0.32);

  /* ── Type ── Figtree only. 600 for headings/nav/buttons, 500 for text. */
  --pr-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pr-weight-text: 500;
  --pr-weight-heading: 600;
  --pr-weight-strong: 700;
  --pr-leading: 1.4;
  --pr-leading-reading: 1.6; /* blog post body only */
  --pr-tracking-tight: -0.04em;

  /* Type scale. Desktop values are the live site's; they shrink on phones. */
  --pr-size-display: clamp(42px, 5.5vw, 70px); /* h1 */
  --pr-size-h2: clamp(32px, 3.9vw, 48px); /* section headings */
  --pr-size-subhead: clamp(24px, 2.8vw, 35px); /* green intro lines */
  --pr-size-h3: clamp(24px, 2.6vw, 32px);
  --pr-size-lead: clamp(20px, 2.1vw, 26px); /* hero text, card titles */
  --pr-size-button: clamp(18px, 1.8vw, 22px);
  --pr-size-label: 22px; /* timeline dates, small headings */
  --pr-size-body-lg: 20px;
  --pr-size-body: 18px;
  --pr-size-small: 16px;
  --pr-size-caption: 12px;
  --pr-size-nav: 18px;
  --pr-size-logo: 22px;

  /* ── Space & shape ── */
  --pr-content: 980px; /* the live site's content width */
  --pr-measure: 720px; /* blog post text column */
  --pr-gutter: 24px;
  --pr-header-h: 90px;
  --pr-space-1: 8px;
  --pr-space-2: 16px;
  --pr-space-3: 24px;
  --pr-space-4: 32px;
  --pr-space-5: 48px;
  --pr-space-6: 72px;
  --pr-space-7: 96px;
  --pr-radius-card: 24px;
  --pr-radius-img: 14px; /* images and callouts inside cards and posts */
  --pr-radius-pill: 100px;
}

/* ── Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  font-family: var(--pr-font);
  font-weight: var(--pr-weight-text);
  font-size: var(--pr-size-body);
  line-height: var(--pr-leading);
  color: var(--pr-text);
  background: var(--pr-cream);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
strong {
  font-weight: var(--pr-weight-strong);
}
:focus-visible {
  outline: 3px solid var(--pr-charcoal);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--pr-content) + 2 * var(--pr-gutter));
  margin: 0 auto;
  padding: 0 var(--pr-gutter);
}

/* ── Headings ── */
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--pr-weight-heading);
  line-height: var(--pr-leading);
  letter-spacing: var(--pr-tracking-tight);
  text-wrap: balance;
}
h1 {
  font-size: var(--pr-size-display);
}
h2 {
  font-size: var(--pr-size-h2);
}
h3 {
  font-size: var(--pr-size-lead);
}
.subhead {
  font-size: var(--pr-size-subhead);
  color: var(--pr-green);
  max-width: 30ch;
  margin: var(--pr-space-2) auto 0;
  text-wrap: balance;
}
.lead {
  font-size: var(--pr-size-lead);
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  max-width: 40ch;
}
.eyebrow {
  font-size: var(--pr-size-caption);
  font-weight: var(--pr-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--pr-space-2);
}

/* ── Section bands ── Each page alternates these, like the live site. */
section {
  padding: var(--pr-space-7) 0;
}
.band-cream {
  background: var(--pr-cream);
  color: var(--pr-charcoal);
}
.band-sage {
  background: var(--pr-sage);
  color: var(--pr-charcoal);
}
.band-green {
  background: var(--pr-green);
  color: var(--pr-cream);
}
.promise li {
  color: var(--pr-text-on-green-small);
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--pr-space-5);
}
.accent-heading {
  color: var(--pr-green);
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--pr-cream);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--pr-header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-logo);
  color: var(--pr-charcoal);
  text-decoration: none;
}
.brand .mark {
  width: auto;
  height: 38px;
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--pr-space-4);
}
.nav a {
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-nav);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.nav a:hover,
.nav a[aria-current='page'] {
  text-decoration-line: underline;
}
.nav a.btn {
  text-decoration: none;
  font-size: var(--pr-size-nav);
  padding: 8px 22px;
}
.nav-toggle {
  display: none;
}

/* ── Buttons ── Pills. Pick the variant that contrasts with the band. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-button);
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border-radius: var(--pr-radius-pill);
  border: 3px solid transparent;
  padding: 10px 36px;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.btn:hover {
  opacity: 0.88;
}
.btn-dark {
  background: var(--pr-charcoal);
  color: var(--pr-cream);
}
.btn-cream {
  background: var(--pr-cream);
  color: var(--pr-charcoal);
}
.btn-green {
  background: var(--pr-green);
  color: var(--pr-cream);
}
.btn-outline-dark {
  border-color: var(--pr-charcoal);
  color: var(--pr-charcoal);
}
.btn-outline-cream {
  border-color: var(--pr-cream);
  color: var(--pr-cream);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2);
}
.btn-row.center {
  justify-content: center;
}

/* ── Grids & cards ── */
.grid {
  display: grid;
  gap: var(--pr-space-4);
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card {
  background: var(--pr-cream);
  border-radius: var(--pr-radius-card);
  padding: var(--pr-space-4);
}
.card h3 {
  margin-bottom: var(--pr-space-1);
}

/* ── Home: hero ── */
.hero {
  padding: var(--pr-space-7) 0;
}
.hero-green {
  background:
    url('assets/img/hero-bg.jpg') right bottom / cover no-repeat,
    var(--pr-green);
  color: var(--pr-cream);
}
.hero .lead {
  margin: var(--pr-space-4) 0 var(--pr-space-5);
}

/* ── Home: P.A.I.N. columns ── */
.pain-heading {
  font-size: var(--pr-size-display);
}
.pain-heading span {
  display: block;
  font-size: 0.6em;
  line-height: 1.4;
}
.pain-col {
  text-align: center;
}
.pain-col .pain-icon {
  height: 150px;
  width: auto;
  margin: 0 auto var(--pr-space-3);
}
.pain-col h3 {
  font-size: var(--pr-size-lead);
  line-height: 1.3;
  margin-bottom: var(--pr-space-2);
}
.pain-col h3 .initial {
  font-size: 1.45em;
  color: var(--pr-green);
}
.pain-col p {
  font-size: var(--pr-size-small);
}

/* ── Home: "different" block — laptop + phone mockup beside a ~ list ── */
.different {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr);
  gap: var(--pr-space-5);
  align-items: center;
  margin: var(--pr-space-6) 0 var(--pr-space-4);
}
.devices {
  position: relative;
  width: 100%;
  max-width: 590px;
  aspect-ratio: 590 / 490;
  justify-self: end;
}
.device {
  position: absolute;
}
.device .screen {
  background: var(--pr-white);
  border: 4px solid var(--pr-charcoal);
  overflow: hidden;
}
.device .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.laptop {
  top: 0;
  left: 0;
  width: 92%;
}
.laptop .screen {
  aspect-ratio: 17 / 10;
  border-radius: 8px;
}
.phone {
  right: 0;
  bottom: 0;
  width: 20%;
}
.phone .screen {
  aspect-ratio: 9 / 16;
  border-radius: 10px;
}
.app-tabs {
  display: flex;
  justify-content: center;
  gap: 1.6em;
  padding-top: 6px;
  color: var(--pr-charcoal);
}
.phone .app-tabs {
  gap: 0.4em;
}
.app-tabs svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.phone .app-tabs svg {
  width: 10px;
  height: 10px;
}
.tilde-list {
  list-style: none;
  font-size: var(--pr-size-label);
  line-height: var(--pr-leading);
  max-width: 240px;
}
.tilde-list li + li::before {
  content: '~';
  content: '~' / '';
  display: block;
  text-align: center;
  font-size: 2em;
  font-weight: 300;
  line-height: 1;
  margin: var(--pr-space-2) 0;
}
.benefits {
  list-style: disc;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
  font-size: var(--pr-size-body-lg);
  max-width: 820px;
  margin: 0 auto;
}

/* ── Results: hero ── Live: one-line-ish h1 (1.1 line height), 32px lead,
   narrow text column, white-paper button centered under it. */
.results-hero {
  padding: var(--pr-space-6) 0 var(--pr-space-5);
}
.results-hero h1 {
  max-width: 913px; /* live width: breaks after "Relief." */
  line-height: 1.1;
  text-wrap: wrap;
}
.results-hero .lead {
  font-size: var(--pr-size-h3);
  max-width: none;
  margin: 0 0 var(--pr-space-5);
}
.results-hero .prose {
  max-width: 620px;
  margin: 0 0 var(--pr-space-5);
}

/* ── Results: arch panels (shapes from the live site) ── */
.arches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: var(--pr-space-5);
}
.arch {
  aspect-ratio: 333.97 / 370.66;
  max-width: 100%;
  background: center / contain no-repeat;
  color: var(--pr-charcoal);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12%;
}
.arch-down {
  background-image: url('assets/results/intensity-reduced.svg');
  justify-content: flex-start;
  padding-top: 9%;
}
.arch-up {
  background-image: url('assets/results/limitations-lowered.svg');
  justify-content: flex-end;
  padding-bottom: 9%;
}
.arch .stat-line {
  font-size: var(--pr-size-body);
  font-weight: var(--pr-weight-strong);
  margin: var(--pr-space-1) 0 var(--pr-space-3);
}
.arch p {
  font-size: var(--pr-size-small);
}

/* ── Results: testimonials ── */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-5);
  max-width: 760px;
  margin: 0 auto;
}
.quote {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--pr-space-3);
  align-items: center;
}
.quote cite {
  order: -1;
  font-style: normal;
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-lead);
  letter-spacing: var(--pr-tracking-tight);
  text-align: right;
}

/* ── Home closing (cream message + sign-up CTA side by side) ── */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0;
}
.closing > div {
  padding: var(--pr-space-7) max(var(--pr-gutter), 6vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pr-space-4);
}
.closing .closing-icon {
  width: 150px;
  height: auto;
  margin: 0 auto;
}
/* ── About ── */
.promise-band {
  text-align: center;
}
.promise {
  list-style: none;
  margin: var(--pr-space-6) auto 0;
  font-size: var(--pr-size-body-lg);
}
.display-heading {
  font-size: var(--pr-size-display);
}
.bio {
  display: grid;
  grid-template-columns: 293px minmax(0, 470px);
  gap: var(--pr-space-6);
  align-items: start;
  justify-content: center;
  margin: 0 auto;
}
.bio-photo {
  width: 293px;
  height: 293px;
  object-fit: cover;
}
.bio-roles {
  list-style: none;
  font-size: var(--pr-size-body-lg);
  margin: 0 0 var(--pr-space-5);
}
.prose {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
}
.history {
  max-width: 724px;
  font-size: var(--pr-size-body-lg);
}
.timeline {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
}
.timeline li {
  display: grid;
  grid-template-columns: 180px minmax(0, 520px);
  gap: var(--pr-space-6);
}
.t-date {
  font-size: var(--pr-size-label);
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  text-align: right;
}

/* ══ Blog (W3) ═════════════════════════════════════════════════════════
   blog.html and post/<slug>/index.html are written by tools/build_blog.py
   from content/blog/*.json; change the markup there, not in the pages.
   See BLOG.md. */

/* Index */
.blog-intro {
  text-align: center;
  padding-bottom: var(--pr-space-5);
}
.blog-intro h1 {
  font-size: var(--pr-size-h2);
  max-width: 20ch;
  margin: 0 auto;
}
.blog-intro p:not(.eyebrow) {
  color: var(--pr-text-on-green-small);
  max-width: 48ch;
  margin: var(--pr-space-2) auto 0;
}
.blog-intro .eyebrow {
  color: var(--pr-text-on-green-small);
}
.blog-list {
  padding-top: var(--pr-space-6);
}
.topic-tag {
  align-self: flex-start;
  font-size: var(--pr-size-caption);
  font-weight: var(--pr-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pr-mist);
  color: var(--pr-charcoal);
  border-radius: var(--pr-radius-pill);
  padding: 4px 12px;
}
.post-meta {
  font-size: var(--pr-size-small);
  color: var(--pr-text-muted);
}
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--pr-cream);
  color: var(--pr-charcoal);
  border-radius: var(--pr-radius-card);
  overflow: hidden;
  text-decoration: none;
}
.featured-img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  background: var(--pr-white);
}
.featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pr-space-2);
  padding: var(--pr-space-5) var(--pr-space-4);
}
.featured-body h2 {
  font-size: var(--pr-size-h3);
  line-height: 1.2;
}
.read-more {
  font-weight: var(--pr-weight-heading);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.featured-post:hover .read-more {
  text-decoration-thickness: 3px;
}
.post-card:hover h3 {
  text-decoration-line: underline;
}
.more-heading {
  font-size: var(--pr-size-lead);
  text-align: center;
  margin: var(--pr-space-6) 0 var(--pr-space-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pr-space-1);
  margin-bottom: var(--pr-space-4);
}
.chips[hidden] {
  display: none;
}
.chip {
  font: inherit;
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-small);
  color: var(--pr-charcoal);
  background: transparent;
  border: 2px solid var(--pr-charcoal);
  border-radius: var(--pr-radius-pill);
  padding: 6px 18px;
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--pr-charcoal);
  color: var(--pr-cream);
}
.no-posts {
  text-align: center;
}
.post-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pr-space-4);
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--pr-cream);
  color: var(--pr-charcoal);
  border-radius: var(--pr-radius-card);
  padding: var(--pr-space-2) var(--pr-space-2) var(--pr-space-3);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.post-card[hidden] {
  display: none;
}
.post-card:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .post-card {
    transition: none;
  }
  .post-card:hover {
    transform: none;
  }
}
.post-card > :not(.post-card-img) {
  margin: 0 var(--pr-space-1);
}
.post-card h3 {
  font-size: var(--pr-size-label);
  line-height: 1.25;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.post-card p {
  font-size: var(--pr-size-small);
}
.post-card .post-meta {
  margin-top: auto;
}
.post-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--pr-radius-img);
  background: var(--pr-white);
}
.is-contain {
  object-fit: contain;
}
.post-img-blank {
  display: grid;
  place-items: center;
  background: var(--pr-mist);
}
.post-img-blank img {
  width: 34%;
  max-width: 140px;
}
.featured-post .post-img-blank {
  border-radius: 0;
}

/* Post page */
.post-header {
  max-width: calc(var(--pr-measure) + 2 * var(--pr-gutter));
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
  padding-top: var(--pr-space-5);
}
.post-header h1 {
  font-size: var(--pr-size-h2);
  line-height: 1.15;
}
.back-link {
  align-self: flex-start;
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-small);
  text-decoration: none;
  margin-bottom: var(--pr-space-2);
}
.back-link:hover {
  text-decoration: underline;
}
.post-hero {
  margin-top: var(--pr-space-3);
}
.post-hero img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--pr-radius-card);
  background: var(--pr-white);
}
.post-hero.is-contain img {
  object-fit: contain;
}
.post-body {
  max-width: calc(var(--pr-measure) + 2 * var(--pr-gutter));
  padding-top: var(--pr-space-5);
  padding-bottom: var(--pr-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
  font-size: var(--pr-size-body-lg);
  line-height: var(--pr-leading-reading);
}
.post-body h2 {
  font-size: var(--pr-size-h3);
  line-height: 1.2;
  margin-top: var(--pr-space-4);
}
.post-body h3 {
  font-size: var(--pr-size-lead);
  line-height: 1.25;
  margin-top: var(--pr-space-2);
}
.post-body a {
  font-weight: var(--pr-weight-heading);
  text-decoration-color: var(--pr-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post-body ul,
.post-body ol {
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-1);
}
.post-body li::marker {
  color: var(--pr-green);
  font-weight: var(--pr-weight-strong);
}
.callout {
  border-radius: var(--pr-radius-img);
  padding: var(--pr-space-3) var(--pr-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-1);
}
.callout-title {
  font-weight: var(--pr-weight-strong);
}
.callout-highlight {
  background: var(--pr-mist);
  border-left: 6px solid var(--pr-green);
  font-size: var(--pr-size-lead);
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  line-height: var(--pr-leading);
}
.callout-science {
  background: var(--pr-sage);
}
.callout-note {
  border: 2px solid var(--pr-line);
}
.callout-quote {
  border-left: 6px solid var(--pr-sage);
  border-radius: 0;
  padding: var(--pr-space-1) var(--pr-space-4);
  font-size: var(--pr-size-lead);
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  line-height: var(--pr-leading);
}
blockquote {
  border-left: 6px solid var(--pr-sage);
  padding-left: var(--pr-space-4);
  font-size: var(--pr-size-lead);
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  line-height: var(--pr-leading);
}
blockquote cite {
  display: block;
  margin-top: var(--pr-space-1);
  font-size: var(--pr-size-small);
  font-style: normal;
  font-weight: var(--pr-weight-text);
  letter-spacing: 0;
}
.post-figure {
  margin: var(--pr-space-2) 0;
}
.post-figure img,
.post-video {
  width: 100%;
  height: auto;
  border-radius: var(--pr-radius-img);
  background: var(--pr-white);
}
.post-figure-small img {
  max-width: 320px;
  margin: 0 auto;
}
.post-figure-wide {
  margin-inline: calc(-1 * var(--pr-space-6));
}
figcaption {
  font-size: var(--pr-size-small);
  color: var(--pr-text-muted);
  margin-top: var(--pr-space-1);
  text-align: center;
}
.post-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pr-space-3);
  margin: var(--pr-space-2) 0;
}
.post-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--pr-white);
  border-radius: var(--pr-radius-img);
}
.post-gallery figcaption {
  color: var(--pr-charcoal);
  line-height: var(--pr-leading);
}
.post-gallery strong {
  font-size: 1.3em;
}
.definitions {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
}
.definitions > div {
  background: var(--pr-mist);
  border-radius: var(--pr-radius-img);
  padding: var(--pr-space-2) var(--pr-space-3);
}
.definitions dt {
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-label);
  letter-spacing: var(--pr-tracking-tight);
}
.table-wrap {
  overflow-x: auto;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pr-size-small);
  line-height: var(--pr-leading);
}
.post-body caption {
  font-weight: var(--pr-weight-heading);
  text-align: left;
  margin-bottom: var(--pr-space-1);
}
.post-body th,
.post-body td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pr-line);
}
.post-body thead th {
  background: var(--pr-mist);
  font-weight: var(--pr-weight-heading);
}
.accordion {
  border-top: 1px solid var(--pr-line);
}
.accordion details {
  border-bottom: 1px solid var(--pr-line);
}
.accordion summary {
  cursor: pointer;
  font-weight: var(--pr-weight-heading);
  padding: var(--pr-space-2) 0;
  list-style-position: outside;
  margin-left: 1.1em;
}
.accordion summary::marker {
  color: var(--pr-green);
}
.accordion details > div {
  padding: 0 0 var(--pr-space-2) 1.1em;
}
.post-body hr {
  border: 0;
  border-top: 2px solid var(--pr-line);
  margin: var(--pr-space-3) 0;
}
.signature {
  font-weight: var(--pr-weight-heading);
  font-size: var(--pr-size-lead);
  letter-spacing: var(--pr-tracking-tight);
}
.signature span {
  display: block;
  font-size: var(--pr-size-small);
  font-weight: var(--pr-weight-text);
  letter-spacing: 0;
  color: var(--pr-text-muted);
}
.related h2 {
  font-size: var(--pr-size-h3);
  text-align: center;
  margin-bottom: var(--pr-space-4);
}
.related .btn-row {
  margin-top: var(--pr-space-5);
}
/* ══ End blog ══════════════════════════════════════════════════════════ */

/* ── Footer ── */
.site-footer {
  background: var(--pr-cream);
  padding: var(--pr-space-6) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--pr-space-5);
}
.footer-title {
  font-weight: var(--pr-weight-heading);
  letter-spacing: var(--pr-tracking-tight);
  font-size: var(--pr-size-lead);
  margin-bottom: var(--pr-space-2);
}
.footer-grid nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-grid a {
  text-decoration: none;
}
.footer-grid a:hover {
  text-decoration: underline;
}
.footer-brand .brand {
  font-size: var(--pr-size-lead);
  margin-bottom: var(--pr-space-2);
}
.footer-brand p {
  font-size: var(--pr-size-small);
}

/* ══ Sign-up CTA (W2) ══════════════════════════════════════════════════
   Sends people to the app's sign-up page. The site has no email list:
   blog-post emails go to app accounts. Markup (see DESIGN.md):
     <section class="band-green cta-band"><div class="wrap">
       <h2>…</h2> <p>…</p>
       <div class="btn-row center"><a class="btn btn-cream" href="…/signup">…</a></div>
     </div></section>
   Add `cta-inset` for a rounded green card inside an article (blog posts). */
.cta-band {
  text-align: center;
}
.cta-band p {
  color: var(--pr-text-on-green-small);
  max-width: 52ch;
  margin: var(--pr-space-2) auto var(--pr-space-4);
}
.cta-band .cta-icon {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto var(--pr-space-4);
}
.closing .cta-band p {
  margin: 0 auto;
}
.cta-inset {
  border-radius: var(--pr-radius-card);
  padding: var(--pr-space-5) var(--pr-space-4);
  margin: var(--pr-space-6) 0;
}
/* ══ End sign-up CTA ══════════════════════════════════════════════════ */

/* ── Responsive ── */
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--pr-space-5);
  }
  .closing {
    grid-template-columns: 1fr;
  }
  .post-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .post-figure-wide {
    margin-inline: 0;
  }
}
@media (max-width: 700px) {
  :root {
    --pr-gutter: 16px;
    --pr-header-h: 72px;
    --pr-size-body: 17px;
    --pr-size-body-lg: 18px;
    --pr-size-label: 20px;
  }
  section,
  .hero {
    padding: var(--pr-space-6) 0;
  }
  .nav {
    display: none;
  }
  .nav.open {
    display: flex;
    position: absolute;
    top: var(--pr-header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--pr-cream);
    border-bottom: 1px solid var(--pr-line);
    padding: var(--pr-space-1) var(--pr-gutter) var(--pr-space-3);
  }
  .nav.open a {
    padding: 12px 0;
  }
  .nav.open a.btn {
    margin-top: var(--pr-space-2);
  }
  .nav-toggle {
    display: inline-flex;
    background: none;
    border: 0;
    font-size: 28px;
    cursor: pointer;
    color: var(--pr-charcoal);
  }
  .grid-2,
  .different,
  .bio,
  .arches,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .devices {
    justify-self: center;
  }
  .tilde-list {
    justify-self: center;
    text-align: center;
  }
  .bio {
    gap: var(--pr-space-4);
  }
  .bio-photo {
    width: 100%;
    max-width: 293px;
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
  }
  .quote {
    grid-template-columns: 1fr;
    gap: var(--pr-space-1);
  }
  .quote cite {
    text-align: left;
  }
  .timeline li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .t-date {
    text-align: left;
  }
  .promise {
    margin-top: var(--pr-space-3);
  }
  .closing > div {
    padding: var(--pr-space-6) var(--pr-gutter);
  }
  .btn {
    padding: 10px 28px;
  }
  .featured-post,
  .post-cards {
    grid-template-columns: 1fr;
  }
  .featured-img {
    min-height: 0;
    aspect-ratio: 16 / 11;
    height: auto;
  }
  .featured-body {
    padding: var(--pr-space-3);
  }
  .post-header {
    padding-top: var(--pr-space-4);
  }
  .callout {
    padding: var(--pr-space-2) var(--pr-space-3);
  }
  .callout-quote {
    padding: var(--pr-space-1) var(--pr-space-3);
  }
}