/* Shared styles for the writing and archive pages. Tokens, nav, buttons and
   footer match the speaking page (public/index.html). */
:root{
  --ink:#10181C; --slate:#1B2830; --tin:#2D3F4B; --tin-line:#3A4E5B;
  --ochre:#BD9442; --ochre-deep:#8E6A24; --cognac:#94532F;
  --page:#EDEFEC; --page-2:#E2E7E5; --text:#1A2328; --muted:#56636B; --rule:#C7CFCD;
  --on-dark:#E9ECEA; --on-dark-muted:#A5B2B8;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max:1180px; --measure:700px;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#151F24; --page-2:#1A262C; --text:#E4E8E6; --muted:#9AA8AE; --rule:#2F3E46; --ochre-deep:#CFA95A;
  }
}
:root[data-theme="dark"]{
  --page:#151F24; --page-2:#1A262C; --text:#E4E8E6; --muted:#9AA8AE; --rule:#2F3E46; --ochre-deep:#CFA95A;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:80px}
body{margin:0; background:var(--page); color:var(--text); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ochre); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.15; letter-spacing:-.005em}
p{margin:0 0 1em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.narrow{max-width:calc(var(--measure) + 2 * clamp(20px,5vw,48px))}
.skip{position:absolute; left:-999px}
.skip:focus{left:16px; top:16px; background:var(--ochre); color:#111; padding:8px 12px; z-index:99}

/* nav */
.nav{position:sticky; top:0; z-index:40; background:rgba(16,24,28,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--on-dark); border-bottom:1px solid rgba(255,255,255,.06)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px}
.brand{font-family:var(--serif); font-size:1.25rem; text-decoration:none; white-space:nowrap}
.nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0; font-size:.95rem}
.nav ul a{text-decoration:none; color:var(--on-dark-muted)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--on-dark)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 .95rem/1 var(--sans); padding:14px 22px; border-radius:3px; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-gold{background:var(--ochre); color:#14110A}
.btn-gold:hover{background:#CCA453}
.nav .btn{padding:10px 16px; font-size:.9rem}
@media (max-width:860px){ .nav ul{display:none} }

.kicker{font-family:var(--serif); font-size:1.05rem; color:var(--ochre-deep); margin-bottom:14px}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* listing pages */
.list-head{padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(28px,4vw,44px)}
.list-head h1{font-size:clamp(2.4rem,5.4vw,4rem); max-width:18ch}
.list-head .lede{color:var(--muted); max-width:56ch; margin-top:18px; font-size:1.1rem}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding:0; list-style:none}
.chips a{display:inline-block; font-size:.88rem; text-decoration:none; padding:7px 12px; border:1px solid var(--rule); border-radius:999px; color:var(--muted)}
.chips a:hover,.chips a[aria-current]{border-color:var(--ochre-deep); color:var(--text)}
.chips span{opacity:.7; margin-left:4px}
.posts{list-style:none; margin:0; padding:0 0 clamp(56px,8vw,96px)}
.card{display:grid; grid-template-columns:240px 1fr; gap:clamp(20px,3vw,36px); padding:28px 0; border-top:1px solid var(--rule); align-items:start}
.card .thumb{display:block; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:var(--page-2)}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .meta{font-size:.85rem; color:var(--ochre-deep); font-weight:600; margin-bottom:6px}
.card h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.card p{color:var(--muted); margin:10px 0 0; max-width:62ch}
.card.no-thumb{grid-template-columns:1fr}
@media (max-width:640px){ .card{grid-template-columns:1fr} .card .thumb{max-width:none} }
/* dissertation */
.diss-cover{flex:none; width:150px; aspect-ratio:17/22; background:var(--ink); color:#E9ECEA; border-radius:2px 4px 4px 2px; padding:16px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:8px 8px 0 -1px var(--page-2), 8px 8px 0 0 var(--rule); position:relative; overflow:hidden}
.diss-cover::before{content:""; position:absolute; left:6px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.1)}
.dc-school{font:600 .55rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ochre)}
.dc-title{font-family:var(--serif); font-size:1.05rem; line-height:1.1; margin-top:auto}
.dc-rule{width:24px; height:2px; background:var(--ochre)}
.dc-sub{font-size:.58rem; line-height:1.35; color:#A5B2B8}
.dc-author{font-family:var(--serif); font-size:.7rem; color:var(--ochre); margin-top:auto}
.featured{display:flex; gap:clamp(24px,4vw,44px); align-items:center; padding:32px clamp(20px,3vw,36px); margin-bottom:12px; border:1px solid var(--rule); border-radius:4px; background:var(--page-2); text-decoration:none}
.featured:hover{border-color:var(--ochre-deep)}
.featured .meta{font-size:.85rem; color:var(--ochre-deep); font-weight:600; margin-bottom:6px}
.featured h2{font-size:clamp(1.4rem,2.6vw,2rem); max-width:30ch}
.featured p{color:var(--muted); margin:10px 0 0; max-width:62ch}
.featured .more{display:inline-block; margin-top:14px; color:var(--ochre-deep); font-weight:600}
@media (max-width:560px){ .featured{flex-direction:column; align-items:flex-start} }
.diss-head{display:flex; gap:clamp(28px,5vw,64px); align-items:center; padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(36px,5vw,56px)}
.diss-head .diss-cover{width:clamp(170px,22vw,240px); padding:22px 20px; gap:12px}
.diss-head .dc-school{font-size:.62rem} .diss-head .dc-title{font-size:clamp(1.3rem,2.2vw,1.7rem)} .diss-head .dc-sub{font-size:.7rem} .diss-head .dc-author{font-size:.85rem}
.diss-head h1{font-size:clamp(2.4rem,5.4vw,4rem)}
.diss-sub{font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.3; margin:12px 0 0; max-width:34ch}
.diss-head .meta{color:var(--muted); font-size:.95rem; margin-top:16px}
.diss-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:24px}
.diss-actions .muted{font-size:.9rem}
@media (max-width:700px){ .diss-head{flex-direction:column; align-items:flex-start} }
.diss-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 40px; padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.diss-stats dt{font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.4rem); color:var(--ochre-deep); line-height:1}
.diss-stats dd{margin:6px 0 0; color:var(--muted); font-size:.92rem}
.diss-h{font-size:1.6rem; margin:0 0 16px}
.diss-chapters{list-style:none; padding:0; margin:0 0 32px}
.diss-chapters li{display:flex; gap:14px; align-items:baseline; padding:12px 0; border-top:1px solid var(--rule); font-family:var(--serif); font-size:1.12rem}
.diss-chapters li span{font-family:var(--sans); font-size:.82rem; color:var(--ochre-deep); font-weight:600; min-width:3.2em}
.diss-note{color:var(--muted)}
.prose + .diss-h{margin-top:40px}
.pager{display:flex; justify-content:space-between; gap:16px; padding:0 0 clamp(64px,8vw,104px); font-weight:600}
.pager a{text-decoration:none; color:var(--ochre-deep)}
.pager a:hover{text-decoration:underline}

/* article */
.article-head{padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(24px,3vw,36px)}
.article-head h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.article-head .meta{color:var(--muted); font-size:.95rem; margin-top:18px}
.hero-img{margin:0 auto clamp(32px,5vw,56px); max-width:960px; padding:0 clamp(20px,5vw,48px)}
.hero-img img{width:100%; border-radius:4px; max-height:620px; object-fit:cover}
.prose{font-size:1.125rem; line-height:1.75}
.prose > *{margin:0 0 1.15em}
.prose h2,.prose h3,.prose h4{margin:1.8em 0 .6em}
.prose h2{font-size:1.75rem} .prose h3{font-size:1.45rem} .prose h4{font-size:1.2rem}
.prose a{color:var(--text); text-decoration-color:var(--ochre); text-decoration-thickness:1.5px; text-underline-offset:3px}
.prose a:hover{color:var(--ochre-deep)}
.prose figure{margin:1.8em 0}
.prose figure img,.prose > img{border-radius:4px}
.prose figcaption{font-size:.88rem; color:var(--muted); margin-top:10px; line-height:1.5}
.prose blockquote{margin:1.6em 0; padding:2px 0 2px 22px; border-left:2px solid var(--ochre); font-family:var(--serif); font-size:1.25rem; line-height:1.5}
.prose .quote{margin:2em 0}
.prose .quote blockquote{margin:0; font-size:1.15rem}
.prose .quote blockquote p{margin:0 0 .6em}
.prose .quote figcaption{padding-left:24px; font-size:.9rem; color:var(--muted)}
.prose .btn{text-decoration:none; color:#14110A}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose hr{border:0; border-top:1px solid var(--rule); margin:2em 0}
.prose video{width:100%; height:auto; border-radius:4px; background:#000}
.prose pre{white-space:pre-wrap; font-size:.9rem; background:var(--page-2); padding:16px; border-radius:4px}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:24px 0 0; margin:36px 0 0; border-top:1px solid var(--rule)}
.tags a{font-size:.85rem; color:var(--muted); text-decoration:none; padding:5px 10px; background:var(--page-2); border-radius:3px}
.tags a:hover{color:var(--text)}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:40px 0 clamp(64px,8vw,96px); padding-top:28px; border-top:1px solid var(--rule)}
.post-nav a{text-decoration:none; display:block}
.post-nav small{display:block; color:var(--ochre-deep); font-weight:600; font-size:.85rem; margin-bottom:4px}
.post-nav span{font-family:var(--serif); font-size:1.15rem; line-height:1.3}
.post-nav a:hover span{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.post-nav .next{text-align:right; grid-column:2}
@media (max-width:560px){ .post-nav{grid-template-columns:1fr} .post-nav .next{text-align:left; grid-column:auto} }

/* call to action band */
.cta{background:var(--ink); color:var(--on-dark); padding:clamp(56px,8vw,96px) 0}
.cta .wrap{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:28px}
.cta .kicker{color:var(--ochre)}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem); max-width:22ch}
.cta p{color:var(--on-dark-muted); max-width:48ch; margin:14px 0 0}

footer{background:var(--ink); color:var(--on-dark-muted); font-size:.88rem; border-top:1px solid var(--tin-line)}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; padding-bottom:28px}
footer a{color:var(--on-dark-muted)}
footer a:hover{color:var(--on-dark)}
footer nav{display:flex; gap:18px}