/* ===== Journal page — base spacing (matches other pages) ===== */
:root {
	--section-pad: clamp(28px, 3.5vw, 48px);
	--section-pad-first: clamp(36px, 5vw, 60px);
}
.do-main > section {
	padding-block: var(--section-pad);
}
.do-main > section:first-child {
	padding-block: var(--section-pad-first);
}
.sec-head {
	margin-bottom: 12px;
}
.sec-title {
	margin: 4px 0 6px;
}
.sec-lede {
	margin: 0 0 10px;
}

/* ===== 1) Editorial Ribbon Hero ===== */
.j-hero {
	background: linear-gradient(#fff, #f7f9fc);
}
.j-ribbon {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 14px;
	overflow-x: auto;
	padding: 12px 1rem 6px;
	scroll-snap-type: x mandatory;
}
.j-card {
	scroll-snap-align: start;
	background: #fff;
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.j-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(13, 19, 32, 0.1);
}
.j-img {
	margin: 0 0 8px;
}

/* ===== 2) Research Notes Grid ===== */
.notes__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.ncard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.ntag {
	display: inline-block;
	background: #eef3ff;
	color: #24406b;
	padding: 0.35rem 0.6rem;
	border-radius: 999px;
	font-weight: 600;
	margin-bottom: 6px;
}
.pull {
	margin: 8px 0 0;
	padding-left: 12px;
	border-left: 3px solid #3b7be3;
	color: #24406b;
	font-weight: 600;
}
.nimg {
	margin: 8px 0 0;
}

@media (max-width: 980px) {
	.notes__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 3) Q&A Accordion + Side Strip ===== */
.qa__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: start;
}
.acc {
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 8px 18px rgba(13, 19, 32, 0.06);
	margin-bottom: 10px;
}
.qa__right {
	display: grid;
	gap: 12px;
}
.qshot {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}

@media (max-width: 980px) {
	.qa__grid {
		grid-template-columns: 1fr;
	}
}
/* ===== 4) Field Diary (alternating timeline) ===== */
.field__tl {
	position: relative;
	padding-left: 0;
	margin: 0;
}
.field__tl::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e6ecfb;
}
.fitem {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 16px 0;
}
.fitem.left .ftext {
	grid-column: 1;
}
.fitem.left .fmedia {
	grid-column: 2;
	justify-self: start;
}
.fitem.right .ftext {
	grid-column: 2;
}
.fitem.right .fmedia {
	grid-column: 1;
	justify-self: end;
}
.fmedia img {
	border-radius: 14px;
}
@media (max-width: 980px) {
	.field__tl::before {
		left: 8px;
	}
	.fitem {
		grid-template-columns: 1fr;
		padding-left: 22px;
	}
	.fitem .fmedia {
		justify-self: start;
	}
}

/* ===== 5) Myth vs Fact (contrast grid) ===== */
.myth__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.mcard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.mbadge,
.fbadge {
	display: inline-block;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	font-weight: 700;
	margin-bottom: 6px;
}
.mbadge {
	background: #ffe8ea;
	color: #a8212d;
}
.fbadge {
	background: #e7f6e9;
	color: #1f7a37;
}
.mimg {
	margin: 8px 0 0;
}
@media (max-width: 980px) {
	.myth__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 6) Micro-Exercises (steps + shots) ===== */
.micro__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
}
.msteps {
	margin: 8px 0 0 1rem;
}
.micro__shots {
	display: grid;
	gap: 12px;
}
.mshot {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
@media (max-width: 980px) {
	.micro__grid {
		grid-template-columns: 1fr;
	}
}
/* ===== 7) Turn Count Analysis ===== */
.turns__rail {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 10px;
}
.tstat {
	background: #fff;
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.tstat h3 {
	margin: 0;
	font-size: 1.6rem;
	color: #0d1320;
}
.turns__viz {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
.tviz {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
@media (max-width: 980px) {
	.turns__rail {
		grid-template-columns: 1fr;
	}
	.turns__viz {
		grid-template-columns: 1fr;
	}
}

/* ===== 8) Long Read (editorial + side images) ===== */
.longread__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: start;
}
.article {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.longread__side {
	display: grid;
	gap: 12px;
}
.lside {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
@media (max-width: 980px) {
	.longread__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 9) Cooling Trials Strip ===== */
.ctrials__band {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, 1fr);
}
.ctile {
	background: #fff;
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.ctimg {
	margin: 0 0 8px;
}
@media (max-width: 980px) {
	.ctrials__band {
		grid-template-columns: 1fr;
	}
}
/* ===== 10) Mini Interview ===== */
.interview {
	padding-block: var(--section-pad);
}
.interview__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: start;
}
.iv__side {
	display: grid;
	gap: 12px;
}
.iv__face,
.iv__room {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	margin: 0;
}
.iv__body {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.iv__qa {
	margin: 8px 0 0;
}
.iv__qa dt {
	font-weight: 700;
	margin-top: 8px;
}
.iv__qa dd {
	margin-left: 0;
}

@media (max-width: 980px) {
	.interview__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 11) Side-by-Side Teardown ===== */
.teardown {
	padding-block: var(--section-pad);
}
.td__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}
.td__item {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.td__note {
	margin-top: 10px;
}

@media (max-width: 980px) {
	.td__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 12) How We Test (checklist) ===== */
.howtest {
	padding-block: var(--section-pad);
}
.howtest__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
}
.ht__list {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.ht__checks {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}
.ht__checks li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.45rem 0;
}
.ht__checks i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #e6f0ff;
	box-shadow: inset 0 0 0 2px #3b7be3;
	flex: 0 0 16px;
	margin-top: 0.25rem;
}
.ht__shots {
	display: grid;
	gap: 12px;
}
.ht__img {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}

@media (max-width: 980px) {
	.howtest__grid {
		grid-template-columns: 1fr;
	}
}
/* ===== 13) Posture Micro-Guide ===== */
.posture {
	padding-block: var(--section-pad);
}
.posture__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
.pcard {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.posture__tips {
	margin: 10px 0 0 1rem;
}
@media (max-width: 980px) {
	.posture__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 14) Materials Deep Dive ===== */
.materials {
	padding-block: var(--section-pad);
}
.materials__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: start;
}
.mdesc {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.mgloss {
	margin: 8px 0 0;
}
.mgloss dt {
	font-weight: 700;
	margin-top: 8px;
}
.mgloss dd {
	margin-left: 0;
}
.mshots {
	display: grid;
	gap: 12px;
}
.mshot {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
@media (max-width: 980px) {
	.materials__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 15) Case Study: One-Week Switch ===== */
.casestudy {
	padding-block: var(--section-pad);
}
.casestudy__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr 0.8fr;
	align-items: start;
}
.cshot {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.cstats {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.cnums {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}
.cnums b {
	color: #0d1320;
}
@media (max-width: 980px) {
	.casestudy__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== 16) Editor’s Picks ===== */
.editors {
	padding-block: var(--section-pad);
}
.editors__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
}
.ecard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.eimg {
	margin: 0 0 8px;
}
.link {
	color: #3b7be3;
	text-decoration: none;
}
.link:hover {
	text-decoration: underline;
}
@media (max-width: 980px) {
	.editors__grid {
		grid-template-columns: 1fr;
	}
}