/* The blog — an editorial read, shared by /blog and every post page.
   Post pages are generated (peaberry's crossee-blog.ts) and carry no inline
   style, so this file is the whole look; keep the class names in step with
   that template and with publish.py::write_blog_index(). */

/* A faint milky-coffee ground — browner than the app's crema, never yellow —
   with the darkest ink the palette has. The ruling is the puzzle's own grid,
   46px cells same as #grid td, in a darker pull of the same coffee, kept just
   above invisible so the text stays the sharpest thing on the page. */
body.blog { color: var(--espresso);
            /* lines on top, then the scattered "black squares" (an SVG tile of
               five filled cells per 7×7, so the repeat reads as random), then
               the ground */
            background:
              linear-gradient(rgba(107, 78, 52, .10) 1px, transparent 1px),
              linear-gradient(90deg, rgba(107, 78, 52, .10) 1px, transparent 1px),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='322' height='322'%3E%3Cg fill='%236b4e34' fill-opacity='.10'%3E%3Crect x='46' y='92' width='46' height='46'/%3E%3Crect x='184' y='0' width='46' height='46'/%3E%3Crect x='276' y='138' width='46' height='46'/%3E%3Crect x='92' y='230' width='46' height='46'/%3E%3Crect x='230' y='276' width='46' height='46'/%3E%3C/g%3E%3C/svg%3E"),
              #f4ede6;
            background-size: 46px 46px, 46px 46px, 322px 322px, auto;
            padding: 34px 20px 78px;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page { max-width: 640px; margin: 0 auto; }

/* ---------- masthead ---------- */
.page h1 { font-family: 'Cinzel', Georgia, serif;
           font-size: clamp(1.55rem, 5vw, 2.05rem); font-weight: 700;
           letter-spacing: 1px; line-height: 1.22; margin: 0 0 10px; }
.page .kicker { font-style: italic; color: var(--muted); font-size: .95rem; margin: 0 0 14px; }
/* the thick-thin newspaper rule under the masthead */
.rule { border: 0; height: 6px; margin: 0 0 30px;
        border-top: 2px solid var(--espresso); border-bottom: 1px solid var(--espresso); }

.tags { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font: 600 .68rem/1 'Helvetica Neue', Arial, sans-serif;
       letter-spacing: .14em; text-transform: uppercase; color: var(--caramel);
       border: 1px solid var(--caramel-soft); border-radius: 999px;
       padding: 5px 11px 4px; background: transparent; text-decoration: none; }

/* A lead image is a banner, not a poster: cap and crop, whatever its shape. */
.hero { margin: 0 0 30px; }
.hero img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover;
            border: 1px solid var(--border); border-radius: 6px; }

/* ---------- the prose ---------- */
.page p { font-size: 1.04rem; line-height: 1.85; margin: 0 0 18px; }
/* the lede sits a touch larger, the way a paper opens */
.page .rule + p, .page .hero + p { font-size: 1.13rem; }
.page a { color: var(--caramel); text-decoration: underline;
          text-decoration-thickness: 1px; text-underline-offset: 3px;
          text-decoration-color: var(--caramel-soft); }
.page a:hover { text-decoration-color: var(--caramel); }
.page h2 { font-family: 'Cinzel', Georgia, serif; font-size: 1.02rem; letter-spacing: 2px;
           text-transform: uppercase; margin: 36px 0 14px; padding-bottom: 6px;
           border-bottom: 2px solid var(--caramel); }
.page h3 { font-family: 'Cinzel', Georgia, serif; font-size: .9rem; letter-spacing: 1.5px;
           text-transform: uppercase; margin: 28px 0 10px; }
.page ul, .page ol { line-height: 1.85; padding-left: 24px; margin: 0 0 18px; font-size: 1.04rem; }
.page li { margin: 0 0 8px; }
.page li::marker { color: var(--caramel); }
.page img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; }
.page blockquote { margin: 0 0 18px; padding: 10px 18px;
                   border-left: 3px solid var(--caramel); background: var(--cell);
                   border-radius: 0 6px 6px 0; font-style: italic; }
.page blockquote p:last-child { margin-bottom: 0; }
.page code { font-family: ui-monospace, Menlo, monospace; font-size: .88em;
             background: var(--cell); padding: 1px 5px; border-radius: 4px; }
.page pre { overflow-x: auto; padding: 14px; margin: 0 0 18px;
            background: var(--cell); border: 1px solid var(--border); border-radius: 6px; }
.page pre code { background: none; padding: 0; }
.page hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* ---------- the index ---------- */
.postcard { display: flex; gap: 18px; align-items: flex-start;
            padding: 24px 0; border-bottom: 1px solid var(--foam); }
.postcard:last-child { border-bottom: 0; }
.postcard .thumb { flex: 0 0 96px; }
.postcard .thumb img { display: block; width: 96px; height: 96px; object-fit: cover;
                       border: 1px solid var(--border); border-radius: 6px; }
.postcard .title { display: inline-block; font-family: 'Cinzel', Georgia, serif;
                   font-size: 1.16rem; font-weight: 700; letter-spacing: .5px;
                   line-height: 1.35; color: var(--espresso);
                   text-decoration: none; margin: 0 0 6px; }
.postcard .title:hover { color: var(--caramel); }
.postcard .meta { font-style: italic; color: var(--muted); font-size: .84rem; margin: 0 0 8px; }
.postcard .teaser { font-size: .97rem; line-height: 1.7; margin: 0; }
.empty { font-style: italic; color: var(--muted); }

@media (max-width: 480px) {
  .postcard .thumb { flex-basis: 72px; }
  .postcard .thumb img { width: 72px; height: 72px; }
}

/* ---------- the foot ---------- */
.foot { margin-top: 44px; border-top: 2px solid var(--espresso); padding-top: 16px;
        font-size: .85rem; color: var(--caramel); }
.foot a { color: inherit; }