/* ── we are _ journal · shared post styles ───────────────────────── */
@font-face { font-family:'LLBrown'; src:url('../fonts/Brown-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'LLBrown'; src:url('../fonts/Brown-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'LLBrown'; src:url('../fonts/Brown-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'LLBrown'; src:url('../fonts/Brown-RegularItalic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'LLBrown'; src:url('../fonts/Brown-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#f9f8f6; --bg-warm:#f3f1ed; --bg-dark:#0C0115; --bg-mid:#2e2c29;
  --ink:#0C0115; --ink-mid:#6b6760; --ink-light:#a09d99;
  --accent:#c8a882; --accent-dk:#9e7f5e;
  --border:#e4e1db; --border-dk:#2e2c29;
  --ff-serif:'Libre Baskerville', Georgia, serif;
  --ff-sans:'LLBrown', system-ui, sans-serif;
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--ff-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:#e8dfd3; }
a { color:var(--accent-dk); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--ink); }

/* ── Nav ── */
.nav { position:sticky; top:0; z-index:100; padding:18px 48px; display:flex; justify-content:space-between; align-items:center; background:rgba(249,248,246,0.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav .brand { font-size:1rem; font-weight:500; color:var(--ink); letter-spacing:0.01em; }
.nav .brand span { color:var(--accent); }
.nav .links { display:flex; gap:2.4rem; align-items:center; }
.nav .links a { font-size:0.78rem; color:var(--ink-mid); letter-spacing:0.02em; font-weight:300; }
.nav .links a:hover { color:var(--ink); }
.nav .links a.active { color:var(--ink); font-weight:400; border-bottom:1px solid var(--accent); padding-bottom:2px; }
.nav .cta { padding:10px 22px; background:var(--accent); color:var(--bg-dark)!important; font-size:0.75rem; letter-spacing:0.05em; font-weight:500; }
.nav .cta:hover { opacity:0.85; }

/* ── Article ── */
.post-hero { max-width:1100px; margin:0 auto; padding:64px 48px 40px; }
.post-hero .kicker { font-size:0.68rem; letter-spacing:0.12em; color:var(--accent-dk); margin-bottom:20px; font-weight:500; }
.post-hero h1 { font-family:var(--ff-serif); font-size:clamp(2rem,4.2vw,3.4rem); font-weight:400; font-style:italic; line-height:1.1; letter-spacing:-0.03em; color:var(--ink); max-width:16ch; }
.post-hero .byline { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); font-size:0.72rem; color:var(--ink-light); font-weight:300; letter-spacing:0.02em; }
.post-hero .byline strong { color:var(--ink); font-weight:400; }

.post-figure { max-width:1100px; margin:0 auto; padding:0 48px; }
.post-figure img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.post-figure figcaption { padding-top:14px; font-size:0.72rem; font-weight:300; color:var(--ink-light); line-height:1.65; letter-spacing:0.01em; }
.post-figure .ph { width:100%; aspect-ratio:16/10; background:var(--bg-mid); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.18); font-family:monospace; font-size:0.62rem; letter-spacing:0.12em; }

.post-body { max-width:720px; margin:0 auto; padding:56px 48px 80px; }
.post-body > p { font-size:1.02rem; font-weight:300; color:var(--ink); line-height:1.9; margin-bottom:1.5rem; }
.post-body .lede { font-family:var(--ff-serif); font-size:1.2rem; font-style:italic; line-height:1.75; color:var(--ink); margin-bottom:2.4rem; }
.post-body h2 { font-family:var(--ff-serif); font-size:1.7rem; font-weight:400; font-style:italic; letter-spacing:-0.02em; color:var(--ink); margin:3rem 0 1.2rem; line-height:1.25; }
.post-body h3 { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-dk); font-weight:500; margin:2.4rem 0 1rem; }
.post-body ul, .post-body ol { margin:0 0 1.6rem 1.2rem; }
.post-body li { font-size:1.02rem; font-weight:300; color:var(--ink-mid); line-height:1.85; margin-bottom:0.6rem; padding-left:0.4rem; }
.post-body strong { font-weight:500; color:var(--ink); }
.post-body em { font-style:italic; }
.post-body .callout { background:var(--bg-warm); border-left:2px solid var(--accent); padding:24px 28px; margin:2.4rem 0; font-size:0.98rem; font-weight:300; color:var(--ink); line-height:1.8; }
.post-body hr { border:none; border-top:1px solid var(--border); margin:3rem 0; }
.post-body .signoff { font-family:var(--ff-serif); font-style:italic; color:var(--ink); margin-top:2rem; }

.post-back { max-width:720px; margin:0 auto; padding:0 48px 64px; }
.post-back a { font-size:0.8rem; color:var(--ink-mid); }
.post-back a:hover { color:var(--ink); }

/* ── Footer ── */
.footer { background:var(--bg-dark); color:rgba(255,255,255,0.25); padding:32px 48px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; border-top:1px solid var(--border-dk); }
.footer .brand { font-size:0.95rem; font-weight:500; color:rgba(255,255,255,0.6); }
.footer .brand span { color:var(--accent); }
.footer .links { display:flex; gap:2rem; font-size:0.7rem; letter-spacing:0.04em; }
.footer .links a { color:rgba(255,255,255,0.25); }
.footer .links a:hover { color:rgba(255,255,255,0.55); }
.footer .copy { font-size:0.65rem; text-align:right; }

@media (max-width:720px) {
  .nav { padding:14px 22px; }
  .nav .links { display:none; }
  .post-hero, .post-figure, .post-body, .post-back { padding-left:24px; padding-right:24px; }
  .footer { grid-template-columns:1fr; text-align:center; }
  .footer .copy { text-align:center; }
  .footer .links { flex-wrap:wrap; justify-content:center; gap:1.2rem; }
}