/* ============================================================
   Ashley Mobley — Artist Website
   Design tokens + component styles

   Art direction: soft, contemplative, painterly, image-first
   Fonts: Cormorant Garamond (display) + Karla (body) + La Belle Aurore (handwriting accent)
   Palette: Ashley's colors (cream, navy, teal, mint, rust, gold) with faint watercolor washes
   ============================================================ */

/* ----------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-sm: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);
  --text-2xl: clamp(2.25rem, 1.4rem + 2.75vw, 4rem);
  --text-3xl: clamp(3rem, 1.2rem + 4.5vw, 5.75rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Font families */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Karla', 'Helvetica Neue', sans-serif;
  --font-hand: 'La Belle Aurore', 'Segoe Script', cursive;

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------
   LIGHT MODE (default)
   Ashley's six colors plus mixed shades: solid tints, same-hue hovers, deeper rust for small text
   ---------------------------------------------------------- */
:root,
[data-theme='light'] {
  --color-bg: #F6F0E4;
  --color-surface: #FAF6EF;
  --color-surface-2: #C9DDD4;
  --color-surface-offset: #E2E7DD;
  --color-divider: #DBD8D0;
  --color-border: #C9C8C2;

  --color-text: #172A3A;
  --color-text-muted: #4F5C64;
  --color-text-faint: #6C757B;
  --color-text-inverse: #F6F0E4;

  /* Teal (light) / gold (dark): links, ghost buttons, nav underline, focus ring */
  --color-primary: #176B70;
  --color-primary-text: #176B70;
  --color-primary-text-hover: #175760;

  /* Rust: hero tagline, section labels, form errors */
  --color-accent-text: #8C4134;

  /* Rust: filled buttons (the signup buttons) */
  --color-action: #A94733;
  --color-action-hover: #8C4134;
  --color-action-text: #F6F0E4;

  /* Mint: secondary accents; band = background behind the signups */
  --color-secondary: #C9DDD4;
  --color-band: #C9DDD4;

  /* Bold teal section (About): solid teal, cream text, gold label */
  --color-teal-band: #176B70;
  --color-teal-band-text: #F6F0E4;
  --color-teal-band-muted: #DCE6DE;
  --color-teal-band-label: #F2CD7A;

  /* Gold highlighter stroke behind key words */
  --color-highlight: #F0D08A;
  --brush-swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C30 4 70 7 110 5 C150 3 178 6 196 10 C199 17 195 22 197 30 C170 36 130 34 95 36 C60 38 25 35 6 33 C2 26 6 20 3 15 Z'/%3E%3C/svg%3E");

  /* Watercolor washes behind the page */
  --wash-1: rgb(229 170 50 / 0.16);
  --wash-2: rgb(201 221 212 / 0.5);
  --wash-3: rgb(169 71 51 / 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgb(23 42 58 / 0.06);
  --shadow-md: 0 4px 12px rgb(23 42 58 / 0.08);
  --shadow-lg: 0 12px 32px rgb(23 42 58 / 0.12);
}

/* ----------------------------------------------------------
   DARK MODE
   Navy background, cream text, gold links, rust buttons, light rust labels
   ---------------------------------------------------------- */
[data-theme='dark'] {
  --color-bg: #172A3A;
  --color-surface: #243644;
  --color-surface-2: #173A48;
  --color-surface-offset: #1D3240;
  --color-divider: #364652;
  --color-border: #4D5A63;

  --color-text: #F6F0E4;
  --color-text-muted: #B3B5B1;
  --color-text-faint: #9DA1A0;
  --color-text-inverse: #172A3A;

  /* Teal (light) / gold (dark): links, ghost buttons, nav underline, focus ring */
  --color-primary: #E5AA32;
  --color-primary-text: #E5AA32;
  --color-primary-text-hover: #EABF67;

  /* Rust: hero tagline, section labels, form errors */
  --color-accent-text: #CC9383;

  /* Rust: filled buttons (the signup buttons) */
  --color-action: #A94733;
  --color-action-hover: #8C4134;
  --color-action-text: #F6F0E4;

  /* Mint: secondary accents; band = background behind the signups */
  --color-secondary: #92B4B0;
  --color-band: #173A48;

  --color-teal-band: #176B70;
  --color-teal-band-text: #F6F0E4;
  --color-teal-band-muted: #DCE6DE;
  --color-teal-band-label: #F2CD7A;

  --color-highlight: #8A6A22;

  /* Watercolor washes behind the page */
  --wash-1: rgb(169 71 51 / 0.18);
  --wash-2: rgb(23 107 112 / 0.28);
  --wash-3: rgb(229 170 50 / 0.07);

  /* Shadows */
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

/* No-JS fallback: follow the OS setting until app.js sets data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #172A3A;
    --color-surface: #243644;
    --color-surface-2: #173A48;
    --color-surface-offset: #1D3240;
    --color-divider: #364652;
    --color-border: #4D5A63;

    --color-text: #F6F0E4;
    --color-text-muted: #B3B5B1;
    --color-text-faint: #9DA1A0;
    --color-text-inverse: #172A3A;

    /* Teal (light) / gold (dark): links, ghost buttons, nav underline, focus ring */
    --color-primary: #E5AA32;
    --color-primary-text: #E5AA32;
    --color-primary-text-hover: #EABF67;

    /* Rust: hero tagline, section labels, form errors */
    --color-accent-text: #CC9383;

    /* Rust: filled buttons (the signup buttons) */
    --color-action: #A94733;
    --color-action-hover: #8C4134;
    --color-action-text: #F6F0E4;

    /* Mint: secondary accents; band = background behind the signups */
    --color-secondary: #92B4B0;
    --color-band: #173A48;

    --color-teal-band: #176B70;
    --color-teal-band-text: #F6F0E4;
    --color-teal-band-muted: #DCE6DE;
    --color-teal-band-label: #F2CD7A;

    --color-highlight: #8A6A22;

    /* Watercolor washes behind the page */
    --wash-1: rgb(169 71 51 / 0.18);
    --wash-2: rgb(23 107 112 / 0.28);
    --wash-3: rgb(229 170 50 / 0.07);

    /* Shadows */
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* ----------------------------------------------------------
   WATERCOLOR WASHES
   Fixed layer behind the page; sections use translucent fills
   ---------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 40rem at 85% -5%, var(--wash-1), transparent 70%),
    radial-gradient(50rem 36rem at -10% 45%, var(--wash-2), transparent 70%),
    radial-gradient(45rem 30rem at 100% 100%, var(--wash-3), transparent 70%);
}

/* ----------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------- */
.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--wide {
  max-width: var(--content-wide);
}

/* ----------------------------------------------------------
   SKIP LINK
   ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2);
}

/* ----------------------------------------------------------
   HEADER / NAV
   ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(from var(--color-bg) l c h / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
  transition: box-shadow var(--transition-slow);
}

.site-header--scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.nav-links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width var(--transition-interactive);
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: transparent;
}

.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition-interactive), opacity var(--transition-interactive);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  background: var(--color-bg);
  padding: calc(var(--space-16) + var(--space-8)) var(--space-6) var(--space-8);
  flex-direction: column;
  gap: var(--space-6);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.mobile-nav a:hover {
  color: var(--color-primary-text);
}

.mobile-nav .mobile-nav__shop {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.theme-toggle--mobile {
  align-self: flex-start;
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .nav-links,
  .theme-toggle-desktop {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   HERO SECTION
   ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(380px, 70vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* One light wash over the whole image; raise or lower the 0.38 once the real art is in */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: oklch(from var(--color-bg) l c h / 0.38);
}

.hero__name {
  position: relative;
  z-index: 2;
  padding-inline: var(--space-4);
  font-family: var(--font-hand);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  color: var(--color-text);
  text-shadow: 0 0 18px oklch(from var(--color-bg) l c h / 0.7);
}

/* Solid teal band under the hero, so it reads as its own strip between the art and the cream sections */
.hero-banner {
  background: var(--color-teal-band);
}

.hero-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  max-width: var(--content-default);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
}

.hero-banner__tagline {
  flex: 1 1 18rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--color-teal-band-text);
}

.hero-banner .btn--ghost {
  color: var(--color-teal-band-label);
}

.hero-banner .btn--ghost:hover {
  color: var(--color-teal-band-text);
}

/* ----------------------------------------------------------
   BUTTONS & CTA
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}

.btn--primary {
  background: var(--color-action);
  color: var(--color-action-text);
}

.btn--primary:hover,
.btn--primary:active {
  background: var(--color-action-hover);
}

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid oklch(from var(--color-text) l c h / 0.2);
}

.btn--outline:hover {
  border-color: var(--color-primary-text);
  color: var(--color-primary-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary-text);
  padding: var(--space-2) 0;
}

.btn--ghost:hover {
  color: var(--color-primary-text-hover);
}

.btn--ghost .arrow {
  transition: transform var(--transition-interactive);
}

.btn--ghost:hover .arrow {
  transform: translateX(4px);
}

/* ----------------------------------------------------------
   SECTION LAYOUT
   ---------------------------------------------------------- */
.section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

.section--alt {
  background: color-mix(in srgb, var(--color-surface-2) 65%, transparent);
}

.section--teal {
  background: var(--color-teal-band);
}

.section--teal .section__label {
  color: var(--color-teal-band-label);
}

.section--teal .section__title {
  color: var(--color-teal-band-text);
}

.section--teal .section__description {
  color: var(--color-teal-band-muted);
}

.section--teal .btn--ghost {
  color: var(--color-teal-band-label);
}

.section--teal .btn--ghost:hover {
  color: var(--color-teal-band-text);
}

/* Gold marker swipe behind a few key words: a hand-painted brush shape, slightly tilted and
   overshooting the word. The SVG is a mask so the fill color still comes from --color-highlight. */
.highlight {
  position: relative;
  z-index: 0;
  white-space: nowrap;
  padding-inline: 0.2em;
  margin-inline: 0.04em;
}

.highlight::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% -0.12em 2% -0.12em;
  background: var(--color-highlight);
  transform: rotate(-1.2deg);
  -webkit-mask: var(--brush-swipe) center / 100% 100% no-repeat;
  mask: var(--brush-swipe) center / 100% 100% no-repeat;
}

.section__label {
  font-family: var(--font-hand);
  font-size: calc(var(--text-lg) * 1.3);
  font-weight: 400;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section__description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 55ch;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   EMAIL SIGNUP / KIT FORM
   ---------------------------------------------------------- */
.email-signup {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 480px;
}

/* Kit form (markup from Kit's HTML embed; ck.5.js needs the formkit-* classes) */
.formkit-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.formkit-input {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.formkit-input::placeholder {
  color: var(--color-text-faint);
}

.formkit-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);
}

.formkit-submit {
  position: relative;
  justify-content: center;
  overflow: hidden;
}

.formkit-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
}

.formkit-spinner > div {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: formkit-bounce 1.4s infinite ease-in-out both;
}

.formkit-spinner > div:nth-child(1) { animation-delay: -0.32s; }
.formkit-spinner > div:nth-child(2) { animation-delay: -0.16s; }

.formkit-submit[data-active] .formkit-spinner {
  opacity: 1;
}

.formkit-submit[data-active] > span {
  opacity: 0;
}

@keyframes formkit-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Kit shows success and error text in .formkit-alert */
.formkit-alert {
  list-style: none;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: center;
}

.formkit-alert:empty {
  display: none;
}

.formkit-alert-success {
  border-color: var(--color-secondary);
}

.formkit-alert-error {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

.formkit-powered-by-convertkit-container {
  margin-top: var(--space-4);
  text-align: center;
}

.formkit-powered-by-convertkit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.formkit-powered-by-convertkit:hover {
  color: var(--color-primary-text);
}

@media (max-width: 480px) {
  .email-signup {
    padding: var(--space-6);
  }
}

/* ----------------------------------------------------------
   LATEST WORK
   ---------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.work-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.work-card figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.work-card__medium {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   TWO-COLUMN FEATURE
   ---------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.feature__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ----------------------------------------------------------
   LINK CARDS (Prints / Writing)
   ---------------------------------------------------------- */
.link-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .link-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}

.link-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.link-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.link-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.link-card__action {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
}

.link-card__action .arrow {
  transition: transform var(--transition-interactive);
}

.link-card:hover .link-card__action .arrow {
  transform: translateX(4px);
}

/* ----------------------------------------------------------
   ABOUT PREVIEW
   ---------------------------------------------------------- */
.about-preview__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.about-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   FULL-WIDTH CTA BAND
   ---------------------------------------------------------- */
.cta-band {
  background: var(--color-band);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.cta-band__inner {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta-band__greeting {
  font-family: var(--font-hand);
  font-size: calc(var(--text-lg) * 1.4);
  font-weight: 400;
  color: var(--color-accent-text);
  margin-bottom: calc(var(--space-2) * -1);
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.cta-band__description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 45ch;
  margin-inline: auto;
}

.cta-band__fineprint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cta-band .email-signup {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg);
}

/* ----------------------------------------------------------
   JOURNAL LIST (/journal/)
   ---------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12) var(--space-6);
}

@media (min-width: 640px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.post-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  transition: opacity var(--transition-interactive);
}

.post-card:hover .post-card__image {
  opacity: 0.88;
}

.post-card__date,
.post__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.post-card:hover .post-card__title {
  color: var(--color-primary-text);
}

.post-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   JOURNAL POST
   Header and text share a narrow reading column; the header image runs wider
   ---------------------------------------------------------- */
.post {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.post__header,
.post__body,
.post__footer {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.post__meta {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.post__meta a {
  color: var(--color-accent-text);
  text-decoration: none;
}

.post__meta a:hover {
  text-decoration: underline;
}

.post__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.post__summary {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.post__image {
  max-width: var(--content-default);
  margin: var(--space-12) auto;
  padding-inline: var(--space-4);
}

.post__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.post__footer {
  margin-top: var(--space-12);
}

/* Post text written in Markdown */
.prose {
  line-height: 1.75;
}

.prose > * + * {
  margin-top: var(--space-6);
}

.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-12);
}

.prose h2 {
  font-size: var(--text-xl);
}

.prose h3 {
  font-size: var(--text-lg);
}

.prose a {
  color: var(--color-primary-text);
  text-underline-offset: 0.15em;
}

.prose a:hover {
  color: var(--color-primary-text-hover);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  border-left: 3px solid var(--color-highlight);
  padding-left: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text);
}

/* Images sit in their own paragraph in Markdown. Never cropped, and never taller than the
   screen, so a tall painting can be seen whole; wide images fill the column */
.prose img {
  width: auto;
  max-height: 85vh;
  margin-inline: auto;
  border-radius: var(--radius-lg);
}

.prose p:has(img) {
  margin-block: var(--space-8);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin-block: var(--space-12);
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
  }
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.footer-brand__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 32ch;
  line-height: 1.6;
}

.footer-column__title {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.footer-column__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-column__links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-column__links a:hover {
  color: var(--color-primary-text);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}

.footer-bottom__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.footer-social {
  display: flex;
  gap: var(--space-4);
}

.footer-social a {
  color: var(--color-text-muted);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  color: var(--color-primary-text);
}

/* ----------------------------------------------------------
   SCROLL REVEAL
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), 
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }

/* ----------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------- */
.divider {
  border: none;
  height: 1px;
  background: var(--color-divider);
  margin-block: var(--space-1);
}

/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-8 { margin-top: var(--space-8); }

/* ----------------------------------------------------------
   KIT SLIDE-IN (R6)
   ---------------------------------------------------------- */
.slide-in {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  width: min(380px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.slide-in[hidden] {
  display: none;
}

.slide-in.is-open {
  opacity: 1;
  transform: none;
}

.slide-in__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.slide-in__close:hover {
  color: var(--color-text);
}

.slide-in__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  padding-right: var(--space-6);
  margin-bottom: var(--space-2);
}

.slide-in__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.email-signup--compact {
  padding: 0;
  border: 0;
  background: none;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide-in {
    transition: opacity 1ms;
    transform: none;
  }
}

.slide-in-tab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  padding: var(--space-2) var(--space-4);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-interactive);
}

.slide-in-tab[hidden] {
  display: none;
}

.slide-in-tab:hover {
  background: var(--color-action-hover);
}