/* Blog.
   Kept deliberately close to regulations.css so the two research surfaces of
   the site read as one thing, and narrow enough to stay readable on a phone,
   which is where a fair number of these get opened. */

/* ⚠️ NO @import HERE, DELIBERATELY. The first version imported regulations.css,
   which cost a serialised second request (the browser cannot discover an
   imported sheet until the importing one has downloaded) in exchange for
   nothing: every class this page uses is defined below, and the colour
   variables come from style.css, which is already linked. */

/* ★ Measure: 46rem is ~736px, sitting with the 760px the guide pages use
   rather than the 900px of the regulations tables. Those pages are scanned;
   this one is read. */
.post-wrap{max-width:46rem;margin:0 auto;padding:1.6rem 1.1rem 4.5rem}
.post-crumb{font-size:.8rem;color:var(--brown-600,#6B4F3A);margin-bottom:1.4rem}
.post-crumb a{color:var(--amber-700,#9c6f26);text-decoration:none}
.post-crumb a:hover{text-decoration:underline}

/* ── Post ─────────────────────────────────────────────────────────────────── */
.post-head{margin-bottom:2rem}
.post h1,.post-wrap>h1{font-family:"Playfair Display",Georgia,serif;font-size:2.2rem;line-height:1.16;margin:0 0 .7rem;letter-spacing:-.01em}

/* ⚠️ SPECIFICITY BUG, FIXED. `.post p` is (0,1,1) and `.post-meta` was (0,1,0),
   so the body-copy rule won and the date line rendered at 1.05rem/1.75 like a
   paragraph, directly under the headline. Same for the call to action. Any
   `p` inside `.post` that carries its own class has to out-specify `.post p`,
   so these are matched as `.post p.<class>`. */
.post p.post-meta{font-size:.82rem;line-height:1.5;color:var(--brown-600,#6B4F3A);margin:0}
.post-tag{display:inline-block;background:#F3EADB;border-radius:999px;padding:.1rem .55rem;font-size:.72rem;margin-right:.15rem}

.post p{font-size:1.06rem;line-height:1.75;margin:0 0 1.2rem}
.post h2{font-family:"Playfair Display",Georgia,serif;font-size:1.55rem;line-height:1.25;margin:2.6rem 0 .9rem}
.post h3{font-size:1.12rem;margin:1.9rem 0 .6rem}
.post ul,.post ol{font-size:1.06rem;line-height:1.75;padding-left:1.35rem;margin:0 0 1.2rem}
.post li{margin-bottom:.45rem}
.post a{color:var(--amber-700,#9c6f26)}
/* ⚠️ THIRD TIME THIS EXACT SPECIFICITY BUG HAS BITTEN TODAY. `.post a` is
   (0,1,1) and `.btn-primary` is (0,1,0), so the prose link colour repainted the
   button label amber ON an amber background: an unreadable button, and one that
   still technically passed every check that looks for missing styles rather
   than losing ones. Anything inside `.post` that carries its own class has to
   out-specify the element rules around it. */
.post a.btn-primary{color:#fff}
.post a.btn-primary:hover{color:#fff}
.post strong{font-weight:700}
.post code{background:#F3EADB;border-radius:4px;padding:.08rem .3rem;font-size:.92em}
.post hr{border:0;border-top:1px solid #E5D9C3;margin:2.4rem 0}

/* Quoting the statute verbatim IS the argument in these posts, so it gets real
   weight rather than a grey aside. */
.post blockquote{margin:1.6rem 0;padding:1rem 1.2rem;border-left:3px solid var(--amber-700,#9c6f26);background:#FBF6EC;border-radius:0 8px 8px 0}
.post blockquote p{font-size:1rem;line-height:1.65;margin:0 0 .6rem}
.post blockquote p:last-child{margin:0}

.post p.post-cta{margin:2.2rem 0 1.6rem}

/* ⚠️ Wide tables scroll inside their own box. The page body must never scroll
   sideways on a phone. */
.post-table{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.post-table table{border-collapse:collapse;width:100%;font-size:.9rem}
.post-table th,.post-table td{text-align:left;padding:.5rem .65rem;border-bottom:1px solid #E5D9C3;vertical-align:top}
.post-table th{font-weight:700;background:#F3EADB;white-space:nowrap}

.post-back{margin-top:3rem;font-size:.9rem}
.post-back a{color:var(--amber-700,#9c6f26);text-decoration:none}
.post-back a:hover{text-decoration:underline}

/* ── Index ────────────────────────────────────────────────────────────────── */
.post-intro{font-size:1.06rem;line-height:1.7;color:var(--brown-600,#6B4F3A);margin:0 0 2.2rem;max-width:34rem}
.post-list{list-style:none;padding:0;margin:0}
.post-list li{margin-bottom:1rem}
.post-card{display:block;padding:1.2rem 1.3rem;border:1px solid #E5D9C3;border-radius:12px;text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.post-card:hover{border-color:var(--amber-700,#9c6f26);box-shadow:0 3px 12px rgba(0,0,0,.06)}
.post-card time{font-size:.78rem;color:var(--brown-600,#6B4F3A)}
.post-card h2{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;line-height:1.3;margin:.3rem 0 .5rem}
.post-card p{font-size:.95rem;line-height:1.6;margin:0;color:var(--brown-600,#6B4F3A)}


/* Figures. Added for the DCR-2 post, which is the first one with photographs in
   it. Click to enlarge, because macro detail is unreadable at body width. */
.post figure{margin:2rem 0}
.post figure img{width:100%;height:auto;display:block;border-radius:6px;cursor:zoom-in}
.post figcaption{font-size:.875rem;line-height:1.55;color:#5C3D28;margin-top:.6rem;font-style:italic}
/* Gallery members that are not rendered inline. One lead image carries the flow,
   the rest live here and the lightbox picks them up in DOM order. They are lazy
   and display:none, so they cost nothing until someone opens the gallery. */
.gallery-extra{display:none}
.figure-more{display:block;margin-top:.35rem;font-style:normal;font-size:.8rem;color:var(--amber-700,#9c6f26)}
.post-note{border-left:3px solid #C08B30;background:rgba(192,139,48,.07);padding:.9rem 1.1rem;margin:1.6rem 0;font-size:.95rem;line-height:1.6}
/* Gallery lightbox. The markup and script are INJECTED BY scripts/build-blog.cjs
   into any post that contains a figure, so there is no per-post copy to forget
   about. Arrow keys, swipe, and the caption travel with the image. */
#lb{position:fixed;inset:0;background:rgba(20,12,8,.95);display:none;align-items:center;justify-content:center;z-index:999;cursor:zoom-out;padding:1rem}
#lb.on{display:flex}
#lb img{max-width:calc(100% - 6rem);max-height:calc(100% - 6.5rem);object-fit:contain;border-radius:4px;cursor:default}
#lb button{position:absolute;background:none;border:0;color:#E8DDD0;cursor:pointer;line-height:1;font-family:inherit;padding:.3rem .7rem;transition:color .15s}
#lb button:hover{color:#fff}
/* The default focus ring is a hard white rectangle against the dark backdrop and
   it lands on the arrow after every click. Keep the ring, make it deliberate. */
#lb button:focus-visible{outline:2px solid #C08B30;outline-offset:1px;border-radius:6px}
#lb .lb-close{top:.5rem;right:.9rem;font-size:2.1rem}
#lb .lb-prev,#lb .lb-next{top:50%;transform:translateY(-50%);font-size:3rem}
#lb .lb-prev{left:.2rem}
#lb .lb-next{right:.2rem}
#lb.lb-single .lb-prev,#lb.lb-single .lb-next{display:none}
#lb .lb-bar{position:absolute;bottom:0;left:0;right:0;padding:.75rem 1.2rem 1rem;text-align:center;color:#C4B4A0;font-size:.82rem;line-height:1.5;cursor:default;pointer-events:none}
#lb .lb-cap{display:block;max-width:60ch;margin:0 auto;font-style:italic}
#lb .lb-num{display:block;margin-top:.35rem;opacity:.65;font-style:normal}
@media(max-width:640px){
  .post-wrap{padding:1.2rem .95rem 3.5rem}
  .post h1,.post-wrap>h1{font-size:1.72rem}
  .post h2{font-size:1.3rem;margin:2.1rem 0 .7rem}
  .post p,.post ul,.post ol{font-size:1rem}
  .post blockquote{padding:.85rem .95rem}
  #lb img{max-width:calc(100% - 3.4rem)}
  #lb .lb-prev,#lb .lb-next{font-size:2.3rem}
  #lb .lb-bar{font-size:.78rem;padding:.6rem .8rem .85rem}
}

/* Download list on the STL post. Rows rather than bullets, because the file
   name and its size are two columns of the same fact and a bullet in front of
   a filename reads as prose. */
.post-files{list-style:none;margin:1.4rem 0;padding:0;border-top:1px solid rgba(44,24,16,.12)}
.post-files li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem .2rem;border-bottom:1px solid rgba(44,24,16,.12)}
.post-files a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;word-break:break-all}
.post-files span{color:#7a6a5a;font-size:.85rem;white-space:nowrap}