/* ---------------------------------------------------------------------
   Green Leaf — design tokens
--------------------------------------------------------------------- */
:root {
  --color-bg: #fffdf7;
  --color-bg-soft: #fff6e8;
  --color-surface: #ffffff;

  --color-green-900: #1f3a24;
  --color-green-700: #2f6b3a;
  --color-green-600: #3d8b4c;
  --color-green-500: #56b26a;
  --color-green-100: #e7f6e4;

  --color-yellow-400: #ffc94a;
  --color-yellow-300: #ffdd8a;
  --color-yellow-100: #fff3d6;

  /* Deep enough to carry white text on a badge: coral-500 only reaches
     2.6:1 against white, which fails at the sizes a count is set in. */
  --color-coral-700: #cc4733;
  --color-coral-500: #ff7a6b;
  --color-coral-100: #ffe3de;

  --color-text: #26332a;
  --color-text-soft: #5b6b5f;
  --color-text-faint: #8a988e;

  --shadow-soft: 0 10px 30px rgba(31, 58, 36, 0.08);
  --shadow-lift: 0 24px 48px rgba(31, 58, 36, 0.16);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container-width: 1180px;
}

@view-transition {
  navigation: auto;
}

/* ---------------------------------------------------------------------
   Reset & base
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-green-900);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-green-700);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.eyebrow {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--color-green-600);
  margin-bottom: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.btn--primary {
  background: var(--color-green-700);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  background: var(--color-green-600);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-green-700);
  color: var(--color-green-700);
}
.btn--ghost:hover {
  background: var(--color-green-100);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------
   Scroll reveal
--------------------------------------------------------------------- */
/* Scroll reveal.
   Scoped to html.js — the class is set by an inline script in <head>, so if
   the script never runs (blocked, cached badly, network hiccup) nothing is
   ever hidden and the page renders as plain content. Hiding by default was
   previously able to blank a whole post. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Header / nav
--------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 247, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31, 58, 36, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-green-900);
}
.brand__mark { width: 30px; height: 30px; }

.main-nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-green-600);
  transition: right 0.25s var(--ease-out);
}
.main-nav a:hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 100%;
  height: 2px;
  background: var(--color-green-900);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--color-bg);
  transition: max-height 0.3s var(--ease-out);
}
.mobile-nav.is-open { max-height: 260px; }
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav a {
  display: block;
  padding: 12px 4px;
  font-weight: 600;
  border-bottom: 1px solid rgba(31, 58, 36, 0.08);
}

@media (max-width: 760px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; }
}

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 140px;
  isolation: isolate;
}

.hero__blobs { position: absolute; inset: 0; z-index: -2; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.blob--green {
  width: 480px; height: 480px;
  background: var(--color-green-100);
  top: -180px; left: -120px;
}
.blob--yellow {
  width: 380px; height: 380px;
  background: var(--color-yellow-100);
  top: 60px; right: -140px;
}
.blob--coral {
  width: 320px; height: 320px;
  background: var(--color-coral-100);
  bottom: -160px; left: 40%;
}

.hero__floaters { position: absolute; inset: 0; z-index: -1; }
.floater {
  position: absolute;
  font-size: 2.4rem;
  animation: float 7s ease-in-out infinite;
  opacity: 0.85;
}
.floater--1 { top: 18%; left: 8%; animation-delay: 0s; }
.floater--2 { top: 65%; left: 14%; animation-delay: 1.4s; font-size: 2rem; }
.floater--3 { top: 30%; right: 10%; animation-delay: 0.7s; font-size: 2.8rem; }
.floater--4 { top: 72%; right: 16%; animation-delay: 2.1s; font-size: 2.1rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .floater { animation: none; }
}

.hero__inner { max-width: 780px; text-align: left; }

.hero__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
}
.hero__title em {
  font-style: italic;
  color: var(--color-green-600);
}

.hero__subtitle {
  font-size: 1.15rem;
  color: var(--color-text-soft);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid var(--color-green-600);
  border-radius: 999px;
}
.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 5px; height: 5px;
  background: var(--color-green-600);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 22px; }
  100% { opacity: 0; top: 22px; }
}

@media (max-width: 700px) {
  .hero { padding: 80px 0 100px; }
  .scroll-cue { display: none; }
  .hero__floaters { display: none; }
}

/* ---------------------------------------------------------------------
   Post feed / grid
--------------------------------------------------------------------- */
.post-feed { padding: 40px 0 120px; }

.section-heading { margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-heading p { color: var(--color-text-soft); margin: 0; }

/* Search + tag filter */
.feed-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.search-field {
  position: relative;
  flex: 1 1 280px;
}
.search-field__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-green-600);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.search-field input {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 15px 20px 15px 48px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.search-field input::placeholder { color: var(--color-text-faint); }
.search-field input:focus {
  outline: none;
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-lift);
}
.search-field input::-webkit-search-cancel-button { cursor: pointer; }

/* The open menu has to sit above the cards below it, which are
   positioned and come later in the document. */
.feed-controls { position: relative; z-index: 20; }
.tag-select { position: relative; flex: 0 1 220px; }
.tag-select.is-open { z-index: 50; }
/* The native <select> and the enhanced button are styled as one so the
   control looks identical whether or not the script ran. */
.tag-select select,
.tag-select .select-trigger {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-green-700);
  padding: 15px 44px 15px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  background-color: var(--color-surface);
  /* caret drawn inline so the control still themes without an extra asset */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8b4c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  box-shadow: var(--shadow-soft);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.tag-select select:focus,
.tag-select .select-trigger:focus-visible {
  outline: none;
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-lift);
}

.select-trigger {
  display: block;
  text-align: left;
  cursor: pointer;
  /* The caret is drawn by the shared background-image rule above; these
     reset what a <button> brings that a <select> doesn't. */
  appearance: none;
  -webkit-appearance: none;
}
.select-trigger__label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag-select.is-open .select-trigger {
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-lift);
}
/* Flip the caret while the list is showing. */
.tag-select.is-open .select-trigger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8b4c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); }

.select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 7px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  animation: select-menu-in 0.18s var(--ease-out) both;
}
@keyframes select-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .select-menu { animation: none; }
}

.select-option {
  padding: 11px 14px 11px 36px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  position: relative;
  /* Long type names shouldn't stretch the menu past the control. */
  overflow-wrap: anywhere;
}
.select-option.is-active {
  background: var(--color-green-100);
  color: var(--color-green-700);
}
.select-option.is-selected { color: var(--color-green-700); }
/* Tick on the chosen option, in the gutter the padding reserves. */
.select-option.is-selected::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 11px;
  height: 6px;
  margin-top: -4px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .select-menu { max-height: 260px; }
}

.feed-status {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  padding: 32px 0 8px;
  margin: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.post-card[hidden] { display: none; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.post-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

.post-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-green-100);
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.08); }

.post-card__tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255, 253, 247, 0.9);
  backdrop-filter: blur(4px);
  color: var(--color-green-700);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.post-card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.post-card__date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-card__title {
  font-size: 1.35rem;
  margin: 0.35em 0 0.4em;
}
.post-card__excerpt {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  flex: 1;
}
.post-card__cta {
  font-weight: 700;
  color: var(--color-green-700);
  font-size: 0.9rem;
}
.post-card__cta span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.post-card:hover .post-card__cta span { transform: translateX(4px); }

/* The card's bottom line: the call to action on the left, how the entry
   has been received on the right. Pushed to the bottom so cards of
   different text lengths still line their footers up across a row. */
.post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.card-stats__icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A gentle warm-up on hover, so the numbers feel part of the card
   rather than printed on it. */
.post-card:hover .card-stats { color: var(--color-green-700); }

@media (max-width: 420px) {
  .card-stats { gap: 9px; font-size: 0.75rem; }
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-text-soft);
}
.empty-state__hint code {
  background: var(--color-green-100);
  padding: 2px 8px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Post detail
--------------------------------------------------------------------- */
.post-hero {
  position: relative;
  color: #fff;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
}
.post-hero__media, .post-hero__overlay {
  position: absolute;
  inset: 0;
}
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.post-hero__overlay {
  background: linear-gradient(180deg, rgba(31, 58, 36, 0.15) 0%, rgba(20, 36, 22, 0.85) 100%);
}
.post-hero__content {
  position: relative;
  padding-block: 60px 48px;
}
.post-hero__back {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 20px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.post-hero__back:hover { opacity: 1; text-decoration: underline; }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tag-pill {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-hero__title {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  max-width: 820px;
}
.post-hero__meta {
  font-size: 0.95rem;
  opacity: 0.85;
  margin: 0;
}

.post-layout { padding-block: 56px 100px; }

.post-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.8;
}
.post-content h2 {
  margin-top: 1.8em;
  font-size: 1.6rem;
}
.post-content h3 { font-size: 1.3rem; margin-top: 1.5em; }
.post-content p { color: var(--color-text); }
.post-content img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin: 1.6em 0;
}
.post-content .post-video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin: 1.6em 0;
  background: #000;
  display: block;
}
/* Embedded YouTube/Vimeo, kept 16:9 and responsive. */
.post-content .video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.6em 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #000;
}
.post-content .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-content blockquote {
  border-left: 4px solid var(--color-green-500);
  margin: 1.8em 0;
  padding: 0.4em 0 0.4em 1.4em;
  font-style: italic;
  color: var(--color-green-700);
  background: var(--color-green-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content a { color: var(--color-green-700); text-decoration: underline; text-decoration-color: var(--color-green-300, var(--color-green-500)); }
.post-content code {
  background: var(--color-green-100);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* --- Inline photo gallery (carousel) ----------------------------------
   A gallery block dropped into the middle of an article: one photo at a
   time, swipeable. It is a scroll-snapping strip first, so it already
   works by touch with no JavaScript; main.js then adds arrows and dots
   on top of that. */
.inline-gallery {
  display: flex;
  gap: 10px;
  margin: 1.8em 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.inline-gallery::-webkit-scrollbar { display: none; }
.inline-gallery > img {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}

.gallery-carousel {
  position: relative;
  margin: 1.8em 0;
}
.gallery-carousel .inline-gallery { margin: 0; }

.gallery-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-green-700);
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
}
.gallery-carousel__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.gallery-carousel__nav--prev { left: 12px; }
.gallery-carousel__nav--next { right: 12px; }
/* Dimmed rather than removed at the ends, so the control doesn't jump. */
.gallery-carousel__nav[disabled] {
  opacity: 0.35;
  cursor: default;
  transform: translateY(-50%);
}

.gallery-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.gallery-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-green-100);
  box-shadow: inset 0 0 0 1.5px rgba(31, 58, 36, 0.18);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.gallery-carousel__dot:hover { transform: scale(1.25); }
.gallery-carousel__dot.is-active {
  background: var(--color-green-500);
  box-shadow: none;
  transform: scale(1.25);
}

.gallery-carousel__count {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(31, 58, 36, 0.62);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

@media (max-width: 600px) {
  .gallery-carousel__nav { width: 38px; height: 38px; font-size: 1.4rem; }
  .gallery-carousel__nav--prev { left: 8px; }
  .gallery-carousel__nav--next { right: 8px; }
}

.post-gallery { max-width: 980px; margin: 72px auto 0; }
.post-gallery__heading { font-size: 1.6rem; margin-bottom: 24px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.gallery-item {
  border: none;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background: var(--color-green-100);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease-out);
}
.gallery-item:hover { transform: scale(1.04) rotate(-0.5deg); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.post-footer-nav { max-width: 720px; margin: 64px auto 0; }

/* Draft preview notice — only ever rendered for a logged-in admin. */
.draft-banner {
  background: var(--color-yellow-400);
  color: #4a3608;
  text-align: center;
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 600;
}
.draft-banner a { text-decoration: underline; margin-left: 6px; }

/* Like button */
.like-bar {
  max-width: 720px;
  margin: 56px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--color-green-500);
  background: var(--color-surface);
  color: var(--color-green-700);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out),
    color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.like-button:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.like-button__heart {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill 0.25s var(--ease-out);
}
.like-button.is-liked {
  background: var(--color-coral-500);
  border-color: var(--color-coral-500);
  color: #fff;
}
.like-button.is-liked .like-button__heart { fill: currentColor; }
.like-button__count {
  font-variant-numeric: tabular-nums;
  background: rgba(31, 58, 36, 0.08);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.88rem;
}
.like-button.is-liked .like-button__count { background: rgba(255, 255, 255, 0.25); }
.like-bar__hint { color: var(--color-text-soft); font-size: 0.9rem; }

@keyframes like-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.like-button.is-popping { animation: like-pop 0.4s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .like-button, .like-button.is-popping { transition: none; animation: none; }
}

/* A post type is one broad classification, so it leads the pill row. */
.tag-pill--type {
  background: var(--color-yellow-400);
  border-color: var(--color-yellow-400);
  color: #4a3608;
}

/* ---------------------------------------------------------------------
   Comments
--------------------------------------------------------------------- */
.comments {
  max-width: 720px;
  margin: 80px auto 0;
  padding-top: 48px;
  border-top: 1px solid rgba(31, 58, 36, 0.1);
}
.comments__heading { font-size: 1.5rem; margin-bottom: 24px; }
.comments__empty { color: var(--color-text-soft); }

.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.flash {
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
}
.flash--success { background: var(--color-green-100); color: var(--color-green-700); }
.flash--error { background: var(--color-coral-100); color: #a8392a; }

.comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.comment {
  display: flex;
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
.comment__avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-green-100);
  color: var(--color-green-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment__body { flex: 1; min-width: 0; }
.comment__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--color-text-faint);
}
.comment__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-green-900);
}
/* Comment text is plain text from the public — preserve the commenter's
   line breaks, and break long unbroken strings instead of letting them
   stretch the layout. */
.comment__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

/* --- Replies ---------------------------------------------------------- */
/* Indented under the comment they answer, with a line down the side so
   the relationship survives on a narrow screen where the indent alone
   would be too small to read. */
.comment-replies {
  list-style: none;
  margin: -4px 0 0;
  padding: 0 0 0 34px;
  position: relative;
}
.comment-replies::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 4px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--color-green-100);
}
.comment-replies > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
}
.comment-replies .comment { padding: 16px 20px; }
.comment-replies .comment__avatar {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  font-size: 0.95rem;
}

/* Michelle's own replies, so a reader can tell at a glance that the
   person who wrote the entry answered. */
.comment--author { background: var(--color-green-100); }
.comment--author .comment__avatar { background: var(--color-green-500); color: #fff; }
.comment__badge {
  display: inline-block;
  padding: 2px 9px;
  margin-right: 2px;
  border-radius: 999px;
  background: var(--color-green-500);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.comment__reply {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-green-700);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.comment__reply:hover { border-color: var(--color-green-500); }
/* Without the script the button can't do anything, so it isn't offered. */
html:not(.js) .comment__reply { display: none; }

.comment-form__replying {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 16px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}
.comment-form__replying[hidden] { display: none; }

@media (max-width: 560px) {
  .comment-replies { padding-left: 20px; }
  .comment-replies::before { left: 8px; }
}

.comment-form {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 28px 26px;
}
.comment-form h3 { font-size: 1.15rem; margin-bottom: 16px; }
.comment-form__row { margin-bottom: 14px; }
.comment-form input[type="text"],
.comment-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(31, 58, 36, 0.15);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s;
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: none;
  border-color: var(--color-green-500);
}
.comment-form textarea { resize: vertical; line-height: 1.6; }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.comment-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Related posts
--------------------------------------------------------------------- */
.related {
  max-width: 980px;
  margin: 88px auto 0;
  padding-top: 48px;
  border-top: 1px solid rgba(31, 58, 36, 0.1);
}
.related .section-heading { margin-bottom: 28px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* Lightbox */
/* --- Questions & answers --------------------------------------------- */
.post-faq {
  max-width: 720px;
  margin: 72px auto 0;
}
.post-faq__heading { font-size: 1.6rem; margin-bottom: 8px; }
.post-faq__list { margin: 0; }
.post-faq__item {
  padding: 22px 0;
  border-bottom: 1px solid rgba(31, 58, 36, 0.1);
}
.post-faq__item:last-child { border-bottom: none; }
.post-faq__q {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--color-green-700);
  margin: 0 0 8px;
  /* A question mark hanging alone on its own line looks like a typo. */
  text-wrap: pretty;
}
.post-faq__a {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text);
  /* Entered in a textarea, so line breaks are meant. */
  white-space: pre-line;
}

/* --- Share sheet ------------------------------------------------------ */
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid var(--color-green-100);
  background: var(--color-green-100);
  color: var(--color-green-700);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.share-button:hover {
  transform: translateY(-3px);
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-soft);
}
.share-button__icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(15, 26, 17, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: share-fade 0.2s var(--ease-out) both;
}
.share-sheet[hidden] { display: none; }
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }

.share-sheet__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 32px 28px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  animation: share-rise 0.26s var(--ease-out) both;
}
@keyframes share-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .share-sheet, .share-sheet__panel { animation: none; }
}

.share-sheet__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-soft);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.share-sheet__close:hover { background: var(--color-green-100); color: var(--color-green-700); }

.share-sheet__title { font-size: 1.5rem; margin: 0 0 6px; }
.share-sheet__hint {
  margin: 0 0 18px;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

/* A textarea rather than a styled block: it can be selected, scrolled
   and copied by hand when the clipboard API is unavailable. */
.share-sheet__text {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid rgba(31, 58, 36, 0.14);
  border-radius: var(--radius-md);
  background: var(--color-green-100);
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: none;
  /* Grown to fit its content by the script; capped here so a long
     description still leaves the buttons on screen. */
  max-height: 48vh;
  /* The link can be long and has no spaces to break at. */
  overflow-wrap: anywhere;
}
.share-sheet__text:focus {
  outline: none;
  border-color: var(--color-green-500);
  box-shadow: 0 0 0 3px rgba(124, 184, 93, 0.18);
}

.share-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.share-sheet__status {
  margin: 14px 0 0;
  min-height: 1.3em;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-green-700);
}
.share-sheet__status.is-error { color: var(--color-coral-700); }

@media (max-width: 520px) {
  .share-sheet { padding: 16px; }
  .share-sheet__panel { padding: 30px 22px 24px; }
  .share-sheet__actions .btn { flex: 1 1 100%; text-align: center; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 26, 17, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__image {
  max-width: 88vw;
  max-height: 84vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: lightbox-in 0.25s var(--ease-out);
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.lightbox__close {
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 2rem;
}
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
}

/* ---------------------------------------------------------------------
   About page
--------------------------------------------------------------------- */
.about-hero { padding: 90px 0 60px; }
.about-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.about-hero__lede { font-size: 1.15rem; color: var(--color-text-soft); }
.about-hero__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  /* A real photo can be any shape; crop it to a consistent portrait so
     the hero keeps its proportions whatever gets uploaded. */
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 800px) {
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-hero__media { order: -1; }
  .about-hero__media img { aspect-ratio: 3 / 2; max-height: 380px; }
}

.about-body { padding: 20px 0 120px; }
/* Long-form column: the about page is read top to bottom, so it gets
   article measure rather than the card grid it used to have. */
.about-body__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.about-section h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.75rem);
  margin-bottom: 0.7em;
  position: relative;
  padding-top: 18px;
}
.about-section h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-yellow-400);
}
.about-prose {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--color-text);
}
.about-prose p { margin: 0 0 1.15em; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose em { color: var(--color-green-700); font-style: italic; }
/* The opening paragraph of the first section carries the eye in. */
.about-section:first-child .about-prose > p:first-child {
  font-size: 1.14rem;
  color: var(--color-green-900);
}

/* ---------------------------------------------------------------------
   404
--------------------------------------------------------------------- */
.not-found { padding: 140px 0; text-align: center; }
.not-found__emoji { font-size: 3.5rem; display: block; margin-bottom: 16px; }
.not-found__inner p { color: var(--color-text-soft); }
.not-found .btn { margin-top: 12px; }

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.site-footer {
  background: var(--color-green-900);
  color: rgba(255,255,255,0.85);
  margin-top: 60px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-block: 56px 32px;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
}
.site-footer__brand .brand__mark { width: 26px; height: 26px; }
.site-footer__brand span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
}
.site-footer__brand p { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.6); }

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}
.site-footer__links a:hover { color: var(--color-yellow-400); }

.site-footer__social {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.social-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 20px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.post-card__tag--type { background: var(--color-yellow-400); color: #4a3608; }