/* GFunnel — Articles (/articles, /articles/<slug>, /articles/review).
   Sits on the homepage design system (gf_home.css: --gfh-* tokens) like the Help
   Center. Dark follows the member's own theme signal, the .dark class, never a
   media query on the operating system (the Agents Hub rule). Only tokens change for dark. */

.gfh.gfar { --gfar-ink: var(--gfh-ink, #0b1020); --gfar-dim: var(--gfh-dim, #5b6478); --gfar-line: var(--gfh-line, #e6e8ef); --gfar-card: #fff; --gfar-ground: var(--gfh-bg, #f7f8fb); --gfar-accent: var(--gfh-orange, #f97316); --gfar-ok: #15803d; --gfar-ok-bg: #ecfdf3; --gfar-bad: #b91c1c; --gfar-bad-bg: #fef2f2; --gfar-warn: #a16207; --gfar-warn-bg: #fffbeb; --gfar-info: #1d4ed8; --gfar-info-bg: #eff6ff; --gfar-r: 14px; }
.dark .gfh.gfar { --gfar-ink: #e9ecf5; --gfar-dim: #a2a9bb; --gfar-line: #2a3042; --gfar-card: #141a2b; --gfar-ground: #0f1422; --gfar-ok-bg: #0f2a1b; --gfar-bad-bg: #2d1214; --gfar-warn-bg: #2b230c; --gfar-info-bg: #101c33; }
.gfh.gfar.gfar-shell { background: transparent; }

/* hero */
.gfh .gfar-hero { position: relative; isolation: isolate; padding: 56px 0 44px; background: linear-gradient(180deg, #0A0B14 0%, #12142A 100%); color: #fff; overflow: hidden; }
.gfh.gfar.gfar-shell .gfar-hero { border-radius: var(--gfar-r); margin-bottom: 8px; }
.gfh .gfar-hero-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gfh .gfar-hero-side { display: flex; gap: 10px; flex-wrap: wrap; }
.gfh .gfar-kicker { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gfar-accent); margin: 0 0 10px; }
.gfh .gfar-kicker a { color: inherit; text-decoration: none; }
.gfh .gfar-title { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0; color: #fff; }
.gfh .gfar-title em { font-style: normal; color: var(--gfar-accent); }
.gfh .gfar-lead { max-width: 680px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 12px 0 0; }

/* page + grid */
.gfh .gfar-page { padding: 40px 0 72px; background: var(--gfar-ground); }
.gfh.gfar.gfar-shell .gfar-page { background: transparent; padding-top: 16px; }
.gfh .gfar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gfh .gfar-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: 48px 24px; background: var(--gfar-card); border: 1px dashed var(--gfar-line); border-radius: var(--gfar-r); color: var(--gfar-dim); }
.gfh .gfar-empty h2 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 22px; color: var(--gfar-ink); margin: 0 0 8px; }
.gfh .gfar-empty a { color: var(--gfar-accent); }

/* one article */
.gfh .gfar-art { padding: 40px 0 80px; background: var(--gfar-ground); }
.gfh.gfar.gfar-shell .gfar-art { background: transparent; padding-top: 16px; }
.gfh .gfar-art-head { max-width: 760px; margin: 0 auto 28px; }
.gfh .gfar-art-title { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--gfar-ink); margin: 0 0 12px; }
.gfh .gfar-art-lede { font-size: 18px; line-height: 1.55; color: var(--gfar-dim); margin: 0 0 14px; }
.gfh .gfar-art-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.gfh .gfar-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--gfar-card); border: 1px solid var(--gfar-line); font-size: 12px; color: var(--gfar-dim); }
.gfh .gfar-art-body { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--gfar-ink); }
.gfh .gfar-art-body p { margin: 0 0 18px; }
.gfh .gfar-art-body a { color: var(--gfar-accent); }
.gfh .gfar-h2 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 44px 0 14px; color: var(--gfar-ink); }
.gfh .gfar-h3 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 28px 0 10px; color: var(--gfar-ink); }
.gfh .gfar-ul, .gfh .gfar-ol { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.gfh .gfar-ul { list-style: disc; }
.gfh .gfar-ol { list-style: decimal; }
.gfh .gfar-ul li::marker, .gfh .gfar-ol li::marker { color: var(--gfar-accent); }
/* A Blogs post's own HTML (gfArticlesPostHtml): plain tags, styled like the blog's own. */
.gfh .gfar-art-body h2 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 44px 0 14px; color: var(--gfar-ink); }
.gfh .gfar-art-body h3 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 32px 0 10px; color: var(--gfar-ink); }
.gfh .gfar-art-body h4 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 18px; font-weight: 700; margin: 26px 0 8px; color: var(--gfar-ink); }
.gfh .gfar-art-body ul, .gfh .gfar-art-body ol { margin: 0 0 18px; padding-left: 22px; }
.gfh .gfar-art-body ul { list-style: disc; }
.gfh .gfar-art-body ol { list-style: decimal; }
.gfh .gfar-art-body li { margin: 0 0 8px; }
.gfh .gfar-art-body li::marker { color: var(--gfar-accent); }
.gfh .gfar-art-body blockquote { margin: 0 0 18px; padding: 4px 0 4px 16px; border-left: 3px solid var(--gfar-accent); color: var(--gfar-dim); }
.gfh .gfar-art-body img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 12px; border: 1px solid var(--gfar-line); }
.gfh .gfar-art-body figure { margin: 24px 0; }
.gfh .gfar-art-body figcaption { font-size: 13px; color: var(--gfar-dim); text-align: center; margin-top: -12px; }
.gfh .gfar-acts { max-width: 760px; margin: 28px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--gfar-line); border-bottom: 1px solid var(--gfar-line); }
.gfh .gfar-acts-like { display: inline-flex; align-items: center; }
.gfh .gfar-act { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gfar-ink); background: var(--gfar-card); border: 1px solid var(--gfar-line); text-decoration: none; cursor: pointer; list-style: none; }
.gfh .gfar-act::-webkit-details-marker { display: none; }
.gfh .gfar-act:hover { border-color: var(--gfar-accent); color: var(--gfar-accent); }
.gfh .gfar-share { position: relative; }
.gfh .gfar-share-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(300px, 86vw); display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); box-shadow: 0 10px 30px rgba(15, 20, 34, .14); }
.gfh .gfar-share-pop a { color: var(--gfar-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.gfh .gfar-share-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gfar-dim); }
.gfh .gfar-share-in { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px; color: var(--gfar-ink); background: var(--gfar-ground); border: 1px solid var(--gfar-line); border-radius: 8px; }
.gfh .gfar-cmts { max-width: 760px; margin: 40px auto 0; }
.gfh .gfar-cmts .gfar-kicker { margin-bottom: 12px; }
.gfh .gfar-cmts-in { font-size: 15px; color: var(--gfar-dim); margin: 0; padding: 16px 18px; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); }
.gfh .gfar-cmts-in a { color: var(--gfar-accent); font-weight: 600; }
.gfh .gfar-art-foot { max-width: 760px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--gfar-line); font-size: 14px; line-height: 1.6; color: var(--gfar-dim); }
.gfh .gfar-art-foot a { color: var(--gfar-accent); }

/* buttons, messages, chips */
.gfh .gfar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--gfar-accent); background: var(--gfar-accent); color: #fff; font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.gfh .gfar-btn-ghost { background: transparent; color: var(--gfar-ink); border-color: var(--gfar-line); }
.gfh .gfar-hero .gfar-btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.gfh .gfar-btn-danger { background: transparent; color: var(--gfar-bad); border-color: var(--gfar-bad); }
.gfh .gfar-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.gfh .gfar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.gfh .gfar-msg { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; font-size: 14px; border: 1px solid var(--gfar-line); }
.gfh .gfar-msg-ok { background: var(--gfar-ok-bg); color: var(--gfar-ok); border-color: transparent; }
.gfh .gfar-msg-err { background: var(--gfar-bad-bg); color: var(--gfar-bad); border-color: transparent; }
.gfh .gfar-note { font-size: 13px; line-height: 1.55; color: var(--gfar-dim); margin: 0 0 12px; }
.gfh .gfar-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gfh .gfar-status-draft { background: var(--gfar-warn-bg); color: var(--gfar-warn); }
.gfh .gfar-status-approved { background: var(--gfar-info-bg); color: var(--gfar-info); }
.gfh .gfar-status-published { background: var(--gfar-ok-bg); color: var(--gfar-ok); }
.gfh .gfar-status-rejected { background: var(--gfar-bad-bg); color: var(--gfar-bad); }

/* the editor's desk */
.gfh .gfar-review .gfar-panel { background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); padding: 22px; margin: 0 0 18px; }
.gfh .gfar-panel { background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); padding: 22px; margin: 0 0 18px; }
.gfh .gfar-panel-h { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--gfar-ink); }
.gfh .gfar-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gfh .gfar-summary { font-size: 15px; font-weight: 600; color: var(--gfar-ink); }
.gfh .gfar-queue, .gfh .gfar-report { width: 100%; border-collapse: collapse; font-size: 14px; }
.gfh .gfar-queue th, .gfh .gfar-queue td, .gfh .gfar-report td { padding: 10px 10px; border-bottom: 1px solid var(--gfar-line); text-align: left; vertical-align: top; color: var(--gfar-ink); }
.gfh .gfar-queue th { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gfar-dim); }
.gfh .gfar-queue a { color: var(--gfar-ink); font-weight: 600; text-decoration: none; }
.gfh .gfar-check td:first-child { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; width: 64px; }
.gfh .gfar-check td:nth-child(2) { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 12px; white-space: nowrap; }
.gfh .gfar-check-pass { color: var(--gfar-ok); }
.gfh .gfar-check-block { color: var(--gfar-bad); }
.gfh .gfar-check-warn { color: var(--gfar-warn); }
.gfh .gfar-check-info { color: var(--gfar-info); }
.gfh tr.gfar-check-block td { background: var(--gfar-bad-bg); }
.gfh tr.gfar-check-warn td { background: var(--gfar-warn-bg); }
.gfh .gfar-form { display: flex; flex-direction: column; gap: 12px; }
.gfh .gfar-field { display: flex; flex-direction: column; gap: 6px; }
.gfh .gfar-label { font-size: 13px; font-weight: 600; color: var(--gfar-ink); }
.gfh .gfar-input, .gfh .gfar-select, .gfh .gfar-textarea, .gfh .gfar-copy { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gfar-line); background: var(--gfar-ground); color: var(--gfar-ink); font: inherit; font-size: 14px; }
.gfh .gfar-textarea, .gfh .gfar-copy { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 12.5px; line-height: 1.5; resize: vertical; }
.gfh .gfar-copy { margin-bottom: 10px; }
.gfh .gfar-select { max-width: 100%; }

@media (max-width: 880px) {
    .gfh .gfar-two { grid-template-columns: 1fr; }
    .gfh .gfar-queue { display: block; overflow-x: auto; }
    .gfh .gfar-hero { padding: 40px 0 32px; }
}

/* the blog: a centred hero, a grid of cards, a pager (docs/articles-pipeline.md "The blog layout") */
.gfh .gfar-blog-hero { padding: 64px 0 36px; text-align: center; background: var(--gfar-ground); }
.gfh.gfar.gfar-shell .gfar-blog-hero { background: transparent; padding-top: 32px; }
.gfh .gfar-blog-hero .gfar-kicker { margin-bottom: 14px; }
.gfh .gfar-blog-title { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0 auto; max-width: 760px; color: var(--gfar-ink); }
.gfh .gfar-blog-title em { font-style: normal; color: var(--gfar-accent); }
.gfh .gfar-blog-lead { max-width: 560px; margin: 16px auto 0; font-size: 16px; line-height: 1.6; color: var(--gfar-dim); }
.gfh .gfar-blog-tools { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.gfh .gfar-filter { margin: 0 0 18px; font-size: 14px; color: var(--gfar-dim); }
.gfh .gfar-filter strong { color: var(--gfar-ink); }
.gfh .gfar-filter a { color: var(--gfar-accent); }
.gfh .gfar-post { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); min-width: 0; transition: border-color .15s ease, transform .15s ease; }
.gfh .gfar-post:hover { border-color: var(--gfar-accent); transform: translateY(-2px); }
.gfh .gfar-post-media { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gfar-ground); }
.gfh .gfar-post-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gfh .gfar-cover-blank { display: flex; align-items: flex-end; padding: 12px; box-sizing: border-box; background: radial-gradient(120% 90% at 0% 100%, rgba(249,115,22,.55), transparent 60%), linear-gradient(135deg, #0A0B14 0%, #1b1f3d 100%); }
.gfh .gfar-cover-blank span { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.gfh .gfar-post-title { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; margin: 4px 0 0; }
.gfh .gfar-post-title a { color: var(--gfar-ink); text-decoration: none; }
.gfh .gfar-post-title a:hover { color: var(--gfar-accent); }
.gfh .gfar-post-excerpt { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gfar-dim); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gfh .gfar-post-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gfar-line); display: flex; flex-direction: column; gap: 10px; }
.gfh .gfar-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--gfar-ink); }
.gfh .gfar-byline-name { font-weight: 600; }
.gfh .gfar-byline-date { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; color: var(--gfar-dim); }
.gfh .gfar-byline-date::before { content: "\00B7"; margin-right: 8px; }
.gfh .gfar-av { flex: none; border-radius: 50%; object-fit: cover; }
.gfh .gfar-av-sm { width: 22px; height: 22px; }
.gfh .gfar-av-lg { width: 44px; height: 44px; }
.gfh .gfar-av-ini { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gfar-accent), #7c3aed); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.gfh .gfar-av-lg.gfar-av-ini { font-size: 15px; }
.gfh .gfar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gfh .gfar-tag { display: inline-block; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gfar-line); font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; color: var(--gfar-dim); text-decoration: none; }
.gfh .gfar-tag:hover { border-color: var(--gfar-accent); color: var(--gfar-accent); }
.gfh .gfar-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 36px 0 0; }
.gfh .gfar-pager-at { font-family: var(--gfh-font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gfar-dim); }
.gfh .gfar-btn-off { opacity: .4; cursor: default; }
.gfh .gfar-art-byline { margin: 4px 0 12px; }
.gfh .gfar-art-cover { max-width: 860px; margin: 0 auto 32px; border-radius: var(--gfar-r); overflow: hidden; border: 1px solid var(--gfar-line); }
.gfh .gfar-art-cover img { display: block; width: 100%; height: auto; }
.gfh .gfar-author { max-width: 760px; margin: 40px auto 0; padding: 18px 20px; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); }
.gfh .gfar-author .gfar-kicker { margin-bottom: 10px; }
.gfh .gfar-author-name { font-size: 15px; font-weight: 700; }
.gfh .gfar-author-name a { color: var(--gfar-ink); text-decoration: none; }
.gfh .gfar-more { max-width: 760px; margin: 28px auto 0; }
.gfh .gfar-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gfh .gfar-more-item { padding: 14px 16px; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--gfar-ink); text-decoration: none; }
.gfh .gfar-more-item:hover { border-color: var(--gfar-accent); }
@media (max-width: 1024px) { .gfh .gfar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gfh .gfar-grid, .gfh .gfar-more-grid { grid-template-columns: 1fr; } .gfh .gfar-blog-hero { padding-top: 40px; } }
.gfh .gfar-art-md { font-size: 13px; }

/* The writer page (/articles/write): the Blogs module's own form, one focused
   column beside two small cards. The form's own markup is the module's; only
   its frame and width are set here. */
.gfh .gfar-write-hero { padding: 28px 0 8px; }
.gfh .gfar-write-back { display: inline-block; font-size: 14px; color: var(--gfar-dim); text-decoration: none; margin-bottom: 12px; }
.gfh .gfar-write-back:hover { color: var(--gfar-accent); }
.gfh .gfar-write-title { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--gfar-ink); }
.gfh .gfar-write-lead { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--gfar-dim); }
.gfh.gfar.gfar-shell .gfar-write-hero + .gfar-page { background: transparent; padding-top: 20px; }
.gfh .gfar-write { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.gfh .gfar-write-main { min-width: 0; background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); padding: 24px 28px; }
.gfh .gfar-write-main form, .gfh .gfar-write-main .bx-form-advanced-wrapper { width: 100%; max-width: none; }
.gfh .gfar-write-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 140px; }
.gfh .gfar-write-card { background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); padding: 18px 20px; }
.gfh .gfar-write-card h2 { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 16px; font-weight: 700; margin: 0 0 10px; color: var(--gfar-ink); }
.gfh .gfar-write-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--gfar-ground); color: var(--gfar-dim); font-size: 12px; text-align: center; }
.gfh .gfar-write-tips { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--gfar-dim); }
.gfh .gfar-write-tips li { margin-bottom: 8px; }
.gfh .gfar-write-tips li::marker { color: var(--gfar-accent); }
.gfh .gfar-write-tips a, .gfh .gfar-write-link, .gfh .gfar-write-note a { color: var(--gfar-accent); font-weight: 600; text-decoration: none; }
.gfh .gfar-write-list { list-style: none; margin: 0 0 12px; padding: 0; }
.gfh .gfar-write-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gfar-line); font-size: 14px; }
.gfh .gfar-write-list li:first-child { border-top: 0; }
.gfh .gfar-write-list a { color: var(--gfar-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfh .gfar-write-list a:hover { color: var(--gfar-accent); }
.gfh .gfar-write-state { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.gfh .gfar-write-state-public { background: var(--gfar-ok-bg); color: var(--gfar-ok); }
.gfh .gfar-write-state-limited { background: var(--gfar-info-bg); color: var(--gfar-info); }
.gfh .gfar-write-state-scheduled { background: var(--gfar-warn-bg); color: var(--gfar-warn); }
.gfh .gfar-write-muted, .gfh .gfar-write-note { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--gfar-dim); }
@media (max-width: 960px) { .gfh .gfar-write { grid-template-columns: 1fr; } .gfh .gfar-write-side { position: static; } .gfh .gfar-write-main { padding: 18px; } }

/* The article page's two columns: the post, and a sticky right rail (who
   wrote it, the reader's next step). The rail folds under the post below
   1080px, where it is no longer beside it. */
.gfh .gfar-art-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 40px; justify-content: center; align-items: start; }
.gfh .gfar-art-main { min-width: 0; }
.gfh .gfar-art-rail { min-width: 0; align-self: stretch; }
.gfh .gfar-rail-stick { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 16px; }
.gfh .gfar-rail-card { background: var(--gfar-card); border: 1px solid var(--gfar-line); border-radius: var(--gfar-r); padding: 18px 20px; }
.gfh .gfar-rail-card .gfar-kicker { margin-bottom: 10px; }
.gfh .gfar-rail-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--gfar-accent); text-decoration: none; }
.gfh .gfar-rail-cta { border-color: var(--gfar-accent); }
.gfh .gfar-rail-h { font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--gfar-ink); }
.gfh .gfar-rail-p { font-size: 14px; line-height: 1.55; color: var(--gfar-dim); margin: 0 0 14px; }
.gfh .gfar-rail-small { margin: 12px 0 0; font-size: 13px; }
.gfh .gfar-rail-small a { color: var(--gfar-accent); font-weight: 600; }
.gfh .gfar-rail-btn { width: 100%; justify-content: center; box-sizing: border-box; }
/* The rail's card, the reference's "partner offer" shape: an orange head with a
   pill and one big word, then ticks, one full-width button and who wrote it. */
.gfh .gfar-offer { padding: 0; overflow: hidden; border: 0; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .28), 0 0 0 1px var(--gfar-line); }
.gfh .gfar-offer-top { position: relative; overflow: hidden; padding: 20px 22px 18px; color: #fff; background: linear-gradient(135deg, #fb923c 0%, var(--gfar-accent) 55%, #ea580c 100%); }
.gfh .gfar-offer-top::after { content: ""; position: absolute; right: -48px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none; }
.gfh .gfar-offer-pill { position: relative; z-index: 1; display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gfh .gfar-offer-sub { position: relative; z-index: 1; margin: 14px 0 0; font-size: 15px; font-weight: 600; }
.gfh .gfar-offer-big { position: relative; z-index: 1; margin: 2px 0 0; font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.gfh .gfar-offer-body { padding: 18px 22px 20px; background: var(--gfar-card); }
.gfh .gfar-offer-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gfh .gfar-offer-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--gfar-ink); }
.gfh .gfar-offer-list svg { flex: none; margin-top: 2px; color: var(--gfar-ok); }
.gfh .gfar-offer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; background: var(--gfar-accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(249, 115, 22, .7); transition: transform .15s ease, box-shadow .15s ease; }
.gfh .gfar-offer-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(249, 115, 22, .8); color: #fff; }
.gfh .gfar-offer-small { margin: 12px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--gfar-dim); }
.gfh .gfar-offer-small a { color: var(--gfar-accent); font-weight: 600; }
.gfh .gfar-offer-by { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gfar-line); }
.gfh .gfar-rail-card > .gfar-offer-by, .gfh .gfar-offer-body > .gfar-offer-by:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gfh .gfar-offer-by .gfar-av { width: 34px; height: 34px; font-size: 12px; }
.gfh .gfar-offer-by p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--gfar-dim); }
.gfh .gfar-offer-by-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.gfh .gfar-offer-by strong, .gfh .gfar-offer-by a { color: var(--gfar-ink); text-decoration: none; }
/* The comment box's own "Empty" placeholder: the form under it already invites
   the first comment, so the placeholder is not drawn here. The comment script
   still finds the element when the first comment lands. */
.gfh .gfar-cmts .cmt-no { display: none; }
@media (max-width: 1080px) { .gfh .gfar-art-layout { grid-template-columns: minmax(0, 760px); } .gfh .gfar-rail-stick { position: static; } }

/* The Blogs form on the writer page. The markup is the module's own (BxBaseFormView,
   artificer's form_row_standard, Quill, FilePond); only its look is set here, and
   only inside .gfar-write-main, so the native create page is untouched. */
.gfh .gfar-write-main .bx-form-element-wrapper { margin: 0 0 22px; padding: 0; border: 0; }
.gfh .gfar-write-main .bx-form-element { display: block; }
.gfh .gfar-write-main .bx-form-caption { display: block; float: none; width: auto; margin: 0 0 7px; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--gfar-ink); text-align: left; }
.gfh .gfar-write-main .bx-form-required { color: var(--gfar-accent); margin-left: 2px; }
.gfh .gfar-write-main .bx-form-value { float: none; width: auto; margin: 0; }
.gfh .gfar-write-main .bx-form-input-text,
.gfh .gfar-write-main .bx-form-input-textarea,
.gfh .gfar-write-main .bx-form-input-select,
.gfh .gfar-write-main .bx-form-input-autotoken { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--gfar-line); border-radius: 10px; background: var(--gfar-card); color: var(--gfar-ink); font: inherit; font-size: 15px; line-height: 1.45; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.gfh .gfar-write-main .bx-form-input-text:focus,
.gfh .gfar-write-main .bx-form-input-textarea:focus,
.gfh .gfar-write-main .bx-form-input-select:focus { outline: none; border-color: var(--gfar-accent); box-shadow: 0 0 0 3px rgba(249, 115, 22, .16); }
.gfh .gfar-write-main .bx-form-input-textarea { height: 110px; min-height: 96px; resize: vertical; }
/* The title is the headline: it reads like one while you type it. */
.gfh .gfar-write-main input.bx-form-input-text[name="title"] { padding: 14px 16px; font-family: var(--gfh-font-head, 'Sora', sans-serif); font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
/* The editor: one framed surface, toolbar on top, a real writing height. */
.gfh .gfar-write-main .ql-toolbar { border: 1px solid var(--gfar-line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--gfar-ground); padding: 8px 10px; }
.gfh .gfar-write-main .ql-container { border: 1px solid var(--gfar-line); border-radius: 0 0 10px 10px; background: var(--gfar-card); font: inherit; font-size: 16px; }
.gfh .gfar-write-main .ql-editor { min-height: 340px; line-height: 1.7; color: var(--gfar-ink); padding: 18px 20px; }
.gfh .gfar-write-main .ql-editor.ql-blank::before { color: var(--gfar-dim); font-style: normal; left: 20px; }
/* Attach buttons (photo, video, sound, poll, file, link) as quiet pills. */
.gfh .gfar-write-main .bx-form-input-files-uploaders { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gfh .gfar-write-main .bx-form-input-files-uploaders .bx-btn { margin: 0; padding: 7px 14px; font-size: 13px; border: 1px solid var(--gfar-line); border-radius: 999px; background: var(--gfar-card); color: var(--gfar-dim); box-shadow: none; }
.gfh .gfar-write-main .bx-form-input-files-uploaders .bx-btn:hover { border-color: var(--gfar-accent); color: var(--gfar-accent); }
/* The header image drop area. */
.gfh .gfar-write-main .bx-uploader-html5-drop-area { margin: 0; border: 1.5px dashed var(--gfar-line); border-radius: 12px; background: var(--gfar-ground); color: var(--gfar-dim); }
.gfh .gfar-write-main .bx-uploader-html5-drop-area:hover { border-color: var(--gfar-accent); }
/* Switches and their labels sit on one line. */
.gfh .gfar-write-main .bx-form-value-oneline { display: flex; align-items: center; gap: 10px; }
.gfh .gfar-write-main .bx-form-caption-oneline { margin: 0; font-weight: 500; color: var(--gfar-dim); }
/* Publish: the one primary action, set apart from the fields above it. */
.gfh .gfar-write-main .bx-form-input-wrapper-submit,
.gfh .gfar-write-main .bx-form-input-wrapper-input_set { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--gfar-line); }
.gfh .gfar-write-main .bx-form-input-submit,
.gfh .gfar-write-main .bx-form-input-wrapper-submit .bx-btn { padding: 12px 26px; border: 1px solid var(--gfar-accent); border-radius: 10px; background: var(--gfar-accent); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: none; }
.gfh .gfar-write-main .bx-form-input-submit:hover { filter: brightness(1.05); }
.gfh .gfar-write-main .bx-form-error, .gfh .gfar-write-main .bx-form-warn { color: var(--gfar-bad); font-size: 13px; font-style: normal; margin-top: 6px; }
.gfh .gfar-write-main .bx-form-info { color: var(--gfar-dim); font-size: 13px; margin-top: 6px; }