/* appaday — one stylesheet, no dependencies, no webfonts.
   Design: "Klar". Keep it under a screenful. */

:root{
  color-scheme: light dark;
  --paper:#fcfcfc; --ink:#16161a; --dim:#6b6b74; --rule:#e7e7ea;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#101012; --ink:#e9e9ec; --dim:#8a8a93; --rule:#232327; }
}
*{ box-sizing:border-box }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 clamp(15px,.5vw + 14px,16.5px)/1.6 ui-sans-serif, system-ui, -apple-system,
       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.col{ width:min(38rem, 100% - 2.5rem); margin-inline:auto; padding:clamp(3rem,8vh,6rem) 0 8rem }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ text-decoration-color:var(--dim) }

/* index */
header h1{ font-size:1rem; font-weight:600; letter-spacing:-.01em; margin:0 }
header p.who{ color:var(--dim); margin:.1rem 0 1.4rem }
header p.what{ margin:0; text-wrap:pretty; max-width:32rem }
header p.what span{ color:var(--dim) }

h2.year{ font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
         color:var(--dim); margin:3.4rem 0 .9rem }
ol.days{ list-style:none; margin:0; padding:0 }
ol.days a{ display:grid; grid-template-columns:4.2rem 1fr; gap:1.2rem; align-items:baseline;
           padding:.62rem 0; text-decoration:none }
ol.days time{ color:var(--dim); font-size:.85rem; font-variant-numeric:tabular-nums }
ol.days .t{ font-weight:500; text-wrap:balance }
ol.days a:hover .t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
ol.days a:hover time{ color:var(--ink) }

footer{ margin-top:3.6rem; padding-top:1.2rem; border-top:1px solid var(--rule);
        color:var(--dim); font-size:.85rem }
footer a{ color:var(--dim) }

/* entry */
.back{ display:inline-block; color:var(--dim); font-size:.85rem; text-decoration:none; margin-bottom:2.6rem }
.back:hover{ color:var(--ink) }
article h1{ font-size:1.06rem; font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance }
article > time{ display:block; color:var(--dim); font-size:.85rem; margin:.15rem 0 1.9rem }
article p{ margin:0 0 1.15rem; text-wrap:pretty }
article h2{ font-size:.95rem; font-weight:600; margin:2.2rem 0 .8rem }
article figure{ margin:1.9rem 0 }
article img{ width:100%; display:block; border:1px solid var(--rule); border-radius:2px }
article figcaption{ color:var(--dim); font-size:.85rem; margin-top:.5rem }
article ul{ margin:0 0 1.15rem; padding-left:1.1rem }
article li{ margin-bottom:.4rem }

dl.specs{ margin:0 0 1.15rem; display:grid; grid-template-columns:9rem 1fr; gap:.1rem 1rem }
dl.specs dt{ color:var(--dim); font-size:.9rem }
dl.specs dd{ margin:0; font-variant-numeric:tabular-nums }

.files{ margin-top:2.4rem; padding-top:1.1rem; border-top:1px solid var(--rule) }
.files a{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
          text-decoration:none; font-weight:500 }
.files a span:last-child{ color:var(--dim); font-weight:400; font-size:.85rem; white-space:nowrap }
.files a:hover span:first-child{ text-decoration:underline }