/* yamadauca theme — visual design ported from the live Nishiki Pro site's
   CSS custom properties (colors, fonts, spacing) captured 2026-08-22. */

:root {
	--color-bg: #ffffff;
	--color-text: #222222;
	--color-text-muted: #aaaaaa;
	--color-accent: #7a6a58;
	--font-body: "Roboto", "Droid Sans", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	--content-width: 1000px;
	--wide-width: 1200px;
	--header-height: 70px;
	--header-height-mobile: 60px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.04em;
	margin: 0 0 1.4em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid #eee;
}

/* Only the top page hides the header until scroll, then fades it in.
   Every other page shows it immediately, fixed in place. */

body.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	pointer-events: none;
}

body.home .site-header.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.site-header__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2rem;
}

.site-logo {
	display: flex;
	align-items: center;
	color: var(--color-text);
	flex-shrink: 0;
}

.site-logo__mark,
.site-logo img.custom-logo {
	width: auto;
	max-height: 36px;
}

.site-logo__text {
	margin-left: 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-text);
	white-space: nowrap;
}

.site-nav {
	min-width: 0;
}

.site-nav ul.menu {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--color-text);
}

/* Full-screen overlay nav (mobile) */

.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(34, 34, 34, 0.95);
	color: #fff;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.menu-overlay.is-open {
	display: flex;
}

.menu-overlay__nav ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-align: center;
}

.menu-overlay__nav a {
	color: #fff;
	font-size: 1.25rem;
}

.menu-overlay__close {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
}

/* Page/post title band */

.page-title-band {
	background: none;
	color: var(--color-text);
	padding: 5rem 2rem 3rem;
	text-align: center;
	border-bottom: 1px solid #eee;
}

.page-title-band__heading {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
}

/* Scroll-reveal for front-page content blocks (mirrors the header's fade-in) */

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Full-viewport hero (front page). One full screen per breakpoint, no cropping logic
   needed beyond object-fit — same idea at every size, just the viewport itself changes. */

.hero-full {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #111;
}

.hero-full__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Reveal treatment: starts desaturated/scaled/invisible, fades and un-zooms in quickly,
   then slowly bleeds back to full color — same pattern used for the work photos on
   kakegawa.biz. Runs once, on load, via IntersectionObserver (see main.js). */

.reveal-img {
	/* This (not a JS-added class) is what the browser paints on the very first frame,
	   before main.js has even run — bright, washed-out, almost-overexposed monochrome,
	   per the reference image. Gating this behind a JS-added class caused a real bug:
	   the first paint showed filter:none, and adding the class afterwards animated
	   *toward* washed-out over the full 12s, so it never visibly showed at all before
	   being redirected to full color. Baking it into the unconditional default (same
	   pattern as .reveal for text) fixes that — there's nothing to transition away
	   from because this is the only look ever painted until .in is added. */
	opacity: 0;
	transform: scale(1.06);
	/* saturate(1) here is a no-op visually, but it's required for the transition below:
	   browsers only smoothly interpolate filter lists that have the same functions in the
	   same order on both ends. Without a matching saturate() here, this list (3 functions)
	   doesn't match .reveal-img.in's list (4 functions, saturate added) and the browser
	   falls back to discrete interpolation — i.e. it jumps instantly instead of animating,
	   which is why the 12s reveal was invisible despite every other part being correct. */
	filter: grayscale(1) contrast(0.5) saturate(1) brightness(1.9);
	transition: opacity 1.1s ease, transform 1.1s ease, filter 8s ease;
}

.reveal-img.in {
	opacity: 1;
	transform: scale(1);
	/* This particular photo is naturally muted (beige/gray paper cores), so a plain
	   grayscale(0) barely reads as "color" — push saturation up to make the arrival
	   of color obvious rather than technically-correct-but-invisible. */
	filter: grayscale(0) contrast(1.05) saturate(1.6) brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.reveal-img {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* Main content */

.site-main {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 3rem 1.5rem 6rem;
}

.site-main--home {
	padding-top: 0;
}

.page-content,
.post-content {
	font-size: 1rem;
}

.page-content > *:first-child,
.post-content > *:first-child {
	margin-top: 0;
}

/* The old theme (Nishiki Pro) treated "alignfull" as "fill the constrained content
   container", not true edge-to-edge viewport bleed — several existing posts/pages rely
   on that (e.g. the front page's opening photo). Match that instead of core's literal
   100vw behavior, or those images blow out to full viewport size/height. */
.alignfull {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
}

/* Circle section divider, matches the "◯" motif used throughout the old content */
.wp-block-separator {
	border: none;
	height: 3rem;
	margin: 3rem auto;
	position: relative;
}

.wp-block-separator::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='11' r='7' fill='none' stroke='%23aaaaaa' stroke-width='2'/%3E%3Ccircle cx='20' cy='29' r='7' fill='none' stroke='%23aaaaaa' stroke-width='2'/%3E%3Ccircle cx='11' cy='20' r='7' fill='none' stroke='%23aaaaaa' stroke-width='2'/%3E%3Ccircle cx='29' cy='20' r='7' fill='none' stroke='%23aaaaaa' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

details {
	border-top: 1px solid #ddd;
	padding: 1rem 0;
}

details + details {
	border-top: none;
}

summary {
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 0.03em;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color 0.2s ease;
}

summary:hover {
	color: var(--color-accent);
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-left: 1rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: transform 0.25s ease;
}

details[open] summary::after {
	transform: rotate(45deg);
}

/* News grid (front page) — core Query Loop block, styled to match the site */

.wp-block-query {
	margin: 4rem 0;
}

.wp-block-post-template.is-layout-grid {
	gap: 2.5rem 1.5rem;
}

.wp-block-post {
	list-style: none;
}

.wp-block-post-featured-image {
	margin: 0 0 0.75rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wp-block-post-featured-image a:hover img {
	transform: scale(1.04);
}

.wp-block-post-date time {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.wp-block-post-title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0.4rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-block-post-title a {
	color: var(--color-text);
}

.wp-block-post-title a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.wp-block-query + .wp-block-paragraph {
	margin-top: 2rem;
	text-decoration: underline;
}

/* Archive / index (category listing, e.g. お知らせ) */

.archive-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 1.5rem;
}

.archive-card__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.archive-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.archive-card__title {
	font-size: 1rem;
	margin: 0.75rem 0 0.4rem;
}

.archive-card__excerpt {
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.archive-card__excerpt p {
	margin: 0;
}

/* Related posts */

.related-posts {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid #eee;
}

.related-posts__list {
	list-style: none;
	padding: 0;
}

/* Footer */

.site-footer {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 3rem 1.5rem 6rem;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.site-footer__social {
	display: inline-block;
	margin-bottom: 1.5rem;
}

.site-footer__links {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
}

.site-footer__links a {
	color: var(--color-text);
}

/* Back to top */

.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 150;
}

.back-to-top svg {
	width: 18px;
	height: 18px;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Responsive */

@media (max-width: 767px) {
	.site-header__inner {
		height: var(--header-height-mobile);
		padding: 0 1.25rem;
	}

	.site-nav {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.page-title-band {
		padding: 2.5rem 1.25rem;
	}

	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.wp-block-post:nth-child(n + 5) {
		display: none;
	}

	.archive-list {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}