/* ============================================================
   MONOLITH — neo-brutalist design system
   Loaded site-wide by the theme. The Elementor pages put their
   markup in HTML widgets that keep the prototype's inline styles
   for pixel fidelity; the classes below add the responsive
   behaviour the static prototype lacked.
   ============================================================ */

:root{
  --wfx-cream:#f3ede1;
  --wfx-ink:#14110c;
  --wfx-blue:#2b4cff;
  --wfx-red:#ff5a36;
  --wfx-green:#16a06a;
  --wfx-yellow:#ffd23f;
  --wfx-amber:#ffb300;
  --wfx-body:#3a352c;
  --wfx-muted:#6b6557;
}

/* ---- globals ---- */
html, body{ margin:0; background:var(--wfx-cream); }
body{ font-family:'Space Grotesk',sans-serif; color:var(--wfx-ink); }
*::selection{ background:var(--wfx-yellow); color:var(--wfx-ink); }
::placeholder{ color:#9a937f; }

/* Neutralise theme/Elementor wrappers so sections sit edge-to-edge */
.wfx-page .elementor-section,
.wfx-page .elementor-container,
.wfx-page .elementor-column,
.wfx-page .elementor-widget-html,
.wfx-page .elementor-widget-container{ margin:0; padding:0; }
.wfx-page .elementor-widget{ margin-bottom:0 !important; }

/* The centered content rail used by most sections */
.wfx-wrap{ max-width:1120px; margin:0 auto; }

/* ---- responsive grids ---- */
.wfx-grid{ display:grid; }
.wfx-cols-4{ grid-template-columns:repeat(4,1fr); }
.wfx-cols-3{ grid-template-columns:repeat(3,1fr); }
.wfx-cols-2{ grid-template-columns:repeat(2,1fr); }

@media (max-width:900px){
  .wfx-cols-4{ grid-template-columns:repeat(2,1fr); }
  .wfx-cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .wfx-cols-4,
  .wfx-cols-3,
  .wfx-cols-2{ grid-template-columns:1fr; }
  .wfx-split{ grid-template-columns:1fr !important; }
}

/* two-column split layouts (about / contact) collapse on mobile */
@media (max-width:820px){
  .wfx-split{ grid-template-columns:1fr !important; }
}

/* ---- fluid display headings ---- */
.wfx-h1{ font-size:clamp(40px,8vw,72px); }
.wfx-h1-lg{ font-size:clamp(38px,7.5vw,65px); }
.wfx-h2{ font-size:clamp(28px,5vw,40px); }
.wfx-h2-xl{ font-size:clamp(34px,6vw,54px); }

/* ---- mobile padding relief on the wide rails ---- */
@media (max-width:600px){
  .wfx-pad{ padding-left:20px !important; padding-right:20px !important; }
  .wfx-stats{ flex-wrap:wrap; }
  .wfx-stats > span{ flex:1 0 50% !important; border-right:0 !important; }
}

/* ---- nav (theme header) ---- */
.wfx-header{ position:sticky; top:0; z-index:50; background:var(--wfx-cream); border-bottom:3px solid var(--wfx-ink); }
.wfx-header-inner{ max-width:1120px; margin:0 auto; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; }
.wfx-logo{ font-family:'Archivo',sans-serif; font-weight:900; font-size:22px; letter-spacing:-.02em; text-decoration:none; color:var(--wfx-ink); }
.wfx-nav{ display:flex; align-items:center; gap:22px; }
/* When the nav is a WordPress menu (Appearance → Menus) it renders as a <ul>;
   make that <ul> the flex row so it matches the hardcoded fallback exactly. */
.wfx-nav-list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:22px; }
.wfx-nav-list li{ margin:0; }
.wfx-nav a{ text-decoration:none; color:var(--wfx-ink); }
.wfx-nav-link{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.06em; padding-bottom:3px; border-bottom:3px solid transparent; }
.wfx-nav-link.is-active{ border-bottom-color:var(--wfx-blue); }
.wfx-nav-cta{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.04em; background:var(--wfx-blue); color:#fff !important; padding:9px 16px; border:2px solid var(--wfx-ink); box-shadow:3px 3px 0 var(--wfx-ink); }

@media (max-width:600px){
  .wfx-header-inner{ padding:12px 18px; flex-wrap:wrap; gap:10px; }
  .wfx-nav{ gap:14px; }
  .wfx-nav-list{ gap:14px; flex-wrap:wrap; }
}

/* links inside HTML-widget markup that should look like the prototype's spans */
.wfx-a{ text-decoration:none; color:inherit; cursor:pointer; }

/* ============================================================
   RESPONSIVE RETROFIT
   The Elementor pages were built with fixed desktop sizes and no
   tablet/mobile values, so the home page overflowed sideways on
   phones (~429px wide content in a 390px viewport). These rules
   add the missing fluid behaviour. Verified at 390px: every page
   now has scrollWidth == viewport (no horizontal scroll).
   ============================================================ */

/* 1) Stop any sideways scroll from an element overshooting. */
html, body{ overflow-x:hidden; max-width:100%; }
img, svg, video, iframe{ max-width:100%; height:auto; }
*, *::before, *::after{ box-sizing:border-box; }

/* 2) Tablet — ease the wide content rail's side padding. */
@media (max-width:1024px){
  .elementor-widget-html [style*="padding:56px 32px"],
  .elementor-widget-html [style*="padding: 56px 32px"]{
    padding-left:24px !important; padding-right:24px !important;
  }
}

/* 3) Phone (<=767px) — the real fixes. */
@media (max-width:767px){

  /* 3a) Fluid-scale every big display heading so the longest single
         word can never exceed the viewport. Covers Elementor heading
         widgets AND raw h1-h3 inside HTML widgets. */
  .elementor-heading-title,
  .elementor-widget-html h1,
  .elementor-widget-html h2,
  .elementor-widget-html h3{
    font-size:clamp(22px, 8.5vw, 38px) !important;
    line-height:1.06 !important;
    overflow-wrap:break-word; word-break:break-word;
  }

  /* 3b) Relax the heavy letter-spacing on the big stat headings. */
  .elementor-widget-heading .elementor-heading-title{ letter-spacing:.02em !important; }

  /* 3c) Collapse the oversized rail padding. */
  .elementor-widget-html [style*="padding:56px 32px"],
  .elementor-widget-html [style*="padding: 56px 32px"]{ padding:30px 18px !important; }

  /* 3d) Any prototype flex row wraps instead of overflowing. */
  .elementor-widget-html [style*="display:flex"],
  .elementor-widget-html [style*="display: flex"]{ flex-wrap:wrap !important; }

  /* 3e) Elementor inner columns go full width on phones. */
  .elementor-column{ width:100% !important; }

  /* 3f) Long words in body copy break rather than overflow. */
  .elementor-widget-text-editor,
  .elementor-widget-html p{ overflow-wrap:break-word; }

  /* 3g) Header / nav — let it wrap and keep the CTA on-screen. */
  .wfx-header-inner, .wfx-nav, .wfx-nav-list,
  .elementor-nav-menu, .elementor-widget-wrap{ flex-wrap:wrap !important; }
}

/* 4) Header logo/nav: stack cleanly on small phones so the CONTACT
      CTA can never be pushed off the right edge. */
@media (max-width:600px){
  .wfx-header-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   LOGO SLOT — size the uploaded custom-logo in the header + footer.
   (Uploaded via Appearance → Customize → Site Identity → Logo.
   With no logo set, the "MONOLITH" wordmark shows as a fallback.)
   ============================================================ */
.wfx-logo--img{ display:inline-flex; align-items:center; }
.wfx-header .custom-logo-link{ display:inline-flex; }
.wfx-header .custom-logo{ max-height:40px; width:auto; height:auto; display:block; }
.wfx-foot-logo .custom-logo{ max-height:46px; width:auto; height:auto; display:block; }

/* ============================================================
   MOBILE CAROUSEL
   Turns the two long card rows into horizontal swipe carousels on
   phones (they otherwise stack into a very tall column):
     f21e934 = home "FOUR THINGS" feature cards  (4 × col-25)
     54a3b94 = home "RECENT FAVORITES" work cards (6 × col-33)
   These id-scoped selectors out-specify rule 3e above, so instead of
   stacking, the columns line up in a scroll-snapping row. NOTE: if you
   rebuild either section in Elementor its element-id changes — update
   the two ids below to match.
   ============================================================ */
@media (max-width:767px){
  .elementor-element-f21e934 > .elementor-container,
  .elementor-element-54a3b94 > .elementor-container{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding-bottom:14px;
    scrollbar-width:none;               /* Firefox: hide scrollbar */
  }
  .elementor-element-f21e934 > .elementor-container::-webkit-scrollbar,
  .elementor-element-54a3b94 > .elementor-container::-webkit-scrollbar{ display:none; }

  /* Each card takes ~82% width so the next one peeks in (swipe affordance). */
  .elementor-element-f21e934 > .elementor-container > .elementor-column,
  .elementor-element-54a3b94 > .elementor-container > .elementor-column{
    flex:0 0 82% !important;
    width:82% !important;
    max-width:82% !important;
    scroll-snap-align:start;
  }
}

/* ============================================================
   CONTACT FORM 7 — match the theme's hand-built brutalist form.
   Drop a CF7 shortcode into an Elementor *Shortcode* widget on the
   Contact page and it inherits this styling automatically. Values
   mirror the original hardcoded form (white box, 3px ink border,
   8px hard shadow, cream #f3ede1 inputs, Space Mono labels, blue
   submit). Colors use the theme tokens with literal fallbacks.
   ============================================================ */
.wpcf7 .wpcf7-form{
  --cf-ink:   var(--wfx-ink, #14110c);
  --cf-cream: var(--wfx-cream, #f3ede1);
  --cf-blue:  var(--wfx-blue, #2b4cff);
  --cf-green: var(--wfx-green, #16a06a);
  --cf-red:   var(--wfx-red, #ff5a36);

  background:#fff;
  border:3px solid var(--cf-ink);
  box-shadow:8px 8px 0 var(--cf-ink);
  padding:30px;
  box-sizing:border-box;
}
.wpcf7 .wpcf7-form,
.wpcf7 .wpcf7-form *{ box-sizing:border-box; }

/* Field labels (CF7 wraps the input inside a <label>). */
.wpcf7 .wpcf7-form label{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cf-ink);
  margin-bottom:8px;
}

/* Text-like inputs, selects, and textareas. */
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form select,
.wpcf7 .wpcf7-form textarea{
  width:100%;
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  padding:13px 14px;
  border:2px solid var(--cf-ink);
  background:var(--cf-cream);
  color:var(--cf-ink);
  outline:none;
  border-radius:0;
  margin-top:6px;
  margin-bottom:18px;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7 .wpcf7-form textarea{ resize:vertical; min-height:120px; }
.wpcf7 .wpcf7-form input:focus,
.wpcf7 .wpcf7-form select:focus,
.wpcf7 .wpcf7-form textarea:focus{
  box-shadow:3px 3px 0 var(--cf-ink);
}
.wpcf7 .wpcf7-form ::placeholder{ color:#8a8578; opacity:1; }

/* Submit button — blue box with the hard-shadow "pop" on hover. */
.wpcf7 .wpcf7-form input[type="submit"],
.wpcf7 .wpcf7-form button[type="submit"],
.wpcf7 .wpcf7-form .wpcf7-submit{
  cursor:pointer;
  display:block;
  width:100%;
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:16px;
  padding:15px;
  color:#fff;
  background:var(--cf-blue);
  border:2px solid var(--cf-ink);
  box-shadow:5px 5px 0 var(--cf-ink);
  border-radius:0;
  transition:transform .1s ease, box-shadow .1s ease;
}
.wpcf7 .wpcf7-form input[type="submit"]:hover,
.wpcf7 .wpcf7-form button[type="submit"]:hover,
.wpcf7 .wpcf7-form .wpcf7-submit:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--cf-ink);
}

/* The AJAX spinner CF7 shows while sending. */
.wpcf7 .wpcf7-spinner{ margin:14px auto 0; }

/* Validation + status messages, restyled as brutalist notices. */
.wpcf7 .wpcf7-response-output{
  font-family:'Space Mono',monospace;
  font-size:13px;
  line-height:1.4;
  margin:18px 0 0 !important;
  padding:14px 16px !important;
  border:3px solid var(--cf-ink) !important;
  box-shadow:4px 4px 0 var(--cf-ink);
  border-radius:0;
  color:var(--cf-ink);
  background:var(--cf-cream);
}
.wpcf7 form.sent .wpcf7-response-output{ background:var(--cf-green); color:#fff; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ background:var(--cf-red); color:#fff; }

/* Per-field "this is required" tip. */
.wpcf7 .wpcf7-not-valid-tip{
  font-family:'Space Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--cf-red);
  margin:-12px 0 14px;
}
.wpcf7 .wpcf7-form .wpcf7-not-valid{ border-color:var(--cf-red); }

/* Tame the hard shadows on phones so they never add sideways scroll. */
@media (max-width:600px){
  .wpcf7 .wpcf7-form{ box-shadow:5px 5px 0 var(--wfx-ink,#14110c); }
}

/* ============================================================
   ANIMATIONS & TRANSITIONS
   ------------------------------------------------------------
   1) Scroll-reveal: top-level sections fade + rise into view.
      The hidden state lives on .wfx-reveal, which is added by JS
      (monolith-anim.js). If JS never runs, nothing is hidden, so the
      page can't go blank. Skipped in the Elementor editor and under
      reduced-motion; a 3s JS safety net reveals any leftovers.
   2) Hover micro-interactions on the brutalist elements.
   3) Sticky-header shadow once scrolled.
   All motion respects prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

  /* --- 1) scroll reveal --- */
  /* SAFETY BY DESIGN: the hidden state lives ONLY on .wfx-reveal, which is
     added by JavaScript. If the JS never runs, no section is ever hidden, so
     the page can't go blank. Also skipped inside the Elementor editor
     (body.elementor-editor-active) so the canvas is never blank while editing. */
  .wfx-page:not(.elementor-editor-active) .wfx-reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .wfx-page .wfx-reveal.is-inview{
    opacity:1;
    transform:none;
  }

  /* --- 2) hover micro-interactions --- */
  .wfx-nav-cta,
  .wfx-logo,
  .wfx-page .elementor-button{
    transition:transform .14s ease, box-shadow .14s ease,
               background-color .14s ease, color .14s ease, border-color .14s ease;
  }

  /* Buttons + CTA: shift up-left and deepen the hard shadow (the brutalist "pop"). */
  .wfx-nav-cta:hover,
  .wfx-page .elementor-button:hover{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 var(--wfx-ink) !important;
  }

  /* Nav links: underline fills in on hover. */
  .wfx-nav-link{ transition:border-color .18s ease, color .18s ease; }
  .wfx-nav-link:hover{ border-bottom-color:var(--wfx-ink); }

  /* Logo: a tiny playful tilt. */
  .wfx-logo:hover{ transform:scale(1.04) rotate(-1.5deg); }

  /* Cards: lift + bigger shadow. box-shadow needs !important because the
     card's base shadow is set inline in the page markup. */
  .wfx-card{ transition:transform .16s ease, box-shadow .16s ease; }
  .wfx-card:hover{
    transform:translate(-4px,-4px);
    box-shadow:10px 10px 0 var(--wfx-ink) !important;
  }

  /* Filter chips: gentle rise. */
  .wfx-chip{ transition:transform .12s ease, box-shadow .12s ease,
             background-color .12s ease, color .12s ease; }
  .wfx-chip:hover{ transform:translateY(-2px); }
}

/* --- 3) sticky-header shadow on scroll (fine even in reduced-motion) --- */
.wfx-header{ transition:box-shadow .2s ease; }
html.wfx-scrolled .wfx-header{ box-shadow:0 5px 0 -1px var(--wfx-ink); }

/* Hard stop for anyone who prefers reduced motion: no reveal offset, no
   transitions/animations anywhere. */
@media (prefers-reduced-motion: reduce){
  .wfx-page .wfx-reveal{ opacity:1 !important; transform:none !important; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   BLOG / POSTS PAGE + SINGLE POST
   Neo-brutalist post cards, pagination, and article typography
   for the WordPress "Posts page", archives, search, and single
   posts (index.php + single.php). Uses the theme tokens.
   ============================================================ */

/* ---- blog page header band ---- */
.wfx-blog-head{ background:var(--wfx-cream); border-bottom:3px solid var(--wfx-ink); padding:56px 0; }
.wfx-blog-head-inner{ max-width:1120px; margin:0 auto; padding:0 32px; box-sizing:border-box; }
.wfx-blog-kicker{ font-family:'Space Mono',monospace; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--wfx-blue); margin:0 0 10px; }
.wfx-blog-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.03em; font-size:clamp(38px,8vw,72px); line-height:.98; margin:0; color:var(--wfx-ink); overflow-wrap:break-word; }

/* ---- post grid ---- */
.wfx-blog-body{ max-width:1120px; margin:0 auto; padding:56px 32px 80px; box-sizing:border-box; }
.wfx-post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.wfx-post-grid, .wfx-post-grid *{ box-sizing:border-box; }
@media (max-width:900px){ .wfx-post-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (max-width:600px){ .wfx-post-grid{ grid-template-columns:1fr; } }

.wfx-post-card{ min-width:0; background:var(--wfx-cream); border:3px solid var(--wfx-ink); box-shadow:6px 6px 0 var(--wfx-ink); transition:transform .14s ease, box-shadow .14s ease; }
.wfx-post-card:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--wfx-ink); }
.wfx-post-cardlink{ display:block; text-decoration:none; color:inherit; }

.wfx-post-thumb{ aspect-ratio:16/10; border-bottom:3px solid var(--wfx-ink); overflow:hidden; background:var(--wfx-cream); }
.wfx-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.wfx-post-card:hover .wfx-post-thumb img{ transform:scale(1.04); }
.wfx-post-thumb--empty{ background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(20,17,12,.06) 14px 28px), var(--wfx-blue); }
.wfx-post-card:nth-child(4n+2) .wfx-post-thumb--empty{ background-color:var(--wfx-red); }
.wfx-post-card:nth-child(4n+3) .wfx-post-thumb--empty{ background-color:var(--wfx-green); }
.wfx-post-card:nth-child(4n+4) .wfx-post-thumb--empty{ background-color:var(--wfx-amber); }

.wfx-post-meta{ padding:18px; }
.wfx-post-cat{ display:inline-block; font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--wfx-ink); padding:4px 9px; margin-bottom:12px; }
.wfx-post-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em; font-size:22px; line-height:1.1; margin:0 0 10px; color:var(--wfx-ink); overflow-wrap:break-word; word-break:break-word; }
.wfx-post-excerpt{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; line-height:1.5; color:var(--wfx-body); margin:0 0 16px; }
.wfx-post-foot{ display:flex; align-items:center; justify-content:space-between; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--wfx-muted); }
.wfx-post-more{ color:var(--wfx-blue); font-weight:700; }

/* ---- pagination (the_posts_pagination) ---- */
.wfx-blog-body .navigation.pagination{ margin-top:46px; }
.wfx-blog-body .nav-links{ display:flex; flex-wrap:wrap; gap:10px; }
.wfx-blog-body .page-numbers{ font-family:'Space Mono',monospace; font-weight:700; font-size:13px; text-decoration:none; color:var(--wfx-ink); background:var(--wfx-cream); border:3px solid var(--wfx-ink); box-shadow:3px 3px 0 var(--wfx-ink); padding:9px 14px; line-height:1; transition:transform .1s ease, box-shadow .1s ease; }
.wfx-blog-body .page-numbers.current{ background:var(--wfx-ink); color:var(--wfx-cream); }
.wfx-blog-body a.page-numbers:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--wfx-ink); background:var(--wfx-blue); color:#fff; }

/* ---- empty state ---- */
.wfx-blog-empty{ border:3px solid var(--wfx-ink); box-shadow:6px 6px 0 var(--wfx-ink); background:var(--wfx-cream); padding:40px; font-family:'Space Grotesk',sans-serif; color:var(--wfx-body); }
.wfx-underline{ border-bottom:3px solid var(--wfx-blue); }

/* ============================================================
   SINGLE POST
   ============================================================ */
.wfx-single{ padding:56px 0 80px; }
.wfx-single-head,
.wfx-single-hero,
.wfx-single-content,
.wfx-single-foot,
.wfx-postnav{ margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; box-sizing:border-box; }

.wfx-single-head{ max-width:840px; }
.wfx-single-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wfx-muted); margin:0 0 16px; }
.wfx-single-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.03em; font-size:clamp(32px,6vw,58px); line-height:1.02; margin:0; color:var(--wfx-ink); overflow-wrap:break-word; }

.wfx-single-hero{ max-width:960px; margin-top:32px; }
.wfx-single-hero img{ width:100%; height:auto; display:block; border:3px solid var(--wfx-ink); box-shadow:8px 8px 0 var(--wfx-ink); }

/* ---- article body typography (the_content output) ---- */
.wfx-single-content{ max-width:720px; margin-top:40px; }
.wfx-post-content{ font-family:'Space Grotesk',sans-serif; font-size:18px; line-height:1.7; color:var(--wfx-body); }
.wfx-post-content > *:first-child{ margin-top:0; }
.wfx-post-content p{ margin:0 0 1.4em; }
.wfx-post-content h2{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em; font-size:30px; line-height:1.12; margin:1.6em 0 .5em; color:var(--wfx-ink); }
.wfx-post-content h3{ font-family:'Archivo',sans-serif; font-weight:800; font-size:23px; margin:1.4em 0 .4em; color:var(--wfx-ink); }
.wfx-post-content a{ color:var(--wfx-blue); text-decoration:underline; text-underline-offset:3px; }
.wfx-post-content img{ max-width:100%; height:auto; border:3px solid var(--wfx-ink); }
.wfx-post-content blockquote{ margin:1.5em 0; padding:16px 22px; border-left:6px solid var(--wfx-blue); background:var(--wfx-cream); font-style:italic; }
.wfx-post-content ul, .wfx-post-content ol{ margin:0 0 1.4em; padding-left:1.3em; }
.wfx-post-content li{ margin:.35em 0; }
.wfx-post-content code{ font-family:'Space Mono',monospace; background:var(--wfx-cream); padding:2px 6px; border:2px solid var(--wfx-ink); font-size:.9em; }
.wfx-post-content pre{ background:var(--wfx-ink); color:var(--wfx-cream); padding:18px; overflow:auto; border:3px solid var(--wfx-ink); }
.wfx-post-content pre code{ background:none; border:0; color:inherit; padding:0; }

/* ---- single footer + prev/next ---- */
.wfx-single-foot{ max-width:720px; margin-top:44px; padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; border-top:3px solid var(--wfx-ink); }
.wfx-single-foot{ border-top:0; position:relative; }
.wfx-single-foot::before{ content:""; position:absolute; top:0; left:32px; right:32px; border-top:3px solid var(--wfx-ink); }
.wfx-tags{ font-family:'Space Mono',monospace; font-size:12px; color:var(--wfx-blue); }
.wfx-tags a{ color:var(--wfx-blue); text-decoration:none; }
.wfx-back{ font-family:'Space Mono',monospace; font-weight:700; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:var(--wfx-ink); border:2px solid var(--wfx-ink); box-shadow:3px 3px 0 var(--wfx-blue); padding:10px 16px; }
.wfx-back:hover{ background:var(--wfx-blue); box-shadow:3px 3px 0 var(--wfx-ink); }

.wfx-postnav{ max-width:720px; margin-top:32px; display:flex; justify-content:space-between; gap:20px; }
.wfx-postnav-next{ text-align:right; margin-left:auto; }
.wfx-postnav a{ font-family:'Space Mono',monospace; font-size:12px; font-weight:700; color:var(--wfx-ink); text-decoration:none; border-bottom:3px solid var(--wfx-blue); padding-bottom:2px; }
.wfx-page-links{ font-family:'Space Mono',monospace; font-size:13px; margin-top:24px; }

@media (max-width:600px){
  .wfx-blog-head{ padding:38px 0; }
  .wfx-blog-head-inner,
  .wfx-blog-body{ padding-left:18px; padding-right:18px; }
  .wfx-blog-body{ padding-top:36px; padding-bottom:56px; }
  .wfx-post-card:hover{ transform:none; box-shadow:5px 5px 0 var(--wfx-ink); }
  .wfx-single-head,
  .wfx-single-hero,
  .wfx-single-content,
  .wfx-single-foot,
  .wfx-postnav{ padding-left:18px; padding-right:18px; }
  .wfx-single-foot::before{ left:18px; right:18px; }
  .wfx-post-content{ font-size:16.5px; }
}