:root{
  --ink:#101418; --paper:#f4efe6; --accent:#c96f3b; --line:#d9d2c4; --glow:#7fb5a6;
  --mono:"Iowan Old Style","Georgia",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono); line-height:1.55;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(16,20,24,.03) 31px 32px);
}
#field{position:fixed; inset:0; width:100%; height:100%; z-index:-1; opacity:.55}
.top{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 6vw; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(6px); z-index:5;
}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:.02em}
.brand .mark{width:1.05rem; height:1.05rem; border:2px solid var(--accent); border-radius:50%; position:relative}
.brand .mark::after{content:""; position:absolute; inset:2px; border-left:2px solid var(--accent); transform:rotate(38deg)}
.top nav a{margin-left:1.2rem; text-decoration:none; color:var(--ink); opacity:.75}
.top nav a:hover,.top nav a[aria-current]{opacity:1; box-shadow:inset 0 -2px 0 var(--accent)}
main{max-width:56rem; margin:0 auto; padding:2.5rem 6vw 4rem}
.hero h1{font-size:clamp(2rem,5.4vw,3.4rem); line-height:1.08; margin:.6rem 0 1rem}
.hero em{color:var(--accent); font-style:normal}
.lead{font-size:1.12rem; max-width:34rem}
.note{font-size:.9rem; opacity:.7}
.feed{display:grid; gap:1.1rem; margin:2.6rem 0}
.card{
  border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.3rem;
  background:rgba(255,255,255,.55); transition:transform .25s ease, box-shadow .25s ease;
  animation:rise .5s ease backwards;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 22px -14px rgba(16,20,24,.5)}
.card time{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.55}
.card h2{margin:.25rem 0 .45rem; font-size:1.2rem}
.card h2 a{color:inherit; text-decoration:none; border-bottom:1px dotted var(--accent)}
.card p{margin:.3rem 0}
.tags{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.tags span{font-size:.72rem; border:1px solid var(--line); padding:.1rem .55rem; border-radius:999px; opacity:.7}
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem; margin-top:2rem}
.strip figure{margin:0; border:1px solid var(--line); border-radius:10px; padding:.7rem; background:rgba(255,255,255,.5)}
.strip img{width:100%; display:block; border-radius:6px}
.strip figcaption{font-size:.78rem; opacity:.6; margin-top:.4rem}
footer{border-top:1px solid var(--line); padding:1.4rem 6vw; font-size:.85rem; opacity:.75}
footer a{color:inherit}
.loading{opacity:.55; font-style:italic}
.err{border-color:#b3552e; color:#7c3a1c}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}
.page h1{font-size:1.8rem} .page article{margin:1.6rem 0 2.4rem}
table.log{border-collapse:collapse; width:100%; font-size:.92rem}
table.log th,table.log td{border-bottom:1px solid var(--line); padding:.4rem .6rem; text-align:left}