html { background:#0E0B08; }
body { margin:0; background:#0E0B08; color:rgba(255,255,255,.86); font-family:var(--font-serif, Georgia, serif); }
a { color:var(--ember-400, #FF9A1F); text-decoration:none; }
a:hover { color:#fff; }
header.site { position:sticky; top:0; z-index:20; background:var(--ink-0, #000); border-bottom:2px solid #fff; }
header.site .inner { max-width:1180px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; }
.brand span { font-family:var(--font-display); text-transform:uppercase; font-size:19px; line-height:1; color:#fff; letter-spacing:-0.01em; }
nav.site { display:flex; align-items:center; gap:28px; }
nav.site a { position:relative; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); padding:6px 0; }
nav.site a:hover { color:#fff; }
nav.site a.active { color:#fff; }
nav.site a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ember-500,#F27A0C); }
a.btn { display:inline-flex; align-items:center; gap:8px; height:34px; box-sizing:border-box; padding:0 14px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:#fff; color:#000; line-height:1; white-space:nowrap; }
a.btn:hover { background:var(--ember-500,#F27A0C); color:#000; }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
.kicker { font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-400,#FF9A1F); }
main { flex:1; }
footer.site { border-top:2px solid #fff; background:var(--ink-0, #000); margin-top:96px; }
footer.site .inner { max-width:1180px; margin:0 auto; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer.site a { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
footer.site a:hover { color:#fff; }
/* about */
.about-grid { display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.05fr); gap:72px; align-items:start; padding-top:88px; }
@media (max-width:840px){ .about-grid { grid-template-columns:1fr; } }
.rule { height:4px; background:#fff; width:88px; margin-bottom:32px; }
.bio { font-size:26px; line-height:1.6; color:rgba(255,255,255,.92); margin:0 0 32px; max-width:620px; }
.about-grid figure { margin:0; border:2px solid #fff; }
.about-grid img { display:block; width:100%; height:auto; }
/* writing list */
.page-title { font-family:var(--font-display); text-transform:uppercase; line-height:.92; letter-spacing:-0.015em; color:#fff; margin:12px 0 0; font-size:clamp(34px,5vw,56px); }
.list-head { padding:72px 0 36px; }
.rows { border-top:2px solid #fff; }
a.row { display:flex; align-items:baseline; gap:32px; padding:30px 24px; border-bottom:2px solid rgba(255,255,255,.22); color:#fff; transition:background 140ms cubic-bezier(.2,0,0,1), color 140ms cubic-bezier(.2,0,0,1); }
a.row:hover { background:var(--ember-500,#F27A0C); color:var(--ink-0,#000); }
.row .date { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:inherit; opacity:.55; flex:none; width:110px; }
.row .t { font-family:var(--font-display); text-transform:uppercase; line-height:.98; letter-spacing:-0.01em; font-size:clamp(22px,3vw,34px); color:inherit; flex:1; }
.row .sub { font-family:var(--font-serif); font-style:italic; font-size:15px; color:inherit; opacity:.75; flex:1.2; line-height:1.45; }
.row .venue { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:inherit; opacity:.55; flex:none; }
@media (max-width:840px){ a.row { flex-wrap:wrap; gap:10px 24px; } .row .sub { flex-basis:100%; } }
/* article */
.article { max-width:840px; margin:0 auto; padding:72px 40px 0; }
.article h1 { font-family:var(--font-display); text-transform:uppercase; line-height:.94; letter-spacing:-0.015em; color:#fff; margin:14px 0 18px; font-size:clamp(36px,6vw,68px); }
.article .subtitle { font-family:var(--font-serif); font-style:italic; font-size:22px; line-height:1.5; color:rgba(255,255,255,.75); margin:0 0 44px; }
.article p { font-size:19px; line-height:1.75; margin:0 0 26px; max-width:66ch; }
.article h2 { font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-400,#FF9A1F); margin:52px 0 18px; font-weight:400; }
.definition { border-left:4px solid var(--ember-500,#F27A0C); padding:8px 0 8px 28px; margin:0 0 44px; }
.definition p { font-size:25px; line-height:1.55; color:#fff; margin:0; font-style:italic; }
.readlink { display:inline-block; font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-500,#F27A0C); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; margin:10px 24px 0 0; }
.readlink:hover { color:#fff; }
.meta { font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.55); border-top:2px solid rgba(255,255,255,.22); padding-top:24px; margin-top:56px; line-height:2; }
/* ---- mobile ---- */
@media (max-width:720px) {
  header.site .inner { padding:12px 20px; gap:16px; }
  .brand img { height:24px !important; }
  .brand span { font-size:16px; }
  nav.site { gap:18px; }
  a.btn { height:30px; padding:0 10px; font-size:11px; }
  .wrap { padding:0 20px; }
  .about-grid { padding-top:48px; gap:40px; }
  .bio { font-size:21px; }
  .list-head { padding:44px 0 20px; }
  .page-title { font-size:clamp(30px,9vw,44px); }
  a.row { padding:22px 4px; gap:8px 20px; }
  .row .date { width:auto; }
  .row .t { font-size:clamp(20px,6vw,28px); flex-basis:100%; }
  .row .sub { flex-basis:100%; }
  .article { padding:44px 20px 0; }
  .article h1 { font-size:clamp(30px,9.5vw,44px); }
  .article .subtitle { font-size:19px; margin-bottom:32px; }
  .article p { font-size:17px; }
  .definition p { font-size:21px; }
  .definition { padding-left:20px; }
  .readlink { display:block; margin:14px 0 0; }
  footer.site { margin-top:64px; }
  footer.site .inner { padding:28px 20px; }
}