/* Sill & Soil — shared stylesheet
   Design concept: a botanical field journal. Warm parchment paper,
   deep pine-ink text, mustard and brick accents used sparingly.
   Editorial, asymmetric, hairline rules doing real structural work. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper: #F3F0E4;
  --paper-deep: #EAE4D2;
  --ink: #1E2B1C;
  --ink-soft: #52594B;
  --gold: #A9791E;
  --rust: #9C4630;
  --line: #D6CFB8;
  --line-strong: #B9AF8E;
  --max: 880px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

a{ color: var(--gold); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

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

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- Header ---- */
.site-header{
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.site-header .wrap{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wordmark{
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.wordmark span{ color: var(--rust); }
.site-nav{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.site-nav a{
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.site-nav a:hover{ color: var(--rust); text-decoration: none; }

/* ---- Hero (homepage) ---- */
.hero{
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line);
}
.hero .wrap{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
}
.hero-lede{
  font-size: clamp(2rem, 4vw, 2.9rem);
  max-width: 15ch;
}
.hero-sub{
  color: var(--ink-soft);
  max-width: 42ch;
  margin-top: 18px;
  font-size: 1.05rem;
}
.hero-index{
  border-left: 1px solid var(--line);
  padding-left: 32px;
}
.hero-index h2{
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.hero-index ul{ list-style: none; margin: 0; padding: 0; }
.hero-index li{
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.hero-index li:first-child{ border-top: none; }
.hero-index a{ color: var(--ink); font-size: 0.98rem; }
.hero-index a:hover{ color: var(--rust); }

/* ---- Category rail ---- */
.rail{
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.rail .wrap{
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.rail a{
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.rail a:hover{ color: var(--rust); }

/* ---- Post index list ---- */
.index-list{
  padding: 48px 0 72px;
}
.index-row{
  display: grid;
  grid-template-columns: 100px 180px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.index-row:last-child{ border-bottom: 1px solid var(--line); }
.index-date{
  color: var(--ink-soft);
  font-size: 0.88rem;
  padding-top: 4px;
}
.index-title{
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.index-title a{ color: var(--ink); }
.index-title a:hover{ color: var(--rust); }
.index-excerpt{
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 0.98rem;
}
.index-tag{
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--rust);
}

/* ---- Images ---- */
.post-hero{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}
.post-hero img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  margin-top: 32px;
}
.img-credit{
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.img-credit a{ color: var(--ink-soft); }

.index-thumb{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.inline-img{
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  margin: 18px 0 4px;
}
.inline-img + .img-credit{
  margin-bottom: 24px;
}

/* ---- Post page ---- */
.post-head{
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line);
}
.post-tag{
  color: var(--rust);
  font-size: 0.88rem;
  margin-bottom: 14px;
  display: block;
}
.post-title{
  font-size: clamp(2rem, 4vw, 2.6rem);
  max-width: 22ch;
}
.post-meta{
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 18px;
}
.post-body{
  max-width: var(--max);
  padding: 44px 28px 80px;
  margin: 0 auto;
  font-size: 1.08rem;
}
.post-body p{ margin: 0 0 22px; }
.post-body h2{
  font-size: 1.5rem;
  margin: 44px 0 16px;
}
.post-body h3{
  font-size: 1.2rem;
  margin: 32px 0 12px;
}
.post-body ul, .post-body ol{
  margin: 0 0 22px;
  padding-left: 22px;
}
.post-body li{ margin-bottom: 8px; }
.post-body > p:first-of-type::first-letter{
  font-family: 'Fraunces', serif;
  font-size: 3.4rem;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--rust);
}

.field-note{
  border-left: 3px solid var(--gold);
  background: var(--paper-deep);
  padding: 18px 22px;
  margin: 32px 0;
  font-size: 0.98rem;
}
.field-note strong{
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ---- Simple content page (about / legal) ---- */
.page-body{
  max-width: var(--max);
  padding: 56px 28px 80px;
  margin: 0 auto;
}
.page-body h1{
  font-size: 2.2rem;
  margin-bottom: 28px;
}
.page-body h2{
  font-size: 1.3rem;
  margin: 36px 0 14px;
}
.page-body p{ margin: 0 0 18px; color: var(--ink-soft); font-size: 1.02rem; }
.page-body p strong{ color: var(--ink); }

/* ---- Footer ---- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 40px;
}
.site-footer .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links a{ color: var(--ink-soft); font-size: 0.9rem; }
.footer-note{
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (max-width: 720px){
  .hero .wrap{ grid-template-columns: 1fr; gap: 36px; }
  .hero-index{ border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .index-row{ grid-template-columns: 1fr; gap: 10px; }
  .index-date{ padding-top: 0; }
  .index-thumb{ aspect-ratio: 16/9; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}