/* ============================================================
   OHRFY — GHL native Blog skin  ("Open Ledger" brutalism)
   ------------------------------------------------------------
   Paste into GHL → Sites → your Blog → Custom CSS  (or the
   funnel/site Header inside <style>...</style>).

   Selectors BOUND TO THE LIVE GHL DOM (verified 2026-06-07 via
   browse inspect against ohrfy.com/articles and /post/<slug>):
     LIST (/articles): .blog-post-wrapper-list > .blog-box rows,
       .blog-title .blog-tag .blog-description .blog-publish-date
       .blog-author .blog-image* .blog-button/.readme-btn
     POST (/post/...): .blog-content-title/.header-title (title),
       .blog-html-container-single (800px column), .blog-html (body),
       .blog-category .blog-date .blog-tags .blog-author-* .blog-back-button
   GHL ships Tailwind-ish utility classes (text-black, font-sans,
   rounded-full, bg-gray-200…) so overrides need !important.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --oh-paper:#f3f1ea; --oh-paper2:#ebe8df; --oh-ink:#0d0d0c; --oh-ink2:#1b1b18;
  --oh-acc:#f5360c; --oh-acc-ink:#fff3ee; --oh-mut:#6c6a61;
  --oh-disp:'Archivo',system-ui,sans-serif;
  --oh-mono:'Space Mono',ui-monospace,Menlo,monospace;
}

/* ===== Canvas (blog content wrappers) ===== */
.blog-post-wrapper-wrapper, .standard-blog-content,
.c-blog-content, .c-blog-post, .blog-html-container-single{
  background:var(--oh-paper)!important; font-family:var(--oh-disp)!important;
}

/* =========================================================
   LIST  ·  /articles
   ========================================================= */
.blog-post-wrapper-list{ display:flex!important; flex-direction:column!important;
  gap:0!important; width:100%!important; max-width:1180px!important; margin:0 auto!important;
  border:2px solid var(--oh-ink)!important; }
/* release GHL's narrow column cap on the list's ancestors so it can use the page width.
   (The section must also be set to Full Width in the builder — CSS alone can't do that.) */
.blog-post-wrapper-wrapper, .blog-list-wrapper, .blog-post-wrapper-list-wrapper{
  width:100%!important; max-width:100%!important; }

/* each row */
.blog-post-wrapper-list .blog-box{
  background:var(--oh-paper)!important; border:0!important;
  border-bottom:2px solid var(--oh-ink)!important; border-radius:0!important;
  box-shadow:none!important; padding:26px 30px!important; overflow:hidden!important;
}
.blog-post-wrapper-list > *:last-child .blog-box{ border-bottom:0!important; }
/* no hover state on list rows (the cards stay static) */

/* images — square them, hard border */
.blog-image, .blog-image-dap, .blog-image-standard-wrapper, .blog-image-corner{
  border-radius:0!important; }
/* stacked (column) card: divider runs horizontally between image and text,
   not down the right edge. Full-width image, hard bottom rule. */
.blog-image-standard-wrapper{ border-right:0!important; border-bottom:2px solid var(--oh-ink)!important;
  width:auto!important; margin:-26px -30px 26px!important; }

/* text */
.blog-title{ font-family:var(--oh-disp)!important; font-weight:800!important;
  text-transform:uppercase!important; letter-spacing:-.01em!important; line-height:1.05!important;
  color:var(--oh-ink)!important; }
.blog-description{ font-family:var(--oh-mono)!important; color:var(--oh-mut)!important;
  font-size:13px!important; line-height:1.6!important; }
.blog-publish-date, .blog-author, .blog-author-image + *{
  font-family:var(--oh-mono)!important; font-size:11px!important; letter-spacing:.08em!important;
  text-transform:uppercase!important; color:var(--oh-mut)!important; }

/* tag — kill the green rounded pill */
.blog-tag{ background:transparent!important; color:var(--oh-acc)!important;
  border:0!important; border-radius:0!important; padding:0!important;
  font-family:var(--oh-mono)!important; font-weight:700!important; font-size:10.5px!important;
  letter-spacing:.12em!important; text-transform:uppercase!important; }
.blog-tag::before{ content:"// "; }

/* read-more button */
.blog-button, .readme-btn{ color:var(--oh-ink)!important; font-family:var(--oh-mono)!important;
  font-weight:700!important; font-size:11px!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; }
.blog-author-image, .blog-author-image-post{ border-radius:0!important;
  border:2px solid currentColor!important; }

/* =========================================================
   SINGLE POST  ·  /post/<slug>
   ========================================================= */
.blog-html-container-single{ max-width:800px!important; margin:0 auto!important; padding:56px 22px!important; }

.blog-content-title, .header-title.blog-content-title{
  font-family:var(--oh-disp)!important; font-weight:900!important; text-transform:uppercase!important;
  font-size:clamp(34px,5.5vw,60px)!important; line-height:.92!important;
  letter-spacing:-.035em!important; color:var(--oh-ink)!important; }

.blog-category{ font-family:var(--oh-mono)!important; font-weight:700!important; font-size:11px!important;
  letter-spacing:.13em!important; text-transform:uppercase!important; color:var(--oh-acc)!important;
  text-decoration:none!important; }
.blog-date, .blog-author-name, .blog-author-details{
  font-family:var(--oh-mono)!important; font-size:11px!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; color:var(--oh-mut)!important; }
.blog-tags .blog-tag{ color:var(--oh-acc)!important; }
.blog-cover-image-container img{ border:2px solid var(--oh-ink)!important; border-radius:0!important; }
.blog-back-button, .blog-left-arrow{ font-family:var(--oh-mono)!important; font-weight:700!important;
  font-size:11px!important; letter-spacing:.1em!important; text-transform:uppercase!important;
  color:var(--oh-ink)!important; }
.blog-back-button:hover{ color:var(--oh-acc)!important; }

/* ===== Post BODY (.blog-html = GHL rendered body; also styles your .ohrfy-article) ===== */
.blog-html, .ohrfy-article{ font-family:var(--oh-disp)!important; font-size:17px!important;
  line-height:1.7!important; color:var(--oh-ink2)!important; }
.blog-html p, .ohrfy-article p{ margin:0 0 20px!important; color:var(--oh-ink2)!important; }
.blog-html h2, .ohrfy-article h2{ font-family:var(--oh-disp)!important; font-weight:900!important;
  text-transform:uppercase!important; font-size:28px!important; letter-spacing:-.02em!important;
  margin:42px 0 14px!important; color:var(--oh-ink)!important; }
.blog-html h3, .ohrfy-article h3{ font-family:var(--oh-disp)!important; font-weight:800!important;
  text-transform:uppercase!important; font-size:21px!important; margin:32px 0 12px!important;
  color:var(--oh-ink)!important; }
.blog-html a, .ohrfy-article a{ background:var(--oh-acc)!important; color:var(--oh-acc-ink)!important;
  padding:0 .12em!important; text-decoration:none!important; }
.blog-html blockquote, .ohrfy-article blockquote{ margin:30px 0!important; padding:20px 24px!important;
  border:2px solid var(--oh-ink)!important; background:var(--oh-paper2)!important;
  box-shadow:5px 5px 0 var(--oh-ink)!important; font-family:var(--oh-mono)!important;
  font-size:15px!important; line-height:1.65!important; }
.blog-html hr, .ohrfy-article hr{ border:0!important; border-top:2px solid var(--oh-ink)!important; margin:40px 0!important; }
.blog-html img, .ohrfy-article img{ border:2px solid var(--oh-ink)!important; border-radius:0!important; margin:24px 0!important; }
.blog-html ul, .blog-html ol, .ohrfy-article ul, .ohrfy-article ol{ margin:0 0 20px 22px!important; }
.blog-html li, .ohrfy-article li{ margin-bottom:8px!important; color:var(--oh-ink2)!important; }
.ohrfy-article .dek{ font-family:var(--oh-mono)!important; font-size:15px!important; line-height:1.7!important;
  color:var(--oh-mut)!important; border-left:3px solid var(--oh-acc)!important; padding-left:18px!important;
  margin-bottom:30px!important; }

/* leftover GHL buttons (Read more, Back to top, pagination Previous/1/Next) */
.readme-btn, .blog-button,
.hl-blog-content-back-to-top-container button,
.blog-post-wrapper-wrapper button, .blog-post-wrapper-list ~ * button{
  font-family:var(--oh-mono)!important; font-weight:700!important; font-size:12px!important;
  letter-spacing:.08em!important; text-transform:uppercase!important;
  border:2px solid var(--oh-ink)!important; border-radius:0!important; box-shadow:none!important;
  background:var(--oh-paper)!important; color:var(--oh-ink)!important; }
.hl-blog-content-back-to-top-container button:hover,
.blog-post-wrapper-wrapper button:hover{ background:var(--oh-ink)!important; color:var(--oh-paper)!important; }
.blog-left-arrow svg, .blog-back-button svg{ stroke:currentColor!important; }

/* ----------------------------------------------------------------
   NOTE — full-bleed paper canvas:
   CSS here can't reliably override the GHL builder's SECTION
   background (it's set per-section in the editor with high
   specificity). For an edge-to-edge paper page, open the blog
   page in the GHL builder and set the section/page background to
   #f3f1ea (the paper tone). Everything else is handled above.
   ---------------------------------------------------------------- */

::selection{ background:var(--oh-acc); color:var(--oh-acc-ink); }