/* Selfulness shared styles — essays & inner pages */
:root{
  --paper:#F5F6F2; --panel:#EDEFE8; --ink:#1E2620; --muted:#5C665E;
  --accent:#33705C; --madder:#96453A; --gold:#A9812F; --line:#C9CFC6;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141915; --panel:#1C221D; --ink:#E9ECE5; --muted:#93A096;
    --accent:#6FBFA3; --madder:#D08373; --gold:#D3A94F; --line:#333B34;
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Spectral", Georgia, "Times New Roman", serif; line-height:1.65;
}
.label{font-family:"Archivo","Helvetica Neue",Arial,sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:600;}
.wrap{max-width:66rem; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem);}
header.site{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.4rem 0; flex-wrap:wrap;}
.wordmark{display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--ink); text-decoration:none;}
.wordmark svg{display:block;}
nav.tabs{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;}
nav.tabs a{font-size:.7rem; color:var(--muted); text-decoration:none;}
nav.tabs a:hover{color:var(--accent);}
nav.tabs a.active{color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:.2em;}
nav.tabs a.cta{color:var(--accent); border:1px solid var(--accent); border-radius:99px; padding:.5em 1.2em;}
nav.tabs a.cta:hover{background:var(--accent); color:var(--paper);}
main.essay{max-width:44rem; margin:0 auto; padding:clamp(2rem,7vh,4.5rem) 0 2rem;}
.eyebrow{font-size:.7rem; color:var(--accent); margin:0 0 1.2rem;}
main.essay h1{font-size:clamp(1.9rem,4.6vw,3rem); font-weight:300; line-height:1.18; margin:0 0 .6rem; text-wrap:balance;}
.subtitle{font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--muted); font-style:italic; margin:0 0 2.2rem; font-weight:300;}
main.essay h2{font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:400; line-height:1.25; margin:2.2rem 0 .7rem; text-wrap:balance;}
main.essay h3{font-size:clamp(1.1rem,2vw,1.3rem); font-weight:500; margin:1.8rem 0 .5rem;}
main.essay p{margin:0 0 1.1em; font-size:clamp(1.02rem,1.5vw,1.15rem);}
main.essay p.vers{margin-bottom:0;}
main.essay blockquote{margin:1.6em 0; padding:.2em 0 .2em 1.2em; border-left:3px solid var(--accent); color:var(--muted); font-style:italic;}
main.essay blockquote p{margin:0;}
main.essay strong{font-weight:500;}
main.essay hr{border:none; border-top:1px solid var(--line); margin:2.4em 0;}
main.essay figure{margin:2.4em 0; text-align:center;}
main.essay figure svg{max-width:min(100%,26rem); height:auto;}
main.essay figcaption{font-size:.75rem; color:var(--muted); font-family:"Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase; margin-top:.8rem;}
.essay-foot{max-width:44rem; margin:0 auto; padding:1.6rem 0 1rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.essay-foot a{font-size:.72rem; color:var(--accent); text-decoration:none;}
.essay-foot a:hover{text-decoration:underline;}
footer.site-foot{border-top:1px solid var(--line); margin-top:2.5rem; padding:2rem 0 2.6rem; font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;}
footer.site-foot .label{font-size:.66rem;}
/* essays index */
.essay-list{max-width:46rem; padding:clamp(2rem,7vh,4rem) 0 1rem;}
.essay-list h1{font-size:clamp(1.9rem,4.6vw,3rem); font-weight:300; margin:0 0 .6rem;}
.essay-list .intro{color:var(--muted); font-size:clamp(1rem,1.5vw,1.15rem); max-width:36em; margin:0 0 2.2rem;}
.card{display:block; text-decoration:none; color:inherit; border-top:1px solid var(--line); padding:1.5rem 0;}
.card h2{font-size:clamp(1.25rem,2.4vw,1.6rem); font-weight:400; margin:0 0 .4rem; line-height:1.25;}
.card:hover h2{color:var(--accent);}
.card p{margin:0; color:var(--muted); font-size:1rem; line-height:1.55;}
.card .read{display:inline-block; margin-top:.6rem; font-size:.68rem; color:var(--accent);}