:root { --ink:#1a1a1a; --muted:#767676; --line:#e6e6e6; --code:#f6f6f4; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:#fff; color:var(--ink); font-size:19px; line-height:1.7;
  font-family:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:660px; margin:0 auto; padding:40px 24px 80px; }

/* top bar: Home | search | Updates */
.bar { display:grid; grid-template-columns:1fr minmax(0,240px) 1fr; align-items:center; gap:16px;
  padding-bottom:20px; border-bottom:1px solid var(--line); }
.home { justify-self:start; font-size:17px; }
.title { justify-self:end; font-size:20px; font-weight:700; text-align:right; }
.home:hover { text-decoration:underline; }
.search { margin:0; }
#q { width:100%; padding:6px 12px; font-family:inherit; font-style:italic; font-size:16px; line-height:1.5;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; text-align:center; }
#q:focus-visible, .home:focus-visible, .title:focus-visible, .post:focus-visible, .name:focus-visible,
.try:focus-visible, .back:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.lede { margin:48px 0 8px; color:var(--muted); font-style:italic; font-size:18px; }

/* sections */
h2.section { font-size:26px; margin:40px 0 4px; }

/* list rows */
ul.list { list-style:none; margin:0 0 8px; padding:0; border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:8.5rem 1fr auto; gap:16px; align-items:center; padding:14px 0;
  border-bottom:1px solid var(--line); }
.row .date { color:var(--muted); font-size:16px; font-variant-numeric:oldstyle-nums; }
.name { font-size:21px; line-height:1.4; }
a.name:hover { text-decoration:underline; text-underline-offset:4px; }
.tags { display:block; color:var(--muted); font-size:15px; font-style:italic; }
.try { white-space:nowrap; padding:4px 14px; font-size:15px; line-height:1.5;
  border:1px solid var(--ink); border-radius:999px; }
.try:hover { background:var(--ink); color:#fff; }
.none { color:var(--muted); font-style:italic; padding:14px 0; }

/* detail page */
.back { display:inline-block; margin-top:40px; color:var(--muted); font-size:16px; }
.back:hover, .end a:hover { text-decoration:underline; text-underline-offset:4px; }
.article h1 { font-size:38px; line-height:1.25; margin:16px 0 8px; }
.byline { margin:0 0 32px; color:var(--muted); font-size:16px; font-style:italic; }
.content { font-size:20px; line-height:1.8; }
.content p { margin:0 0 1.2em; }
.content img { display:block; max-width:100%; height:auto; margin:1.6em auto .4em; border:1px solid var(--line); }
.content img + em { display:block; text-align:center; color:var(--muted); font-size:15px; margin-bottom:1.6em; }
.content ul, .content ol { margin:0 0 1.2em; padding-left:1.4em; }
.btns { display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 0; }
.btn { padding:10px 22px; font-size:17px; border-radius:999px; border:1px solid var(--ink); }
.btn.primary { background:var(--ink); color:#fff; }
.btn:hover { opacity:.85; }
.end { margin-top:3em; padding-top:1.2em; border-top:1px solid var(--line); color:var(--muted); font-size:16px; }

@media (max-width:560px) {
  .bar { grid-template-columns:1fr 1fr; }
  .search { grid-column:1 / -1; grid-row:2; }
  .row { grid-template-columns:1fr auto; }
  .row .date { grid-column:1 / -1; }
  .article h1 { font-size:30px; }
  .content { font-size:19px; }
}
/* updates page */
.stamp { margin:0 0 8px; color:var(--muted); font-size:15px; font-style:italic; }
.u-sec { margin:40px 0 0; }
.u-sec h2 { font-size:24px; margin:0 0 10px; }
.u-list { list-style:none; margin:0; padding:0; }
.u-list li { padding:12px 0; border-bottom:1px solid var(--line); }
.u-list .what { font-size:20px; }
.u-list .sub { display:block; color:var(--muted); font-size:16px; font-style:italic; margin-top:2px; }
.u-list .d { color:var(--muted); font-variant-numeric:oldstyle-nums; font-size:16px; margin-right:10px; }
.u-try { font-size:14px; border:1px solid var(--ink); border-radius:999px; padding:2px 12px; margin-left:8px; white-space:nowrap; }
.u-try:hover { background:var(--ink); color:#fff; }