/* ============================================
   Slow Weather — a paper-journal style blog
   Palette: warm paper, ink, sage, mustard, plum
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Karla:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper: #F2EEE3;
  --paper-deep: #E7DFCC;
  --paper-card: #FBF8F1;
  --ink: #2E2A24;
  --ink-soft: #635B4D;
  --sage: #6E7B5E;
  --sage-deep: #545F44;
  --mustard: #C79A3D;
  --plum: #8C5B6B;
  --line: rgba(46,42,36,0.14);
  --shadow: 0 10px 30px rgba(46,42,36,0.10);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

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

/* subtle paper grain */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(rgba(46,42,36,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 .4em;
}

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

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ---------- header ---------- */
header.site{
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--paper-deep), var(--paper));
  position: relative; z-index: 2;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0;
}
.brand{
  font-family:'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  font-style: italic;
  display:flex; align-items:baseline; gap:10px;
}
.brand .dot{ font-style:normal; color: var(--mustard); }
.navlinks{
  display:flex; gap: 28px;
  font-family:'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing:.04em;
  text-transform: uppercase;
}
.navlinks a{
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.navlinks a:hover, .navlinks a.active{
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}

/* ---------- hero ---------- */
.hero{
  padding: 76px 0 60px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
}
.hero h1{
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
}
.hero h1 em{
  color: var(--sage-deep);
  font-style: italic;
}
.hero p.lede{
  font-size: 18.5px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 18px 0 26px;
}
.hero-art{
  position: relative;
}
.hero-art svg, .hero-art img{ width: 100%; height: auto; display:block; }
.tape{
  position:absolute;
  width: 78px; height: 26px;
  background: rgba(199,154,61,0.55);
  box-shadow: 0 2px 6px rgba(46,42,36,0.15);
}
.tape.a{ top:-12px; left: 20px; transform: rotate(-8deg); }
.tape.b{ bottom:-10px; right: 26px; transform: rotate(6deg); background: rgba(140,91,107,0.45); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing:.06em; text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 22px;
  border-radius: 3px;
  transition: transform .15s ease, background .2s ease;
}
.btn:hover{ background: var(--sage-deep); transform: translateY(-1px); }

/* ---------- section labels ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin: 64px 0 26px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.section-head h2{ font-size: 28px; }

/* ---------- entry grid (polaroid style) ---------- */
.entries{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  padding-bottom: 30px;
}
.entry-card{
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px 14px 20px;
  transform: rotate(var(--r, -1.2deg));
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.entry-card:nth-child(2){ --r: 1deg; }
.entry-card:nth-child(3){ --r: -0.6deg; }
.entry-card:nth-child(4){ --r: 0.8deg; }
.entry-card:nth-child(5){ --r: -1deg; }
.entry-card:nth-child(6){ --r: 1.3deg; }
.entry-card:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 34px rgba(46,42,36,.16); }
.entry-card .tape{ top:-14px; left: 50%; transform: translateX(-50%) rotate(-3deg); width:60px; height:22px; }
.entry-thumb{
  width:100%; aspect-ratio: 4/3;
  background: var(--paper-deep);
  overflow:hidden;
  margin-bottom: 14px;
}
.entry-thumb img,
.entry-thumb svg.inline-illust{ width:100%; height:100%; object-fit: cover; display:block; }
.entry-date{
  font-family:'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--sage-deep);
  margin-bottom: 6px;
}
.entry-card h3{ font-size: 21px; margin-bottom: 6px; line-height:1.2; }
.entry-card p{ color: var(--ink-soft); font-size: 15px; margin:0; }
.read-more{
  display:inline-block; margin-top:10px;
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom: 1px solid var(--ink);
}

/* ---------- about / misc blocks ---------- */
.split{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 50px;
  align-items:center; padding: 20px 0 60px;
}
.pillbar{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.pill{
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing:.04em; text-transform:uppercase;
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: var(--paper-card);
}

/* ---------- torn divider ---------- */
.torn{
  height: 26px;
  margin: 10px 0 0;
  background: var(--paper);
  clip-path: polygon(0% 100%, 2% 40%, 5% 80%, 9% 20%, 13% 70%, 17% 10%, 21% 60%, 25% 15%, 29% 75%, 33% 25%, 37% 65%, 41% 5%, 45% 55%, 49% 20%, 53% 70%, 57% 10%, 61% 60%, 65% 15%, 69% 80%, 73% 30%, 77% 65%, 81% 5%, 85% 55%, 89% 20%, 93% 70%, 97% 10%, 100% 60%, 100% 100%);
}

/* ---------- post page ---------- */
.post-head{ padding: 56px 0 10px; max-width: 760px; }
.post-head h1{ font-size: clamp(32px, 4.4vw, 48px); line-height:1.08; }
.post-meta{
  display:flex; gap:18px; align-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft);
  margin: 16px 0 30px;
}
.post-hero-img{
  width:100%; max-width: 760px; aspect-ratio: 16/8.2;
  background: var(--paper-deep);
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.post-hero-img img,
.post-hero-img svg.inline-illust{ width:100%; height:100%; object-fit:cover; display:block; }
.post-body{
  max-width: 700px;
  padding: 30px 0 70px;
  font-size: 18px;
}
.post-body p{ margin: 0 0 22px; }
.post-body p:first-of-type::first-letter{
  font-family:'Fraunces', serif;
  font-size: 58px;
  float:left;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--sage-deep);
  font-style: italic;
}
.pull{
  font-family:'Fraunces', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--plum);
  border-left: 3px solid var(--mustard);
  padding-left: 22px;
  margin: 36px 0;
  line-height: 1.4;
}
.inline-figs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 10px 0 34px;
}
.inline-figs img,
.inline-figs svg.inline-illust{ width:100%; height:auto; display:block; box-shadow: var(--shadow); }

.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }

.next-up{
  border-top: 1px solid var(--line);
  padding: 40px 0 70px;
}
.next-up a.card{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--paper-card); border:1px solid var(--line);
  padding: 22px 26px; box-shadow: var(--shadow);
}

/* ---------- footer ---------- */
footer.site{
  border-top: 1px solid var(--line);
  padding: 40px 0;
  background: var(--paper-deep);
  margin-top: 40px;
}
.foot-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-soft);
}

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; padding-top: 44px; }
  .entries{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
  .inline-figs{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .entries{ grid-template-columns: 1fr; }
  .navlinks{ gap:16px; }
  .nav{ flex-direction:column; align-items:flex-start; gap:12px; }
}