/* ============================================================
   Imports
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Montserrat:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --color-chalk:    #FEFEFE;
  --color-rust:     #A84B2C;
  --color-brick:    #6D2B22;
  --color-sage:     #7B8771;
  --color-slate:    #6487A2;
  --color-mustard:  #C9902B;
  --color-paper:    #EBE7DD;
  --color-charcoal: #242424;
  --color-ink:      #1E2530;
  --color-grey:     #736D6D;

  /* Override Ghost's accent colour variable so KG cards (blockquotes,
     bookmark cards, toggles, etc.) use mustard rather than whatever
     is set in Ghost Admin → Brand → Accent colour.
     ghost_head injects --ghost-accent-color before our stylesheet loads,
     so we re-declare it here to keep everything consistent. */
  --ghost-accent-color: #C9902B;

  --font-display: 'Fraunces', Georgia, serif;
  --font-label:   'Montserrat', Arial, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --max-width: 1200px;
  --content-width: 740px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 6px;

  --header-height: 64px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-chalk);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content { flex: 1; display: flex; flex-direction: column; }

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

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

p + p { margin-top: 1em; }

/* ============================================================
   Typography Utilities
   ============================================================ */
.label-text {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.65em 1.4em;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

/* All main page buttons are mustard */
.btn--primary,
.btn--secondary {
  background: var(--color-mustard);
  color: var(--color-chalk);
  border-color: var(--color-mustard);
}
.btn--primary:hover,
.btn--secondary:hover {
  background: #b07d20;
  border-color: #b07d20;
}

.btn--outline {
  background: transparent;
  color: var(--color-mustard);
  border-color: var(--color-mustard);
}
.btn--outline:hover {
  background: var(--color-mustard);
  color: var(--color-chalk);
}

/* ============================================================
   Site Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-chalk);
  border-bottom: 1px solid rgba(30,37,48,0.1);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  flex-shrink: 0;
}
.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 4px;
}
.site-header__logo-mark { flex-shrink: 0; }
.site-header__logo-name {
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.site-header__nav {
  margin-left: auto;
}
.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.site-header__nav a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4em 0.75em;
  border-radius: var(--radius);
  color: var(--color-grey);
  transition: color 0.15s;
}
.site-header__nav a:hover,
.site-header__nav a.active { color: var(--color-ink); }

.site-header__nav-cta {
  background: var(--color-ink) !important;
  color: var(--color-chalk) !important;
  padding: 0.4em 0.9em !important;
}
.site-header__nav-cta:hover {
  background: var(--color-mustard) !important;
}

.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.site-header__menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s;
}

@media (max-width: 700px) {
  .site-header__menu-toggle { display: flex; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-chalk);
    border-bottom: 1px solid rgba(30,37,48,0.1);
    padding: 1rem var(--gap);
  }
  .site-header__nav.is-open { display: block; }
  .site-header__nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-header__nav a { display: block; padding: 0.6em 0; }
}

/* ============================================================
   Site Footer
   ============================================================ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-chalk);
  padding: 3rem var(--gap) 2rem;
  margin-top: 6rem;
}
.home-template .site-footer {
  margin-top: 0;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem 3rem;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-chalk);
  margin-bottom: 0.5rem;
}
.site-footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
  border-radius: 4px;
}

.site-footer__tagline {
  font-size: 0.85rem;
  color: rgba(254,254,254,0.6);
  line-height: 1.5;
}

.site-footer__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.site-footer__nav a {
  font-size: 0.875rem;
  color: rgba(254,254,254,0.7);
  transition: color 0.15s;
}
.site-footer__nav a:hover { color: var(--color-chalk); }

.site-footer__subscribe-heading {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.35rem;
}
.site-footer__subscribe-text {
  font-size: 0.85rem;
  color: rgba(254,254,254,0.6);
  margin-bottom: 0.75rem;
}
.site-footer__subscribe-btn {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-mustard);
  border: 1px solid var(--color-mustard);
  padding: 0.5em 1em;
  border-radius: 10px;
  transition: background 0.15s, opacity 0.15s;
}
.site-footer__subscribe-btn:hover {
  opacity: 0.88;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(254,254,254,0.1);
  font-size: 0.8rem;
  color: rgba(254,254,254,0.4);
}
.site-footer__bottom a { color: rgba(254,254,254,0.6); }
.site-footer__bottom a:hover { color: var(--color-chalk); }

/* === Social Icons — Footer ============================================ */
.site-footer__social {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 0.5rem;
}

.site-footer__social-link {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.8;
  transition: opacity 0.18s, transform 0.18s;
  flex-shrink: 0;
}

.site-footer__social-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.site-footer__social-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Social Icons — Contact page ====================================== */
.contact-social-section {
  background: var(--color-paper);
  padding: clamp(2rem, 5vw, 3.5rem) var(--gap);
}

.contact-social-section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.contact-social-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 1.5rem;
}

.contact-social__links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.contact-social__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--color-grey);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.18s, transform 0.18s;
}

.contact-social__link:hover {
  color: var(--color-ink);
  transform: translateY(-3px);
}

.contact-social__link img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: block;
}

@media (max-width: 800px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Home Page — Hero
   ============================================================ */
.hero {
  background: var(--color-paper);
  padding: clamp(3rem, 8vw, 6rem) var(--gap);
}
.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.hero__icon {
  flex-shrink: 0;
  color: var(--color-ink);
  text-decoration: none;
  display: block;
  transition: color 0.35s ease;
}
.hero__icon:hover { color: var(--color-mustard); }

/* Animated brand SVG — gentle float only */
.hero-brand-svg {
  display: block;
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  animation: hero-svg-float 4s ease-in-out infinite;
}
@keyframes hero-svg-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-10px); }
}
.hero-svg__line {
  opacity: 1;
  vector-effect: non-scaling-stroke;
  stroke-width: 3.5px;
}
.hero__label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 1rem;
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.hero__headline em {
  font-style: italic;
  color: var(--color-mustard);
}
/* Hero word cycle — blinking cursor on the animated word */
#hero-cycle-word::after {
  content: '|';
  color: var(--color-mustard);
  animation: hero-blink 0.75s step-end infinite;
  margin-left: 1px;
  font-weight: 300;
}
@keyframes hero-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.hero__learn-more {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-mustard);
  text-decoration: none;
  transition: opacity 0.15s;
}
.hero__learn-more:hover { opacity: 0.75; }
.hero__description {
  font-size: 1rem;
  color: var(--color-grey);
  max-width: 520px;
  margin-bottom: 1.75rem;
}
@media (max-width: 640px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__icon { display: none; }
}

/* ============================================================
   Home — Newsletter Teaser
   ============================================================ */
.newsletter-teaser {
  background: var(--color-chalk);
  padding: 3rem var(--gap);
  border-bottom: 1px solid rgba(30,37,48,0.08);
}
.newsletter-teaser__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: center;
  background: var(--color-paper);
  border-radius: 12px;
  padding: 2rem 2.5rem;
}
.newsletter-teaser__eyebrow {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mustard);
}
.newsletter-teaser__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0.5rem 0 0.75rem;
}
.newsletter-teaser__title em { font-style: italic; color: var(--color-mustard); }
.newsletter-teaser__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.newsletter-teaser__archive-link {
  font-size: 0.875rem;
  color: var(--color-grey);
  text-decoration: underline;
}
.newsletter-teaser__archive-link:hover { color: var(--color-ink); }

@media (max-width: 700px) {
  .newsletter-teaser__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Home — About Strip
   ============================================================ */
.about-strip {
  padding: 4rem var(--gap);
  background: var(--color-chalk);
}
.about-strip__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 860px;
}
.about-strip__photo {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}
.about-strip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-strip__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.about-strip p { color: var(--color-grey); margin-bottom: 1.25rem; }

@media (max-width: 640px) {
  .about-strip__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about-strip__photo { width: 140px; height: 140px; }
}

/* ============================================================
   Home — Posts Grid
   ============================================================ */
.home-posts {
  background: var(--color-chalk);
  padding: 4rem var(--gap);
}
.home-posts__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.home-posts__label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 1.5rem;
}
.home-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.home-posts__footer {
  margin-top: 2.5rem;
  text-align: center;
}

/* ============================================================
   About Page
   ============================================================ */
.about-page__hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem var(--gap) 3rem;
}
.about-page__photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.about-page__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-page__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.about-page__intro {
  font-size: 1.15rem;
  color: var(--color-grey);
  margin-bottom: 0;
}
.about-page__body {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem var(--gap) 4rem;
}
.about-page__body h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  margin: 2.5rem 0 0.75rem;
  color: var(--color-ink);
}
.about-page__extra {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gap) 4rem;
}
.now-updated {
  color: var(--color-grey);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .about-page__hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about-page__photo { width: 160px; height: 160px; }
}

/* ============================================================
   Home — Post Type Cards
   ============================================================ */
.post-types {
  background: var(--color-chalk);
  padding: 4rem var(--gap);
}
.post-types__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.post-types__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 0.4rem;
}
.post-types__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 2rem;
}
.post-types__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .post-types__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .post-types__grid { grid-template-columns: 1fr; } }

.type-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.type-card--writing { background: var(--color-slate);   color: var(--color-chalk); }
.type-card--note    { background: var(--color-sage);    color: var(--color-chalk); }
.type-card--image   { background: var(--color-rust);    color: var(--color-chalk); }
.type-card--project { background: var(--color-mustard); color: var(--color-chalk); }

.type-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
  opacity: 0.9;
}
.type-card__icon svg { width: 100%; height: 100%; }
.type-card__body { flex: 1; }
.type-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.type-card__desc {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.6;
}
.type-card__arrow {
  display: block;
  margin-top: 1.25rem;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.type-card:hover .type-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   Home — Card Feed Sections (Archive + On This Day)
   ============================================================ */
.home-card-feed {
  padding: 4rem var(--gap);
}
.home-card-feed--archive { background: var(--color-chalk); }
.home-card-feed--otd     { background: var(--color-chalk); }

.home-card-feed__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.home-card-feed__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.home-card-feed__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.3rem;
}
.home-card-feed__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-ink);
}
.home-card-feed__subtitle {
  font-size: 0.875rem;
  color: var(--color-grey);
  margin-top: 0.2rem;
}
.home-card-feed__all-link {
  font-size: 0.875rem;
  color: var(--color-mustard);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-card-feed__all-link:hover { text-decoration: underline; }

.home-card-feed__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .home-card-feed__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .home-card-feed__grid { grid-template-columns: 1fr; } }

/* Compact mini-card (rendered by JS) */
.mini-card {
  background: var(--color-chalk);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(30,37,48,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card-feed--archive .mini-card { background: var(--color-paper); }
.home-card-feed--otd .mini-card     { background: var(--color-paper); }

.mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
  border-color: rgba(30,37,48,0.15);
}
.mini-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.mini-card__image {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.mini-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.mini-card:hover .mini-card__image img { transform: scale(1.04); }
.mini-card__body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.mini-card__type {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 6px;
  margin-bottom: 0.35rem;
}
.mini-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
  transition: color 0.15s;
}
.mini-card:hover .mini-card__title { color: var(--color-mustard); }
.mini-card__excerpt {
  font-size: 0.8rem;
  color: var(--color-grey);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  flex-wrap: wrap;
}
.mini-card__footer .mini-card__type {
  margin-bottom: 0;
}
.mini-card__date {
  font-size: 0.72rem;
  color: var(--color-grey);
}

/* Mini-card: image gallery (built by home-feeds.js) */
.mini-card__gallery {
  width: 100%;
  display: flex;
  gap: 2px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: rgba(30,37,48,0.06);
  flex-shrink: 0;
}
.mini-card__gallery-img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-card__gallery--count-2 .mini-card__gallery-img,
.mini-card__gallery--count-3 .mini-card__gallery-img {
  border-right: 2px solid var(--color-chalk);
}
.mini-card__gallery--count-2 .mini-card__gallery-img:last-child,
.mini-card__gallery--count-3 .mini-card__gallery-img:last-child {
  border-right: none;
}

/* Mini-card: note variant */
.mini-card--note {
  border-left: 3px solid var(--color-sage);
}
.mini-card__note-body {
  font-size: 0.82rem;
  color: var(--color-grey);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  /* allow text to fill vertically without line-clamping */
}

.mini-feed__loading {
  color: var(--color-grey);
  font-size: 0.875rem;
  grid-column: 1 / -1;
}
.mini-feed-empty {
  color: var(--color-grey);
  font-size: 0.875rem;
  font-style: italic;
  padding: 1rem 0;
  grid-column: 1 / -1;
}

/* ============================================================
   Home — Content River Explainer
   ============================================================ */
.content-river-explainer {
  background: var(--color-ink);
  padding: 5rem var(--gap);
  color: var(--color-chalk);
}
.content-river-explainer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.content-river-explainer__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.content-river-explainer__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-chalk);
  margin-bottom: 1.25rem;
}
.content-river-explainer__text p {
  color: rgba(254,254,254,0.72);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1em;
}
.content-river-explainer__text strong { color: var(--color-chalk); }

.content-river-explainer__types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.content-type-card {
  background: rgba(254,254,254,0.08);
  border: 1px solid rgba(254,254,254,0.14);
  border-radius: 10px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  min-height: 190px;
}
/* Chip label — explicitly styled here so it's unmistakably a pill badge */
.content-type-card__chip {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.85em;
  border-radius: 20px;
}
.content-type-card__chip--writing { background: rgba(100,135,162,0.35); color: #9fc3e0; }
.content-type-card__chip--note    { background: rgba(123,135,113,0.35); color: #b4c8a8; }
.content-type-card__chip--image   { background: rgba(168,75,44,0.35);   color: #e08c74; }
.content-type-card__chip--project { background: rgba(201,144,43,0.35);  color: #d9a84a; }
.content-type-card p {
  font-size: 0.95rem;
  color: rgba(254,254,254,0.72);
  line-height: 1.7;
  flex: 1;
  margin: 0;
}

@media (max-width: 800px) {
  .content-river-explainer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 500px) {
  .content-river-explainer__types { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog Feed Page
   ============================================================ */
.blog-feed-page__header {
  padding: 3rem var(--gap) 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.blog-feed-page__label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 0.4rem;
}
.blog-feed-page__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

.blog-feed-layout {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  padding-right: calc(var(--gap) + 60px);
}

.blog-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Month group header — injected by JS */
.feed-month-header {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey);
  padding: 2rem 0 0.75rem;
  border-top: 1px solid rgba(30,37,48,0.08);
  margin-top: 1rem;
}
.feed-month-header:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

.blog-feed__item {
  border-bottom: 1px solid rgba(30,37,48,0.07);
}


/* ============================================================
   Post Cards — Shared
   ============================================================ */
.post-card {
  display: block;
  transition: background 0.15s;
}
.post-card__link {
  display: block;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
}
.post-card__link:hover .post-card__title { color: var(--color-mustard); }

.post-card__type-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 6px;
  margin-bottom: 0;
  text-decoration: none;
}
/* When chip is standalone (legacy / outside meta) give it breathing room */
.post-card__body > .post-card__type-label {
  margin-bottom: 0.6rem;
}
.post-card__type-label--writing { background: rgba(100,135,162,0.12); color: var(--color-slate); }
.post-card__type-label--note    { background: rgba(123,135,113,0.12); color: var(--color-sage); }
.post-card__type-label--image   { background: rgba(168,75,44,0.12);   color: var(--color-rust); }
.post-card__type-label--project { background: rgba(201,144,43,0.12);  color: var(--color-mustard); }

.post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
  transition: color 0.15s;
}
.post-card__excerpt {
  font-size: 0.9rem;
  color: var(--color-grey);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.post-card__date,
.post-card__reading-time {
  font-size: 0.78rem;
  color: var(--color-grey);
}
.post-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}
.post-card__topic {
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey);
  background: rgba(30,37,48,0.05);
  padding: 0.15em 0.5em;
  border-radius: 3px;
}

/* Writing/Project card with image */
.post-card--writing,
.post-card--project {
  display: grid;
  grid-template-columns: 1fr;
}
.post-card--writing .post-card__link,
.post-card--project .post-card__link {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: start;
}
.post-card__image-wrap {
  order: 2;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/2;
}
.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post-card__link:hover .post-card__image { transform: scale(1.03); }
.post-card__body { order: 1; }

@media (max-width: 600px) {
  .post-card--writing .post-card__link,
  .post-card--project .post-card__link { grid-template-columns: 1fr; }
  .post-card__image-wrap { order: -1; aspect-ratio: 3/2; }
}

/* Note card */
.post-card--note {
  padding: 0.5rem 0;
}
.post-card__note-inner {
  padding: 1.5rem 1.5rem 1.25rem;
  background: rgba(235,231,221,0.32);
  border-radius: var(--radius);
  border-left: 3px solid rgba(123,135,113,0.45);
  transition: background 0.15s;
}
.post-card--note:hover .post-card__note-inner { background: rgba(235,231,221,0.55); }
.post-card__title--note {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.post-card__note-title-link {
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.15s;
}
.post-card__note-title-link:hover { color: var(--color-mustard); }

/* Full content in note feed card */
.post-card__note-content {
  font-size: 0.92rem;
  color: var(--color-ink);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
/* Tighten up KG cards inside feed note cards */
.post-card__note-content p { margin: 0 0 0.75em; }
.post-card__note-content p:last-child { margin-bottom: 0; }
.post-card__note-content figure { margin: 0.75rem 0; border-radius: 6px; overflow: hidden; }
.post-card__note-content figure img { max-width: 100%; height: auto; display: block; }
.post-card__note-content img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
.post-card__note-content h2,
.post-card__note-content h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.post-card__note-content blockquote {
  border-left: 3px solid var(--color-sage);
  padding: 0.25rem 0.75rem;
  margin: 0.75rem 0;
  color: var(--color-grey);
  font-style: italic;
}

/* Image card — JS-built gallery above body */
.post-card--image .post-card__link {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.post-card__gallery {
  width: 100%;
  display: flex;
  gap: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  max-height: 210px;
  background: rgba(30,37,48,0.06);
}
.post-card__gallery-img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Thin divider between gallery images */
.post-card__gallery--count-2 .post-card__gallery-img,
.post-card__gallery--count-3 .post-card__gallery-img {
  border-right: 2px solid var(--color-chalk);
}
.post-card__gallery--count-2 .post-card__gallery-img:last-child,
.post-card__gallery--count-3 .post-card__gallery-img:last-child {
  border-right: none;
}
.post-card--image .post-card__body {
  padding: 0.85rem 0 1rem;
}

/* ============================================================
   Infinite Scroll Sentinel + Hidden Pagination
   ============================================================ */
.feed-pagination--hidden {
  display: none; /* hidden when JS is active; pagination links used by JS only */
}
.feed-sentinel {
  height: 1px;
  margin: 2rem 0;
}
.feed-sentinel.is-loading::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-paper);
  border-top-color: var(--color-mustard);
  border-radius: 50%;
  animation: feed-spin 0.7s linear infinite;
  margin: 2rem auto;
}
@keyframes feed-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Blog Feed Pagination (fallback / no-JS)
   ============================================================ */
.pagination {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 0 var(--gap);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--color-grey);
}
.pagination a { color: var(--color-mustard); font-weight: 500; }
.pagination a:hover { text-decoration: underline; }

/* ============================================================
   Tag Archive
   ============================================================ */
.tag-archive__header {
  background: var(--color-paper);
  padding: 3rem var(--gap) 2.5rem;
}
.tag-archive__header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.tag-archive__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 0.4rem;
}
.tag-archive__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
}
.tag-archive__description { color: var(--color-grey); margin-top: 0.5rem; }
.tag-archive__count {
  font-size: 0.8rem;
  color: var(--color-grey);
  margin-top: 0.4rem;
}
.tag-archive__feed {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ============================================================
   Post / Page
   ============================================================ */
.post-header {
  background: var(--color-paper);
  padding: clamp(2.5rem, 6vw, 5rem) var(--gap) 2.5rem;
}
.post-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
.post-header__type-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.post-header__type-label--writing { background: rgba(100,135,162,0.15); color: var(--color-slate); }
.post-header__type-label--note    { background: rgba(123,135,113,0.15); color: var(--color-sage); }
.post-header__type-label--image   { background: rgba(168,75,44,0.15);   color: var(--color-rust); }
.post-header__type-label--project { background: rgba(201,144,43,0.15);  color: var(--color-mustard); }

.post-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.post-header__excerpt {
  font-size: 1.1rem;
  color: var(--color-grey);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.post-header__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.post-header__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.post-header__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.post-header__date,
.post-header__reading-time {
  font-size: 0.8rem;
  color: var(--color-grey);
}

.post-feature-image {
  max-width: var(--content-width);
  margin: 2rem auto 0;
  padding: 0 var(--gap);
}
.post-feature-image img {
  width: 100%;
  border-radius: var(--radius);
}
.post-feature-image figcaption {
  font-size: 0.8rem;
  color: var(--color-grey);
  text-align: center;
  padding: 0.5rem 0;
}

.post-content {
  max-width: var(--content-width);
  margin: 3rem auto;
  padding: 0 var(--gap);
  font-size: 1.05rem;
  line-height: 1.75;
}
.post-content h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}
.post-content h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.post-content p { margin-bottom: 1.25rem; }
/* Underlined links in all body-copy areas */
.post-content a,
.page-content a,
.about-page__body a,
.post-card__note-content a,
.contact-method__text p a,
.privacy-content a,
.portfolio-coming-soon__text a,
.now-page a {
  color: var(--color-mustard);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-content a:hover,
.page-content a:hover,
.about-page__body a:hover,
.post-card__note-content a:hover,
.contact-method__text p a:hover,
.privacy-content a:hover,
.portfolio-coming-soon__text a:hover,
.now-page a:hover {
  color: var(--color-brick);
}
.post-content blockquote {
  border-left: 3px solid var(--color-mustard);
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: var(--color-grey);
  font-style: italic;
}
.post-content code {
  font-size: 0.875em;
  background: rgba(30,37,48,0.07);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
}
.post-content pre {
  background: var(--color-ink);
  color: var(--color-chalk);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5rem 0;
}
.post-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.post-content ul, .post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.post-content li { margin-bottom: 0.4rem; }
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5rem auto;
}
.post-content hr {
  border: none;
  border-top: 1px solid rgba(30,37,48,0.1);
  margin: 2.5rem 0;
}

/* Ghost Koenig cards */
.kg-canvas { padding: 0 var(--gap); }
.kg-width-wide { max-width: min(var(--max-width), 100%); }
.kg-width-full { max-width: 100%; }
.kg-image-card img { border-radius: var(--radius); }
.kg-gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; border-radius: var(--radius); overflow: hidden; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-callout-card {
  display: flex;
  gap: 0.75rem;
  background: var(--color-paper);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.kg-bookmark-card {
  border: 1px solid rgba(30,37,48,0.12);
  border-radius: var(--radius);
  overflow: hidden;
}

.post-footer {
  max-width: var(--content-width);
  margin: 3rem auto;
  padding: 0 var(--gap);
}
.post-footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
}
.post-footer__tag {
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey);
  border: 1px solid rgba(30,37,48,0.15);
  padding: 0.25em 0.7em;
  border-radius: 3px;
  transition: border-color 0.15s, color 0.15s;
}
.post-footer__tag:hover { border-color: var(--color-mustard); color: var(--color-mustard); }

.post-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(30,37,48,0.1);
}
.post-footer__nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  background: var(--color-paper);
  border-radius: var(--radius);
  transition: background 0.15s;
}
.post-footer__nav-link:hover { background: #e0dcce; }
.post-footer__nav-link--next { text-align: right; }
.post-footer__nav-label {
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey);
}
.post-footer__nav-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.4;
}

/* ============================================================
   Static Pages
   ============================================================ */
.page-header {
  background: var(--color-paper);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gap) 2.5rem;
}
.page-header__inner { max-width: var(--content-width); margin: 0 auto; }
.page-header__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 0.4rem;
}
.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}
.page-header__excerpt {
  font-size: 1.05rem;
  color: var(--color-grey);
  margin-top: 0.75rem;
}

.page-content {
  max-width: var(--content-width);
  margin: 3rem auto;
  padding: 0 var(--gap);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Contact page — redesigned */
.contact-hero {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 5rem var(--gap);
  text-align: center;
}
.contact-hero__inner { max-width: 600px; margin: 0 auto; }
.contact-hero .page-header__label { color: var(--color-mustard); margin-bottom: 0.5rem; }
.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 1rem;
}
.contact-hero__sub {
  font-size: 1.05rem;
  color: var(--color-grey);
  line-height: 1.7;
}
.contact-body {
  padding: 4rem var(--gap);
  background: var(--color-chalk);
}
.contact-body__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.contact-method {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.contact-method__icon {
  font-size: 1.5rem;
  padding-top: 0.15rem;
  line-height: 1;
  display: flex;
  align-items: flex-start;
  color: var(--color-ink);
}
.contact-method__icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.contact-method__text h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}
.contact-method__text p {
  color: var(--color-grey);
  margin-bottom: 1rem;
  line-height: 1.65;
}
.btn--outline {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  border: 2px solid var(--color-ink);
  border-radius: 8px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-chalk); }
.contact-block__email {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
}

/* Portfolio coming soon */
.portfolio-coming-soon {
  padding: 6rem var(--gap);
  background: var(--color-chalk);
  text-align: center;
}
.portfolio-coming-soon__inner {
  max-width: 520px;
  margin: 0 auto;
}
.portfolio-coming-soon__eyebrow {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.portfolio-coming-soon__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.portfolio-coming-soon__text {
  color: var(--color-grey);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Newsletter landing — fills full height between header and footer, no gap */
.page-newsletter {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--color-paper);
}
.newsletter-landing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  padding: 4rem var(--gap);
}
.newsletter-landing__inner { max-width: 600px; margin: 0 auto; text-align: center; width: 100%; }
.newsletter-landing__logo { display: inline-block; margin-bottom: 2rem; }
.newsletter-landing__logo-img { height: 64px; width: auto; border-radius: 10px; }
.newsletter-landing__eyebrow {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.newsletter-landing__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.newsletter-landing__pitch {
  font-size: 1.05rem;
  color: var(--color-grey);
  margin-bottom: 2rem;
}
.newsletter-landing__form { margin-bottom: 1.5rem; }
.newsletter-landing__archive { margin-top: 2rem; }
.newsletter-landing__archive p { font-size: 0.875rem; color: var(--color-grey); }
.newsletter-landing__archive-link { color: var(--color-mustard); font-weight: 500; }

/* ============================================================
   Privacy Policy prose
   ============================================================ */
.privacy-content h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.5rem 0 0.6rem;
  color: var(--color-ink);
}
.privacy-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.4rem;
  color: var(--color-ink);
}
.privacy-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1em;
}
.privacy-content li { margin-bottom: 0.3rem; color: var(--color-grey); }
.privacy-content p { color: var(--color-grey); }
/* (underline rule consolidated above with other content areas) */

/* ============================================================
   Work With Me Page
   ============================================================ */
.wwm-hero {
  background: var(--color-ink);
  color: var(--color-chalk);
  padding: 5rem var(--gap) 4.5rem;
  text-align: center;
}
.wwm-hero__inner { max-width: 640px; margin: 0 auto; }
.wwm-hero__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.wwm-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-chalk);
  margin-bottom: 1.25rem;
}
.wwm-hero__sub {
  font-size: 1.05rem;
  color: rgba(254,254,254,0.68);
  line-height: 1.75;
}
.wwm-body {
  padding: 4rem var(--gap) 5rem;
}
.wwm-body__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Services */
.wwm-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.wwm-service {
  background: var(--color-paper);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
}
.wwm-service__icon {
  width: 40px;
  height: 40px;
  color: var(--color-mustard);
  margin: 0 auto 1rem;
}
.wwm-service__icon svg { width: 100%; height: 100%; }
.wwm-service__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.wwm-service__desc {
  font-size: 0.9rem;
  color: var(--color-grey);
  line-height: 1.75;
}

/* Process */
.wwm-section-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 1.75rem;
}
.wwm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
.wwm-step {
  padding-top: 1.25rem;
  border-top: 3px solid var(--color-mustard);
}
.wwm-step__num {
  display: block;
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-mustard);
  margin-bottom: 0.5rem;
}
.wwm-step__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.wwm-step__desc {
  font-size: 0.9rem;
  color: var(--color-grey);
  line-height: 1.75;
}

/* CTA block */
.wwm-cta {
  background: var(--color-paper);
  border-radius: 16px;
  padding: 3.5rem 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}
.wwm-cta__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}
.wwm-cta__sub {
  color: var(--color-grey);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.wwm-extra-content { margin-top: 2rem; }

@media (max-width: 700px) {
  .wwm-services { grid-template-columns: 1fr; }
  .wwm-steps    { grid-template-columns: 1fr; gap: 1.5rem; }
  .wwm-cta      { padding: 2.5rem 1.5rem; }
}

/* ============================================================
   Now Page
   ============================================================ */
.now-hero {
  background: var(--color-paper);
  padding: 4rem var(--gap) 3.5rem;
  text-align: center;
}
.now-hero__inner { max-width: 560px; margin: 0 auto; }
.now-hero__label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.now-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}
.now-hero__pills {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.now-hero__pill {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-grey);
  background: rgba(30,37,48,0.07);
  padding: 0.4em 1em;
  border-radius: 20px;
}
.now-body { padding: 1rem var(--gap) 4rem; }
.now-body__inner { max-width: 700px; margin: 0 auto; }
.now-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(30,37,48,0.08);
}
.now-section:last-child { border-bottom: none; }
.now-section__heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--color-mustard);
}
.now-section p {
  font-size: 1rem;
  color: var(--color-grey);
  line-height: 1.8;
  margin-bottom: 0.85em;
}
.now-section p:last-child { margin-bottom: 0; }
.now-section--footer { border-bottom: none; }

/* ============================================================
   Error Page
   ============================================================ */
.error-page {
  padding: 6rem var(--gap);
  background: var(--color-chalk);
  text-align: center;
}
.error-page__inner {
  max-width: 520px;
  margin: 0 auto;
}
.error-page__eyebrow {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.75rem;
}
.error-page__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.error-page__text {
  color: var(--color-grey);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ============================================================
   Home — Browse by Year
   ============================================================ */
.home-year-nav {
  padding: 4rem var(--gap);
  background: var(--color-paper);
}
.home-year-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.home-year-nav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.year-chip {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.45em 1.2em;
  border-radius: 20px;
  border: 2px solid rgba(30,37,48,0.15);
  background: transparent;
  color: var(--color-grey);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.year-chip:hover {
  border-color: var(--color-mustard);
  color: var(--color-mustard);
}
.year-chip.is-active {
  background: var(--color-mustard);
  border-color: var(--color-mustard);
  color: var(--color-chalk);
}
.home-year-nav__feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  min-height: 1px;
}
.home-year-nav .mini-card { background: var(--color-chalk); }
.home-year-nav__more {
  margin-top: 1.5rem;
  text-align: center;
}
.year-load-more {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.55em 1.6em;
  border-radius: 20px;
  border: 2px solid rgba(30,37,48,0.15);
  background: transparent;
  color: var(--color-grey);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.year-load-more:hover { border-color: var(--color-mustard); color: var(--color-mustard); }
.year-load-more:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 900px) { .home-year-nav__feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .home-year-nav__feed { grid-template-columns: 1fr; } }

/* ============================================================
   Post — Reading Progress Bar
   ============================================================ */
.reading-progress {
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: 3px;
  width: 0;
  background: var(--color-mustard);
  z-index: 99;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ============================================================
   Post — TOC + content grid wrapper
   Three columns: 1fr [content-width] 1fr — content is always centred.
   TOC hangs in the left 1fr column without displacing the content.
   ============================================================ */
.post-with-toc {
  display: grid;
  grid-template-columns: 1fr var(--content-width) 1fr;
}

.post-with-toc .post-content {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
}

/* ============================================================
   Post — Table of Contents (sticky sidebar)
   ============================================================ */
.post-toc {
  display: none;
  grid-column: 1;
  justify-self: end;
  align-self: start;
  width: 240px;
  padding-right: 3rem;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  max-height: calc(100vh - var(--header-height) - 4rem);
  overflow-y: auto;
  padding-top: 0.25rem;
}

@media (min-width: 1280px) {
  .post-toc { display: block; }
}

.post-toc__label {
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

/* Timeline: vertical line running the full height of the list */
.post-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1.25rem;
}
.post-toc__list::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-grey);
  opacity: 0.3;
}

/* Dots on each item */
.post-toc__item {
  position: relative;
  padding: 0.25rem 0;
}
.post-toc__item::before {
  content: '';
  position: absolute;
  left: -1.125rem; /* aligns to the line at left: 5px */
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-grey);
  opacity: 0.4;
  transition: background 0.15s, opacity 0.15s;
}
.post-toc__item.is-active::before {
  background: var(--color-mustard);
  opacity: 1;
}
.post-toc__item--h2 { padding-left: 0.6rem; }
.post-toc__item--h3 { padding-left: 1.2rem; }
.post-toc__item--h2::before { width: 6px; height: 6px; }
.post-toc__item--h3::before { width: 5px; height: 5px; }

.post-toc__link {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-grey);
  text-decoration: none;
  transition: color 0.15s;
}
.post-toc__link:hover { color: var(--color-ink); }
.post-toc__item.is-active .post-toc__link {
  color: var(--color-ink);
  font-weight: 600;
}

/* Offset heading anchors so the sticky header doesn't cover them */
.post-content h1,
.post-content h2,
.post-content h3 {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* When TOC is hidden (< 1280px), revert post-with-toc to single-column centred layout */
@media (max-width: 1279px) {
  .post-with-toc {
    display: block;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gap);
  }
  .post-with-toc .post-content {
    max-width: none;
    margin-inline: 0;
  }
}

/* ============================================================
   Responsive — General
   ============================================================ */
@media (max-width: 900px) {
  .blog-feed-layout { padding-right: var(--gap); }
}

/* ============================================================
   Responsive — Mobile card sizes
   ============================================================ */
@media (max-width: 600px) {
  /* Mini-cards: tighter padding and smaller text — aspect ratio stays 3:2 */
  .mini-card__body { padding: 0.6rem 0.75rem 0.75rem; gap: 0.2rem; }
  .mini-card__title { font-size: 0.82rem; }
  .mini-card__excerpt { font-size: 0.72rem; }
  .mini-card__type { font-size: 0.5rem; }
  .mini-card__date { font-size: 0.65rem; }

  /* Post-type cards: horizontal layout so 4 cards don't stack into a tall column */
  .type-card {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }
  .type-card__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .type-card__name { font-size: 1rem; }
  .type-card__desc { font-size: 0.82rem; }
  .type-card__arrow { display: none; }
}