/* ============================================================
   Things to Consider Today — shared styles
   Every color, font and spacing value lives in :root.
   Change a token here and it updates the whole site.
   ============================================================ */

:root {
  /* --- Color ------------------------------------------------ */
  --ink:        #142a3d;   /* headings, primary text            */
  --ink-soft:   #4a5b6b;   /* body copy, secondary text         */
  --ink-mute:   #7b8994;   /* meta, timestamps, captions        */
  --brand:      #2e6e8e;   /* links, primary buttons            */
  --brand-dark: #24576f;   /* button hover                      */
  --sand:       #c99a5b;   /* category eyebrows, small accents  */
  --paper:      #fbfaf7;   /* page background                   */
  --surface:    #ffffff;   /* cards, header, footer panels      */
  --rule:       #e4e0d8;   /* hairlines and borders             */
  --rule-soft:  #f0ede6;
  --wash:       #f4f1ea;   /* alternating section background    */

  /* --- Type ------------------------------------------------- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.3vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);

  /* --- Layout ----------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gap: 2rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 42, 61, 0.05), 0 8px 24px rgba(20, 42, 61, 0.06);
  --shadow-lift: 0 2px 4px rgba(20, 42, 61, 0.06), 0 16px 40px rgba(20, 42, 61, 0.1);
}

/* ============================================================
   Reset + base
   ============================================================ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-color: rgba(46, 110, 142, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.6em;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 0.7rem 1.1rem; z-index: 999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Header
   ============================================================ */

.topbar {
  background: var(--ink);
  color: #fff;
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
  min-height: 42px; padding: 0.4rem 0;
}
.topbar a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.topbar a:hover, .topbar a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--sand);
}

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.9rem 0;
}

.brand { grid-column: 2; text-align: center; text-decoration: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.15;
}
.brand__tagline {
  display: block;
  font-style: italic;
  color: var(--ink-mute);
  font-size: var(--step--1);
  margin-top: 0.35rem;
  font-family: var(--font-display);
}

.masthead__nav { grid-column: 3; display: flex; justify-content: flex-end; gap: 1.5rem; align-items: center; }
.masthead__social { grid-column: 1; display: flex; gap: 0.9rem; align-items: center; }

/* LinkedIn mark, used in the masthead and the footer */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color 0.18s ease, background 0.18s ease;
}
.social-link:hover { color: var(--brand); background: rgba(46, 110, 142, 0.09); }
.social-link svg { display: block; }

.footer .social-link { color: rgba(255, 255, 255, 0.75); }
.footer .social-link:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.footer__inner .social-link { margin-right: -0.4rem; }

.masthead__nav a, .masthead__social a:not(.social-link) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.18s ease;
}
.masthead__nav a:hover, .masthead__social a:hover { color: var(--brand); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.5rem 0.7rem;
  cursor: pointer; color: var(--ink);
  font-size: 1rem; line-height: 1;
}

@media (max-width: 430px) {
  .topbar__inner { gap: 0.55rem; }
  .topbar a { font-size: 0.63rem; letter-spacing: 0.06em; }
}

/* Just above the mobile breakpoint the centred title and the three links
   start closing on each other. Tighten the links rather than wrap them. */
@media (max-width: 980px) and (min-width: 861px) {
  .masthead__nav { gap: 0.95rem; }
  .masthead__nav a { font-size: 0.73rem; letter-spacing: 0.05em; }
}

@media (max-width: 860px) {
  .masthead__inner { grid-template-columns: auto 1fr auto; text-align: left; }
  .brand { grid-column: 2; text-align: left; }
  .masthead__social { display: none; }
  .masthead__nav { grid-column: 3; }
  /* Phones get the hamburger only. Leaving the links inline as well squashes
     the title and duplicates what the drawer already offers. */
  .masthead__nav a { display: none; }
  .nav-toggle { display: block; }
  .topbar__inner { gap: 1.1rem; }
}

/* Mobile drawer */
.drawer {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 1.4rem;
}
.drawer[data-open="true"] { display: block; }
.drawer a {
  display: block; padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: var(--ink);
  font-size: 0.95rem;
}
.drawer a:last-child { border-bottom: 0; }

/* ============================================================
   Hero
   ============================================================ */

.hero { background: var(--surface); border-bottom: 1px solid var(--rule); }

/* ---- Video banner ----------------------------------------------
   Height is driven by the viewport rather than the clip's own 16:9,
   so the band stays a banner on a phone and never eats the screen.

   Both the clip and the poster are anchored to the TOP, not the
   centre. The sun, its reflection and the horizon all sit in the
   upper third of the frame; centring the crop throws them away and
   leaves nothing but deck and water.

   The desktop files are pre-cropped to a 1920x640 band starting 90px
   down, which drops most of the empty sky while keeping the horizon
   at the top edge. A wide banner never shows more than about half
   the frame height, so those bytes go into picture quality instead
   of pixels nobody sees.
   ----------------------------------------------------------------- */
.hero__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #2b3a45;                 /* holds the space before paint */
  height: clamp(190px, 26vw, 380px);
}

.hero__media > .hero__video,
.hero__media > .hero__fallback,
.hero__media > .hero__fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Both the clip and the still start at the top of their own crop, which is
     what keeps them aligned. To nudge the desktop view down, raise this — the
     desktop file carries about 140px of spare height for exactly that. */
  object-position: center top;
  display: block;
}

/* The still sits underneath and is covered once the video can play,
   so a blocked or failed video degrades to the photograph. */
.hero__fallback { z-index: 1; }
.hero__video { z-index: 2; opacity: 0; transition: opacity 600ms ease; }
.hero__video[data-playing="true"] { opacity: 1; }

/* Very wide screens crop hard vertically; ease off the height so the
   waterline stays visible instead of collapsing to a letterbox slot. */
@media (min-aspect-ratio: 2/1) and (min-width: 1600px) {
  .hero__media { height: clamp(300px, 22vw, 440px); }
}

/* Short landscape phones: keep the banner from swallowing the fold */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__media { height: 150px; }
}

@media (max-width: 600px) {
  .hero__media { height: clamp(170px, 46vw, 240px); }
}

/* Motion-sensitive visitors get the still, never the loop */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__body { text-align: center; padding: 3.2rem 0 3.6rem; }
.hero h1 {
  font-size: var(--step-4);
  max-width: 20ch;
  margin-inline: auto;
  letter-spacing: -0.015em;
}
.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 0.5rem;
}
.hero__note {
  color: var(--ink-mute);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  margin: 0 0 2rem;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--brand);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: rgba(46, 110, 142, 0.08); }

/* ============================================================
   Section headings
   ============================================================ */

.section { padding: 3.4rem 0; }

.section__title {
  font-size: var(--step-2);
  text-align: center;
  margin-bottom: 2.2rem;
  position: relative;
}
.section__title::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  background: var(--sand);
  margin: 0.85rem auto 0;
}

/* ============================================================
   Layout: main + sidebar
   ============================================================ */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   Post cards
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  border-color: #d8d2c6;
}

.card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wash); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.card__cats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.7rem; }
.cat-tag {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
  text-decoration: none;
}
.cat-tag:hover { color: var(--ink); }

.card__title { font-size: var(--step-1); margin-bottom: 0.7rem; line-height: 1.3; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--brand); }

.card__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-size: 0.78rem; color: var(--ink-mute); margin-bottom: 0.75rem;
}
.card__meta a { color: var(--ink-mute); text-decoration: none; font-weight: 500; }
.card__meta a:hover { color: var(--brand); }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); display: inline-block; }

.card__excerpt { font-size: 0.92rem; margin: 0; color: var(--ink-soft); }

.card--empty {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-mute);
  border-style: dashed;
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 0.4rem; margin-top: 2.8rem; flex-wrap: wrap;
  list-style: none; padding: 0;
}
.pagination button, .pagination a {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0 0.8rem;
  transition: all 0.18s ease;
}
.pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination [aria-current="page"] {
  background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600;
}
.pagination .ellipsis { border: 0; background: none; cursor: default; color: var(--ink-mute); }

/* ============================================================
   Sidebar
   ============================================================ */

.widget {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  margin-bottom: 1.6rem;
}
.widget__title {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.search { display: flex; gap: 0.5rem; }
.search input {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit; font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
}
.search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.search button {
  background: var(--ink); color: #fff; border: 0;
  border-radius: 6px; padding: 0 1rem;
  cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
}
.search button:hover { background: var(--brand); }

.recent { list-style: none; margin: 0; padding: 0; }
.recent li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); }
.recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.recent li:first-child { padding-top: 0; }
.recent a { color: var(--ink); text-decoration: none; font-size: 0.9rem; line-height: 1.45; display: block; font-weight: 500; }
.recent a:hover { color: var(--brand); }
.recent time { display: block; color: var(--ink-mute); font-size: 0.76rem; margin-top: 0.25rem; }

/* ============================================================
   Subscribe band
   ============================================================ */

.subscribe { background: var(--wash); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.subscribe__inner { text-align: center; padding: 3.4rem 0; }
.subscribe h2 { font-size: var(--step-2); max-width: 26ch; margin-inline: auto; }
.subscribe p { max-width: 54ch; margin: 0 auto 1.8rem; color: var(--ink-soft); }
.subscribe form { display: flex; gap: 0.6rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.subscribe input {
  flex: 1; min-width: 220px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: inherit; background: var(--surface); color: var(--ink);
}
.subscribe .fine { font-size: 0.78rem; color: var(--ink-mute); margin-top: 1rem; }

/* ============================================================
   Guarantee strip
   ============================================================ */

.guarantee {
  text-align: center;
  padding: 2.4rem 0;
  font-style: italic;
  color: var(--ink-mute);
  font-size: 0.9rem;
  max-width: 68ch;
  margin-inline: auto;
}
.guarantee strong { color: var(--ink-soft); font-style: normal; }

/* ============================================================
   Footer
   ============================================================ */

.footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 2.8rem 0 2rem; }
.footer__inner { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.88rem; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__copy {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2rem; padding-top: 1.5rem;
}
.footer__copy em { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   Single post
   ============================================================ */

.post-head { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 2.8rem 0 0; }
.post-head__inner { text-align: center; }

.breadcrumb {
  font-size: 0.78rem; color: var(--ink-mute);
  margin-bottom: 1.2rem; letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { margin: 0 0.5rem; opacity: 0.5; }

.post-head h1 { font-size: var(--step-3); max-width: 22ch; margin-inline: auto; letter-spacing: -0.015em; }

.post-meta {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 0.6rem; font-size: 0.85rem; color: var(--ink-mute); margin-bottom: 2.2rem;
}
.post-meta a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }

.post-hero { margin: 0; }
.post-hero img { width: 100%; max-height: 460px; object-fit: cover; }
.post-hero figcaption {
  font-size: 0.78rem; color: var(--ink-mute); text-align: center;
  padding: 0.7rem 1rem; background: var(--paper);
}

/* Article body — the typographic core */
.post-body {
  font-size: 1.075rem;
  line-height: 1.8;
  color: #3d4d5c;
  padding: 3rem 0 1rem;
}
.post-body > * + * { margin-top: 1.35em; }
.post-body h2 {
  font-size: var(--step-2);
  margin-top: 2.6em;
  margin-bottom: 0.1em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}
.post-body h3 { font-size: var(--step-1); margin-top: 2em; margin-bottom: 0.1em; }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.8em; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li { margin-bottom: 0.5em; }
.post-body li::marker { color: var(--sand); }
.post-body img { border-radius: var(--radius); margin-block: 2em; }
.post-body figure { margin: 2em 0; }
.post-body figcaption { font-size: 0.85rem; color: var(--ink-mute); text-align: center; margin-top: 0.7rem; }
.post-body blockquote {
  border-left: 3px solid var(--sand);
  margin: 2em 0; padding: 0.4em 0 0.4em 1.4em;
  font-family: var(--font-display);
  font-size: 1.15rem; font-style: italic; color: var(--ink);
}
.post-body blockquote p { margin: 0; }
.post-body a { font-weight: 500; }
.post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.post-body strong { color: var(--ink); font-weight: 600; }

.disclaimer {
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  font-size: 0.87rem;
  color: var(--ink-mute);
  margin: 2.5rem 0;
}
.disclaimer strong { color: var(--ink-soft); }

/* Author card */
.author-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.7rem;
  margin: 2.5rem 0;
}
.author-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-card__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sand); font-weight: 700; margin-bottom: 0.4rem;
}
.author-card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.author-card p { font-size: 0.9rem; margin: 0; }
@media (max-width: 620px) {
  .author-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
.tag-row a {
  font-size: 0.76rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  color: var(--ink-mute);
  text-decoration: none;
}
.tag-row a:hover { border-color: var(--brand); color: var(--brand); }

.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 2.5rem 0 1rem;
}
.post-nav a {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; text-decoration: none; background: var(--surface);
  transition: border-color 0.18s ease;
}
.post-nav a:hover { border-color: var(--brand); }
.post-nav span {
  display: block; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.4rem;
}
.post-nav strong { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.post-nav .is-next { text-align: right; }
@media (max-width: 620px) { .post-nav { grid-template-columns: 1fr; } }

/* ============================================================
   Standalone pages (About, Services, Contact, Donate, legal)
   ============================================================ */

.page-title {
  font-size: var(--step-3);
  text-align: center;
  margin: 0.5rem 0 0.4rem;
  letter-spacing: -0.015em;
}
.page-title::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  background: var(--sand);
  margin: 1rem auto 0;
}

.page-body { padding-top: 1.6rem; }
.page-body figure { text-align: center; }

/* Portrait on the About page */
.page-body .portrait { margin: 2rem auto 1.2rem; max-width: 300px; }
.page-body .portrait img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  margin: 0;
  box-shadow: 0 2px 6px rgba(20, 42, 61, 0.08), 0 14px 34px rgba(20, 42, 61, 0.12);
}
.page-body figure img { margin-inline: auto; }
.page-body h2:first-of-type { border-top: 0; padding-top: 0; }

/* ---- Services grid ----------------------------------------------
   Two across on desktop, one on phones. The icons were running at
   full width before, which pushed each service most of a screen
   apart and made four of them feel like four separate pages.
   ------------------------------------------------------------------ */

.post-body .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
  margin: 2.4rem 0 2.8rem;
}

.post-body .service {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
}

.post-body .service__icon {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 0 1rem;
}

.post-body .service__title {
  font-size: 1.42rem;
  margin: 0 0 0.6rem;
  border-top: 0;
  padding-top: 0;
  line-height: 1.2;
}

.post-body .service__price {
  margin: -0.25rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.post-body .service__body {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  flex: 1;
}

.post-body .service__prices {
  list-style: none;
  margin: auto 0 0;          /* pinned to the foot, so buttons line up */
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule-soft);
}
.post-body .service__prices li { margin-bottom: 1rem; }
.post-body .service__prices li:last-child { margin-bottom: 0; }

/* What the button buys, stated plainly above it */
.post-body .service__what {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.post-body .service__what b { color: var(--ink); font-weight: 700; }
.post-body .service__what--soon { color: var(--ink-mute); }

.post-body .service__buy-btn {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 42, 61, 0.14), 0 6px 16px rgba(20, 42, 61, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.post-body .service__buy-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20, 42, 61, 0.16), 0 10px 24px rgba(20, 42, 61, 0.18);
}
.post-body .service__buy-btn:active { transform: translateY(0); }
.post-body .service__buy-btn:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .post-body .service__buy-btn { transition: none; }
  .post-body .service__buy-btn:hover { transform: none; }
}

.post-body .service__details {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.9rem;
}
.post-body .service__details li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
  font-size: 0.86rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.post-body .service__details li:last-child { margin-bottom: 0; }
.post-body .service__details li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sand);
}
.post-body .service__details strong { color: var(--ink-soft); }

@media (max-width: 620px) {
  .post-body .services-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .post-body .service { padding: 1.3rem 1.2rem; }
  .post-body .service__icon { width: 64px; height: 64px; }
  .post-body .service__title { font-size: 1.28rem; }
}

/* Calls to action at the foot of a page: stacked and centred, side by side
   once there is room for both. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 2.5rem 0 1rem;
  text-align: center;
}
.page-actions .btn { text-decoration: none; }

@media (max-width: 520px) {
  .page-actions { flex-direction: column; align-items: stretch; }
}

/* ---- Contact form ---- */

.contact-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.8rem;
  margin-top: 2.5rem;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 560px) {
  .contact-form { padding: 1.3rem; }
  .contact-form__row { grid-template-columns: 1fr; }
}
.contact-form .field {
  display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem;
}
.contact-form label {
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  font-family: var(--font-body); letter-spacing: 0.01em;
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;
  font-family: var(--font-body);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.contact-form textarea { resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 0;
  border-color: transparent;
  background: #fff;
}
.contact-form button { border: 0; }
.thanks-lead {
  font-size: var(--step-1);
  font-family: var(--font-display);
  color: var(--ink);
}
.thanks-actions { margin-top: 2rem; }

.form-result {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ok, #3f7a5a);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-top: 2.5rem;
  outline: none;
}
.form-result h3 {
  font-size: var(--step-1);
  margin-bottom: 0.6rem;
}
.form-result p { margin: 0; }
.form-result--error {
  border-left-color: var(--danger, #a8433a);
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.3rem;
}
.form-result--error h3 { font-size: 1.05rem; }

.contact-form__note {
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin: 1rem 0 0;
}

/* ============================================================
   Advertising slots
   ------------------------------------------------------------
   Height is reserved before the ad loads. Without this the page
   jumps as each unit fills, which is both unpleasant to read and
   the main cause of a poor layout-shift score.
   ============================================================ */

.ad-slot {
  display: block;
  margin: 2.5rem auto;
  min-height: 280px;
  text-align: center;
  background: var(--wash);
  border-radius: var(--radius);
  overflow: hidden;
}
.ad-slot::before {
  content: "Advertisement";
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0.6rem 0 0.4rem;
}
.ad-slot ins { display: block; }

@media (max-width: 600px) {
  .ad-slot { min-height: 250px; margin: 2rem auto; }
}

/* An empty slot should not leave a grey box on the page */
.ad-slot:not([data-filled]) ins[data-ad-status="unfilled"] { display: none; }

/* ============================================================
   Cookie consent banner
   Bottom-right on desktop, along the bottom edge on phones —
   matching where the WordPress plugin used to put it.
   ============================================================ */

.consent {
  position: fixed;
  z-index: 300;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(380px, calc(100vw - 3rem));
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(20, 42, 61, 0.1), 0 18px 48px rgba(20, 42, 61, 0.18);
  padding: 1.4rem 1.5rem 1.5rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.consent[data-open="true"] { opacity: 1; transform: none; }

.consent__title {
  font-size: 1.02rem;
  margin: 0 0 0.5rem;
}
.consent__body {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.consent__actions { display: flex; gap: 0.6rem; }
.consent__actions .btn {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

/* Phones: full width along the bottom, buttons stay side by side */
@media (max-width: 600px) {
  .consent {
    right: 0.7rem;
    left: 0.7rem;
    bottom: 0.7rem;
    width: auto;
    padding: 1.2rem 1.2rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; transform: none; }
}

/* Re-open control in the footer */
.consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-decoration: none;
}
.consent-reopen:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   Featured post
   ------------------------------------------------------------
   Pinned above the feed, and removed from the grid below so the
   same article does not appear twice. Hidden while a search or
   category filter is active, since a pinned post makes no sense
   inside a filtered set.
   ============================================================ */

.featured { padding: 3.2rem 0 0; }
.featured[hidden] { display: none; }

.featured__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.featured__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.featured__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.8rem;
  align-items: center;
}

.featured__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--wash);
}
.featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.featured__media:hover img { transform: scale(1.03); }

.featured__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.featured__cats a {
  display: inline-block;
  padding: 0.32rem 0.8rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.featured__cats a:hover { border-color: var(--sand); color: var(--ink); }

.featured__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.featured__title a { color: var(--ink); text-decoration: none; }
.featured__title a:hover { color: var(--brand); }

.featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  margin-bottom: 1rem;
  font-size: 0.86rem;
  color: var(--ink-mute);
}
.featured__meta span { display: inline-flex; align-items: center; gap: 0.42rem; }
.featured__meta svg { width: 15px; height: 15px; flex: none; opacity: 0.7; }

.featured__excerpt {
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.featured__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--sand);
  transition: gap 0.22s ease, color 0.18s ease;
}
.featured__more:hover { gap: 0.85rem; color: var(--brand); }
.featured__more svg { width: 16px; height: 16px; }

.featured__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0 0;
}

@media (max-width: 820px) {
  .featured { padding-top: 2.4rem; }
  .featured__card { grid-template-columns: 1fr; gap: 1.5rem; }
  .featured__media { aspect-ratio: 16 / 10; }
  .featured__rule { margin-top: 2.2rem; }
}

.fine--error { color: #ffd7d2; }

/* ---- After the article -------------------------------------------
   Questions, then a closing call to action. Both sit apart from the
   article text so the reader can see where the piece ends.
   ------------------------------------------------------------------ */

.post-body .faq {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.post-body .faq h2 { margin: 0 0 1rem; font-size: 1.5rem; }

.post-body .faq__item {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.15rem 0;
}
.post-body .faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 2rem 0.85rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
}
.post-body .faq__item summary::-webkit-details-marker { display: none; }
.post-body .faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--sand);
}
.post-body .faq__item[open] summary::after { content: "\2013"; }
.post-body .faq__item summary:hover { color: var(--brand); }
.post-body .faq__answer { padding: 0 0 1rem; }
.post-body .faq__answer p { margin: 0; color: var(--ink-soft); }

.post-body .cta {
  margin: 2.6rem 0 0;
  padding: 1.6rem 1.8rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sand);
  border-radius: var(--radius);
}
.post-body .cta p { margin: 0; color: var(--ink-soft); }
.post-body .cta__action { margin-top: 1.1rem !important; }

@media (max-width: 640px) {
  .post-body .cta { padding: 1.3rem 1.2rem; }
}

/* Photographer credit under a cover image. Pexels asks that their
   contributors be credited when their API is used. */
.post-hero__credit {
  margin: 0.5rem auto 0;
  max-width: var(--wrap-narrow, 760px);
  padding: 0 1.25rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}
.post-hero__caption { color: var(--ink-soft); }
.post-hero__by { color: var(--ink-mute); }
.post-hero__caption + .post-hero__by::before { content: "\00b7"; margin: 0 0.35rem; }
.post-hero__credit a { color: inherit; text-decoration: underline; }
.post-hero__credit a:hover { color: var(--brand); }