fix(theme): responsive figure bleed and overflow guards (#8)

Eliminates horizontal scroll at sub-1280px desktop widths and stops
figure bleed from colliding with the post-meta-rail. Tokenizes
gutter/bleed into CSS variables, lets the grid 1fr column actually
shrink, and clips body overflow with `clip` (preserves sticky rails).

- Add --gutter, --bleed-x, --bleed-x-small tokens
- min-width: 0 on grid items so embeds/iframes/pre stop flooring the track
- Tapered figure bleed: 0 / -16px / -32px at 880 / 1199 / 1200+ — 4px
  buffer to both rails at every desktop breakpoint
- max-width: 100% guard on .post-body img/video/iframe/embeds/twitter
- html, body { overflow-x: clip } safety net
- Merge duplicate @media (max-width: 1100px) blocks
- Drop redundant masthead horizontal padding and unused .util-btn
  border-radius: 0

Author: jack-arturo

assets/css/custom.css

@@ -5,6 +5,10 @@
 
 /* Legacy container/header/nav/theme-toggle/site-main removed — newspaper masthead + .util-btn handle it. */
 
+/* Safety net for intentional figure bleeds — `clip` (not `hidden`) preserves
+   position: sticky on the post-meta-rail and toc-rail. */
+html, body { overflow-x: clip; }
+
 /* Minimal entry-content guards retained for Gutenberg-rendered prose. */
 .entry-content { max-width: 100%; word-wrap: break-word; }
 .entry-content > *:first-child { margin-top: 0; }
@@ -491,7 +495,7 @@ pre code {
 }
 
 .serif { font-family: "Fraunces", serif; font-feature-settings: "ss01"; }
-.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
 .site-main { padding: 0; min-height: 60vh; }
 
 .ticker {
@@ -511,7 +515,7 @@ pre code {
 .ticker-track .dot { color: var(--hot); margin: 0 0.6em; }
 @keyframes ticker-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }
 
-.masthead { border-bottom: 2px solid var(--rule); padding: 28px 32px 18px; position: relative; }
+.masthead { border-bottom: 2px solid var(--rule); padding-top: 28px; padding-bottom: 18px; position: relative; }
 .mast-row { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 32px; }
 .brand { display: flex; align-items: baseline; gap: 14px; }
 .brand-logo {
@@ -540,7 +544,6 @@ pre code {
 .util-btn {
   background: transparent;
   border: 1.5px solid var(--rule);
-  border-radius: 0;
   color: var(--ink);
   padding: 8px 12px;
   font-family: inherit;
@@ -585,7 +588,8 @@ pre code {
 .nav-status { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
 .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bleed); display: inline-block; }
 
-.layout { display: grid; grid-template-columns: 220px 1fr 240px; gap: 36px; padding: 36px 32px 80px; }
+.layout { display: grid; grid-template-columns: 220px 1fr 240px; gap: 36px; padding: 36px var(--gutter) 80px; }
+.layout > * { min-width: 0; }
 .main { min-width: 0; }
 .rail { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); }
 .rail-block { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--rule); }
@@ -645,7 +649,23 @@ pre code {
 .stamp { border: 2px solid var(--bleed); color: var(--bleed); padding: 12px 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-2deg); text-align: center; font-weight: 600; line-height: 1.3; }
 .stamp .big { display: block; font-size: 22px; font-family: "Fraunces", serif; font-weight: 900; letter-spacing: -0.02em; margin: 4px 0; }
 
-.single.wrap { display: grid; grid-template-columns: 220px 1fr 240px; gap: 36px; padding: 36px 32px 100px; }
+.single.wrap { display: grid; grid-template-columns: 220px 1fr 240px; gap: 36px; padding: 36px var(--gutter) 100px; }
+/* Grid items default to min-width: auto, which floors the 1fr track at
+   min-content. Embeds, wide images, and unwrappable <pre> blocks push that
+   floor past the viewport — overriding here lets the column actually shrink. */
+.single.wrap > *,
+.single-post,
+.post-body,
+.post-meta-rail,
+.toc-rail { min-width: 0; }
+.post-body img,
+.post-body video,
+.post-body iframe,
+.post-body .wp-block-embed,
+.post-body .wp-block-embed__wrapper,
+.post-body blockquote.twitter-tweet,
+.about-author { max-width: 100%; }
+.about-meta { min-width: 0; }
 .post-meta-rail, .toc-rail { font-family: "JetBrains Mono", monospace; font-size: 11px; position: sticky; top: 24px; align-self: start; }
 .post-back { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; display: inline-block; margin-bottom: 24px; }
 .post-back:hover { color: var(--bleed); }
@@ -711,11 +731,16 @@ pre code {
 /* Code blocks — consistent vertical spacing regardless of Gutenberg wrapper. */
 .post-body pre { margin: 1.6em 0; }
 
-/* Figure bleed only when side rails are present (≥920px). Below that, keep
-   figures inside the prose column so they don't overhang the page padding. */
+/* Figure bleed tapers with available space:
+   – ≤880px: in column (no bleed)
+   – 881–1199px: gentle bleed into the rail gap
+   – ≥1200px: full editorial bleed */
 .post-body figure { margin: 1.8em 0; font-family: "JetBrains Mono", monospace; }
-@media (min-width: 920px) {
-  .post-body figure { margin: 2.2em -40px; }
+@media (min-width: 881px) {
+  .post-body figure { margin: 2.0em calc(-1 * var(--bleed-x-small)); }
+}
+@media (min-width: 1200px) {
+  .post-body figure { margin: 2.2em calc(-1 * var(--bleed-x)); }
 }
 .post-body figure img, .post-body p > img, .entry-featured-image img { display: block; max-width: 100%; width: 100%; height: auto; border: 1.5px solid var(--rule); border-radius: 0; background: var(--paper-dark); }
 
@@ -939,15 +964,12 @@ pre code {
   .lede-title { font-size: 40px; }
   .post-headline { font-size: 44px; }
   .footer-grid { grid-template-columns: 1fr 1fr; }
-}
-
-@media (max-width: 1100px) {
   .archive-title { font-size: 38px; }
   .proj-grid { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 760px) {
-  .wrap, .masthead, .layout, .single.wrap { padding-left: 16px; padding-right: 16px; }
+  :root { --gutter: 16px; }
   .ticker { font-size: 10px; }
   .masthead { padding-top: 18px; padding-bottom: 14px; }
   .mast-row { display: block; }
@@ -968,7 +990,6 @@ pre code {
   .month-rule .ruling, .month-rule .rhs { display: none; }
   .post-headline { font-size: 40px; }
   .post-body { font-size: 18px; }
-  .post-body figure { margin-left: 0; margin-right: 0; }
   .about-author { grid-template-columns: 1fr; }
   .footer-grid { grid-template-columns: 1fr; }
   .footer-foot { display: block; }

style.css

@@ -78,6 +78,9 @@ Tags: blog, minimal, dark-mode, code, technical
   /* Layout */
   --max-width: 1280px;
   --max-width-prose: 700px;
+  --gutter: 32px;        /* horizontal page gutter, overridden at narrow widths */
+  --bleed-x: 32px;       /* figure bleed at ≥1200px (fits inside 36px rail gap) */
+  --bleed-x-small: 16px; /* figure bleed 881–1199px */
 
   /* Spacing */
   --spacing-xs: 0.5rem;