/* Layout: one reading column; every item carries a coloured bar from a five-colour cycle (navy, ochre, green, teal, coral), as on robfitz.com. */
:root{
  --bg:#ffffff; --ink:rgba(0,0,0,.84); --muted:#5f6468; --rule:#d9dcde; --link:#111;
  --c0:#112f41; --c1:#b58427; --c2:#47ab6c; --c3:#0894a1; --c4:#ed553b;
  --tint:#f5f7f8;
  --display:"Merriweather", Georgia, serif;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15191c; --ink:#e6e9eb; --muted:#9ba4aa; --rule:#2d3439; --link:#f2f4f5;
  --c0:#7fa8c4; --c1:#e0b25a; --c2:#5fca88; --c3:#2dbccb; --c4:#ff7a62; --tint:#1c2226; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15191c; --ink:#e6e9eb; --muted:#9ba4aa; --rule:#2d3439; --link:#f2f4f5;
  --c0:#7fa8c4; --c1:#e0b25a; --c2:#5fca88; --c3:#2dbccb; --c4:#ff7a62; --tint:#1c2226; color-scheme:dark}

.col0{--c:var(--c0)} .col1{--c:var(--c1)} .col2{--c:var(--c2)} .col3{--c:var(--c3)} .col4{--c:var(--c4)}

html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.65; margin:0}
.wrap{max-width:44rem; margin:0 auto; padding-block:1.5rem 4rem; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--c3); outline-offset:2px; border-radius:2px}
h1,h2,h3{text-wrap:balance; line-height:1.25}

.top{font-family:var(--sans); font-size:.8rem; color:var(--muted); text-align:right; margin-bottom:2rem}
.top a{color:var(--muted)}

/* Home */
.hero h1{font-family:var(--display); font-weight:400; font-size:2.1rem; margin:0 0 1rem}
.hero p{margin:.35rem 0; font-size:1rem}
.start,.essays,.about{margin-top:2.75rem}
.start > h2,.essays > h2,.about > h2{font-family:var(--sans); font-weight:700; font-size:1.8rem; margin:0 0 1.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule)}
.feature{display:flex; flex-direction:column; gap:.3rem; padding:.9rem 0 .9rem 1.1rem; border-left:5px solid var(--c); background:var(--tint); text-decoration:none; color:var(--ink)}
.feature-title{font-size:1.3rem; color:var(--ink)}
.feature:hover .feature-title{text-decoration:underline}
.feature-dek{font-size:1rem; line-height:1.5}
.group{margin-bottom:2.25rem}
.group h3{font-family:var(--sans); font-weight:700; font-size:1.2rem; margin:0}
.group .blurb{color:var(--muted); font-size:.95rem; margin:.2rem 0 .85rem; line-height:1.5}
.group ul{list-style:none; margin:0; padding:0}
.group li{border-left:5px solid var(--c); padding-left:10px; margin-bottom:.7rem; font-size:1.1rem; line-height:1.4}
.group li a{text-decoration:none}
.group li a:hover{text-decoration:underline}
.count{font-family:var(--sans); font-size:.9rem; color:var(--muted)}
.about p{margin:.8rem 0}
.about > p:first-of-type{border-left:5px solid var(--c); padding-left:12px}
.small{font-family:var(--sans); font-size:.85rem; color:var(--muted)}

/* Post */
.post{border-top:6px solid var(--c); padding-top:1.5rem}
.kicker{font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .75rem}
.kicker a{color:var(--c); text-decoration:none}
.post h1{font-family:var(--display); font-weight:700; font-size:2.1rem; margin:0 0 .75rem}
.dek{font-style:italic; color:var(--muted); font-size:1.12rem; line-height:1.55; margin:0 0 .9rem; border-left:5px solid var(--c); padding-left:12px}
.meta{font-family:var(--sans); font-size:.85rem; color:var(--muted); margin:0 0 2.25rem; padding-bottom:1.5rem; border-bottom:1px solid var(--rule)}
.body h2{font-family:var(--sans); font-weight:700; font-size:1.4rem; margin:2.4rem 0 .5rem}
.body h2::before{content:""; display:inline-block; width:5px; height:1.05em; background:var(--c); margin-right:10px; vertical-align:-0.12em}
.body h3{font-size:1.1rem; margin:1.8rem 0 .4rem}
.body p{margin:0 0 1.1rem}
.body a{color:var(--link); text-decoration-color:var(--c)}
.body ul,.body ol{padding-left:1.4rem; margin:0 0 1.2rem}
.body li{margin:.35rem 0}
.body li::marker{color:var(--c)}
.body blockquote{margin:1.6rem 0; padding:.2rem 0 .2rem 1.1rem; border-left:5px solid var(--c); font-style:italic}
.body hr{border:0; border-top:1px solid var(--rule); margin:2rem 0}
.body img{max-width:100%; height:auto}
.table-wrap{overflow-x:auto; margin:0 0 1.4rem}
.body table{border-collapse:collapse; font-family:var(--sans); font-size:.9rem; line-height:1.45; min-width:100%}
.body th,.body td{border-bottom:1px solid var(--rule); padding:.55rem .6rem; text-align:left; vertical-align:top}
.body th{font-weight:700}
.sources{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--rule); font-family:var(--sans); font-size:.85rem; line-height:1.55; color:var(--muted); overflow-wrap:anywhere}
.sources h2{font-size:.8rem !important; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .75rem !important}
.sources h2::before{display:none !important}
.sources a{color:var(--muted)}
.sources p,.sources li{margin:0 0 .5rem}
.signoff{margin-top:3rem; padding:1rem 1.1rem; background:var(--tint); border-left:5px solid var(--c1); font-size:.98rem; line-height:1.55}
.signoff p{margin:0}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem}
.pn a{display:flex; flex-direction:column; gap:.2rem; text-decoration:none; line-height:1.35; min-width:0; border-left:5px solid var(--c3); padding-left:10px}
.pn .next{border-left:0; border-right:5px solid var(--c4); padding-left:0; padding-right:10px; text-align:right}
.pn a span{font-family:var(--sans); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.foot{margin-top:3.5rem; font-family:var(--sans); font-size:.8rem; color:var(--muted)}
.foot a{color:var(--muted)}

@media (max-width:480px){
  body{font-size:17px}
  .hero h1{font-size:1.8rem}
  .post h1{font-size:1.7rem}
  .start > h2,.essays > h2,.about > h2{font-size:1.5rem}
  .pn{grid-template-columns:1fr}
  .pn .next{text-align:left; border-right:0; border-left:5px solid var(--c4); padding-left:10px; padding-right:0}
}

/* Newsletter sign-up */
.subscribe{margin-top:3rem; padding:1.1rem 1.2rem; border-left:5px solid var(--c); background:var(--tint)}
.subscribe h2{font-family:var(--sans); font-weight:700; font-size:1.25rem; margin:0 0 .35rem}
.subscribe p{margin:0 0 .8rem; font-size:1rem; line-height:1.5}
.sub-form{display:flex; flex-wrap:wrap; gap:.5rem}
.sub-form input[type=email]{flex:1 1 14rem; min-width:0; font:inherit; font-size:1rem; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:4px; background:var(--bg); color:var(--ink)}
.sub-form input[type=email]:focus{outline:2px solid var(--c3); outline-offset:1px}
.sub-form button{font-family:var(--sans); font-weight:700; font-size:1rem; padding:.6rem 1.1rem; border:0; border-radius:4px; background:var(--c0); color:#fff; cursor:pointer}
.sub-form button:hover{background:var(--c3)}
.sub-note{font-family:var(--sans); font-size:.85rem !important; color:var(--muted); margin:.7rem 0 0 !important}
.sub-note a{color:var(--muted)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.top a + a{margin-left:0}

/* Header with logo */
.top{display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left}
.top .brand{display:inline-flex; line-height:0}
.top .logo{height:28px; width:auto}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top .logo path:not([fill^="#"]), :root:not([data-theme="light"]) .top .logo path{fill:var(--ink)}}
:root[data-theme="dark"] .top .logo path{fill:var(--ink)}
@media (max-width:480px){ .top .logo{height:24px} }

/* Figures */
.body p > img{display:block; width:100%; height:auto; border:1px solid var(--rule); border-radius:4px; background:#fff; margin:1.4rem 0 .4rem}