/* Blog index and posts. Mobile first. Uses charter.css (yc-*) and place.css (pg-hero, pg-more, pg-cta). */

/* ---------- Post hero ---------- */
.bl-hero { min-height: min(62svh, 560px); min-height: min(62vh, 560px); }
body.cc .bl-hero h1 { max-width: 22ch; font-size: clamp(32px, 8.4vw, 68px); line-height: 1.04; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 20px 0 0; padding: 0; font: 600 12px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
body.cc.yc .bl-meta { max-width: none; font-size: 12px; color: rgba(255, 255, 255, .88); margin-bottom: 0; }
.bl-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px; border-radius: 50%; background: var(--sun); vertical-align: middle; }

/* ---------- Article ---------- */
.bl-layout { display: block; max-width: var(--container); margin: 0 auto; padding: clamp(36px, 7vw, 88px) var(--gutter) clamp(56px, 10vw, 120px); }
.bl-article { max-width: 720px; margin: 0 auto; }
.bl-article p, .bl-article li { font-size: 17px; line-height: 1.85; color: #4a5c62; }
body.cc.yc .bl-article p { max-width: none; margin: 0 0 1.3em; }
.bl-article .bl-lede { font: 400 clamp(23px, 5.6vw, 29px)/1.45 var(--font-serif); color: var(--sea-900); margin-bottom: 1.4em; }
.bl-article strong, .bl-article b { color: var(--sea-900); }
body.cc .bl-article a { color: var(--teal-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.cc .bl-article a:hover { color: var(--sea-900); }
body.cc .bl-article .bl-h { scroll-margin-top: 96px; color: var(--sea-900); text-align: left; text-wrap: balance; font-weight: 600; letter-spacing: -.012em; }
body.cc .bl-article h2.bl-h { margin: 2.6em 0 .6em; font-size: clamp(34px, 8.2vw, 50px); line-height: 1.06; }
body.cc .bl-article h2.bl-h::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 18px; background: var(--sun-deep); }
body.cc .bl-article h3.bl-h { margin: 2.3em 0 .55em; font-size: clamp(28px, 6.8vw, 36px); line-height: 1.1; }
body.cc .bl-article h4.bl-h { margin: 1.7em 0 .45em; font: 600 13px/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--teal-700); }
body.cc .bl-article > .bl-h:first-child, body.cc .bl-article > p:first-child + .bl-h { margin-top: 1.6em; }
.bl-article ul, .bl-article ol { margin: 0 0 1.4em; padding: 0; list-style: none; }
.bl-article ul li, .bl-article ol li { position: relative; margin: 0 0 .6em; padding-left: 28px; }
.bl-article ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-deep); }
.bl-article ol { counter-reset: n; }
.bl-article ol li { counter-increment: n; }
.bl-article ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 22px; font: italic 500 20px/1.6 var(--font-serif); color: var(--sun-deep); text-align: right; }
.bl-article blockquote { margin: 1.8em 0; padding: 0 0 0 22px; border-left: 2px solid var(--sun-deep); font: italic 400 clamp(21px, 5vw, 25px)/1.5 var(--font-serif); color: var(--sea-900); }
.bl-article blockquote p { font: inherit; color: inherit; }
.bl-article figure, .bl-article .image-container { margin: 2.2em calc(var(--gutter) * -1); }
.bl-article figure img, .bl-article .image-container img, .bl-article .responsive-image { display: block; width: 100%; height: auto; max-width: 100%; }
.bl-article figcaption { padding: 12px var(--gutter) 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.bl-article iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; margin: 1.2em 0 2em; }
.bl-article table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 16px; }
.bl-article th, .bl-article td { padding: 12px 10px; border-bottom: 1px solid var(--sand-200); text-align: left; vertical-align: top; }
.bl-article hr { margin: 2.4em 0; border: 0; border-top: 1px dashed rgba(185, 138, 71, .6); }
.conclusion-section { margin-top: 3.2em; padding: 28px 24px; border-radius: 18px; background: var(--sand-50); }
body.cc .bl-article .conclusion-section > h2.bl-h:first-child { margin-top: 0; }
.conclusion-section p:last-child { margin-bottom: 0; }

/* Table of contents */
.bl-toc { margin: 0 0 36px; padding: 18px 22px; border-radius: 16px; background: var(--sand-50); }
.bl-toc summary { cursor: pointer; font: 600 12px/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sea-900); list-style: none; }
.bl-toc summary::-webkit-details-marker { display: none; }
.bl-toc summary::after { content: "+"; float: right; color: var(--sun-deep); font-size: 18px; line-height: 1; }
.bl-toc[open] summary::after { content: "-"; }
.bl-toc ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: t; }
.bl-toc li { counter-increment: t; border-top: 1px solid var(--sand-200); }
.bl-toc li a { display: block; padding: 10px 0 10px 30px; position: relative; font-size: 15px; line-height: 1.4; color: var(--sea-900); }
.bl-toc li a::before { content: counter(t); position: absolute; left: 0; top: 10px; font: italic 500 17px/1.3 var(--font-serif); color: var(--sun-deep); }
body.cc .bl-toc li a { text-decoration: none; }
body.cc .bl-toc li a:hover { color: var(--teal-700); }

/* Reading progress */
.bl-progress { position: fixed; z-index: 1100; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--sun-deep), var(--teal-500)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Share */
.share-sec { margin-top: 3em; padding-top: 26px; border-top: 1px solid var(--sand-200); }
.share-sec h6, .share-sec .share-title { margin: 0 0 14px; font: 600 12px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.share-sec .shareBtn { display: inline-grid; place-items: center; width: 48px; height: 48px; margin: 0 10px 10px 0; padding: 0; border: 1.5px solid var(--sea-900); border-radius: 50%; background: transparent; color: var(--sea-900); cursor: pointer; transition: background .2s, color .2s, transform .3s var(--ease); }
.share-sec .shareBtn svg { display: block; width: auto; height: 19px; }
.share-sec .shareBtn:hover { background: var(--sea-900); color: var(--white); transform: translateY(-3px); }

/* ---------- Cards (index and related) ---------- */
.bl-list { padding: clamp(48px, 9vw, 110px) 0 clamp(64px, 11vw, 130px); }
.bl-list__head { max-width: 760px; margin: clamp(56px, 9vw, 112px) 0 clamp(28px, 5vw, 48px); }
.bl-list__head .yc-rule { margin-bottom: 0; }
.bl-grid { display: grid; gap: 28px 24px; grid-template-columns: 1fr; }
body.cc a.bl-card, body.cc a.bl-feature { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--white); color: var(--sea-900); box-shadow: 0 1px 0 var(--sand-200), 0 30px 50px -40px rgba(6, 26, 32, .4); }
.bl-card__img, .bl-feature__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-100); }
.bl-card__img img, .bl-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bl-card:hover img, .bl-feature:hover img { transform: scale(1.05); }
.bl-card__body, .bl-feature__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px 22px 26px; }
.bl-card__meta { font: 600 11.5px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.cc .bl-card h3 { font-size: clamp(26px, 6.6vw, 31px); line-height: 1.12; }
body.cc .bl-feature h2 { font-size: clamp(32px, 8vw, 54px); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.bl-card__by, .bl-feature__by { font-size: 14px; color: var(--teal-700); font-weight: 600; }
.bl-card__desc, .bl-feature__desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; line-height: 1.65; color: #4a5c62; }
.bl-feature__desc { -webkit-line-clamp: 6; font-size: 17px; }
.bl-card .yc-place__link, .bl-feature .yc-place__link { margin-top: auto; padding-top: 8px; }
.bl-card:hover .yc-arrow, .bl-feature:hover .yc-arrow { transform: translateX(5px); }
.bl-more .bl-grid { margin-top: 0; }

@media (min-width: 640px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .bl-article figure, .bl-article .image-container { margin-left: 0; margin-right: 0; }
  .bl-article figure img, .bl-article .image-container img { border-radius: 16px; }
  .bl-article figcaption { padding-left: 0; padding-right: 0; }
  .conclusion-section { padding: 40px 40px; }
}
@media (min-width: 960px) {
  .bl-hero { min-height: min(64vh, 600px); }
  .bl-layout.has-toc { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 80px; justify-content: center; }
  .bl-layout.has-toc .bl-article { margin: 0; }
  .bl-toc { position: sticky; top: 100px; align-self: start; margin: 0; padding: 0; background: none; }
  .bl-toc summary { pointer-events: none; padding-bottom: 6px; }
  .bl-toc summary::after { display: none; }
  .bl-toc[open] summary ~ * { display: block; }
  .bl-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
  body.cc a.bl-feature { flex-direction: row; align-items: stretch; }
  .bl-feature__img { flex: 1.35; aspect-ratio: auto; min-height: 460px; }
  .bl-feature__body { flex: 1; justify-content: center; padding: 48px 44px; }
}
body.cc .conclusion-section h2.bl-h::before { display: none; }
.conclusion-section { padding-top: 24px; }

/* Blog index hero */
.bl-index-hero { min-height: min(72svh, 640px); min-height: min(72vh, 640px); }
body.cc .bl-index-hero h1 { max-width: 14ch; font-size: clamp(42px, 11vw, 88px); }
body.cc .bl-index-hero h1 em { font-style: italic; color: var(--sun); }
body.cc.yc .bl-hero__lede { max-width: 40ch; margin: 22px 0 0; font: 400 clamp(19px, 4.8vw, 24px)/1.45 var(--font-serif); color: rgba(255, 255, 255, .92); }
.bl-index-hero::before { background: linear-gradient(180deg, rgba(6, 26, 32, .55) 0%, rgba(6, 26, 32, .25) 35%, rgba(6, 26, 32, .88) 100%), linear-gradient(90deg, rgba(6, 26, 32, .6) 0%, rgba(6, 26, 32, .15) 65%, rgba(6, 26, 32, 0) 100%); }
body.cc .bl-index-hero h1 em { color: #f0c987; }
.bl-index-hero .pg-hero__img { object-position: 64% 55%; }