/* ===================================================================
   Editorial surfaces: the journal, its posts, and every static page.
   ===================================================================

   These templates had no stylesheet at all. `.page-article`, `.prose`,
   `.post-grid` and the whole `pcard` set were written in the markup and never
   given rules, so a blog post rendered as browser-default text running from
   screen edge to screen edge — no container, no gutter, no measure, no
   hierarchy. It read as broken on a phone and as unfinished on a desktop, and
   it affected every page in this group at once: the journal, ten content pages,
   and 140 posts.

   So this is a component set, not a patch. One container, one measure, one type
   scale, used by `single.php`, `page.php` and `index.php` — which is why fixing
   the gutter here fixes it on About Us, FAQs, the privacy policy and every
   article in the same edit.

   Mobile-first sizing throughout: the base rules are the phone, and the two
   min-width steps add back the room a larger screen has. Nothing here is
   inside a max-width query, so nothing depends on a breakpoint firing.
   =================================================================== */

/* ------------------------------------------------------------ container */

/*
 * The measure is the point. Long-form copy at full viewport width is unreadable
 * at 1440 and the reason the desktop looked wrong too; capping the column is
 * what makes both work from one rule.
 *
 * 22px gutter matches `.plp-hero__inner` and `.mainbar .row`, so the article
 * lines up with the header and the listing pages rather than sitting at its own
 * inset. 16px below 560px, where 22 is a meaningful share of the screen.
 */
.page-article,
.archive-head,
.post-grid,
.page-links,
.empty-state {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

@media (min-width: 560px) {
	.page-article,
	.archive-head,
	.post-grid,
	.page-links,
	.empty-state {
		padding-inline: 22px;
	}
}

/* The journal index is a grid, so it earns more room than a single column of
   prose; the article itself deliberately stays narrow. */
.archive-head,
.post-grid,
.page-links {
	max-width: var(--maxw);
}

/*
 * Cart, checkout and My Account run through page.php too, and page.php marks
 * them with `site-main--wide` precisely because they are layouts rather than
 * prose. Capping those at a reading measure would squash the two-column cart
 * on a desktop — so they keep the page width and take only the gutter.
 */
.site-main--wide .page-article {
	max-width: var(--maxw);
}

.page-article {
	padding-block: 26px 44px;
}

@media (min-width: 560px) {
	.page-article {
		padding-block: 40px 64px;
	}
}

/* ------------------------------------------------------------- article */

.page-article__head {
	margin-bottom: 20px;
}

/*
 * clamp() rather than a breakpoint step: the title is the one element whose
 * size has to track the viewport continuously, because a three-word headline
 * and a nine-word one behave very differently at 320px. The lower bound is set
 * so the longest real title in the catalogue ("Propose in Style With Best
 * Engagement Rings…") stays under four lines on the narrowest screen.
 */
.page-article__title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.65rem, 1.15rem + 2.4vw, 2.9rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 10px;
	text-wrap: balance;
}

.page-article__meta {
	font-family: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var(--muted);
	margin: 0;
}

.page-article__media {
	margin: 22px 0 26px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--pearl);
}

.page-article__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------- prose */

.prose {
	font-family: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.72;
	color: var(--ink);
}

@media (min-width: 560px) {
	.prose {
		font-size: 1.03rem;
	}
}

/*
 * Rhythm comes from the sibling rule, so every block type gets the same gap
 * without listing them all. The paragraph rule below therefore clears only the
 * BOTTOM margin: written as `margin: 0` it out-specified the sibling rule —
 * one class plus a type beats one class plus two universals — and silently
 * removed the space between every paragraph on the site.
 */
.prose > * + * {
	margin-top: 1.05em;
}

.prose > :first-child {
	margin-top: 0;
}

.prose p {
	margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	color: var(--ink);
	line-height: 1.22;
	letter-spacing: -0.005em;
	margin: 1.9em 0 0;
	text-wrap: balance;
}

.prose h2 { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.85rem); }
.prose h3 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem); }
.prose h4 { font-size: 1.08rem; }

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
	margin-top: 0.6em;
}

.prose a {
	color: var(--pounamu);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.prose a:hover {
	color: var(--gold-cta);
}

.prose strong {
	font-weight: 600;
}

/* Markers inside the measure, so a wrapped line aligns with the first. */
.prose ul,
.prose ol {
	margin: 1.05em 0 0;
	padding-left: 1.15em;
}

.prose li + li {
	margin-top: 0.5em;
}

.prose li::marker {
	color: var(--gold-cta);
}

.prose blockquote {
	margin: 1.6em 0 0;
	padding: 2px 0 2px 18px;
	border-left: 2px solid var(--gold-soft);
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--ink);
}

.prose img,
.page-article__content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin-block: 1.4em;
}

.prose figure {
	margin: 1.6em 0 0;
}

.prose figcaption {
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 8px;
}

/* Anything that cannot reflow scrolls inside its own box, so the page never
   scrolls sideways because of one wide table or code block. */
.prose table,
.prose pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.prose table {
	border-collapse: collapse;
	font-size: 0.92rem;
}

.prose th,
.prose td {
	border: 1px solid var(--line);
	padding: 9px 12px;
	text-align: left;
}

.prose iframe,
.prose video {
	max-width: 100%;
	border-radius: 12px;
}

/* -------------------------------------------------- FAQ disclosure list */

/*
 * The FAQs page is authored as native <details>. Given a 48px-high summary row
 * it needs no script to be usable on a phone, which is the whole reason it was
 * written that way.
 */
.prose .faq-q {
	border-bottom: 1px solid var(--line);
	margin-top: 0;
}

.prose .faq-q > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 48px;
	padding: 12px 2px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.prose .faq-q > summary::-webkit-details-marker {
	display: none;
}

.prose .faq-q > summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--gold-cta);
	border-bottom: 2px solid var(--gold-cta);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s var(--ease);
}

.prose .faq-q[open] > summary::after {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.prose .faq-q > p {
	margin: 0 0 16px;
	color: var(--muted);
}

/* ------------------------------------------------------ journal archive */

.archive-head {
	padding-block: 30px 6px;
}

.archive-title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
	line-height: 1.15;
	margin: 0;
	color: var(--ink);
}

.archive-intro {
	margin-top: 8px;
	color: var(--muted);
	max-width: 62ch;
}

/*
 * One column on a phone, because a blog card carries an image, a headline, a
 * date and an excerpt — halving that width turns every headline into four
 * lines. The grid widens by available space rather than by device, so it needs
 * no breakpoint list to maintain.
 */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 26px 22px;
	padding-block: 22px 34px;
}

.pcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}

.pcard:hover {
	box-shadow: 0 22px 46px -26px rgba(28, 26, 23, 0.45);
	border-color: var(--gold-soft);
}

.pcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* A declared box, so the grid does not reflow as each image decodes. */
.pcard__media {
	aspect-ratio: 16 / 10;
	background: var(--pearl);
	overflow: hidden;
}

.pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pcard__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 16px 18px;
	background: var(--card-info);
	border-top: 1px solid var(--line);
	flex: 1;
}

.pcard__title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.22rem;
	line-height: 1.24;
	margin: 0;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcard__date {
	font-family: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.pcard__excerpt {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------ paginate */

.page-links,
.post-grid + nav.navigation,
.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding-block: 8px 44px;
}

.navigation.pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.92rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ivory);
}

.navigation.pagination .page-numbers:hover {
	border-color: var(--gold-soft);
}

/* --------------------------------------------------------- empty state */

.empty-state {
	padding-block: 60px 80px;
	text-align: center;
}

.empty-state h1 {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
	margin: 0 0 10px;
}

.empty-state p {
	color: var(--muted);
	margin: 0 auto 22px;
	max-width: 46ch;
}


/* ------------------------------------------------------- comments area */

/*
 * Shares the article's container, so the discussion sits in the same column as
 * the piece it is about. Before the theme had a comments template at all, this
 * markup came from WordPress's compat fallback and rendered outside every
 * container — labels flush to the screen edge on a phone.
 */
.comments-area {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 16px;
	padding-bottom: 56px;
	box-sizing: border-box;
}

@media (min-width: 560px) {
	.comments-area {
		padding-inline: 22px;
	}
}

.comments-area__title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
	margin: 0 0 16px;
	color: var(--ink);
}

.comments-area__closed {
	color: var(--muted);
	margin: 0 0 20px;
}

.comment-list {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.comment-list .comment-body {
	background: var(--card-info);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px 18px;
}

.comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.comment-list .comment-author img {
	border-radius: 50%;
	flex: none;
}

.comment-list .comment-metadata {
	font-size: 0.78rem;
	color: var(--muted);
	margin: 4px 0 10px;
}

.comment-list .children {
	list-style: none;
	margin: 16px 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.comment-respond {
	margin-top: 8px;
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.comment-form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.comment-form label {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--ink);
}

/* Sizing lives in the shared touch block in stonex.css so the 44px floor is
   stated once for every form on the site. */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	font-family: inherit;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 14px;
	background: #fff;
	color: var(--ink);
	font-size: 16px;
	box-sizing: border-box;
	width: 100%;
}

.comment-form .form-submit {
	flex-direction: row;
}

.comment-form input[type="submit"] {
	background: linear-gradient(135deg, var(--gold), var(--gold-cta));
	border: none;
	border-radius: 10px;
	padding: 13px 26px;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
}

.comment-form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.comment-form .comment-notes,
.comment-form #email-notes {
	font-size: 0.82rem;
	color: var(--muted);
}