/* FFG blog. Loaded after /styles.css on blog pages only. */

/* Hero byline */
.post-hero .crumb { margin-bottom: 1rem; }
.post-hero h1 { max-width: 22ch; }
.byline { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.byline img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid var(--gold); flex: none; }
.byline p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(244, 238, 223, .82); }
.byline strong { color: var(--cream); font-weight: 500; }

/* Article */
.post { background: var(--paper); padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.post-article { max-width: 680px; margin-inline: auto; }
.post-article p { margin: 0 0 1.15em; }
.post-lede { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.45rem); line-height: 1.55; color: var(--forest); }
.post-article h2 { font-size: clamp(1.5rem, 3vw, 1.85rem); color: var(--forest); margin: 2.2em 0 .6em; }
.post-article h2::before { content: ""; display: block; width: 36px; height: 2px; background: var(--gold); margin-bottom: 1.1rem; }
.post-article h3 { font-size: 1.22rem; color: var(--forest); margin: 1.7em 0 .4em; }
.post-article a:not(.btn) { color: var(--forest); font-weight: 500; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.post-guide { font: inherit; font-weight: 500; color: var(--forest); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.post-guide:hover, .post-article a:not(.btn):hover { color: #A9832E; }
.post-aside { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--muted); }
.post-flags { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: .8rem; }
.post-flags li { display: grid; grid-template-columns: 16px 1fr; gap: .9rem; align-items: start; }
.post-flags li > span { min-width: 0; }
.post-flags svg { width: 14px; height: 20px; margin-top: .3rem; }
.post-article .flow { margin: 1.4rem 0 1.6rem; }
.post-article .flow li { padding-bottom: 1.2rem; }
.post-article .flow h3 { margin: .55rem 0 0; }
.post-article .flow h2::before { display: none; }
.post-article .signoff { margin-top: 2rem; }

/* Forest panel inside a post */
.post-panel { background: var(--forest); color: var(--cream); margin: 2.4em 0 2em; padding: clamp(1.8rem, 5vw, 2.8rem); outline: 1px solid rgba(201, 162, 74, .5); outline-offset: -12px; }
.post-article .post-panel h2 { color: var(--gold); margin-top: 0; }
.post-article .post-panel h2::before { display: none; }
.post-panel p { color: rgba(244, 238, 223, .9); }
.post-panel p:last-child { margin-bottom: 0; }
.panel-num { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 8vw, 3.6rem); line-height: 1; color: var(--gold); margin: .2rem 0 .4rem; }
.panel-num small { font-size: .42em; color: var(--cream); }
.panel-label, .panel-top { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 238, 223, .7); }
.panel-label { margin-bottom: 1.4rem; }
.panel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem 2rem; margin: .4rem 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(201, 162, 74, .35); }
.panel-stats .panel-label { margin-bottom: 0; }
.post-panel .btn { margin-top: .4rem; }

/* Blog home */
.blog-list { padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(3.5rem, 8vw, 5rem); }
.pinned-card { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--gold); padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 5vw, 3.2rem) clamp(1.8rem, 4vw, 2.6rem); margin-top: 1rem; transition: background .2s, box-shadow .2s; }
.pinned-card:hover { background: #fff; box-shadow: 0 10px 30px rgba(15, 42, 31, .08); }
.pinned-card .fc { border-color: var(--gold); width: 24px; height: 24px; }
.pinned-card .fc.tl { left: -7px; top: -7px; border-width: 2px 0 0 2px; }
.pinned-card .fc.br { right: -7px; bottom: -7px; border-width: 0 2px 2px 0; }
.pin-ribbon { position: absolute; top: -15px; left: clamp(1.4rem, 5vw, 3.2rem); display: inline-flex; align-items: center; gap: .5rem; background: var(--gold); color: var(--forest-deep); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .45rem 1.5rem .45rem .8rem; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.pin-ribbon svg { width: 10px; height: 14px; }
.pinned-inner { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 3rem; align-items: end; }
.pinned-inner > div { min-width: 0; }
.pinned-card h2 { color: var(--forest); font-size: clamp(1.8rem, 4vw, 2.5rem); margin: .3rem 0 .6rem; }
.pinned-card p { margin: 0; max-width: 56ch; }
.pinned-card .btn { white-space: nowrap; }
@media (max-width: 700px) { .pinned-inner { grid-template-columns: 1fr; } .pinned-card .btn { justify-self: start; } }

.post-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.post-meta .tag { font-weight: 500; color: #A9832E; }

.list-head { display: flex; align-items: center; gap: 1rem; margin: clamp(3rem, 7vw, 4.5rem) 0 1.6rem; }
.list-head .eyebrow { margin: 0; white-space: nowrap; }
.list-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid, .post-grid.two { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: var(--ink); background: var(--paper); border-top: 2px solid var(--gold); padding: 1.6rem 1.5rem 1.5rem; min-width: 0; transition: background .2s; }
.post-card:hover { background: #fff; }
.post-card h3 { font-size: 1.3rem; line-height: 1.28; color: var(--forest); margin: 0; }
.post-card p { margin: 0; font-size: .98rem; color: var(--muted); flex: 1; }
.post-card .post-meta { margin: 0; flex: none; }
.read-more { font-weight: 500; font-size: .95rem; color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* Keep reading */
.keep-reading { padding: clamp(3rem, 7vw, 4.5rem) 0; }
.keep-reading .list-head { margin-top: 0; }