/* The blog's design, shared by the list/reader SPA (blog/index.html) and by
   every generated post page (blog/<slug>/index.html). One file so a post read
   from its own URL cannot look different from the same post read in the SPA. */
/* The blog wears the same design as the rest of the site (option 4's palette
   and type). The prose rules below are the ONLY place the post's own HTML is
   styled, and that HTML is produced by lib/blog.ts, so the editor's preview and
   this page render the same blocks the same way.

   Contrast (WCAG 2.2 AA): ink #232228 on paper #EFEDE6 = 13.4:1;
   muted #55525E on paper = 6.4:1; navy #1F1D3A on paper = 12.7:1. */
:root{
  --bg:#EFEDE6;--ink:#232228;--navy:#1F1D3A;--muted:#55525E;
  --line:rgba(35,34,40,.18);--pill:#171618;
  --sans:"Archivo","Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased;
  /* An empty blog is a short page; without this the footer floats mid-screen. */
  min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.hand{font-family:var(--hand);font-weight:700;color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:40}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.top a.home{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:-.02em}
.top .mk{width:26px;height:auto;aspect-ratio:394/573}
.lang-btn{background:transparent;border:2px solid var(--ink);color:var(--ink);font-family:var(--sans);
  font-weight:800;font-size:.78rem;letter-spacing:.1em;padding:6px 11px;border-radius:999px;cursor:pointer}
.lang-btn:hover{background:var(--ink);color:var(--bg)}

.btn{display:inline-block;background:var(--pill);color:#fff;text-decoration:none;border:2px solid var(--pill);
  font-family:var(--sans);font-weight:800;font-size:.95rem;cursor:pointer;padding:12px 22px;border-radius:999px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--pill);color:#fff}
.btn.sm{font-size:.85rem;padding:9px 16px}

.head{padding:clamp(40px,8vh,90px) 0 clamp(20px,3vh,36px)}
.head h1{font-weight:900;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-.03em;line-height:1}
.head p{margin-top:14px;max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem)}

.tags-row{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:clamp(24px,4vh,44px)}
.tag{border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.85rem;
  background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.tag.on{background:var(--ink);color:var(--bg)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);padding-bottom:clamp(48px,8vh,110px)}
.card{border:2px solid var(--ink);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s ease}
.card:hover{transform:translateY(-3px)}
.card figure{overflow:hidden;aspect-ratio:16/10;border-bottom:2px solid var(--ink);background:var(--ink)}
.card figure img{width:100%;height:100%;object-fit:cover}
.card .body{padding:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;gap:9px;flex:1}
.card .meta{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h2{font-weight:900;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.02em;line-height:1.15}
.card p{font-size:.96rem;color:var(--muted)}
.card .tg{margin-top:auto;padding-top:6px;font-size:.76rem;font-weight:800;color:var(--navy)}

.empty{padding:clamp(48px,10vh,120px) 0;text-align:center;color:var(--muted);font-weight:700}

/* ---------- one post ---------- */
.post{display:none;padding:clamp(28px,5vh,60px) 0 clamp(56px,9vh,120px)}
.post.on{display:block}
.list.off{display:none}
.post .back{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;color:var(--muted);margin-bottom:clamp(20px,3vh,36px)}
.post .back:hover{color:var(--ink)}
.post .cover{width:100%;max-height:440px;object-fit:cover;border:2px solid var(--ink);margin-bottom:clamp(20px,3vh,36px)}
.post h1{font-weight:900;font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.03em;line-height:1.03;max-width:20ch}
.post .meta{margin-top:14px;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post .tg{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.prose{max-width:66ch;margin-top:clamp(28px,4vh,48px);font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.75}
.prose > * + *{margin-top:1.1em}
.prose h1,.prose h2,.prose h3{font-weight:900;letter-spacing:-.025em;line-height:1.15;margin-top:1.7em}
.prose h1{font-size:1.9em}.prose h2{font-size:1.5em}.prose h3{font-size:1.2em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:3px solid var(--navy);padding-left:20px;font-size:1.15em;line-height:1.5}
.prose blockquote cite{display:block;margin-top:10px;font-family:var(--hand);font-style:normal;font-size:1.1em;color:var(--navy)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgba(35,34,40,.07);padding:2px 6px}
/* Wrap rather than scroll: a code block that runs off a phone screen hides its
   own first words, which is what a one-line tip did here. */
.prose pre{background:rgba(35,34,40,.07);padding:18px;border:1px solid var(--line);
  white-space:pre-wrap;overflow-wrap:anywhere}
.prose pre code{background:transparent;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.prose figure img{width:100%;height:auto;border:2px solid var(--ink)}
.prose figcaption{margin-top:8px;font-size:.88em;color:var(--muted);text-align:center}
.prose .embed-frame{position:relative;aspect-ratio:16/9;background:#000;border:2px solid var(--ink)}
.prose .embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose video{width:100%;height:auto;border:2px solid var(--ink);background:#000}
.prose .callout{display:flex;gap:14px;border:2px solid var(--ink);padding:18px 20px;background:rgba(31,29,58,.05)}
.prose .callout p{margin:0}
.prose .callout-emoji{font-size:1.3em;line-height:1.3}

/* the poll */
.post-poll{border:2px solid var(--ink);padding:20px}
.post-poll .poll-q{font-weight:900;font-size:1.05em;letter-spacing:-.02em;margin:0 0 14px}
.poll-options{list-style:none;padding:0;display:grid;gap:10px}
.poll-options li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;position:relative}
.poll-opt{font-family:var(--sans);font-weight:800;font-size:.95rem;text-align:left;background:transparent;
  border:2px solid var(--ink);color:var(--ink);padding:11px 14px;cursor:pointer;width:100%}
.poll-opt:hover{background:var(--ink);color:var(--bg)}
.post-poll.voted .poll-opt{cursor:default}
.post-poll.voted .poll-opt:hover{background:transparent;color:var(--ink)}
.post-poll.voted .poll-opt.chose{background:var(--navy);color:var(--bg);border-color:var(--navy)}
.poll-bar{display:none;position:absolute;left:0;bottom:-5px;height:3px;width:100%;background:var(--line)}
.post-poll.voted .poll-bar{display:block}
.poll-bar i{display:block;height:100%;width:0;background:var(--navy);transition:width .5s ease}
.poll-pct{font-weight:800;font-size:.85rem;color:var(--muted);min-width:3.4em;text-align:right;visibility:hidden}
.post-poll.voted .poll-pct{visibility:visible}
.poll-total{margin:12px 0 0;font-size:.82rem;color:var(--muted);font-weight:700}

/* share */
.share{margin-top:clamp(32px,5vh,56px);border-top:1px solid var(--line);padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share .lbl{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:6px}
/* The real marks, not their names. A row of word-pills read as five buttons of
   unequal width; the brands are recognised faster than they are read. */
.sh{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:2px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);
  cursor:pointer;padding:0;transition:background .2s ease,color .2s ease,transform .2s ease}
.sh svg{width:19px;height:19px}
.sh:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.sh:active{transform:translateY(0) scale(.94)}
.share-copied{font-weight:800;font-size:.85rem;color:var(--navy);display:none}
.share.copied .share-copied{display:inline}

.more{margin-top:clamp(40px,7vh,90px);border-top:1px solid var(--line);padding-top:clamp(24px,4vh,40px)}
.more h2{font-weight:900;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;margin-bottom:20px}

footer{background:var(--ink);color:var(--bg);padding:26px 0;margin-top:auto}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer p{font-size:.85rem;font-weight:700;color:rgba(239,237,230,.85)}
footer .pw{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.8rem;font-weight:700;color:rgba(239,237,230,.85)}
footer .pw img{height:12px;width:auto}

/* Cards arrive in sequence. No observer: the list is rendered in one go, so a
   plain staggered transition on mount is enough and cannot get stuck. */
.card{opacity:0;transform:translateY(18px);animation:rise .6s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{to{opacity:1;transform:none}}
.head h1,.head p{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.16,1,.3,1) both}
.head p{animation-delay:.1s}
.prose > *{opacity:0;transform:translateY(12px);animation:rise .55s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .card,.head h1,.head p,.prose > *{animation:none;opacity:1;transform:none}
}

@media (max-width:960px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .card,.poll-bar i{transition:none} }