/**
 * HOME page — Claude Design visual-source-of-truth stylesheet.
 *
 * Phase 16F: rebuilt against a live-rendered extraction of the shared
 * "エコログ トップページ (standalone)" Claude Design Bundled Page
 * (Playwright-rendered DOM + computed styles at a 1440px viewport — the
 * artifact's own React/bundler runtime, `x-dc`/`sc-if` interpolation
 * markers, unpkg CDN script tags, etc. are all rendering-only and are
 * not present anywhere in this file or the PHP that uses it). Numbers
 * below (paddings, grid columns, font sizes, colors) are taken directly
 * from that extraction's computed styles, not approximated.
 *
 * Formally separated from assets/css/front-redesign.css (Phase 10's
 * original front-page stylesheet) per the Phase 16F brief — see
 * inc/front-redesign.php for the enqueue/dependency change. Fonts,
 * design tokens (--sr-*), the fixed/scroll-aware #masthead mechanism
 * (including its light/dark ink switching and hide-on-scroll behavior —
 * assets/js/site-header-scroll.js), the [data-reveal] entrance-animation
 * primitive, and the shared .redesign-card component all still live in
 * assets/css/redesign-shared.css and apply here unchanged; this file is
 * purely this page's own layout on top of them.
 *
 * The two giant "ecolog" wordmarks (.brand-hero__wordmark,
 * .home-footer-brand__wordmark span) are literal brand strings, not
 * site-title output — bloginfo('name') / header.php / footer.php are
 * untouched and keep serving every other page with the real Site Title
 * ("エコログ").
 */

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif/instrument-serif-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif/instrument-serif-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

@layer overrides {
	/* ==========================================================
	   Shared local tokens for this page's 12-col grid system.
	   The reference's own scale doesn't map cleanly onto the
	   theme's --space-* scale (max --space-16 is 96px; this page
	   uses 120px/160px section rhythm and a fixed 40px gutter/gap
	   at every breakpoint from 1024px up), so explicit values are
	   used directly here, same precedent as the wordmark's 104px
	   size already established in Phase 16.
	   ========================================================== */
	:root {
		--cd-gutter: 40px;
		--cd-gap: 40px;
	}

	/* ---------- HOME-only header (header-front.php, loaded via
	   get_header('front')). Reuses #masthead's fixed positioning,
	   light/dark ink switching (.is-theme-dark) and hide-on-scroll
	   behavior (.is-hidden) from redesign-shared.css +
	   site-header-scroll.js unchanged — that script already reads
	   this page's [data-theme] sections, so no page-specific script
	   is needed to reproduce the reference's scroll-aware header. ---------- */
	.home-header {
		background: transparent;
		height: var(--sr-header-h);
	}

	.home-header__inner {
		max-width: none;
		height: 100%;
		margin: 0;
		padding-inline: var(--cd-gutter);
		display: flex;
		align-items: center;
		gap: var(--space-8);
		border-bottom: 0;
	}

	.home-header__mark {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		color: inherit;
	}

	.home-header__mark-icon {
		position: relative;
		display: block;
		width: 26px;
		height: 26px;
	}

	.home-header__mark-icon-a {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: 16px;
		height: 16px;
		border: 1px solid currentcolor;
	}

	.home-header__mark-icon-b {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		width: 16px;
		height: 16px;
		background: currentcolor;
	}

	.home-header__nav {
		margin-inline-start: auto;
	}

	.home-header__nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: baseline;
		gap: var(--cd-gap);
	}

	.home-header__nav a {
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: inherit;
		text-decoration: none;
	}

	.home-header__nav .current-menu-item a,
	.home-header__nav a:hover,
	.home-header__nav a:focus-visible {
		border-bottom: 1px solid currentcolor;
		padding-bottom: 5px;
	}

	.home-header__cta {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-inline-start: 56px;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
		transition: opacity 220ms var(--sr-ease);
	}

	.home-header__cta:hover,
	.home-header__cta:focus-visible {
		opacity: 0.62;
	}

	.home-header__toggle {
		display: none;
	}

	@media (max-width: 767px) {
		.home-header {
			height: auto;
			min-height: var(--sr-header-h);
		}

		.home-header__toggle {
			display: block;
			min-height: 44px;
			padding: 0 var(--space-3);
			font-size: 0.8125rem;
			color: inherit;
			background: transparent;
			border: 1px solid currentcolor;
			margin-inline-start: auto;
		}

		.home-header__nav {
			display: none;
			width: 100%;
			margin-top: var(--space-3);
			margin-inline-start: 0;
		}

		.home-header__nav ul {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-3);
		}

		html.js .home-header__nav {
			display: none;
		}

		html.js .home-header__nav.is-open {
			display: block;
		}

		html:not(.js) .home-header__nav {
			display: block;
		}

		.home-header__inner {
			flex-wrap: wrap;
			padding-block: var(--space-3);
		}

		/* Collapsed below 768px in favor of the hamburger menu and the
		   Hero's own "ニュースを読む" action — keeping it here too would
		   either wrap below the fixed header (overlapping the content
		   beneath it, since --sr-header-h assumes a single-row header)
		   or force every page's shared --sr-header-h taller just for
		   this one link. */
		.home-header__cta {
			display: none;
		}
	}

	/* WordPress admin toolbar (logged-in only): shift the fixed HOME
	   header below it so the two never overlap or clip. Core's toolbar
	   is 32px tall at ≥783px and 46px below that. */
	.admin-bar.redesign #masthead.home-header {
		inset-block-start: 32px;
	}

	@media (max-width: 782px) {
		.admin-bar.redesign #masthead.home-header {
			inset-block-start: 46px;
		}
	}

	/* ---------- Decorative 12-col grid-line overlay, matching the
	   reference's own aria-hidden divs (no extra markup: a
	   pseudo-element is exactly as inert to assistive tech, and every
	   section below is already position:relative). Light-section lines
	   use --sr-border-subtle; the dark News section uses a faint white
	   line instead. Desktop-only (1024px+) — a purely decorative detail
	   not worth the clutter on narrow viewports. ---------- */
	.brand-hero::before,
	.home-knowledge::before,
	.home-glossary::before,
	.home-footer-brand::before {
		content: "";
		position: absolute;
		inset: 0;
		margin-inline: var(--cd-gutter);
		pointer-events: none;
		background-image: repeating-linear-gradient(
			90deg,
			var(--sr-border-subtle) 0 1px,
			transparent 1px calc(100% / 12)
		);
		border-inline-end: 1px solid var(--sr-border-subtle);
		display: none;
	}

	.home-news::before {
		content: "";
		position: absolute;
		inset: 0;
		margin-inline: var(--cd-gutter);
		pointer-events: none;
		background-image: repeating-linear-gradient(
			90deg,
			rgb(244 244 238 / 9%) 0 1px,
			transparent 1px calc(100% / 12)
		);
		display: none;
	}

	@media (min-width: 1024px) {
		.brand-hero::before,
		.home-news::before,
		.home-knowledge::before,
		.home-glossary::before,
		.home-footer-brand::before {
			display: block;
		}
	}

	/* ---------- Brand hero ---------- */
	.brand-hero {
		position: relative;
		padding: calc(var(--sr-header-h) + var(--space-6)) var(--cd-gutter) var(--space-12);
		overflow: hidden;
	}

	.brand-hero__inner {
		position: relative;
		z-index: 1;
		max-width: none;
		margin-inline: 0;
	}

	@media (min-width: 1024px) {
		.brand-hero {
			padding-top: 152px;
		}

		.brand-hero__inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
		}

		.brand-hero__col-main {
			grid-column: 1 / 7;
			padding-inline-end: 56px;
		}

		.brand-hero__col-side {
			grid-column: 8 / 13;
		}

		.brand-hero__topics {
			grid-column: 1 / -1;
		}
	}

	.brand-hero__col-side {
		margin-top: var(--space-8);
	}

	@media (min-width: 1024px) {
		.brand-hero__col-side {
			margin-top: 0;
		}
	}

	/* Full-bleed background photo layer (only rendered when
	   ecolog_get_hero_photo_url() is set) — spans the right ~44% of the
	   section, fading into the cream background via layered gradients,
	   matching the reference exactly rather than a small boxed image.
	   Desktop-only: on narrower viewports the two-column layout itself
	   collapses, so a background-photo treatment behind stacked text
	   would hurt legibility instead of matching anything. */
	.brand-hero__photo-bg {
		display: none;
	}

	@media (min-width: 1024px) {
		.brand-hero__photo-bg {
			display: block;
			position: absolute;
			inset: 0 0 96px 56%;
			overflow: hidden;
		}

		.brand-hero__photo-bg img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.brand-hero__photo-bg::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background:
				linear-gradient(90deg, var(--sr-bg) 0%, rgb(244 244 238 / 0%) 17%),
				linear-gradient(rgb(244 244 238 / 94%) 0%, rgb(244 244 238 / 62%) 6%, rgb(244 244 238 / 0%) 13%),
				linear-gradient(rgb(244 244 238 / 0%) 38%, rgb(244 244 238 / 88%) 56%, rgb(244 244 238 / 96%) 100%);
		}

		.brand-hero::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background: linear-gradient(90deg, var(--sr-bg) 0%, var(--sr-bg) 54%, rgb(244 244 238 / 0%) 64%);
		}
	}

	.brand-hero__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		line-height: 1.3;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.brand-hero__wordmark {
		margin: var(--space-3) 0 0;
		font-family: "Instrument Serif", Georgia, serif;
		font-size: clamp(3.5rem, 10.5vw, 6.5rem);
		font-weight: 400;
		line-height: 0.9;
		letter-spacing: -0.01em;
		text-transform: uppercase;
		color: var(--sr-ink);
	}

	.brand-hero__heading {
		margin: var(--space-4) 0 0;
		max-width: 30em;
		font-size: 2.25rem;
		font-weight: 700;
		line-height: 1.35;
		color: var(--sr-ink);
	}

	.brand-hero__lead,
	.brand-hero__disclaimer {
		margin: var(--space-4) 0 0;
		max-width: 44em;
		font-size: 0.875rem;
		line-height: 1.8;
		color: var(--sr-muted);
	}

	.brand-hero__steps {
		display: block;
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
	}

	.brand-hero__step {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: var(--space-3);
		align-items: center;
		min-height: 52px;
		border-top: 1px solid var(--sr-border);
	}

	.brand-hero__step:last-child {
		border-bottom: 1px solid var(--sr-border);
	}

	.brand-hero__step-no {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		color: rgb(22 33 28 / 34%);
		text-align: right;
	}

	.brand-hero__step-label {
		font-size: 1.25rem;
		line-height: 1.4;
		font-weight: 500;
		color: var(--sr-ink);
	}

	.brand-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3) var(--cd-gap);
		margin-top: var(--space-8);
	}

	.brand-hero__action {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		min-height: 44px;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.brand-hero__action:hover,
	.brand-hero__action:focus-visible {
		opacity: 0.62;
	}

	.brand-hero__facts {
		display: grid;
		grid-template-columns: 1fr auto;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
	}

	.brand-hero__fact {
		display: contents;
	}

	.brand-hero__fact dt {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 35px;
		margin: 0;
		border-top: 1px solid var(--sr-border);
	}

	.brand-hero__fact dt::before {
		content: "";
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: currentcolor;
		flex: 0 0 auto;
	}

	.brand-hero__fact:last-child dt {
		border-bottom: 1px solid var(--sr-border);
	}

	.brand-hero__fact dd {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 35px;
		border-top: 1px solid var(--sr-border);
		color: var(--sr-muted);
	}

	.brand-hero__fact:last-child dd {
		border-bottom: 1px solid var(--sr-border);
	}

	@media (min-width: 1024px) {
		.brand-hero__col-side {
			padding-top: 600px;
		}
	}

	@media (min-width: 1024px) and (max-width: 1279px) {
		.brand-hero__col-side {
			padding-top: 420px;
		}
	}

	.brand-hero__topics {
		position: relative;
		margin-top: var(--space-12);
		border-top: 1px solid var(--sr-border);
		padding-block: var(--space-4);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4);
		align-items: baseline;
		font-size: 0.75rem;
		line-height: 1.3;
		letter-spacing: 0.06em;
	}

	.brand-hero__topics-label {
		color: rgb(22 33 28 / 34%);
		text-transform: uppercase;
	}

	.brand-hero__topics a {
		display: inline;
		min-height: 0;
		padding: 0;
		border: 0;
		color: var(--sr-ink);
		text-decoration: none;
	}

	.brand-hero__topics a:hover,
	.brand-hero__topics a:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Shared "home-*" section chrome ---------- */
	.home-news,
	.home-knowledge,
	.home-method,
	.home-glossary,
	.home-final-cta {
		position: relative;
	}

	.home-knowledge,
	.home-glossary {
		padding: var(--space-12) var(--cd-gutter);
	}

	@media (min-width: 1024px) {
		.home-knowledge,
		.home-glossary {
			padding: 160px var(--cd-gutter);
		}
	}

	.home-news__inner,
	.home-knowledge__inner,
	.home-method__inner,
	.home-glossary__inner {
		position: relative;
		max-width: none;
		margin-inline: 0;
	}

	.home-news__heading,
	.home-knowledge__heading,
	.home-method__heading,
	.home-glossary__heading,
	.home-final-cta__heading {
		margin: 0;
		font-size: 2.25rem;
		font-weight: 700;
		line-height: 1.35;
		color: var(--sr-ink);
	}

	.home-knowledge__heading,
	.home-glossary__heading {
		font-size: 3rem;
		line-height: 1.3;
	}

	.home-news__description,
	.home-knowledge__lede,
	.home-method__lede,
	.home-glossary__lede {
		margin: var(--space-4) 0 0;
		max-width: 40em;
		font-size: 0.875rem;
		line-height: 1.8;
		color: var(--sr-muted);
	}

	.home-news__disclaimer {
		margin: var(--space-6) 0 0;
		font-size: 0.75rem;
		line-height: 1.8;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 50%);
	}

	.home-news__more,
	.home-knowledge__more,
	.home-method__more,
	.home-glossary__more {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-6);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.home-news__more:hover,
	.home-knowledge__more:hover,
	.home-method__more:hover,
	.home-glossary__more:hover,
	.home-news__more:focus-visible,
	.home-knowledge__more:focus-visible,
	.home-method__more:focus-visible,
	.home-glossary__more:focus-visible {
		opacity: 0.62;
	}

	/* ---------- News: dark, fixed-left / scrolling-right layout ---------- */
	.home-news {
		padding: var(--space-12) var(--cd-gutter);
	}

	@media (min-width: 1024px) {
		.home-news {
			padding: 120px 0 120px var(--cd-gutter);
		}

		.home-news__inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
		}

		.home-news__col-main {
			grid-column: 1 / 4;
			padding-inline-end: var(--cd-gutter);
			position: sticky;
			top: 120px;
			align-self: start;
		}

		.home-news__grid {
			grid-column: 4 / 13;
		}
	}

	.home-news__col-main {
		min-width: 0;
	}

	.home-news__counter {
		margin: var(--space-8) 0 0;
		font-size: 3rem;
		line-height: 1;
		font-weight: 500;
		letter-spacing: 0.02em;
	}

	.home-news__counter-label {
		margin: var(--space-1) 0 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(244 244 238 / 50%);
	}

	.home-news__grid {
		margin: var(--space-6) 0 0;
		padding: 0 0 var(--space-4);
		list-style: none;
		display: flex;
		gap: var(--cd-gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		outline-offset: 4px;
	}

	.home-news .ecolog-news-card {
		flex: 0 0 min(440px, 84vw);
		scroll-snap-align: start;
	}

	.home-news .ecolog-news-card__title {
		margin: var(--space-3) 0 0;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.4;
		color: var(--sr-ink);
	}

	.home-news .ecolog-news-card__title a {
		color: inherit;
		text-decoration: none;
	}

	.home-news .ecolog-news-card__title a:hover,
	.home-news .ecolog-news-card__title a:focus-visible {
		opacity: 0.62;
	}

	.home-news .ecolog-news-card__summary {
		margin: var(--space-3) 0 0;
		font-size: 0.875rem;
		line-height: 1.8;
		color: var(--sr-muted);
	}

	.home-news .ecolog-news-card__meta {
		margin: var(--space-4) 0 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		color: rgb(244 244 238 / 50%);
	}

	.home-news .ecolog-news-card__cta {
		display: inline-flex;
		margin-top: var(--space-2);
		font-size: 0.75rem;
		color: var(--sr-ink);
	}

	/* ---------- Knowledge: two-column intro + two-column card grid,
	   reusing .redesign-card (see assets/css/redesign-shared.css). ---------- */
	.home-knowledge__intro {
		display: block;
	}

	@media (min-width: 1024px) {
		.home-knowledge__intro {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
		}

		.home-knowledge__col-heading {
			grid-column: 1 / 7;
			padding-inline-end: 56px;
		}

		.home-knowledge__col-desc {
			grid-column: 8 / 13;
		}
	}

	.home-knowledge__col-desc .home-knowledge__lede {
		margin-top: 0;
	}

	.home-knowledge__grid {
		margin: var(--space-12) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	@media (min-width: 640px) {
		.home-knowledge__grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 96px var(--cd-gap);
		}
	}

	@media (min-width: 1024px) {
		.home-knowledge__grid {
			margin-top: 120px;
			gap: 120px var(--cd-gap);
		}
	}

	.home-knowledge .redesign-card__title {
		font-size: 1.625rem;
	}

	.home-knowledge .redesign-card__specs {
		margin-top: var(--space-8);
		font-size: 0.8125rem;
	}

	.home-knowledge .redesign-card__specs dt,
	.home-knowledge .redesign-card__specs dd {
		min-height: 35px;
	}

	.home-knowledge .redesign-card__read-more {
		margin-top: var(--space-6);
	}

	/* ---------- Method: photo section, left copy + right 3-panel grid ---------- */
	.home-method {
		min-height: 780px;
		display: grid;
		color: #f4f4ee;
		overflow: hidden;
		background: var(--sr-ink);
	}

	.home-method__photo {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.home-method__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home-method__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(22 33 28 / 62%);
	}

	.home-method__inner {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--space-12);
		padding: var(--space-12) var(--cd-gutter);
		align-content: space-between;
	}

	@media (min-width: 1024px) {
		.home-method__inner {
			grid-template-columns: repeat(12, 1fr);
			row-gap: 0;
			padding: 120px var(--cd-gutter);
		}

		.home-method__intro {
			grid-column: 1 / 5;
			padding-inline-end: var(--cd-gutter);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.home-method__grid {
			grid-column: 7 / 13;
		}
	}

	.home-method__more {
		align-self: flex-start;
		margin-top: 80px;
	}

	.home-method__grid {
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
		gap: var(--space-4);
		align-content: start;
	}

	.home-method__pillar {
		background: rgb(22 33 28 / 62%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		padding: var(--space-4);
	}

	@supports not (backdrop-filter: blur(1px)) {
		.home-method__pillar {
			background: rgb(22 33 28 / 86%);
		}
	}

	@media (min-width: 1024px) {
		.home-method__pillar:nth-child(3) {
			grid-column: -2;
		}
	}

	.home-method__pillar-heading {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		font-size: 1.25rem;
		font-weight: 500;
		line-height: 1.4;
		color: #f4f4ee;
	}

	.home-method__pillar-heading::after {
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: currentcolor;
		flex: 0 0 auto;
	}

	.home-method__pillar-body {
		margin: 56px 0 0;
		font-size: 0.8125rem;
		line-height: 1.8;
		letter-spacing: 0.02em;
		color: #d3d3ce;
	}

	.home-method__pillar-body + .home-method__pillar-body {
		margin-top: 34px;
	}

	/* ---------- Glossary: two-column intro + term list, optional photo ---------- */
	.home-glossary__inner {
		display: block;
	}

	@media (min-width: 1024px) {
		.home-glossary__inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			row-gap: 120px;
		}

		.home-glossary__intro {
			grid-column: 1 / 7;
			padding-inline-end: 56px;
		}

		.home-glossary__list {
			grid-column: 8 / 13;
		}

		.home-glossary__photo {
			grid-column: 1 / 6;
		}
	}

	.home-glossary__list {
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 1024px) {
		.home-glossary__list {
			margin-top: 0;
		}
	}

	.home-glossary__term {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: var(--space-3);
		align-items: center;
		min-height: 44px;
	}

	.home-glossary__term-no {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		color: rgb(22 33 28 / 34%);
		text-align: right;
	}

	.home-glossary__term a,
	.home-glossary__term span:not(.home-glossary__term-no) {
		font-size: 2.25rem;
		line-height: 1.35;
		font-weight: 500;
		color: var(--sr-ink);
		text-decoration: none;
	}

	.home-glossary__term a:hover,
	.home-glossary__term a:focus-visible {
		opacity: 0.62;
	}

	.home-glossary__photo {
		margin-top: var(--space-12);
	}

	.home-glossary__photo-media {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: rgb(22 33 28 / 4%);
	}

	.home-glossary__photo-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home-glossary__photo-caption {
		margin: var(--space-3) 0 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	/* ---------- Final CTA: photo section, bottom-aligned heading ---------- */
	.home-final-cta {
		min-height: 780px;
		display: grid;
		color: #f4f4ee;
		overflow: hidden;
		background: var(--sr-ink);
	}

	.home-final-cta__photo {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.home-final-cta__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home-final-cta__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(22 33 28 / 62%);
	}

	.home-final-cta__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100%;
		padding: var(--space-12) var(--cd-gutter) var(--space-16);
	}

	@media (min-width: 1024px) {
		.home-final-cta__inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			align-content: end;
			padding: 120px var(--cd-gutter) 160px;
		}

		.home-final-cta__inner > * {
			grid-column: 1 / 8;
		}
	}

	.home-final-cta__link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-8);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: #f4f4ee;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.home-final-cta__link:hover,
	.home-final-cta__link:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Footer brand ---------- */
	.home-footer-brand-wrap {
		border-top: 0;
	}

	.home-footer-brand {
		position: relative;
		padding: var(--space-12) var(--cd-gutter) 0;
	}

	@media (min-width: 1024px) {
		.home-footer-brand {
			padding: 160px var(--cd-gutter) 0;
		}
	}

	.home-footer-brand__intro {
		display: block;
	}

	@media (min-width: 1024px) {
		.home-footer-brand__intro {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			align-items: start;
		}

		.home-footer-brand__intro-main {
			grid-column: 1 / 8;
			padding-inline-end: 56px;
		}

		.home-footer-brand__contact-item {
			grid-column: span 2 / span 2;
		}
	}

	.home-footer-brand__heading {
		margin: 0;
		font-size: 2.25rem;
		font-weight: 700;
		line-height: 1.35;
		color: var(--sr-ink);
	}

	@media (min-width: 1024px) {
		.home-footer-brand__heading {
			font-size: 3rem;
			line-height: 1.3;
		}
	}

	.home-footer-brand__link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-6);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.home-footer-brand__link:hover,
	.home-footer-brand__link:focus-visible {
		opacity: 0.62;
	}

	.home-footer-brand__contact-item {
		margin-top: var(--space-4);
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
	}

	.home-footer-brand__contact-item::before {
		content: "";
		width: 5px;
		height: 5px;
		margin-top: 0.4em;
		border-radius: 50%;
		background: currentcolor;
		flex: 0 0 auto;
	}

	.home-footer-brand__contact-item a {
		color: var(--sr-ink);
		text-decoration: none;
	}

	.home-footer-brand__contact-item a:hover,
	.home-footer-brand__contact-item a:focus-visible {
		opacity: 0.62;
	}

	.home-footer-brand__columns {
		margin-top: var(--space-12);
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--space-8);
	}

	@media (min-width: 1024px) {
		.home-footer-brand__columns {
			margin-top: 160px;
			grid-template-columns: repeat(12, 1fr);
			row-gap: 0;
		}

		.home-footer-brand__nav {
			grid-column: 1 / 4;
		}

		.home-footer-brand__social {
			grid-column: 8 / 11;
		}

		.home-footer-brand__legal {
			grid-column: 11 / 13;
		}
	}

	.home-footer-brand__nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.home-footer-brand__nav a {
		font-size: 1.5rem;
		line-height: 1.35;
		color: var(--sr-ink);
		text-decoration: none;
	}

	.home-footer-brand__social ul,
	.home-footer-brand__legal ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.home-footer-brand__social a,
	.home-footer-brand__legal a {
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
	}

	.home-footer-brand__nav a:hover,
	.home-footer-brand__nav a:focus-visible,
	.home-footer-brand__social a:hover,
	.home-footer-brand__social a:focus-visible,
	.home-footer-brand__legal a:hover,
	.home-footer-brand__legal a:focus-visible {
		opacity: 0.62;
	}

	.home-footer-brand__wordmark {
		position: relative;
		margin-top: var(--space-12);
		overflow: hidden;
		white-space: nowrap;
		font-size: clamp(5rem, 31vw, 32rem);
		line-height: 0.78;
		height: 0.41em;
	}

	@media (min-width: 1024px) {
		.home-footer-brand__wordmark {
			margin-top: 120px;
		}
	}

	.home-footer-brand__wordmark span {
		display: block;
		font-family: "Instrument Serif", Georgia, serif;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		color: var(--sr-ink);
	}

	.home-footer-brand__bottom {
		position: relative;
		margin-top: var(--space-4);
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-4) 0 var(--space-8);
		border-top: 1px solid var(--sr-border);
		font-size: 0.75rem;
		line-height: 1.3;
		letter-spacing: 0.06em;
	}

	.home-footer-brand__copyright {
		margin: 0;
		color: rgb(22 33 28 / 50%);
	}

	.home-footer-brand__tagline {
		margin-left: var(--space-3);
	}

	.home-footer-brand__totop {
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 4px;
	}

	.home-footer-brand__totop:hover,
	.home-footer-brand__totop:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Dark sections (news / method / final-cta) — the
	   reference alternates light/dark bands down the page; reuses the
	   same --sr-ink background + #f4f4ee/rgb(244 244 238 / X%) text
	   convention as the article detail page's dark "次に読む記事"
	   section (.related-posts[data-theme="dark"],
	   assets/css/single-redesign.css) rather than inventing a new dark
	   palette. Method/Final-CTA are photo sections (background set via
	   .home-method__photo / .home-final-cta__photo above, falling back
	   to this same solid ink color when no photo is configured) — this
	   block only needs to additionally cover News, which has no photo
	   layer of its own. ---------- */
	.home-news[data-theme="dark"] {
		background: var(--sr-ink);
		color: #f4f4ee;
	}

	.home-news[data-theme="dark"] .home-news__heading {
		color: #f4f4ee;
	}

	.home-news[data-theme="dark"] .home-news__description {
		color: #d3d3ce;
	}

	.home-news[data-theme="dark"] .home-news__disclaimer {
		color: rgb(244 244 238 / 50%);
	}

	.home-news[data-theme="dark"] .home-news__more {
		color: #f4f4ee;
	}

	.home-news[data-theme="dark"] .ecolog-news-card__title {
		color: #f4f4ee;
	}

	.home-news[data-theme="dark"] .ecolog-news-card__summary {
		color: #d3d3ce;
	}

	.home-news[data-theme="dark"] .ecolog-news-card__meta {
		color: rgb(244 244 238 / 45%);
	}

	.home-news[data-theme="dark"] .ecolog-news-card__cta {
		color: #f4f4ee;
	}
}