/* ===== Journal page — sections 1–3 ===== */

/* Safety: изображения не шире 350px */
.j-hero img,
.story img,
.bench img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* Section 1: Editorial Hero */
.j-hero {
	padding: 40px 0 28px;
}
.j-hero-grid {
	display: grid;
	gap: 22px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.j-hero-lede {
	color: var(--muted);
}
.bylines {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--muted);
}
.j-hero-mosaic {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
	.j-hero-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.j-hero-mosaic {
		display: none;
	}
}

/* Section 2: Design Story (slalom layout) */
.story {
	padding: 34px 0;
}
.story-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.2fr 0.8fr;
}
.story-copy {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px;
	position: relative;
}
.drop::first-letter {
	font-family: 'ClockerySerif', serif;
	font-size: 2.2rem;
	line-height: 1;
	padding-right: 4px;
}
.pull {
	margin: 10px 0;
	padding: 10px 12px;
	border-inline-start: 4px solid #ffd9a8;
	background: #fff7e6;
	border-radius: 10px;
}
.story-rail {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

/* Progress bar inside the article */
.progress {
	position: sticky;
	top: 58px;
	height: 6px;
	background: #f3f3f3;
	border-radius: 6px;
	margin: 6px 0 12px;
	overflow: hidden;
}
.progress span {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--brand), var(--brand-2));
	transition: width 0.15s linear;
}

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

/* Section 3: Maker’s Bench — cards with stamps */
.bench {
	padding: 34px 0;
}
.bench-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.note {
	position: relative;
	padding: 14px;
}
.note .stamp {
	position: absolute;
	right: 10px;
	top: -12px;
	width: 90px;
	height: auto;
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.note h3 {
	margin: 0 0 8px;
}
@media (max-width: 980px) {
	.bench-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.bench-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== Simplified Section 2 ===== */
.story-simple {
	padding: 34px 0;
}
.s2-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.2fr 0.8fr;
}
.s2-copy {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px;
}
.s2-points {
	list-style: disc;
	margin: 8px 0 0 18px;
	color: var(--muted);
}
.s2-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.s2-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.s2-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.s2-figs {
		grid-template-columns: 1fr;
	}
}

/* ===== Simplified Section 3 ===== */
.notes {
	padding: 34px 0;
}
.notes-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.note-card figure {
	margin: 0 0 8px;
}
.note-card img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px;
}
.note-card h3 {
	margin: 0 0 6px;
}
@media (max-width: 980px) {
	.notes-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.notes-grid {
		grid-template-columns: 1fr;
	}
}

/* retire old complex styles if ещё остались в файле */
.story,
.bench,
.story-rail,
.bench-grid,
.note .stamp,
.progress {
	display: none !important;
}
/* ===== Section 4: Quiet Home Setups ===== */
.homes {
	padding: 34px 0;
}
.homes-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.homes-points {
	list-style: disc;
	margin: 8px 0 0 18px;
	color: var(--muted);
}
.homes-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.homes-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.homes-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.homes-figs {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 5: Tools We Use ===== */
.tools {
	padding: 34px 0;
}
.tools-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tools-grid img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.tools-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.tools-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 6: Reader Letters ===== */
.letters {
	padding: 34px 0;
}
.letters-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.2fr 0.8fr;
}
.letters-copy blockquote {
	margin: 10px 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.letters-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}
.letters-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.letters-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.letters-figs {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 7: Field Tests ===== */
.field {
	padding: 34px 0;
}
.field-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.field-steps {
	margin: 8px 0 0 18px;
	color: var(--muted);
}
.field-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr 1fr;
}
.field-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.field-grid {
		grid-template-columns: 1fr;
	}
	.field-figs {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.field-figs {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 8: Materials Glossary ===== */
.gloss {
	padding: 34px 0;
}
.gloss-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gloss-card figure {
	margin: 0 0 8px;
}
.gloss-card img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px;
}
.gloss-card h3 {
	margin: 0 0 6px;
}
@media (max-width: 980px) {
	.gloss-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.gloss-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 9: Care FAQs ===== */
.care {
	padding: 34px 0;
}
.care-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.care-copy details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 12px;
	box-shadow: var(--shadow);
	margin: 8px 0;
}
.care-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}
.care-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.care-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.care-figs {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 10: Monsoon Diary ===== */
.mdiary {
	padding: 34px 0;
}
.mdiary-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.mdiary-steps {
	margin: 8px 0 0 18px;
	color: var(--muted);
}
.mdiary-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}
.mdiary-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.mdiary-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.mdiary-figs {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 11: Room Makeovers ===== */
.make {
	padding: 34px 0;
}
.make-grid {
	display: grid;
	gap: 14px;
}
.make-pairs {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
.pair-row {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.pair-cell {
	position: relative;
}
.pair img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 12px;
}
.tag {
	position: absolute;
	left: 10px;
	top: 10px;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.tag-ok {
	background: #fff7e6;
	border-color: #ffd9a8;
}
@media (max-width: 640px) {
	.pair-row {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 12: Behind the Photo ===== */
.bphoto {
	padding: 34px 0;
}
.bphoto-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.bphoto-points {
	list-style: disc;
	margin: 8px 0 0 18px;
	color: var(--muted);
}
.bphoto-figs {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bphoto-figs img {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
@media (max-width: 980px) {
	.bphoto-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.bphoto-figs {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 13: Editor’s Letter ===== */
.letter {
	padding: 34px 0;
}
.letter .sec-lede {
	color: var(--muted);
}
.letter p {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	margin: 10px 0;
}
.letter-points {
	list-style: disc;
	margin: 10px 0 0 18px;
	color: var(--muted);
}

/* ===== Section 14: Colophon ===== */
.colophon {
	padding: 34px 0 46px;
}
.colo-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.colo-grid > div {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.license {
	margin-top: 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 10px 12px;
}
@media (max-width: 980px) {
	.colo-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.colo-grid {
		grid-template-columns: 1fr;
	}
}