@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/literata-latin.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/literata-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/public-sans-latin.woff2") format("woff2")}

:root{
  --board:#ece8df; --card:#fdfdfb; --ink:#2f352f; --muted:#4f574f; --accent:#37764a; --pin:#37764a;
  --shadow:0 1px 2px rgba(40,35,20,.10),0 4px 14px rgba(40,35,20,.08);
  --gap:24px;
  --row:min(290px, 20.5vw);  /* the height a row aims for; rows stretch to fill the width */
}
@media (prefers-color-scheme: dark){
  :root{
    --board:#191c1a; --card:#242925; --ink:#e3e8e3; --muted:#b4bdb4; --accent:#8cc49c; --pin:#8cc49c;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--board);color:var(--ink);
  font:16px/1.5 "Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.top{max-width:1360px;margin:0 auto;padding:28px 16px 8px;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:6px 24px}
.top h1{margin:0;font:600 1.75rem/1.2 "Literata",Georgia,serif}
.top h1 a{color:var(--ink)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.95rem}

/* Justified rows: each pin grows in proportion to its figure's width-to-height ratio (--r),
   so every figure in a row has the same height. */
.board{max-width:1360px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-wrap:wrap;gap:var(--gap)}
.pin{position:relative;flex:var(--r) 1 calc(var(--r) * var(--row));min-width:0;display:flex;flex-direction:column;padding-top:12px;
  background:var(--card);border-radius:6px;box-shadow:var(--shadow)}
.pin::before{content:"";position:absolute;z-index:1;top:-5px;left:50%;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:var(--pin);box-shadow:0 1px 2px rgba(0,0,0,.35),inset -2px -2px 0 rgba(0,0,0,.18)}
.media{display:block;background:#fff}
.media img{display:block;width:100%;height:auto}
.words{padding:12px 18px 14px;display:flex;flex-direction:column;flex:1}
.meta{margin:0 0 4px;font-size:.8rem;color:var(--muted)}
.kind{font-weight:600;color:var(--accent)}
.pin h2{margin:0 0 6px;font:600 1.12rem/1.3 "Literata",Georgia,serif}
.text{margin:0 0 8px;font-size:.92rem}
.links{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9rem;font-weight:600}
.credit{margin:6px 0 0;font-size:.82rem;color:var(--muted)}
.nowrap{white-space:nowrap}
.pin-call{border-top:4px solid var(--accent)}

@media (max-width:640px){
  .board{--gap:20px}
  .pin{flex-basis:100%}
  .media img{max-height:440px;object-fit:contain}
  .top{padding-top:20px}
  .top h1{font-size:1.5rem}
}