/*
Theme Name: Refresh Journal
Theme URI: https://journal.refreshbahamas.org
Description: A magazine-style editorial child theme for Refresh Bahamas.
Author: Refresh Bahamas
Template: blankslate
Version: 1.0.0
Text Domain: refresh-journal
*/

:root {
	--ink: #182522;
	--muted: #596560;
	--paper: #f8f7f2;
	--white: #ffffff;
	--line: #d9ded9;
	/* Refresh Bahamas platform blue: the primary Journal brand accent. */
	--green: #357edd;
	--leaf: #8db9ef;
	--sky: #43b9d7;
	--coral: #ef7458;
	--display: "Bebas Neue", Impact, sans-serif;
	--sans: "Roboto", Arial, sans-serif;
	--serif: "Roboto", Arial, sans-serif;
	--shell: min(100% - 2.5rem, 1240px);
	--reading: min(100% - 2.5rem, 720px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--green); }
button, input { font: inherit; }
.screen-reader-text { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { z-index: 100; top: 1rem; left: 1rem; width: auto; height: auto; padding: .7rem 1rem; clip: auto; color: #fff; background: var(--ink); }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar, .masthead, .site-nav-wrap, .site-main, .site-footer__inner { width: var(--shell); margin-inline: auto; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topbar a { text-decoration: none; }
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.8rem 0 1.55rem; }
.masthead__network { color: var(--green); font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.masthead__network::before { display: inline-block; width: .7rem; height: .7rem; margin-right: .42rem; content: ""; border-radius: 50%; background: var(--coral); }
.brand { display: block; color: var(--ink); text-align: center; text-decoration: none; }
.brand__title { display: block; font-family: var(--display); font-size: clamp(2.65rem, 6vw, 5.1rem); font-weight: 400; letter-spacing: .025em; line-height: .78; text-transform: uppercase; }
.brand__tagline { display: block; margin-top: .7rem; color: var(--muted); font-family: var(--sans); font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.masthead__action { justify-self: end; padding: .63rem .9rem; color: #fff; background: var(--green); font-size: .71rem; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.masthead__action:hover { color: #fff; background: var(--ink); }
.site-nav-wrap { border-top: 1px solid var(--line); }
.site-nav, .footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.65rem; margin: 0; padding: 1rem 0; list-style: none; }
.site-nav a { color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.site-nav a:hover, .site-nav .current-menu-item a { color: var(--green); }

.site-main { padding: 3.2rem 0 5.5rem; }
.section-kicker, .entry-meta, .card__category, .archive-label { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .115em; text-transform: uppercase; }
.section-heading { margin: 0; font-family: var(--display); font-size: clamp(2.35rem, 4vw, 3.65rem); font-weight: 400; letter-spacing: .01em; line-height: .92; text-transform: uppercase; }
.section-heading--rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.55rem; }
.section-heading--rule::after { height: 1px; flex: 1; content: ""; background: var(--line); }

.lead-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 1.65rem; padding-bottom: 3.8rem; border-bottom: 1px solid var(--line); }
.lead-story { min-width: 0; }
.lead-story__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--sky), var(--green)); }
.lead-story__image img, .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.lead-story__image:hover img, .card__image:hover img { transform: scale(1.025); }
.lead-story__body { max-width: 790px; padding-top: 1.15rem; }
.lead-story h1 { max-width: 750px; margin: .45rem 0 .8rem; font-family: var(--serif); font-size: clamp(2.2rem, 4.9vw, 4.5rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.lead-story h1 a, .card__title a { text-decoration: none; }
.lead-story__excerpt { max-width: 590px; margin: 0; color: var(--muted); font-size: 1.02rem; }
.lead-story__meta { margin-top: 1.1rem; color: var(--muted); font-size: .77rem; }
.lead-sidebar { display: grid; align-content: start; gap: 1.25rem; padding-left: 1.65rem; border-left: 1px solid var(--line); }
.lead-sidebar__title { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.brief { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.brief:last-child { border-bottom: 0; }
.brief h2 { margin: .3rem 0 0; font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.08; }
.brief h2 a { text-decoration: none; }

.latest { padding: 3.8rem 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--leaf), var(--green)); }
.card__body { padding-top: .95rem; }
.card__title { margin: .35rem 0 .5rem; font-family: var(--serif); font-size: clamp(1.28rem, 2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.05; }
.card__excerpt { margin: 0; color: var(--muted); font-size: .9rem; }
.card__meta { margin-top: .9rem; color: var(--muted); font-size: .72rem; }

.pillar-section { padding: 3.2rem 0; border-top: 1px solid var(--line); }
.pillar-section__top { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.pillar-section__description { max-width: 430px; margin: 0; color: var(--muted); font-size: .92rem; }
.text-link { color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.text-link::after { margin-left: .3rem; content: "→"; }

.spotlight { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; margin-top: 2rem; padding: clamp(2rem, 5vw, 4.4rem); color: var(--ink); background: #dfead2; }
.spotlight__art { min-height: 270px; background: radial-gradient(circle at 22% 30%, var(--coral) 0 11%, transparent 11.4%), radial-gradient(circle at 74% 70%, var(--sky) 0 17%, transparent 17.4%), linear-gradient(135deg, #8db46d, #dfead2); }
.spotlight h2 { max-width: 550px; margin: .35rem 0 .85rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.045em; line-height: .98; }
.spotlight p { max-width: 560px; margin: 0 0 1.2rem; }
.button { display: inline-block; padding: .78rem 1rem; color: #fff; background: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.button:hover { color: #fff; background: var(--green); }
.ecosystem { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 3.8rem; background: var(--line); border: 1px solid var(--line); }
.ecosystem__item { padding: 2rem; color: var(--ink); background: var(--white); }
.ecosystem__item h3 { margin: .55rem 0; font-family: var(--serif); font-size: 1.65rem; }
.ecosystem__item p { margin: 0 0 1rem; color: var(--muted); }

.archive-header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, .55fr); gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.archive-title, .entry-title { margin: .35rem 0 0; font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.65rem); letter-spacing: -.055em; line-height: .94; }
.archive-description { align-self: end; margin: 0; color: var(--muted); }
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; padding-top: 2.5rem; }
.pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-weight: 700; }

.entry-header { max-width: 980px; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.entry-header .entry-meta { margin-bottom: .6rem; }
.entry-dek { max-width: 670px; margin: 1.35rem 0 0; color: var(--muted); font-size: 1.16rem; }
.byline { margin: 1.3rem 0 0; color: var(--muted); font-size: .82rem; }
.byline a { color: var(--ink); font-weight: 700; }
.entry-featured { max-width: 1080px; margin: 2.7rem auto 0; }
.entry-featured img { aspect-ratio: 16 / 9; object-fit: cover; }
.entry-content { width: var(--reading); margin: 3rem auto 0; font-family: var(--serif); font-size: 1.21rem; line-height: 1.74; }
.entry-content > * { margin-top: 0; margin-bottom: 1.5em; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2.15em; font-family: var(--sans); font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.16; }
.entry-content blockquote { margin-inline: 0; padding-left: 1.4rem; border-left: 3px solid var(--coral); color: var(--green); font-size: 1.42rem; line-height: 1.4; }
.entry-content figcaption { color: var(--muted); font-family: var(--sans); font-size: .75rem; }
.entry-content a { color: var(--green); }
.entry-footer { width: var(--reading); margin: 3rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.author-box { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; width: var(--reading); margin: 3rem auto 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.author-box__avatar img { border-radius: 50%; }
.author-box h2 { margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.author-box p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }

.site-footer { color: #f6faff; background: var(--green); }
.site-footer__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; padding: 3.4rem 0 1.5rem; }
.footer-brand { font-family: var(--display); font-size: 2.55rem; letter-spacing: .02em; line-height: .8; text-transform: uppercase; }
.footer-note { max-width: 430px; margin: 1rem 0 0; color: #b7c8c1; }
.footer-menu { justify-content: flex-start; gap: .65rem 1.5rem; padding: 0; }
.footer-menu a { color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); color: #b7c8c1; font-size: .73rem; }

@media (max-width: 760px) {
	:root { --shell: min(100% - 1.5rem, 1240px); --reading: min(100% - 1.5rem, 720px); }
	.topbar { font-size: .6rem; }
	.masthead { grid-template-columns: 1fr auto; gap: .5rem; padding: 1.3rem 0; }
	.brand { grid-column: 1 / -1; grid-row: 1; margin-bottom: .65rem; }
	.masthead__network { grid-column: 1; grid-row: 2; font-size: .61rem; }
	.masthead__action { grid-column: 2; grid-row: 2; font-size: .61rem; }
	.site-nav { justify-content: flex-start; gap: .6rem 1rem; }
	.site-nav a { font-size: .64rem; }
	.site-main { padding: 2.2rem 0 3.5rem; }
	.lead-grid, .archive-header, .spotlight, .site-footer__inner { grid-template-columns: 1fr; }
	.lead-sidebar { padding-top: 1.35rem; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
	.card-grid, .archive-grid { grid-template-columns: 1fr; gap: 2rem; }
	.card { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
	.card__body { padding-top: 0; }
	.card__image { aspect-ratio: 1; }
	.card__excerpt { display: none; }
	.pillar-section__top { display: block; }
	.pillar-section__description { margin-top: .75rem; }
	.spotlight__art { min-height: 175px; }
	.ecosystem { grid-template-columns: 1fr; }
	.entry-content { font-size: 1.12rem; }
	.footer-bottom { display: block; }
	.footer-bottom p + p { margin-top: .5rem; }
}