:root{
  --accent:#021836;
  --accent-soft:#3e5e8e;
  --ink:#2b2a26;
  --ink-soft:#5c5a52;
  --paper:#faf8f3;
  --line:#e5e0d4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Georgia,"Times New Roman",serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#0b3a73}

/* ---------- Hero (homepage) ---------- */
.hero{position:relative;width:100%;height:min(62.5vw,82vh);min-height:320px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,18,12,.15) 0%,rgba(20,18,12,0) 35%,rgba(20,18,12,.55) 100%);
}
.hero-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:2rem 1.25rem 2.5rem;text-align:center;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.hero-text .site-name{
  font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.22em;text-transform:uppercase;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  margin-bottom:.7rem;opacity:.95;
}
.hero-text .site-name a{color:inherit;text-decoration:none}
.hero-text h1{font-size:clamp(2rem,6vw,3.6rem);font-weight:normal;font-style:italic}

/* ---------- Slim banner (inner pages) ---------- */
.banner{position:relative;height:200px;overflow:hidden}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,18,12,.1) 0%,rgba(20,18,12,.5) 100%);
}
.banner-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:1rem 1.25rem 1.25rem;text-align:center;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.banner-text .site-name{
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.banner-text .site-name a{color:inherit;text-decoration:none}

/* ---------- Site nav ---------- */
.site-nav{
  text-align:center;padding:.8rem 1.25rem;border-bottom:1px solid var(--line);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.9rem;
}
.site-nav a{margin:0 .8rem;color:var(--ink-soft);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent)}

/* ---------- Layout ---------- */
main{max-width:680px;margin:0 auto;padding:3rem 1.25rem 4rem}
.tagline{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.92rem;color:var(--ink-soft);text-align:center;
  padding-bottom:2rem;border-bottom:1px solid var(--line);margin-bottom:2rem;
}
.intro p{font-style:italic;font-weight:bold;margin-bottom:1.1rem}
.thought{
  margin:2rem 0;padding:1rem 1.25rem;
  border-left:4px solid var(--accent-soft);background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.95rem;
}
/* Portrait left, links right */
.profile-row{
  display:flex;align-items:center;gap:2.5rem;
  margin-top:3rem;
}
.portrait{flex:0 0 auto;margin:0}
.portrait img{
  width:min(240px,38vw);height:auto;display:block;
  box-shadow:0 10px 30px rgba(43,42,38,.18);
}
.profile-row .elsewhere{flex:1;margin-top:0}
.profile-row .elsewhere h2{text-align:left}
.profile-row .elsewhere ul{justify-content:flex-start}
@media (max-width:560px){
  .profile-row{flex-direction:column;gap:1.75rem}
  .portrait img{width:min(240px,60vw)}
  .profile-row .elsewhere h2{text-align:center}
  .profile-row .elsewhere ul{justify-content:center}
}

/* ---------- Posts / article ---------- */
article h1,.page-title{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:normal;margin-bottom:.4rem}
.post-meta{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.85rem;color:var(--ink-soft);margin-bottom:2rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--line);
}
article .post-body p{margin-bottom:1.1rem}
.video-embed{position:relative;aspect-ratio:16/9;margin:2rem 0;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.post-list{list-style:none;margin-top:1.5rem}
.post-list li{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.post-list .post-title{font-size:1.25rem}
.post-list time{
  display:block;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.85rem;color:var(--ink-soft);margin-top:.2rem;
}

.back-link{
  display:inline-block;margin-top:2.5rem;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.9rem;
}

/* ---------- Elsewhere links ---------- */
.elsewhere{margin-top:3rem}
.elsewhere h2{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;margin-bottom:1.25rem;
}
.elsewhere ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.elsewhere li a{
  display:inline-block;padding:.55rem 1.1rem;
  border:1px solid var(--accent);border-radius:999px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.95rem;
  text-decoration:none;color:var(--ink);background:#fff;
  transition:background .15s,color .15s;
}
.elsewhere li a:hover{background:var(--accent);color:#fff}

footer{
  text-align:center;padding:2rem 1.25rem 3rem;color:var(--ink-soft);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.85rem;
  border-top:1px solid var(--line);
}