/* The lobby board at /blog/. Written for tools/build-blog.mjs pages.
 * Palette and type come from sk-tokens.css only. No new colour literals,
 * no gradients, no blur: plain sepia stock, soot rules and grain. */
*{box-sizing:border-box}
body{margin:0;background:var(--sk-ink);color:var(--sk-stock);font-family:var(--sk-font-body);line-height:1.55}
a{color:var(--sk-sepia)}
a:hover{color:var(--sk-stock)}
.sk-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sk-sepia);color:var(--sk-ink);padding:10px 14px;font-family:var(--sk-font-mono);font-size:12px}
.sk-skip:focus{left:0;position:fixed}
.sk-nav{position:sticky;top:0;z-index:120;background:var(--sk-ink);border-bottom:var(--sk-border)}
.sk-nav ul{list-style:none;margin:0 auto;padding:0 .5rem;max-width:1040px;display:flex;overflow-x:auto;scrollbar-width:none}
.sk-nav a{display:inline-flex;align-items:center;min-height:44px;padding:12px 14px;font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--sk-soot-2);white-space:nowrap}
.sk-nav a[aria-current="page"],.sk-nav a:hover{color:var(--sk-stock)}
.grain{pointer-events:none;position:fixed;inset:0;z-index:50;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.wrap{max-width:720px;margin:0 auto;padding:1.5rem 1.15rem 3.5rem}
.eyebrow{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-sepia);margin:0}
h1{font-family:var(--sk-font-display);font-weight:600;font-size:clamp(1.7rem,5vw,2.4rem);margin:.4rem 0 .75rem;letter-spacing:-.02em;line-height:1.15}
h1 em{font-style:italic;color:var(--sk-sepia)}
h2{font-family:var(--sk-font-display);font-weight:500;font-size:1.25rem;margin:2rem 0 .65rem;color:var(--sk-sepia)}
.lede{font-size:1.1rem;max-width:40rem;margin:0 0 1.25rem;color:var(--sk-stock)}
.crumbs{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-soot-2);margin-bottom:1rem}
.crumbs a{color:var(--sk-soot-2);text-decoration:none}
.crumbs a:hover{color:var(--sk-sepia)}
.intertitle{border:var(--sk-border);outline:1px solid var(--sk-ink-2);outline-offset:4px;padding:1.25rem 1.35rem;margin:1.5rem 0;background:var(--sk-ink-2)}
.intertitle p{margin:0 0 .9rem;font-size:1.08rem}
.intertitle p:last-child{margin-bottom:0}
.stamp{font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.06em;color:var(--sk-soot-2);margin:.25rem 0 0}
.reel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;margin:1rem 0 .5rem;padding:0;list-style:none}
.reel li{margin:0;border:var(--sk-border);background:var(--sk-ink);padding:6px}
.reel img,.reel video{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:var(--sk-ink)}
.reel.wide{grid-template-columns:1fr}
.note{font-size:.9rem;color:var(--sk-soot-2);border-left:2px solid var(--sk-soot);padding-left:.85rem;margin:1rem 0}
.cta-row{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0;padding:0;list-style:none}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--sk-sepia);border-radius:var(--sk-radius);text-decoration:none;font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-sepia)}
.cta:hover{background:var(--sk-sepia);color:var(--sk-ink)}
.cta.muted{border-color:var(--sk-soot);color:var(--sk-soot-2)}
.board{list-style:none;margin:1.25rem 0;padding:0;display:grid;gap:.85rem}
.board-item{display:block;border:var(--sk-border);padding:1rem;text-decoration:none;color:inherit;background:var(--sk-ink-2);min-height:44px}
.board-item:hover{border-color:var(--sk-sepia)}
.board-item .ey{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-sepia);margin:0 0 .35rem}
.board-item h3{font-family:var(--sk-font-display);font-weight:500;margin:0 0 .35rem;font-size:1.08rem}
.board-item p{margin:0;color:var(--sk-soot-2);font-size:.92rem}
.month{font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-soot-2);border-bottom:var(--sk-border);padding-bottom:.35rem;margin:2rem 0 .5rem}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:2.5rem;padding-top:1rem;border-top:var(--sk-border);font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.foot-nav a{color:var(--sk-soot-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.disc{font-size:.85rem;color:var(--sk-soot-2);margin-top:1.5rem}
.sk-contract-subfoot{border-top:var(--sk-border);margin-top:2.5rem;padding:1.25rem 1rem 1.75rem;text-align:center;background:var(--sk-ink);font-family:var(--sk-font-mono)}
.sk-contract-subfoot .sk-contract-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sk-soot-2);margin:0 0 .45rem}
.sk-contract-subfoot .sk-contract-mint{font-size:11px;letter-spacing:.04em;color:var(--sk-stock);margin:0 0 .55rem;word-break:break-all}
.sk-contract-subfoot .sk-contract-mint code{font-family:inherit;background:transparent;color:inherit}
.sk-contract-subfoot .sk-contract-links{font-size:10px;letter-spacing:.08em;margin:0;color:var(--sk-soot-2)}
.sk-contract-subfoot a{color:var(--sk-sepia);text-decoration:none;border-bottom:1px solid var(--sk-soot)}
/* Sprocket rails, CSS only: the house pages print them as .sprockets divs
 * filled by script; the blog has no script, so the holes are a masked soot
 * strip on the reel edges. Same 56px rail and 14x20 hole as /about/ on
 * desktop, 22px rail and 8x12 hole at 820 and under. */
.wrap{position:relative;padding-left:56px;padding-right:56px}
.wrap::before,.wrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;background:var(--sk-soot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='104'%3E%3Crect x='21.5' y='42.5' width='13' height='19' rx='4' fill='none' stroke='%23000'/%3E%3C/svg%3E") repeat-y center top/56px 104px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='104'%3E%3Crect x='21.5' y='42.5' width='13' height='19' rx='4' fill='none' stroke='%23000'/%3E%3C/svg%3E") repeat-y center top/56px 104px}
.wrap::before{left:0}
.wrap::after{right:0}
@media (max-width:820px){
  .wrap{padding-left:calc(22px + clamp(12px,3.5vw,22px));padding-right:calc(22px + clamp(12px,3.5vw,22px))}
  .wrap::before,.wrap::after{width:22px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='190'%3E%3Crect x='7.5' y='89.5' width='7' height='11' rx='2' fill='none' stroke='%23000'/%3E%3C/svg%3E") repeat-y center top/22px 190px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='190'%3E%3Crect x='7.5' y='89.5' width='7' height='11' rx='2' fill='none' stroke='%23000'/%3E%3C/svg%3E") repeat-y center top/22px 190px}
}
/* The blog nav carries eight links; at the house 1040 cap the last one is
 * clipped behind the scroller on desktop. Give it room where room exists. */
@media (min-width:1180px){.sk-nav ul{max-width:1160px}}
/* sk-touch-44 pads every /play/ link like a button; inside a title card it
 * reads as a stray indent. Keep the 44px height, drop the side inset. */
.intertitle a[href*="/play/"]{padding-left:0;padding-right:0}
/* Long unbroken strings in post text (old twitter.com links, hashtags) must
 * wrap inside a 390px phone instead of pushing the page sideways. */
.intertitle,.intertitle p,.intertitle a,.board-item h3,.board-item p,h1,.pager a,.stamp{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.wrap{min-width:0;max-width:min(720px,100%)}