/* Fieldnotes — a journal of practical guides
   Palette: paper #FAF8F3, ink #1F2421, moss #52684D, rust #B5654A, stone #8A8578
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FAF8F3;
  --paper-dim:#F1EEE5;
  --ink:#1F2421;
  --moss:#52684D;
  --rust:#B5654A;
  --stone:#8A8578;
  --line:#DEDACD;
  --max:720px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--moss);text-decoration:none;border-bottom:1px solid var(--line);}
a:hover{border-bottom-color:var(--moss);}

h1,h2,h3{
  font-family:'Source Serif 4',serif;
  font-weight:700;
  line-height:1.2;
  margin:0 0 .5em;
  color:var(--ink);
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* Header */
.site-header{
  border-bottom:1px solid var(--line);
  padding:28px 0;
  background:var(--paper);
}
.site-header .wrap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;}
.brand{
  font-family:'Source Serif 4',serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--ink);
  border-bottom:none;
  letter-spacing:.2px;
}
.brand span{color:var(--rust);}
.site-nav a{
  margin-left:20px;
  font-size:.92rem;
  color:var(--ink);
  border-bottom:1px solid transparent;
  font-weight:500;
}
.site-nav a:hover{border-bottom-color:var(--rust);}

/* Hero */
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.hero .eyebrow{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--stone);
  margin-bottom:14px;
}
.hero h1{font-size:2.4rem;max-width:14ch;}
.hero p{max-width:52ch;color:#4b4b45;font-size:1.05rem;}

/* Entry list */
.entries{padding:40px 0 60px;}
.entry-card{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.entry-card:first-child{padding-top:0;}
.entry-num{
  font-family:'Source Serif 4',serif;
  font-style:italic;
  color:var(--rust);
  font-size:1.6rem;
  line-height:1;
}
.entry-card h2{font-size:1.35rem;margin-bottom:6px;}
.entry-card h2 a{border-bottom:none;color:var(--ink);}
.entry-card h2 a:hover{color:var(--moss);}
.entry-meta{font-size:.82rem;color:var(--stone);margin-bottom:8px;}
.entry-excerpt{color:#4b4b45;font-size:.98rem;}

/* Article page */
.article-header{padding:52px 0 24px;border-bottom:1px solid var(--line);}
.article-header .eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--rust);margin-bottom:14px;}
.article-header h1{font-size:2.1rem;max-width:20ch;}
.article-meta{color:var(--stone);font-size:.9rem;margin-top:12px;}

.article-body{padding:40px 0 20px;max-width:640px;margin:0 auto;}
.article-body p{margin:0 0 1.3em;}
.article-body h2{font-size:1.4rem;margin-top:1.6em;}
.article-body h3{font-size:1.15rem;margin-top:1.4em;}
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.3em;}
.article-body li{margin-bottom:.5em;}
.pull{
  border-left:3px solid var(--rust);
  padding:4px 0 4px 20px;
  margin:2em 0;
  font-family:'Source Serif 4',serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--ink);
}
.disclaimer{
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:4px;
  padding:14px 18px;
  font-size:.88rem;
  color:#57564f;
  margin:2em 0;
}

/* Simple pages */
.page{padding:52px 0 60px;max-width:640px;margin:0 auto;}
.page h1{font-size:2rem;margin-bottom:.6em;}
.page p{margin:0 0 1.2em;color:#3d3d38;}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  margin-top:20px;
}
.site-footer .wrap{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.85rem;color:var(--stone);
}
.site-footer a{color:var(--stone);border-bottom:1px solid var(--line);}
.footer-links a{margin-left:16px;}

@media (max-width:600px){
  .hero h1{font-size:1.9rem;}
  .entry-card{grid-template-columns:1fr;}
  .entry-num{display:none;}
  .site-nav a{margin-left:12px;font-size:.85rem;}
}