/* Stage 4 editorial system, adapted from the approved Blog references. */
.blog-page, .article-page { width: 100%; max-width: none; margin: 0; padding: 0; }
.blog-page .section, .article-page .section { padding: clamp(4.5rem, 7.5vw, 7.5rem) 0; }
.blog-page .section-title, .article-page .section-title { max-width: 56rem; margin: 0; font-family: var(--cb-font-display); font-size: clamp(2.3rem, 4.3vw, 4.8rem); font-weight: 900; line-height: .94; letter-spacing: -.035em; text-transform: uppercase; }
.blog-page .section-heading, .article-page .section-heading { margin-bottom: 2.5rem; }
.blog-page .split-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); align-items: end; gap: 2rem; }
.blog-page .split-heading > p { max-width: 34rem; margin: 0; color: var(--cb-text-muted); }

.journal-hero { overflow: hidden; border-bottom: 1px solid var(--cb-border); background: radial-gradient(circle at 83% 18%, rgb(244 165 28 / 9%), transparent 24%), #090b0e; }
.journal-hero-grid { min-height: 32rem; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.journal-hero-copy { padding: 4.5rem 0; }
.journal-hero-copy h1 { max-width: 53rem; margin: 0; font-family: var(--cb-font-display); font-size: clamp(3.8rem, 6.9vw, 7.8rem); font-weight: 900; line-height: .84; letter-spacing: -.05em; text-transform: uppercase; }
.journal-hero-copy > p:last-child { max-width: 40rem; margin: 1.6rem 0 0; }
.journal-hero-art { position: relative; min-height: 24rem; border-left: 1px solid rgb(244 165 28 / 22%); background: linear-gradient(145deg, rgb(23 26 33 / 80%), rgb(9 11 14 / 20%)); }
.journal-hero-art::before { content: ""; position: absolute; inset: 6% 3% 2% 14%; border: 1px solid rgb(255 255 255 / 8%); background: linear-gradient(140deg, rgb(244 165 28 / 8%), transparent 45%), url('../../images/lifestyle/cinema.jpg') center / cover; filter: saturate(.7) brightness(.6); }
.journal-hero-art > span { position: absolute; z-index: 2; right: 4%; top: 7%; color: rgb(255 255 255 / 30%); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.journal-hero-art > div { position: absolute; z-index: 2; left: 5%; right: 8%; bottom: 5%; display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: .5rem; }
.journal-hero-art i { height: 4.5rem; border: 1px solid rgb(255 255 255 / 10%); background: rgb(7 9 12 / 68%); }

.category-nav { position: relative; z-index: 20; border-bottom: 1px solid var(--cb-border); background: rgb(8 10 14 / 98%); box-shadow: 0 .75rem 1.875rem rgb(0 0 0 / 22%); }
.category-scroll { display: flex; gap: .5rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: thin; }
.category-scroll a { flex: none; min-height: 2.75rem; display: inline-flex; align-items: center; padding: .5rem .9rem; border: 1px solid transparent; border-radius: .35rem; color: var(--cb-text-muted); font-size: .75rem; font-weight: 800; text-decoration: none; }
.category-scroll a:hover, .category-scroll a[aria-current="page"] { border-color: rgb(244 165 28 / 45%); background: rgb(244 165 28 / 6%); color: var(--cb-text); }

.featured-story { padding: 3.25rem 0 2.75rem; }
.featured-article { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 24rem; border: 1px solid var(--cb-border); background: var(--cb-surface); }
.featured-image { position: relative; min-height: 24rem; overflow: hidden; }
.featured-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgb(15 17 22 / 60%)); pointer-events: none; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.78); transition: transform .45s; }
.featured-image:hover img { transform: scale(1.025); }
.featured-image b { position: absolute; z-index: 2; left: 1.25rem; top: 1.25rem; padding: .45rem .65rem; background: var(--cb-accent); color: #161006; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.featured-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 3.2vw, 3rem); }
.article-category { margin: 0 0 .75rem; color: var(--cb-accent); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.featured-copy h2 { margin: 0; font-family: var(--cb-font-display); font-size: clamp(2rem, 3vw, 3.35rem); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; }
.featured-copy h2 a { text-decoration: none; }
.featured-copy > p:not(.article-category) { margin: 1.1rem 0; color: var(--cb-text-muted); }
.article-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.25rem; color: var(--cb-text-muted); font-size: .72rem; }

.article-section { padding-top: 3.5rem; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; }
.article-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cb-border); background: var(--cb-surface); transition: border-color .2s, transform .2s; }
.article-card:hover { border-color: rgb(244 165 28 / 36%); transform: translateY(-.2rem); }
.article-image { min-height: 15.5rem; display: block; overflow: hidden; background: #15171d; }
.article-image img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.78) brightness(.78); transition: transform .4s, filter .4s; }
.article-card:hover .article-image img { transform: scale(1.025); filter: saturate(.9) brightness(.86); }
.article-image-placeholder { display: grid; place-items: center; background: radial-gradient(circle, rgb(244 165 28 / 10%), transparent 60%), #15171d; color: rgb(255 255 255 / 28%); font-family: var(--cb-font-display); font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.article-body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; }
.article-body h2, .article-body h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.article-body h2 a, .article-body h3 a { text-decoration: none; }
.article-body > p:not(.article-category) { margin: .8rem 0 1.5rem; color: var(--cb-text-muted); font-size: .82rem; }
.article-body footer { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: auto; color: var(--cb-text-muted); font-size: .68rem; }
.article-link { display: inline-block; margin-top: .9rem; font-size: .75rem; font-weight: 800; text-decoration: none; }
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.page-numbers { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; padding: .55rem .8rem; border: 1px solid var(--cb-border); text-decoration: none; }
.page-numbers.current, .page-numbers:hover { border-color: var(--cb-accent); color: var(--cb-accent); }

.archive-hero { padding: clamp(3.75rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5.5rem); background: radial-gradient(circle at 82% 12%, rgb(244 165 28 / 8%), transparent 27%), #090b0e; }
.archive-hero .breadcrumbs { margin-bottom: 2.5rem; }
.archive-hero h1 { max-width: 58rem; margin: 0; font-family: var(--cb-font-display); font-size: clamp(3rem, 6vw, 6.25rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.archive-description { max-width: 45rem; margin-top: 1.5rem; color: var(--cb-text-muted); }

.journal-newsletter { padding: clamp(4rem, 7vw, 6rem) 0; border-top: 1px solid var(--cb-border); background: linear-gradient(135deg, #111318, #0b0d11); }
.newsletter-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.newsletter-panel h2 { margin: 0; font-family: var(--cb-font-display); font-size: clamp(2.3rem, 4vw, 4.3rem); line-height: .95; text-transform: uppercase; }
.newsletter-panel > div > p:last-child { color: var(--cb-text-muted); }
.newsletter-preview label { display: block; margin-bottom: .55rem; font-size: .75rem; font-weight: 800; }
.newsletter-preview > div { display: flex; gap: .5rem; }
.newsletter-preview input { min-width: 0; flex: 1; min-height: 3.25rem; padding: .75rem 1rem; border: 1px solid var(--cb-border-strong); background: #090b0e; color: var(--cb-text-muted); }

/* Single article and Gutenberg content. */
.article-header { padding: clamp(3.75rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4rem); background: radial-gradient(circle at 80% 10%, rgb(244 165 28 / 7%), transparent 26%), #090b0e; }
.article-header-inner { max-width: 72rem; text-align: center; }
.article-header .breadcrumbs { justify-content: center; }
.article-header .breadcrumbs ol { justify-content: center; }
.article-header h1 { max-width: 72rem; margin: 0 auto; font-family: var(--cb-font-display); font-size: clamp(2.375rem, 5.1vw, 4.25rem); font-weight: 900; line-height: .94; letter-spacing: -.04em; text-transform: uppercase; }
.article-deck { max-width: 51rem; margin: 1.75rem auto 0; color: var(--cb-text-muted); font-size: 1.08rem; }
.article-byline { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.75rem; text-align: left; }
.author-mark { width: 2.625rem; height: 2.625rem; display: grid; place-items: center; border: 1px solid rgb(244 165 28 / 50%); border-radius: 50%; color: var(--cb-accent); font-size: .68rem; font-weight: 900; }
.article-byline strong, .article-byline span { display: block; }
.article-byline strong { font-size: .78rem; }
.article-byline strong a { color: var(--cb-text); text-decoration: none; }
.article-byline strong a:hover { color: var(--cb-accent); }
.article-byline div > span { color: var(--cb-text-muted); font-size: .68rem; }
.article-hero-image { max-width: 80rem; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--cb-border); background: #121419; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82); }
.article-layout { max-width: 72rem; display: grid; grid-template-columns: minmax(0, 50rem) 16.875rem; gap: clamp(2.5rem, 6vw, 5rem); justify-content: center; padding-block: clamp(4rem, 8vw, 7.5rem); }
.article-content { min-width: 0; color: #cbd0d8; font-size: 1.04rem; line-height: 1.82; overflow-wrap: anywhere; }
.article-content > *:first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.5rem; }
.article-content > p:first-child { color: #e4e7ec; font-size: 1.22rem; line-height: 1.65; }
.article-content h2 { scroll-margin-top: calc(var(--cb-header-height, 4.625rem) + 2rem); margin: 4.6rem 0 1.4rem; color: var(--cb-text); font-family: var(--cb-font-display); font-size: clamp(2.1rem, 3.5vw, 3.7rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.article-content h3 { scroll-margin-top: calc(var(--cb-header-height, 4.625rem) + 2rem); margin: 2.5rem 0 1rem; color: var(--cb-text); font-size: 1.3rem; }
.article-content h4 { color: var(--cb-text); }
.article-content a { color: var(--cb-accent-bright); text-underline-offset: .18em; }
.article-content ul, .article-content ol { margin: 1.25rem 0 1.75rem; padding-left: 1.35rem; }
.article-content li { margin: .5rem 0; }
.article-content blockquote { margin: 2.5rem 0; padding: .5rem 0 .5rem 1.5rem; border-left: 3px solid var(--cb-accent); color: var(--cb-text); font-size: 1.15rem; }
.article-content figure { max-width: 100%; margin: 3.5rem 0; }
.article-content figure img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.article-content figcaption { margin-top: .6rem; color: var(--cb-text-muted); font-size: .75rem; }
.article-content .alignwide { width: min(100%, 62rem); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-content .alignfull { width: min(calc(100vw - 2rem), 72rem); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-content .wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.article-content .wp-block-columns { gap: clamp(1.25rem, 3vw, 2.25rem); }
.article-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.article-content .wp-block-button__link { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .7rem 1.1rem; border: 1px solid var(--cb-accent); border-radius: var(--cb-radius-sm); background: var(--cb-accent); color: #08090c; font-size: .8rem; font-weight: 850; text-decoration: none; }
.article-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--cb-text); }
.article-content .wp-block-embed { max-width: 100%; }
.article-content iframe { max-width: 100%; }
.article-content pre, .article-content code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.article-content pre { max-width: 100%; overflow-x: auto; padding: 1.25rem; border: 1px solid var(--cb-border); background: #0c0e12; font-size: .85rem; }
.article-content hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--cb-border); }
.article-content .wp-block-table { max-width: 100%; overflow-x: auto; margin: 2rem 0; border: 1px solid var(--cb-border); }
.article-content table { width: 100%; min-width: 38rem; border-collapse: collapse; background: var(--cb-surface); font-size: .85rem; }
.article-content th, .article-content td { padding: .9rem 1rem; border: 1px solid var(--cb-border); text-align: left; }
.article-content th { color: var(--cb-text); }
.article-content .editorial-note, .article-content .editorial-tip, .article-content .editorial-warning { margin: 2.5rem 0; padding: 1.35rem 1.5rem; border-left: 3px solid #7f8c9d; background: #111318; }
.article-content .editorial-tip { border-left-color: #63b98f; }
.article-content .editorial-warning { border-left-color: var(--cb-accent); }
.article-content .editorial-note > :last-child, .article-content .editorial-tip > :last-child, .article-content .editorial-warning > :last-child { margin-bottom: 0; }
.article-sidebar { min-width: 0; }
.toc { position: sticky; top: calc(var(--cb-header-height, 4.625rem) + 2rem); padding: 1.35rem; border: 1px solid var(--cb-border); background: var(--cb-surface); }
.toc h2 { margin: 0 0 .9rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { border-top: 1px solid rgb(255 255 255 / 6%); }
.toc li.toc-level-3 { padding-left: .8rem; }
.toc a { display: block; padding: .6rem 0; color: var(--cb-text-muted); font-size: .73rem; text-decoration: none; }
.toc a:hover { color: var(--cb-accent); }
.article-products { margin-top: 4.5rem; }
.article-product-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: center; margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--cb-border); background: var(--cb-surface); }
.article-product-image { min-height: 17rem; display: grid; place-items: center; background: radial-gradient(ellipse, rgb(244 165 28 / 8%), transparent 70%), #15171d; }
.article-product-image img { width: 96%; height: 16rem; object-fit: contain; }
.article-product-card h3 { margin: 0 0 .6rem; }
.article-product-card h3 a { color: var(--cb-text); text-decoration: none; }
.article-product-card p { font-size: .92rem; }
.article-product-price { color: var(--cb-text); font-weight: 900; }
.related-articles { border-top: 1px solid var(--cb-border); background: var(--cb-bg-secondary); }
.related-grid .article-card:hover { transform: none; }

@media (max-width: 68.75rem) {
	.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.article-layout { grid-template-columns: minmax(0, 1fr) 14rem; gap: 2.75rem; }
}
@media (max-width: 56.25rem) {
	.journal-hero-grid, .featured-article, .article-layout { grid-template-columns: 1fr; }
	.journal-hero-grid { padding-top: 2rem; }
	.journal-hero-art { min-height: 19rem; }
	.featured-image { min-height: 20rem; }
	.featured-image::after { background: linear-gradient(0deg, rgb(15 17 22 / 68%), transparent 50%); }
	.article-layout { max-width: 50rem; }
	.toc { position: static; }
	.newsletter-panel { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
	.blog-page .split-heading, .article-product-card { grid-template-columns: 1fr; }
	.journal-hero-copy h1 { font-size: clamp(3.1rem, 10.8vw, 5.3rem); overflow-wrap: anywhere; }
	.article-grid { grid-template-columns: 1fr; }
	.article-image { min-height: 14rem; }
	.article-header h1 { font-size: clamp(2.375rem, 11vw, 4.25rem); }
	.article-content { font-size: 1rem; line-height: 1.76; }
	.article-content > p:first-child { font-size: 1.15rem; }
	.article-content .wp-block-gallery { grid-template-columns: 1fr; }
	.related-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
	.related-grid .article-card { flex: 0 0 min(84vw, 22.5rem); scroll-snap-align: start; }
	.newsletter-preview > div { align-items: stretch; flex-direction: column; }
}
@media (max-width: 32.5rem) {
	.journal-hero-art { min-height: 16rem; }
	.featured-image { min-height: 14rem; }
	.article-header h1 { font-size: clamp(2.375rem, 12vw, 3.25rem); }
	.article-hero-image { width: 100%; border-inline: 0; }
	.article-layout { padding-inline: 1rem; }
	.article-content .alignfull { width: 100vw; }
	.article-product-card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.featured-image img, .article-image img, .article-card { transition: none; }
}
