/* ============================================
   Blog — nature theme, loaded after style.css
   Palette from the stop-motion "A Living Whole":
   watercolor paper, forest canopy, sky-blue earth,
   leaf green, monarch orange, golden threads
   ============================================ */

body.nature {
  --paper: #f2ecdf;          /* watercolor paper */
  --surface: #fbf7ee;
  --ink: #2f2a20;
  --text: #3d3427;
  --muted: #6e6250;
  --faint: #a59a86;
  --rule: #e2d8c4;
  --rule-strong: #d3c6ac;
  --heading: #2e4a2a;        /* canopy */
  --link: #3f6b33;           /* leaf */
  --sky: #3c74b4;
  --gold: #e3b341;           /* sun thread */

  --mast-1: #1d3626;
  --mast-2: #26492f;
  --mast-3: #2f5a3b;
  --mast-text: #f6f0df;
  --mast-soft: #e9e2cc;
  --mast-muted: #cfdcc8;
  --mast-gold: #f1cf6e;
  --border-gold: #e3b341;

  /* canopy green into sunlight where the forest meets the paper */
  --wash: rgba(63, 107, 51, 0.5) 0%, rgba(110, 160, 90, 0.3) 16%, rgba(227, 179, 65, 0.2) 34%,
          rgba(240, 210, 120, 0.1) 58%, rgba(242, 236, 223, 0) 100%;

  --wash-sun: rgba(240, 192, 72, 0.45);
  --wash-leaf: rgba(130, 176, 92, 0.36);
  --wash-sky: rgba(104, 156, 218, 0.3);
  --wash-bloom: rgba(236, 146, 74, 0.32);
  --glow-sky: rgba(120, 170, 220, 0.14);
  --glow-leaf: rgba(140, 180, 100, 0.16);
  --tape: rgba(233, 196, 106, 0.6);
  --shadow: rgba(74, 56, 28, 0.32);

  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --read: 700px;

  background-image:
    radial-gradient(60rem 40rem at -10% 30%, var(--glow-sky), transparent 60%),
    radial-gradient(50rem 40rem at 110% 100%, var(--glow-leaf), transparent 60%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.42%200%200%200%200%20.33%200%200%200%200%20.2%200%200%200%20.55%20-.22'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* forest at night */
:root[data-theme="dark"] body.nature {
  --paper: #171c16;
  --surface: #20271e;
  --ink: #efe8d6;
  --text: #ddd5c2;
  --muted: #aba18c;
  --faint: #6b6656;
  --rule: #2a3227;
  --rule-strong: #364033;
  --heading: #cfe3bf;
  --link: #a6cd8d;
  --sky: #93bde8;
  --gold: #e8c15a;

  --mast-1: #0e1a12;
  --mast-2: #142a1b;
  --mast-3: #1a3322;

  --wash: rgba(63, 107, 51, 0.45) 0%, rgba(60, 100, 55, 0.22) 20%, rgba(40, 60, 35, 0.1) 45%,
          rgba(23, 28, 22, 0) 100%;

  --wash-sun: rgba(232, 193, 90, 0.3);
  --wash-leaf: rgba(150, 196, 120, 0.26);
  --wash-sky: rgba(130, 180, 235, 0.24);
  --wash-bloom: rgba(240, 163, 94, 0.26);
  --glow-sky: rgba(90, 140, 200, 0.08);
  --glow-leaf: rgba(120, 170, 90, 0.08);
  --tape: rgba(232, 193, 90, 0.35);
  --shadow: rgba(0, 0, 0, 0.6);
}

/* Masthead and footer: a canopy lit by the sun, with a patch of sky */
.nature .masthead {
  background:
    radial-gradient(ellipse 40% 80% at 88% 10%, rgba(241, 207, 110, 0.22), transparent 70%),
    radial-gradient(ellipse 55% 75% at 0% 0%, rgba(110, 160, 220, 0.2), transparent 70%),
    linear-gradient(120deg, var(--mast-1) 0%, var(--mast-2) 55%, var(--mast-3) 100%);
}

.nature .site-footer {
  background:
    radial-gradient(ellipse 45% 140% at 100% 100%, rgba(241, 207, 110, 0.16), transparent 70%),
    linear-gradient(120deg, var(--mast-1) 0%, var(--mast-2) 55%, var(--mast-3) 100%);
}

.nature .eyebrow a {
  color: inherit;
}

/* ============================================
   The film, taped to the page like a print
   ============================================ */

.film-wrap {
  padding-top: 48px;
}

.film {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--shadow), 0 28px 56px -32px var(--shadow);
}

.film::before,
.film::after {
  content: '';
  position: absolute;
  top: -14px;
  width: 104px;
  height: 28px;
  background: var(--tape);
  pointer-events: none;
}

.film::before {
  left: 24px;
  transform: rotate(-5deg);
}

.film::after {
  right: 24px;
  transform: rotate(4deg);
}

.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: #eee7d7;
}

.film figcaption {
  font-family: var(--font-hand);
  font-size: 23px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

/* ============================================
   Essay
   ============================================ */

.essay {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.75;
}

.essay.content > section + section {
  margin-top: 64px;
}

.essay.content h2 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--sky);
  margin-bottom: 16px;
}

/* a golden thread with a leaf tied into it, like the lines that link scenes in the film */
.essay.content h2::before {
  content: '';
  display: block;
  width: 200px;
  height: 20px;
  margin-bottom: 10px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2024'%3E%3Cg%20fill='none'%20stroke='%23e3b341'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2012q13-7%2026%200t26%200t26%200t24%200'/%3E%3Cpath%20d='M132%2012q12%207%2024%200t26%200t26%200t26%200'/%3E%3C/g%3E%3Cg%20transform='rotate(35%20120%2012)'%3E%3Cpath%20d='M120%202C112%207%20112%2017%20120%2022C128%2017%20128%207%20120%202Z'%20fill='%237fa65c'/%3E%3Cpath%20d='M120%205V20'%20stroke='%23557a3c'%20stroke-width='1'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}

.essay .opening::first-letter {
  float: left;
  font-weight: 500;
  font-size: 4.3em;
  line-height: 0.8;
  padding: 0.08em 0.12em 0 0;
  color: var(--link);
}

/* watercolor washes painted behind a phrase */
.essay mark {
  --tone: var(--wash-sun);
  color: inherit;
  padding: 0.02em 0.2em;
  margin: 0 -0.2em;
  border-radius: 0.8em 0.3em 0.9em 0.35em;
  background: linear-gradient(100deg, transparent 0.02em, var(--tone) 0.22em, var(--tone) calc(100% - 0.22em), transparent calc(100% - 0.02em)) 0 88% / 100% 64% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.essay mark.leaf { --tone: var(--wash-leaf); }
.essay mark.sky { --tone: var(--wash-sky); }
.essay mark.bloom { --tone: var(--wash-bloom); }

/* an old photo taped into the essay */
.snapshot {
  position: relative;
  max-width: 560px;
  margin: 40px auto 8px;
  padding: 10px 10px 4px;
  background: var(--surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px var(--shadow), 0 22px 44px -28px var(--shadow);
  transform: rotate(-1.5deg);
}

.snapshot::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  background: var(--tape);
  transform: rotate(3deg);
  pointer-events: none;
}

.snapshot img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.snapshot figcaption {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  padding: 8px 0 4px;
}

.snapshot--right {
  transform: rotate(1.2deg);
}

/* two films side by side; each plays in place when pressed */
.clips {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 28px;
}

.clips .snapshot {
  max-width: none;
  margin: 28px 0 8px;
}

.clips .snapshot:nth-child(2) {
  transform: rotate(1.2deg);
}

/* the story moves on after the films, or after a print in the middle of a section */
.essay .clips + p,
.essay .snapshot:not(.snapshot--side) + p {
  margin-top: 36px;
}

.clip {
  position: relative;
  display: block;
}

.clip img,
.clips iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  border-radius: 2px;
}

.clip-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: #f1cf6e;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(241, 207, 110, 0.3);
  transition: transform 0.15s ease;
}

.clip-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -5px;
  border-left: 15px solid #2b2418;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.clip:hover .clip-play {
  transform: scale(1.08);
}

/* a smaller print set beside the text */
.snapshot--side {
  float: right;
  width: min(44%, 300px);
  margin: 10px 0 20px 32px;
  transform: rotate(2deg);
}

.essay > section {
  display: flow-root;  /* keep side prints inside their section */
}

/* a sprig to close */
.fin {
  width: 80px;
  height: 40px;
  margin-top: 56px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2040'%3E%3Cpath%20d='M8%2032C28%2028%2048%2020%2070%209'%20fill='none'%20stroke='%236b8f4e'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3Cpath%20d='M25%2027C21%2019%2026%2012%2033%2011C34%2019%2031%2024%2025%2027Z'%20fill='%2389b26a'/%3E%3Cpath%20d='M29%2027C35%2033%2043%2033%2048%2028C42%2024%2035%2024%2029%2027Z'%20fill='%237aa35a'/%3E%3Cpath%20d='M45%2019C43%2011%2049%205%2056%204C56%2012%2052%2017%2045%2019Z'%20fill='%2389b26a'/%3E%3Cpath%20d='M49%2019C55%2025%2063%2025%2067%2020C61%2016%2055%2016%2049%2019Z'%20fill='%237aa35a'/%3E%3Ccircle%20cx='71'%20cy='8.5'%20r='2.4'%20fill='%23e3b341'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================
   Blog index
   ============================================ */

.blog-index {
  padding-top: 64px;
  padding-bottom: 96px;
}

.post-cards {
  display: grid;
  gap: 28px;
  max-width: 960px;
  list-style: none;
}

.post-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 1px 2px var(--shadow), 0 22px 44px -30px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-2px) rotate(-0.2deg);
  box-shadow: 0 1px 2px var(--shadow), 0 28px 48px -28px var(--shadow);
}

.post-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.post-card-meta {
  font-size: 14px;
  color: var(--muted);
}

.post-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  color: var(--heading);
  margin: 6px 0 10px;
}

.post-card-desc {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
}

.post-card .chev {
  margin-top: 16px;
}

@media (max-width: 640px) {
  .film-wrap {
    padding-top: 36px;
  }

  .film {
    padding: 6px;
  }

  .film::before,
  .film::after {
    width: 72px;
  }

  .snapshot {
    padding: 6px 6px 2px;
    transform: rotate(-1deg);
  }

  .snapshot--side {
    float: none;
    width: auto;
    max-width: 300px;
    margin: 28px auto 24px;
    transform: rotate(1deg);
  }

  .clips {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .essay {
    font-size: 18px;
  }

  .essay.content h2 {
    font-size: 31px;
  }

  .post-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card:hover {
    transform: none;
  }
}