:root{
  --ink:#1c1b19;
  --paper:#f2ede4;
  --paper-raised:#ece4d4;
  --clay:#a8421f;
  --clay-dim:#c97c5b;
  --sage:#5b6b4f;
  --grey:#8a8378;
  --line:#d8cdb9;
  --max:780px;
}

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

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

body img{
  width: 100%;
}

h1,h2,h3{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

a{color:var(--clay); text-decoration:none; border-bottom:1px solid var(--clay-dim);}
a:hover{color:var(--sage); border-bottom-color:var(--sage);}

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

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(242,237,228,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; flex-wrap:wrap; gap:10px;
}
.brand{
  font-family:'Source Serif 4',serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--ink);
  border-bottom:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.brand-logo{height:22px; width:auto; display:block;}
.brand:hover{color:var(--clay); border-bottom:none;}
.navlinks{display:flex; gap:22px; font-size:0.92rem; flex-wrap:wrap;}
.navlinks a{color:var(--ink); border-bottom:none; opacity:0.75;}
.navlinks a:hover{opacity:1; color:var(--clay);}
.navlinks .ext{opacity:0.55; font-style:italic;}

@media (max-width:560px){
  nav .wrap{flex-direction:column; align-items:flex-start;}
  .navlinks{gap:14px 18px;}
}

/* ---------- HERO ---------- */
header.hero{padding:72px 0 56px;}
.eyebrow{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:18px;
  display:block;
}
.hero h1{
  font-size:2.6rem;
  line-height:1.18;
  max-width:640px;
}
.hero .lede{
  margin-top:22px;
  font-size:1.12rem;
  color:#3a3733;
  max-width:600px;
}
.hero .rule{
  width:48px; height:2px; background:var(--clay);
  margin:30px 0;
  border:none;
}
.hero-meta{font-size:0.94rem; color:var(--grey);}
.hero-meta a{color:var(--grey); border-bottom:1px solid var(--line);}
.hero-meta a:hover{color:var(--clay);}

@media (max-width:560px){ .hero h1{font-size:2rem;} }

/* ---------- SECTIONS ---------- */
section{padding:54px 0; border-top:1px solid var(--line);}
section.flush{border-top:none;}

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:30px; gap:16px; flex-wrap:wrap;
}
.section-head h2{font-size:1.5rem;}
.section-head .tag{font-size:0.82rem; color:var(--grey); letter-spacing:0.03em;}

/* ---------- ESSAY / POST LIST CARDS ---------- */
.essay{padding:22px 0; border-bottom:1px dashed var(--line);}
.essay:last-child{border-bottom:none;}
.essay h3{font-size:1.18rem; margin-bottom:8px;}
.essay h3 a{border-bottom:none; color:var(--ink);}
.essay h3 a:hover{color:var(--clay);}
.essay p{margin:0; color:#3a3733;}
.essay .meta{font-size:0.82rem; color:var(--grey); margin-top:10px; display:block;}

.pillars{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:6px;}
@media (max-width:600px){ .pillars{grid-template-columns:1fr;} }
.pillar{background:var(--paper-raised); border:1px solid var(--line); border-radius:2px; padding:20px 22px;}
.pillar .mark{font-size:1.1rem; color:var(--clay); display:inline-block; margin-bottom:12px;}
.pillar h3{font-size:1.02rem; margin-bottom:8px;}
.pillar p{margin:0; font-size:0.95rem; color:#46423d;}

/* ---------- BOOKS ---------- */
.book{display:grid; grid-template-columns:120px 1fr; gap:24px; padding:24px 0; border-bottom:1px dashed var(--line);}
.book:last-child{border-bottom:none;}
@media (max-width:560px){ .book{grid-template-columns:1fr;} }
.book-cover{
  background:var(--ink); color:var(--paper); aspect-ratio:2/3; width:120px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Source Serif 4',serif; font-size:0.8rem; line-height:1.3;
}
@media (max-width:560px){ .book-cover{width:90px;} }
.book h3{font-size:1.2rem; margin-bottom:4px;}
.book .by{font-size:0.88rem; color:var(--grey); margin-bottom:10px;}
.book p{margin:0 0 12px; color:#3a3733; font-size:0.97rem;}
blockquote{margin:10px 0; padding-left:14px; border-left:2px solid var(--clay-dim); font-style:italic; color:#4a4640; font-size:0.92rem;}

/* ---------- READING PRACTICE LOG ---------- */
.log-intro{color:#3a3733; max-width:620px; margin-bottom:26px;}
.log-controls{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.log-controls button{
  font-family:'Inter',sans-serif; font-size:0.86rem; padding:7px 14px;
  background:transparent; border:1px solid var(--line); border-radius:20px;
  color:var(--ink); cursor:pointer; transition:all .15s ease;
}
.log-controls button:hover{border-color:var(--clay); color:var(--clay);}
.log-controls button.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.log-table{width:100%; border-collapse:collapse; font-size:0.93rem;}
.log-table thead th{
  text-align:left; font-family:'Inter',sans-serif; font-weight:600; font-size:0.76rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--grey);
  padding:0 10px 12px 0; border-bottom:1px solid var(--ink);
}
.log-table td{padding:13px 10px 13px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.log-table tr.year-row td{
  padding-top:26px; font-family:'Source Serif 4',serif; font-size:1.15rem;
  font-weight:600; color:var(--clay); border-bottom:1px solid var(--line);
}
.log-table .title a{color:var(--ink); font-weight:500; border-bottom:none;}
.log-table .title a:hover{color:var(--clay);}
.log-table .author{color:var(--grey);}
.log-table .finished{color:var(--grey); white-space:nowrap;}
.beads{letter-spacing:1px; color:var(--clay); white-space:nowrap;}
.beads .empty{color:var(--line);}

.log-note{margin-top:22px; font-size:0.85rem; color:var(--grey); max-width:560px;}

@media (max-width:600px){
  .log-table thead{display:none;}
  .log-table tr:not(.year-row){display:block; padding:14px 0; border-bottom:1px solid var(--line);}
  .log-table tr.year-row{display:block;}
  .log-table td{display:block; border-bottom:none; padding:2px 0;}
  .log-table tr:not(.year-row) td:first-child{padding-top:0;}
}

/* ---------- SINGLE POST / PAGE ---------- */
.post-header{padding:56px 0 32px;}
.post-header h1{font-size:2.1rem; line-height:1.25; margin-top:14px;}
.post-body{padding:10px 0 50px; max-width:680px;}
.post-body p{color:#2a2825; margin:0 0 20px;}
.post-body h2{font-size:1.4rem; margin:36px 0 14px;}
.post-body h3{font-size:1.15rem; margin:28px 0 12px;}
.post-body ul, .post-body ol{margin:0 0 20px; padding-left:22px; color:#2a2825;}
.post-body li{margin-bottom:8px;}
.post-body img{width: 100%;}
.post-footer{padding:0 0 60px; font-size:0.92rem;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:40px 0 60px; font-size:0.88rem; color:var(--grey);}
footer .flinks{margin-bottom:14px;}
footer .flinks a{color:var(--grey); border-bottom:1px solid var(--line); margin-right:18px;}
footer .flinks a:hover{color:var(--clay);}

:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}