/*
Theme Name: Miffy
Theme URI:
Author: Oberon Lai
Author URI:
Description: 文學女孩的開卷日常 — a warm rose-and-gold WordPress block theme for a literary reading blog ("Just a Girl. Just Me.").
Version: 1.2.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miffy
Domain Path: /languages
Tags: block-styles, full-site-editing, translation-ready, blog
*/

/*
 * Global tokens (colors, typography, spacing, layout) live in theme.json.
 * This file carries the "Just a Girl. Just Me." design system: the pink
 * masthead, the rose sticky bar, the card grids, the sidebar widgets and
 * the article layout — everything theme.json cannot express on its own.
 */

/* ==========================================================================
   Design tokens (mirror of theme.json, for use inside this stylesheet)
   ========================================================================== */
:root {
	--jgm-base: #FBECEA;
	--jgm-white: #FFFFFF;
	--jgm-text: #444444;
	--jgm-text-soft: #6f6968;
	--jgm-heading: #3F3A39;
	--jgm-rose: #EB847E;
	--jgm-rose-dark: #C77168;
	--jgm-rose-light: #F7DBD8;
	--jgm-rose-pale: #FDF5F4;
	--jgm-gold: #B8955A;
	--jgm-muted: #9B9B9B;
	--jgm-border: #EFEFEF;
	--jgm-shadow: 0 1px 2px rgba(180, 140, 135, .06);
	--jgm-shadow-hover: 0 6px 20px rgba(190, 140, 135, .16);
	--jgm-serif: "Noto Serif TC", Georgia, serif;
	--jgm-sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--jgm-display: "Playfair Display", Georgia, serif;
	--jgm-radius: 4px;
	--jgm-maxw: 1440px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background: var(--jgm-base);
	color: var(--jgm-text);
	font-family: var(--jgm-sans);
	-webkit-font-smoothing: antialiased;
}

body a { text-decoration: none; }
body a:hover { color: var(--jgm-rose-dark); }

.jgm-container {
	max-width: var(--jgm-maxw);
	margin-inline: auto;
	padding-inline: 32px;
}

/* Shared two-column shell: content + sticky sidebar. */
.jgm-shell {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
	gap: 56px;
	align-items: start;
}

.jgm-main { min-width: 0; }

/* ==========================================================================
   Masthead (home header)
   ========================================================================== */
.jgm-masthead {
	background-color: var(--jgm-base);
	background-image: url("assets/confetti.svg");
	background-repeat: repeat-x;
	background-position: top center;
	padding: 56px 0 48px;
	border-bottom: 1px solid #F3E2DF;
}

.jgm-masthead__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.jgm-logo {
	margin: 0;
	font-family: var(--jgm-display);
	font-weight: 700;
	font-size: clamp(44px, 6vw, 64px);
	line-height: 1.05;
	color: var(--jgm-rose);
	letter-spacing: -.5px;
	/* Constrain the width (in em, so it scales with the font) so the title
	   wraps into two lines exactly after "Girl.": "Just a Girl." / "Just Me.".
	   5.75em sits between the width of "Just a Girl." and "Just a Girl. Just". */
	max-width: 5.75em;
}

.jgm-tagline {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--jgm-gold);
	font-family: var(--jgm-serif);
	font-size: 15px;
	letter-spacing: .42em;
}

.jgm-tagline::before,
.jgm-tagline::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--jgm-gold);
	display: inline-block;
}

/* Search field (WordPress search block) styled as a rounded pill. */
.jgm-search .wp-block-search__inside-wrapper {
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: 999px;
	padding: 5px 6px 5px 20px;
	width: 300px;
	max-width: 100%;
	box-shadow: var(--jgm-shadow);
}

.jgm-search .wp-block-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14px;
	color: var(--jgm-text);
}

.jgm-search .wp-block-search__button {
	background: var(--jgm-rose);
	color: var(--jgm-white);
	border: 0;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	cursor: pointer;
}

.jgm-search .wp-block-search__button:hover { background: var(--jgm-rose-dark); }

/* ==========================================================================
   Primary navigation bar
   ========================================================================== */
.jgm-nav {
	margin-top: 32px;
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	padding: 6px 10px;
}

.jgm-nav .wp-block-navigation {
	gap: 6px;
}

.jgm-nav .wp-block-navigation-item__content {
	padding: 14px 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: #5c5250;
	border-radius: 3px;
}

.jgm-nav .wp-block-navigation-item__content:hover {
	background: var(--jgm-base);
	color: var(--jgm-rose-dark);
}

/* ==========================================================================
   Compact rose top bar (single post / archive)
   ========================================================================== */
.jgm-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--jgm-rose);
	padding: 18px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.jgm-topbar .wp-block-site-title,
.jgm-topbar .wp-block-site-title a {
	font-family: var(--jgm-display);
	font-size: 30px;
	font-weight: 700;
	color: var(--jgm-white);
}

.jgm-topbar__search .wp-block-search__inside-wrapper {
	background: var(--jgm-white);
	border: 0;
	border-radius: var(--jgm-radius);
	padding: 4px 4px 4px 18px;
	width: 280px;
	max-width: 100%;
}

.jgm-topbar__search .wp-block-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14px;
}

.jgm-topbar__search .wp-block-search__button {
	background: var(--jgm-rose);
	color: var(--jgm-white);
	border: 0;
	border-radius: 3px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
}

/* ==========================================================================
   Section title (dotted heading)
   ========================================================================== */
.jgm-section-title {
	text-align: center;
	font-family: var(--jgm-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--jgm-gold);
	letter-spacing: .04em;
	position: relative;
	margin: 56px 0 28px;
	padding-top: 22px;
}

.jgm-section-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--jgm-gold);
}

/* ==========================================================================
   Hero (featured latest post)
   ========================================================================== */
/* Positioning context so the JS-added arrows/dots anchor to the slider,
   not the page body. */
.jgm-hero {
	position: relative;
	margin-bottom: 34px;
}

.jgm-hero .wp-block-post-template {
	margin: 0;
	list-style: none;
	padding: 0;
}

/* --- Hero slider: horizontal scroll-snap track of "首頁 banner" posts --- */
.jgm-hero .wp-block-post-template {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.jgm-hero .wp-block-post-template::-webkit-scrollbar { display: none; }

/* Each slide: a small square image on the left, with the title as the focus. */
.jgm-hero .wp-block-post {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 260px;
	padding: 40px 60px;
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	background: var(--jgm-white);
}

/* Left — small square image. */
.jgm-hero .wp-block-post-featured-image {
	flex: 0 0 auto;
	width: 200px;
	height: 200px;
	margin: 0;
	border-radius: var(--jgm-radius);
	overflow: hidden;
}
.jgm-hero .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.jgm-hero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Fallback striped square when the post has no image. */
.jgm-hero .wp-block-post:not(:has(.wp-block-post-featured-image img))::before {
	content: "";
	flex: 0 0 auto;
	width: 200px;
	height: 200px;
	border-radius: var(--jgm-radius);
	background-image: repeating-linear-gradient(45deg, #F7DBD8 0 10px, #FFF8F7 10px 20px);
}

/* Right — title (primary) + two-line excerpt. Capped width so the excerpt
   wraps onto two lines and never runs under the right-hand arrow. */
.jgm-hero__text {
	flex: 1;
	min-width: 0;
	max-width: 560px;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.jgm-hero .wp-block-post-title {
	margin: 0;
	font-family: var(--jgm-serif);
	font-size: clamp(23px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--jgm-heading);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jgm-hero .wp-block-post-title a { color: var(--jgm-heading); }
.jgm-hero .wp-block-post-title a:hover { color: var(--jgm-rose-dark); }

.jgm-hero .wp-block-post-excerpt { margin: 0; }
.jgm-hero .wp-block-post-excerpt p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--jgm-text-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jgm-hero .wp-block-post-excerpt__more-link { display: none; }

.jgm-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -24px;
	z-index: 3;
	display: flex;
	gap: 8px;
	justify-content: center;
}
.jgm-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jgm-rose-light);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.jgm-hero__dot.is-active { background: var(--jgm-rose); transform: scale(1.3); }

.jgm-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--jgm-rose);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--jgm-shadow);
	transition: background .2s ease;
}
.jgm-hero__arrow:hover { background: var(--jgm-rose-dark); }
.jgm-hero__arrow--prev { left: 14px; }
.jgm-hero__arrow--next { right: 14px; }

.jgm-hero__empty {
	margin: 0;
	padding: 64px 30px;
	text-align: center;
	color: #9a908d;
}

/* ==========================================================================
   Post cards grid (home + related)
   ========================================================================== */
.jgm-cards .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jgm-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	overflow: hidden;
	box-shadow: var(--jgm-shadow);
	transition: box-shadow .2s ease;
	margin: 0;
}

.jgm-cards .wp-block-post:hover { box-shadow: var(--jgm-shadow-hover); }

.jgm-cards .wp-block-post-featured-image { margin: 0; }

.jgm-cards .wp-block-post-featured-image img,
.jgm-cards .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.jgm-cards .wp-block-post-featured-image:empty::before {
	content: "封面圖";
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-image: repeating-linear-gradient(45deg, #F7DBD8 0 8px, #FFF8F7 8px 16px);
	color: #B08A85;
	font-size: 12px;
}

.jgm-cards .wp-block-post-title {
	margin: 0;
	padding: 22px 22px 0;
	font-family: var(--jgm-serif);
	font-size: 17px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--jgm-heading);
	text-wrap: pretty;
}

.jgm-cards .wp-block-post-title a { color: inherit; }
.jgm-cards .wp-block-post-title a:hover { color: var(--jgm-rose-dark); }

.jgm-cards .wp-block-post-excerpt {
	margin: 12px 0 0;
	padding: 0 22px;
	flex: 1;
}

.jgm-cards .wp-block-post-excerpt p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: #7d7674;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jgm-cards .wp-block-post-excerpt__more-link { display: none; }

.jgm-cards .wp-block-post-date {
	margin: 18px 0 0;
	padding: 18px 22px 20px;
	border-top: 1px solid #F4F4F4;
	font-size: 12px;
	color: var(--jgm-muted);
	letter-spacing: .03em;
}

.jgm-cards .wp-block-post-date::before { content: "發表日期 / "; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.jgm-btn a,
.wp-block-button.jgm-btn .wp-block-button__link {
	background: var(--jgm-rose);
	color: var(--jgm-white);
	padding: 16px 62px;
	border-radius: 3px;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .06em;
	display: inline-block;
}

.jgm-btn a:hover,
.wp-block-button.jgm-btn .wp-block-button__link:hover {
	background: var(--jgm-rose-dark);
	color: var(--jgm-white);
}

/* ==========================================================================
   Sidebar widgets
   ========================================================================== */
.jgm-sidebar {
	display: flex;
	flex-direction: column;
	gap: 34px;
	position: sticky;
	top: 24px;
}

.jgm-widget {
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	padding: 26px 24px;
}

.jgm-widget__title {
	margin: 0 0 20px;
	font-family: var(--jgm-serif);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--jgm-heading);
}

/* Author card. */
.jgm-author__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.jgm-author__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex: none;
	background: url("assets/emma.jpg") center / cover no-repeat;
	border: 1px solid #F0DEDB;
	overflow: hidden;
}

.jgm-author__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.jgm-author__name {
	font-family: var(--jgm-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--jgm-heading);
}

.jgm-author__rule {
	height: 1px;
	background: #F1F1F1;
	margin: 22px 0;
}

.jgm-author p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--jgm-text-soft);
}

/* Popular posts — numbered list via CSS counter over the query loop. */
.jgm-hot .wp-block-post-template {
	counter-reset: jgm-hot;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.jgm-hot .wp-block-post {
	counter-increment: jgm-hot;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 12px;
	border-top: 1px solid #F4F4F4;
	padding-top: 20px;
	margin: 0;
}

.jgm-hot .wp-block-post:first-child { border-top: 0; padding-top: 0; }

.jgm-hot .wp-block-post::before {
	content: counter(jgm-hot);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--jgm-rose);
	color: var(--jgm-white);
	font-size: 12.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jgm-hot .wp-block-post-title {
	margin: 0;
	font-family: var(--jgm-serif);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.7;
}

.jgm-hot .wp-block-post-title a { color: var(--jgm-rose); }
.jgm-hot .wp-block-post-title a:hover { color: var(--jgm-rose-dark); }

.jgm-hot .wp-block-post-excerpt {
	margin: 8px 0 0;
	grid-column: 2;
}

.jgm-hot .wp-block-post-excerpt p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--jgm-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jgm-hot .wp-block-post-excerpt__more-link { display: none; }

/* Archive + categories widgets (native list blocks). */
.jgm-widget .wp-block-categories,
.jgm-widget .wp-block-archives {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The whole row (incl. the post-count text node after the link) shares the
   date's size, so the "(7)" count no longer looks oversized. */
.jgm-widget .wp-block-categories li,
.jgm-widget .wp-block-archives li {
	font-size: 13.5px;
	color: var(--jgm-text-soft);
}

.jgm-widget .wp-block-categories a,
.jgm-widget .wp-block-archives a {
	font-size: 13.5px;
	color: var(--jgm-text-soft);
}

.jgm-widget .wp-block-categories a:hover,
.jgm-widget .wp-block-archives a:hover { color: var(--jgm-rose-dark); }

/* Collapsible "歷年文章": hidden months beyond the first six + toggle button. */
.jgm-archives__hidden { display: none; }

.jgm-archives__toggle {
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--jgm-rose-dark);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.jgm-archives__toggle:hover { text-decoration: underline; }

/* Category pills variant. */
.jgm-pills .wp-block-categories {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.jgm-pills .wp-block-categories a {
	background: var(--jgm-rose-light);
	color: var(--jgm-rose);
	font-size: 12.5px;
	padding: 6px 13px;
	border-radius: 999px;
}

.jgm-pills .wp-block-categories a:hover { background: var(--jgm-rose); color: var(--jgm-white); }

/* ==========================================================================
   Single article
   ========================================================================== */
.jgm-article {
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	padding: 56px 64px 48px;
	min-width: 0;
}

.jgm-article .wp-block-post-title {
	margin: 0;
	font-family: var(--jgm-serif);
	font-size: 32px;
	line-height: 1.5;
	font-weight: 700;
	color: #332e2d;
	text-wrap: pretty;
}

.jgm-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.jgm-article__meta .wp-block-post-date {
	font-size: 12.5px;
	color: var(--jgm-muted);
}

.jgm-article__meta .wp-block-post-date::before { content: "發表日期 / "; }

/* Tag / term pills. */
.jgm-tags .wp-block-post-terms,
.jgm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jgm-tags a {
	background: var(--jgm-rose-light);
	color: var(--jgm-rose);
	font-size: 12.5px;
	padding: 6px 14px;
	border-radius: 999px;
}

.jgm-tags a:hover { background: var(--jgm-rose); color: var(--jgm-white); }
.jgm-tags .wp-block-post-terms__separator { display: none; }

.jgm-article__rule {
	height: 1px;
	background: linear-gradient(to right, #F0D4D1, #F7EAE8);
	margin: 26px 0 36px;
}

.jgm-article .wp-block-post-featured-image { margin: 0 0 40px; }

.jgm-article .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 3px;
}

.jgm-article .wp-block-post-content {
	font-size: 16px;
	line-height: 2.5;
	color: var(--jgm-text);
	/* Never let imported content push the page wider than its column. */
	overflow-wrap: break-word;
}

/* Lock all media to the content width. Blogger exports ship images with fixed
   width/height attributes and inline widths, which otherwise overflow and cause
   a horizontal scrollbar on mobile. !important beats those inline attributes. */
.jgm-article .wp-block-post-content img,
.jgm-article .wp-block-post-content iframe,
.jgm-article .wp-block-post-content video,
.jgm-article .wp-block-post-content object,
.jgm-article .wp-block-post-content embed {
	max-width: 100% !important;
	height: auto;
}

/* Centre images that are narrower than the content column (block-level media
   and the anchors that wrap Blogger's linked images). */
.jgm-article .wp-block-post-content img {
	display: block;
	margin-inline: auto;
}
.jgm-article .wp-block-post-content a:has(> img) {
	display: block;
	text-align: center;
}

.jgm-article .wp-block-post-content .separator,
.jgm-article .wp-block-post-content .separator a,
.jgm-article .wp-block-post-content table {
	max-width: 100% !important;
}

.jgm-article .wp-block-post-content table {
	display: block;
	overflow-x: auto;
}

.jgm-article .wp-block-post-content p { margin: 0 0 26px; }

.jgm-article .wp-block-post-content h2 {
	margin: 44px 0 18px;
	font-family: var(--jgm-serif);
	font-size: 20px;
	font-weight: 700;
	color: #332e2d;
}

.jgm-article .wp-block-post-content h3 {
	margin: 32px 0 12px;
	font-family: var(--jgm-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--jgm-heading);
}

.jgm-article .wp-block-post-content blockquote {
	margin: 0 0 30px;
	padding: 26px 30px;
	background: var(--jgm-rose-pale);
	border-left: 3px solid var(--jgm-rose);
	border-radius: 2px;
	font-family: var(--jgm-serif);
	font-size: 16.5px;
	line-height: 2.05;
	color: #5c5250;
}

.jgm-article .wp-block-post-content blockquote p { margin: 0; }

/* Share note + author signature. */
.jgm-sharenote {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 52px;
	padding: 18px 22px;
	background: var(--jgm-rose-pale);
	border-radius: 3px;
	color: var(--jgm-rose);
	font-size: 14px;
	font-weight: 500;
}

.jgm-sharenote::before { content: "❧"; font-size: 18px; }

/* ==========================================================================
   Share buttons (Facebook / LINE / X / copy link)
   ========================================================================== */
.jgm-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.jgm-share__label {
	font-size: 13px;
	color: var(--jgm-muted);
}
.jgm-share__btn {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	transition: transform .15s ease, opacity .15s ease;
}
.jgm-share__btn:hover { transform: translateY(-2px); opacity: .92; }
.jgm-share__btn svg { width: 20px; height: 20px; fill: currentColor; }
.jgm-share__btn--fb { background: #1877F2; }
.jgm-share__btn--line { background: #06C755; }
.jgm-share__btn--x { background: #000; }
.jgm-share__btn--copy { background: var(--jgm-rose); }
.jgm-share__btn--copy.is-copied { background: var(--jgm-rose-dark); }

/* ==========================================================================
   Image lightbox (article content images)
   ========================================================================== */
.jgm-article .wp-block-post-content img { cursor: zoom-in; }

.jgm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(28, 20, 19, .9);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .2s ease;
}
.jgm-lightbox.is-open { display: flex; opacity: 1; }
.jgm-lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 4px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
	cursor: default;
}
.jgm-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.jgm-lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* Hero slider only belongs on the first page of the blog index. */
body.paged .jgm-hero { display: none; }

.jgm-signature {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid #F1F1F1;
}

.jgm-signature__name {
	font-family: var(--jgm-display);
	font-size: 13px;
	letter-spacing: .16em;
	color: var(--jgm-rose);
	margin-bottom: 10px;
}

.jgm-signature p {
	margin: 0;
	font-size: 15px;
	line-height: 1.95;
	color: #5c5250;
}

/* Newsletter block. */
.jgm-newsletter {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	overflow: hidden;
}

.jgm-newsletter__art {
	min-height: 340px;
	background-image: repeating-linear-gradient(45deg, #F7DBD8 0 10px, #FFF8F7 10px 20px);
}

.jgm-newsletter__body { padding: 38px 36px; }

.jgm-newsletter__body h3 {
	margin: 0 0 26px;
	font-family: var(--jgm-serif);
	font-size: 20px;
	font-weight: 700;
	color: #332e2d;
}

.jgm-newsletter__body input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #E5E5E5;
	padding: 10px 0 12px;
	font-size: 14.5px;
	color: var(--jgm-text);
	outline: 0;
	background: transparent;
	margin-bottom: 26px;
}

.jgm-newsletter__body .wp-block-button__link,
.jgm-newsletter__body button {
	width: 100%;
	background: var(--jgm-rose);
	color: var(--jgm-white);
	border: 0;
	border-radius: 3px;
	padding: 15px;
	font-size: 15px;
	cursor: pointer;
}

.jgm-newsletter__body .wp-block-button__link:hover,
.jgm-newsletter__body button:hover { background: var(--jgm-rose-dark); }

.jgm-newsletter__note {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--jgm-muted);
}

/* Post navigation + comments spacing. */
.jgm-postnav {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid #F1F1F1;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.jgm-comments { margin-top: 40px; }

/* ==========================================================================
   Related reading
   ========================================================================== */
.jgm-related .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jgm-related .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	overflow: hidden;
	margin: 0;
	transition: box-shadow .2s ease;
}

.jgm-related .wp-block-post:hover { box-shadow: var(--jgm-shadow-hover); }

.jgm-related .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.jgm-related .wp-block-post-featured-image:empty::before {
	content: "封面圖";
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-image: repeating-linear-gradient(45deg, #F7DBD8 0 8px, #FFF8F7 8px 16px);
	color: #B08A85;
	font-size: 11px;
}

.jgm-related .wp-block-post-title {
	margin: 0;
	padding: 22px 22px 0;
	flex: 1;
	font-family: var(--jgm-serif);
	font-size: 16.5px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--jgm-heading);
}

.jgm-related .wp-block-post-date {
	margin: 16px 0 0;
	padding: 16px 22px 20px;
	border-top: 1px solid #F4F4F4;
	font-size: 12px;
	color: var(--jgm-muted);
}

.jgm-related .wp-block-post-date::before { content: "發表日期 / "; }

/* ==========================================================================
   Archive / category listing
   ========================================================================== */
.jgm-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--jgm-muted);
	letter-spacing: .04em;
}

.jgm-archive-title {
	margin: 18px 0 0;
	font-family: var(--jgm-serif);
	font-size: 34px;
	font-weight: 700;
	color: #332e2d;
}

.jgm-archive-desc {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 2;
	color: #7d7674;
	max-width: 640px;
}

.jgm-archive-head .jgm-article__rule { margin: 34px 0 0; }

.jgm-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jgm-list .wp-block-post {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	border-radius: var(--jgm-radius);
	overflow: hidden;
	margin: 0;
	transition: box-shadow .2s ease;
}

.jgm-list .wp-block-post:hover { box-shadow: var(--jgm-shadow-hover); }

.jgm-list .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.jgm-list .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	min-height: 170px;
	object-fit: cover;
}

.jgm-list .wp-block-post-featured-image:empty::before {
	content: "封面圖";
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 170px;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, #F7DBD8 0 8px, #FFF8F7 8px 16px);
	color: #B08A85;
	font-size: 11px;
}

.jgm-list__body { padding: 26px 28px; }

.jgm-list .wp-block-post-title {
	margin: 0;
	font-family: var(--jgm-serif);
	font-size: 18px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--jgm-heading);
	text-wrap: pretty;
}

.jgm-list .wp-block-post-title a { color: inherit; }
.jgm-list .wp-block-post-title a:hover { color: var(--jgm-rose-dark); }

.jgm-list .wp-block-post-excerpt {
	margin: 12px 0 0;
}

.jgm-list .wp-block-post-excerpt p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.95;
	color: #7d7674;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jgm-list .wp-block-post-excerpt__more-link { display: none; }

.jgm-list .wp-block-post-date {
	margin: 18px 0 0;
	font-size: 12px;
	color: var(--jgm-muted);
}

.jgm-list .wp-block-post-date::before { content: "發表日期 / "; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.jgm-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 44px;
}

/* The numbers wrapper must be a flex row too, otherwise the page pills
   (which are display:flex circles) stack vertically. */
.jgm-pagination .wp-block-query-pagination-numbers,
.jgm-pagination .wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	align-items: center;
}

.jgm-pagination a,
.jgm-pagination .page-numbers {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--jgm-white);
	border: 1px solid var(--jgm-border);
	color: #7d7674;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
}

.jgm-pagination .page-numbers.current {
	background: var(--jgm-rose);
	border-color: var(--jgm-rose);
	color: var(--jgm-white);
}

.jgm-pagination a:hover { color: var(--jgm-rose-dark); }

.jgm-pagination .wp-block-query-pagination-previous,
.jgm-pagination .wp-block-query-pagination-next {
	width: auto;
	height: 38px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 13px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.jgm-footer {
	background: var(--jgm-white);
	border-top: 1px solid #F3E2DF;
	padding: 40px 0;
	margin-top: 20px;
}

.jgm-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	color: var(--jgm-muted);
	font-size: 13px;
}

.jgm-footer .wp-block-site-title a {
	font-family: var(--jgm-display);
	color: var(--jgm-rose);
	font-size: 18px;
	font-weight: 700;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.jgm-cards .wp-block-post-template,
	.jgm-related .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.jgm-logo { font-size: 48px; }
}

@media (max-width: 900px) {
	.jgm-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
	.jgm-sidebar { position: static; }
	.jgm-newsletter { grid-template-columns: minmax(0, 1fr); }
	.jgm-article { padding: 40px 32px 36px; }
}

@media (max-width: 620px) {
	.jgm-container { padding-inline: 18px; }
	.jgm-cards .wp-block-post-template,
	.jgm-related .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.jgm-list .wp-block-post { grid-template-columns: minmax(0, 1fr); }
	.jgm-topbar { padding: 14px 18px; }
	.jgm-topbar .wp-block-site-title a { font-size: 20px; }
	.jgm-article { padding: 28px 20px; }
}

/* ==========================================================================
   Mobile header: hamburger pinned top-right, full-width search, roomy overlay
   (matches the WordPress "mobile" overlay breakpoint at 600px)
   ========================================================================== */
@media (max-width: 599px) {
	/* Tighten the masthead so the article sits higher (less empty space up top). */
	.jgm-masthead { position: relative; padding: 20px 0 18px; }
	.jgm-masthead__inner { gap: 14px; }
	.jgm-tagline { margin-top: 10px; }

	/* Collapsed navigation (hamburger) pinned to the masthead's top-right,
	   with a solid rose background pill. */
	.jgm-nav {
		position: absolute;
		top: 14px;
		right: 16px;
		width: auto;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
	}
	.jgm-nav .wp-block-navigation__responsive-container-open {
		background: var(--jgm-rose);
		color: #fff;
		border-radius: 999px;
		padding: 10px;
	}
	.jgm-nav .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
		fill: currentColor;
	}

	/* Keep the title from running under the toggle. */
	.jgm-logo { max-width: 6.5em; padding-right: 52px; }

	/* Search field spans the full width of the header. */
	.jgm-search { width: 100%; }
	.jgm-search .wp-block-search__inside-wrapper { width: 100%; }

	/* Stack the banner card on phones: centred square image on top, title below. */
	.jgm-hero .wp-block-post { flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 30px 24px; }
	.jgm-hero .wp-block-post-featured-image,
	.jgm-hero .wp-block-post:not(:has(.wp-block-post-featured-image img))::before { width: 150px; height: 150px; }
	.jgm-hero__text { align-items: center; }
	.jgm-hero .wp-block-post-title { font-size: 21px; }
	.jgm-hero__arrow { width: 32px; height: 32px; font-size: 20px; }

	/* Open overlay animates in (fade + slide). */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: jgm-menu-in .28s ease both;
	}
	/* Roomy overlay; top padding clears the close button. !important beats the
	   WordPress core navigation-overlay defaults (same selector, loaded later). */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 84px 22px 48px !important;
	}
	/* Full-width, continuous dividers with finger-friendly tap heights. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0 !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 26px 4px !important;
		font-size: 17px;
		border-bottom: 1px solid #F3E2DF;
	}

	/* Close (X) button: inset from the edge, on a rose pill so it reads as a button. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 22px;
		right: 22px;
		width: 42px;
		height: 42px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--jgm-rose);
		color: #fff;
		border-radius: 50%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}
}

/* Overlay open animation for the mobile navigation. */
@keyframes jgm-menu-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}