/* Photobek Editorial 2.0. Tokens, base, layout, components, templates, dark mode. */

/* Fonts: self-hosted, latin subset, axes pinned to what the design uses. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 400 800;
	font-stretch: 75% 110%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-normal.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

:root {
	--paper: #f6f6f4;
	--paper-2: #ecece9;
	--card: #ffffff;
	--text: #1b1c1f;
	--muted: #5a5d63;
	--line: #d9d9d5;
	--ink: #151618;
	--ink-2: #222428;
	--on-ink: #f1f1ee;
	--on-ink-muted: #a3a6ac;
	--accent: #c4321c;
	--accent-ink: #ff6a4f;
	--pro: #2e7a4f;
	--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--wrap: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--measure: 700px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #111214;
		--paper-2: #1a1b1e;
		--card: #17181b;
		--text: #e8e8e4;
		--muted: #a0a3a9;
		--line: #2c2e33;
		--ink: #0b0c0d;
		--ink-2: #1b1d20;
		--accent: #f0603f;
		--pro: #5cb784;
	}
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pb {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.pb img { max-width: 100%; height: auto; }
.pb a { color: inherit; }
.pb :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pb h1, .pb h2, .pb h3, .pb h4, .pb h5, .pb h6 {
	font-family: var(--sans);
	font-stretch: 88%;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
}
[id] { scroll-margin-top: 24px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.pb-skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--accent); color: #fff; padding: 10px 16px;
	font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.pb-skip:focus { top: 12px; }

.pb-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.pb-icon { width: 1.15em; height: 1.15em; flex: none; }

/* Buttons and links */
.pb-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--ink); color: var(--on-ink) !important;
	font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
	padding: 14px 22px; text-decoration: none; white-space: nowrap;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.pb-btn:hover { background: var(--accent); }
.pb-btn:active { transform: translateY(1px); }
@media (prefers-color-scheme: dark) { .pb-btn { background: var(--on-ink); color: var(--ink) !important; } .pb-btn:hover { background: var(--accent); color: #fff !important; } }
.pb-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
	color: var(--text); text-decoration: underline; text-decoration-color: var(--accent);
	text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.pb-link:hover { color: var(--accent); }
.pb-link .pb-icon { transition: transform 0.2s var(--ease); }
.pb-link:hover .pb-icon { transform: translateX(3px); }

/* Header */
.pb-header { background: var(--ink); color: var(--on-ink); position: relative; z-index: 20; border-bottom: 1px solid #000; }
.pb-header__inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.pb-wordmark {
	font-family: var(--sans); font-weight: 800; font-stretch: 100%;
	font-size: 1.45rem; letter-spacing: -0.035em; line-height: 1;
	color: var(--on-ink) !important; text-decoration: none; display: inline-flex; align-items: baseline;
}
.pb-wordmark__dot {
	display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.08em;
	background: var(--accent-ink); border-radius: 50%;
}
.pb-wordmark--lg { font-size: 1.9rem; }
.pb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.pb-nav a {
	display: block; padding: 8px 12px; text-decoration: none;
	font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--on-ink-muted);
	transition: color 0.15s;
}
.pb-nav a:hover, .pb-nav .current-menu-item > a, .pb-nav .current-menu-parent > a { color: var(--on-ink); }
.pb-nav--bar { margin-left: auto; }
.pb-iconbtn {
	list-style: none; cursor: pointer; display: grid; place-items: center;
	width: 44px; height: 44px; color: var(--on-ink);
}
.pb-iconbtn::-webkit-details-marker { display: none; }
.pb-iconbtn .pb-icon { width: 22px; height: 22px; }
.pb-menu__close { display: none; }
details[open] > .pb-iconbtn .pb-menu__open { display: none; }
details[open] > .pb-iconbtn .pb-menu__close { display: block; }
.pb-menu { display: none; order: 3; }
.pb-search { order: 4; }
.pb-search__panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--ink-2); padding: 18px var(--gutter); border-bottom: 1px solid #000;
}
.pb-search__panel .pb-searchform { max-width: 640px; margin-inline: auto; }

/* Search form */
.pb-searchform { display: flex; width: 100%; }
.pb-searchform__input {
	flex: 1; min-width: 0; font: 500 1rem/1.2 var(--sans);
	padding: 13px 14px; border: 1px solid var(--line); border-right: 0;
	background: var(--card); color: var(--text); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.pb-searchform__input::placeholder { color: var(--muted); opacity: 1; }
.pb-searchform__btn {
	border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink);
	width: 52px; display: grid; place-items: center; cursor: pointer; border-radius: 0;
}
.pb-header .pb-searchform__input { background: #2b2e33; border-color: #3b3e44; color: var(--on-ink); }
.pb-header .pb-searchform__input::placeholder { color: #a3a6ac; }
.pb-header .pb-searchform__btn { background: var(--accent-ink); border-color: var(--accent-ink); color: #151618; }

@media (max-width: 899px) {
	.pb-nav--bar { display: none; }
	.pb-header__inner { gap: 4px; }
	.pb-search { order: 3; margin-left: auto; }
	.pb-menu { display: block; order: 4; margin-right: -10px; }
	.pb-nav--panel {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--ink); padding: 8px var(--gutter) 28px; border-bottom: 1px solid #000;
		box-shadow: 0 24px 40px rgb(0 0 0 / 0.35);
	}
	.pb-nav--panel .pb-nav__list { flex-direction: column; gap: 0; margin-bottom: 20px; }
	.pb-nav--panel a { font-size: 1.35rem; font-weight: 600; color: var(--on-ink); padding: 14px 0; border-bottom: 1px solid #2a2c30; }
}
@media (min-width: 900px) {
	.pb-nav--panel { display: none; }
	.pb-search { margin-left: 4px; }
}

/* Sections */
.pb-section { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.pb-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.pb-section__title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-stretch: 85%; font-weight: 750; letter-spacing: -0.025em; }
.pb-section > .pb-wrap > .pb-section__title { margin-bottom: 32px; }
.pb-section__lede { margin: 10px 0 0; color: var(--muted); max-width: 58ch; font-size: 1.05rem; }
@media (max-width: 699px) {
	.pb-section__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
}

/* Hero */
.pb-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.pb-hero__grid { display: grid; grid-template-columns: 6fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.pb-hero__title { font-size: clamp(2.4rem, 4.2vw, 3.7rem); font-stretch: 76%; font-weight: 780; line-height: 1.03; letter-spacing: -0.03em; max-width: 15ch; }
.pb-hero__sub { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--muted); margin: 24px 0 32px; max-width: 36ch; line-height: 1.5; }
.pb-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.pb-hero__photo { margin: 0; }
.pb-hero__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink); }
.pb-hero__photo figcaption { font: 500 0.82rem/1.4 var(--sans); color: var(--muted); margin-top: 12px; }
.pb-hero__photo figcaption a { color: var(--text); text-underline-offset: 3px; }
@media (max-width: 799px) {
	.pb-hero__grid { grid-template-columns: 1fr; }
	.pb-hero__photo { order: -1; margin-inline: calc(var(--gutter) * -1); }
	.pb-hero__photo figcaption { padding-inline: var(--gutter); }
	.pb-hero__title { max-width: 16ch; }
	.pb-hero__sub { margin: 18px 0 26px; }
}

/* Cards */
.pb-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-card__media { display: block; overflow: hidden; background: var(--ink); aspect-ratio: 3 / 2; }
.pb-card__media img, .pb-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pb-card:hover .pb-card__media img { transform: scale(1.03); }
.pb-card__media img.is-banner { object-fit: contain; background: #1d1f22; }
.pb-card__topic { margin: 0 0 8px; font: 650 0.74rem/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.pb-card__title { font-size: 1.2rem; font-stretch: 92%; font-weight: 680; line-height: 1.22; letter-spacing: -0.01em; }
.pb-card__title a { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s var(--ease); }
.pb-card__title a:hover { background-size: 100% 2px; }
.pb-card__title a::after { content: ""; position: absolute; inset: 0; }
.pb-card__excerpt { margin: 10px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.pb-card__meta { margin: 10px 0 0; font: 500 0.8rem/1.2 var(--sans); color: var(--muted); }
.pb-card--lead .pb-card__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-stretch: 84%; font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; }
.pb-card--lead .pb-card__excerpt { font-size: 1.1rem; }

/* No-photo plate */
.pb-plate {
	position: relative; display: grid; place-items: center; width: 100%; height: 100%;
	color: rgb(255 255 255 / 0.5); background: #1d1f22; overflow: hidden;
}
.pb-plate--t1 { background: #22272c; }
.pb-plate--t2 { background: #2a2521; }
.pb-plate--t3 { background: #1e2420; }
.pb-plate__corners {
	position: absolute; inset: 13% 9%;
	--c: currentColor; --l: 18px; --w: 1.5px;
	background:
		linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
		linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
		linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.pb-plate__corners::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 16px;
	transform: translate(-50%, calc(-50% + 2.2em)); border: 1.5px solid var(--accent-ink); opacity: 0.85;
}
.pb-plate__topic {
	position: relative; font-family: var(--sans); font-weight: 760; font-stretch: 78%;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; color: #f3f3f0; text-align: center; padding-inline: 16%;
	line-height: 1.05; transform: translateY(-0.4em);
}
.pb-card--lead .pb-plate__topic { font-size: clamp(2rem, 4vw, 3.4rem); }
.pb-card--compact .pb-plate__topic { font-size: 1.35rem; }

/* Latest */
.pb-latest__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.pb-latest__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pb-latest__list li { position: relative; padding: 18px 0; border-top: 1px solid var(--line); }
.pb-latest__list li:first-child { border-top: 2px solid var(--text); }
.pb-latest__title { font-size: 1.12rem; font-stretch: 92%; font-weight: 660; line-height: 1.25; }
.pb-latest__title a { text-decoration: none; }
.pb-latest__title a::after { content: ""; position: absolute; inset: 0; }
.pb-latest__list li:hover .pb-latest__title { color: var(--accent); }
.pb-latest__list .pb-card__meta { margin-top: 6px; }
@media (max-width: 899px) { .pb-latest__grid { grid-template-columns: 1fr; } }

/* Topics */
.pb-topics__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pb-topic { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; min-height: 150px; }
.pb-topic a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; padding: 22px; text-decoration: none; overflow: hidden; }
.pb-topic__name { position: relative; font: 700 1.3rem/1.15 var(--sans); font-stretch: 86%; letter-spacing: -0.015em; }
.pb-topic__count { position: relative; font: 500 0.82rem/1.2 var(--sans); color: var(--muted); }
.pb-topic a:hover .pb-topic__name { color: var(--accent); }
.pb-topic--img a { color: #fff; }
.pb-topic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pb-topic--img a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 11 12 / 0.05) 20%, rgb(10 11 12 / 0.78)); }
.pb-topic--img .pb-topic__name, .pb-topic--img .pb-topic__count { z-index: 2; color: #fff; }
.pb-topic--img .pb-topic__count { color: rgb(255 255 255 / 0.82); }
.pb-topic--img a:hover .pb-topic__name { color: #fff; }
.pb-topic--img a:hover .pb-topic__img { transform: scale(1.04); }
@media (max-width: 899px) { .pb-topics__grid { grid-template-columns: repeat(2, 1fr); } .pb-topic { min-height: 120px; } .pb-topic a { padding: 18px; } .pb-topic__name { font-size: 1.12rem; } }

/* Review rail */
.pb-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pb-card--compact .pb-card__title { font-size: 1.05rem; }
.pb-card--compact { gap: 14px; }
@media (max-width: 899px) {
	.pb-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 18px; padding-bottom: 6px; }
	.pb-rail > * { scroll-snap-align: start; }
}

/* Photo archive */
.pb-archive__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pb-archive__item { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.pb-archive__item > a { display: block; overflow: hidden; background: var(--ink); }
.pb-archive__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s var(--ease); }
.pb-archive__item:hover img { transform: scale(1.03); }
.pb-archive__item--0 { grid-column: span 2; grid-row: span 2; }
.pb-archive__item--0 > a { flex: 1; min-height: 0; position: relative; }
.pb-archive__item--0 img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.pb-archive__item figcaption { margin-top: 10px; font: 600 0.92rem/1.3 var(--sans); }
.pb-archive__item figcaption a { text-decoration: none; }
.pb-archive__item figcaption a:hover { color: var(--accent); }
@media (max-width: 899px) {
	.pb-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.pb-archive__item--0 { grid-column: 1 / -1; grid-row: auto; }
	.pb-archive__item--0 img { position: static; aspect-ratio: 3 / 2; }
}

/* How Photobek works */
.pb-how { background: var(--paper-2); border-top: 0; }
.pb-how__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 24px clamp(28px, 5vw, 80px); }
.pb-how__list { margin: 0; display: grid; gap: 0; }
.pb-how__list > div { display: grid; grid-template-columns: 15rem 1fr; gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.pb-how__list > div:first-child { border-top: 2px solid var(--text); }
.pb-how__list dt { font: 700 1.08rem/1.3 var(--sans); font-stretch: 90%; }
.pb-how__list dd { margin: 0; color: var(--muted); }
.pb-how__links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 8px 0 0; }
@media (max-width: 899px) {
	.pb-how__grid { grid-template-columns: 1fr; }
	.pb-how__list > div { grid-template-columns: 1fr; }
	.pb-how__links { grid-column: 1; }
}

/* Lists, archives, search */
.pb-listhead { padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 44px); }
.pb-listhead__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-stretch: 80%; font-weight: 780; letter-spacing: -0.03em; line-height: 1.04; margin-top: 18px; }
.pb-listhead__desc { color: var(--muted); font-size: 1.15rem; max-width: 60ch; margin: 16px 0 0; }
.pb-listhead__search { max-width: 560px; margin-top: 24px; }
.pb-listhead__count { font: 500 0.88rem/1.2 var(--sans); color: var(--muted); margin: 14px 0 0; }
.pb-listing { padding-bottom: clamp(56px, 7vw, 96px); }
.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
.pb-listing .pb-grid { border-top: 2px solid var(--text); padding-top: 32px; }
.pb-grid--lead .pb-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
@media (max-width: 999px) { .pb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
	.pb-grid { grid-template-columns: 1fr; gap: 36px; }
	.pb-grid--lead .pb-card--lead { grid-template-columns: 1fr; padding-bottom: 36px; }
}
.pb-crumbs { font: 500 0.82rem/1.3 var(--sans); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.pb-crumbs a { color: var(--muted); text-decoration: none; }
.pb-crumbs a:hover { color: var(--accent); }
.pb-crumbs__sep { opacity: 0.5; }

.pagination { margin-top: 56px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--sans); }
.pagination .page-numbers {
	min-width: 44px; height: 44px; padding: 0 12px; display: inline-grid; place-items: center;
	border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.pagination .page-numbers.current { background: var(--text); color: var(--paper); border-color: var(--text); }
.pagination a.page-numbers:hover { border-color: var(--text); }
.pagination .dots { border: 0; }

.pb-empty { border-top: 2px solid var(--text); padding-top: 32px; max-width: 640px; }
.pb-empty__title { font: 700 1.4rem/1.2 var(--sans); margin: 0 0 10px; }
.pb-empty a { color: var(--accent); }
.pb-404__code { font: 800 clamp(4rem, 12vw, 8rem)/0.9 var(--sans); font-stretch: 75%; color: var(--accent); margin: 0; letter-spacing: -0.04em; }
.pb-404 .pb-listhead__title { margin-top: 12px; }

/* Article */
.pb-article__head { max-width: calc(var(--measure) + var(--gutter) * 2); padding-top: clamp(28px, 4vw, 52px); }
.pb-article__topic { margin: 22px 0 12px; font: 650 0.78rem/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; }
.pb-article__topic a { color: var(--accent); text-decoration: none; }
.pb-article__title { font-size: clamp(2.1rem, 4vw, 3.15rem); font-stretch: 80%; font-weight: 780; line-height: 1.05; letter-spacing: -0.03em; max-width: 22ch; }
.pb-page .pb-article__title { margin-top: 18px; }
.pb-article__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: 500 0.88rem/1.4 var(--sans); color: var(--muted); }
.pb-article__meta a { color: var(--text); text-underline-offset: 3px; }
.pb-article__hero { margin: 32px auto 0; max-width: calc(1040px + var(--gutter) * 2); }
.pb-article__img { display: block; width: 100%; max-height: 640px; object-fit: cover; background: var(--ink); }
.pb-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 80px); }
.pb-article__body { grid-column: 2; min-width: 0; }
.pb-page .pb-article__head { max-width: calc(var(--measure) + var(--gutter) * 2); }

.pb-toc--rail { grid-column: 1; grid-row: 1; justify-self: end; width: 230px; margin-right: 56px; position: sticky; top: 28px; align-self: start; max-height: calc(100vh - 56px); overflow: auto; font-family: var(--sans); }
.pb-toc__title { font: 650 0.74rem/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 6px 0 12px; }
.pb-toc ol { list-style: none; margin: 0; padding: 0; }
.pb-toc--rail li { border-top: 1px solid var(--line); }
.pb-toc--rail a { display: block; padding: 9px 0; font-size: 0.88rem; line-height: 1.35; color: var(--muted); text-decoration: none; }
.pb-toc--rail a:hover { color: var(--accent); }
.pb-toc--inline { display: none; border: 1px solid var(--line); background: var(--card); margin: 0 0 32px; font-family: var(--sans); }
.pb-toc--inline summary { cursor: pointer; padding: 14px 18px; font-weight: 650; font-size: 0.95rem; list-style-position: inside; }
.pb-toc--inline ol { padding: 0 18px 12px; }
.pb-toc--inline li { border-top: 1px solid var(--line); }
.pb-toc--inline a { display: block; padding: 10px 0; font-size: 0.95rem; text-decoration: none; }
@media (max-width: 1179px) {
	.pb-toc--rail { display: none; }
	.pb-toc--inline { display: block; }
	.pb-article__layout { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); }
}

.pb-disclosure { background: var(--paper-2); border-left: 3px solid var(--accent); padding: 14px 18px; margin: 0 0 28px; font: 400 0.9rem/1.55 var(--sans); color: var(--muted); }
.pb-disclosure p { margin: 0; }
.pb-disclosure strong { color: var(--text); }
.pb-disclosure a { color: var(--text); text-underline-offset: 3px; margin-left: 4px; }

/* Long-form prose */
.pb-prose { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.72; overflow-wrap: anywhere; }
.pb-prose > * { margin-top: 0; }
.pb-prose p { margin: 0 0 1.3em; }
.pb-prose p:empty { display: none; }
.pb-prose h2 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); font-stretch: 84%; font-weight: 740; letter-spacing: -0.02em; margin: 2.1em 0 0.6em; }
.pb-prose h3 { font-size: 1.32rem; font-stretch: 90%; font-weight: 700; margin: 1.8em 0 0.5em; }
.pb-prose h4 { font-size: 1.1rem; margin: 1.6em 0 0.4em; }
.pb-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pb-prose a:hover { color: var(--accent); }
.pb-prose ul, .pb-prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.pb-prose li { margin: 0.35em 0; padding-left: 0.2em; }
.pb-prose li::marker { color: var(--accent); }
.pb-prose ol li::marker { font-family: var(--sans); font-weight: 700; font-size: 0.9em; }
.pb-prose strong { font-weight: 650; }
.pb-prose blockquote { margin: 1.8em 0; padding: 0 0 0 22px; border-left: 3px solid var(--accent); font-style: italic; color: var(--text); }
.pb-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.pb-prose figure { margin: 1.8em 0; }
.pb-prose img { display: block; margin-inline: auto; }
.pb-prose figcaption, .pb-prose .wp-caption-text, .pb-prose .wp-element-caption { font: 500 0.82rem/1.45 var(--sans); color: var(--muted); margin-top: 10px; text-align: left; }
.pb-prose .aligncenter { margin-inline: auto; }
.pb-prose .alignleft { float: left; margin: 0.4em 1.5em 1em 0; max-width: 50%; }
.pb-prose .alignright { float: right; margin: 0.4em 0 1em 1.5em; max-width: 50%; }
.pb-prose .alignwide, .pb-prose .alignfull { margin-inline: 0; }
.pb-prose iframe, .pb-prose video, .pb-prose embed { max-width: 100%; }
.pb-prose .wp-block-embed__wrapper iframe, .pb-prose > p > iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.pb-prose table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font: 400 0.95rem/1.45 var(--sans); }
.pb-prose th { text-align: left; font-weight: 700; padding: 12px 14px; border-bottom: 2px solid var(--text); vertical-align: bottom; }
.pb-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pb-prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.pb-prose .wp-block-table { margin: 1.8em 0; overflow-x: auto; }
.pb-prose .wp-block-table table { margin: 0; }
@media (max-width: 699px) {
	.pb-prose { font-size: 1.125rem; line-height: 1.68; }
	.pb-prose table:not(.wp-block-table table) { display: block; overflow-x: auto; }
	.pb-prose th, .pb-prose td { padding: 10px; min-width: 120px; }
}

/* Amazon product images: a white product plate, contained, never cropped. */
.pb-prose img[src*="media-amazon.com"], .pb-prose img[src*="images-amazon.com"] {
	background: #fff; padding: clamp(14px, 3vw, 28px); border: 1px solid var(--line);
	width: auto; max-width: 100%; max-height: 380px; object-fit: contain; box-sizing: border-box;
}

/* Pros and cons, wrapped at render time from existing review markup */
.pb-verdict { display: grid; grid-template-columns: 1fr 1fr; margin: 1.2em 0 2em; border: 1px solid var(--line); background: var(--card); font-family: var(--sans); }
.pb-verdict__col { padding: 18px 22px 8px; border-top: 3px solid var(--pro); }
.pb-verdict__col--con { border-top-color: var(--accent); border-left: 1px solid var(--line); }
.pb-verdict__h { font: 700 0.76rem/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 8px !important; }
.pb-verdict__col--pro .pb-verdict__h { color: var(--pro); }
.pb-verdict__col--con .pb-verdict__h { color: var(--accent); }
.pb-verdict ul { list-style: none; padding: 0; margin: 0 0 10px; font-size: 0.98rem; line-height: 1.45; }
.pb-verdict li { padding: 7px 0 7px 22px; margin: 0; position: relative; border-top: 1px solid var(--line); }
.pb-verdict li:first-child { border-top: 0; }
.pb-verdict li::before { position: absolute; left: 2px; top: 7px; font-weight: 700; }
.pb-verdict__col--pro li::before { content: "+"; color: var(--pro); }
.pb-verdict__col--con li::before { content: "\2212"; color: var(--accent); }
@media (max-width: 599px) { .pb-verdict { grid-template-columns: 1fr; } .pb-verdict__col--con { border-left: 0; } }

/* Post-content components available to future content */
.pb-prose .pb-product { border: 1px solid var(--line); background: var(--card); padding: 20px; display: grid; grid-template-columns: 160px 1fr; gap: 20px; font-family: var(--sans); margin: 1.8em 0; }
@media (max-width: 599px) { .pb-prose .pb-product { grid-template-columns: 1fr; } }

/* The in-content "About this guide" card (eeat-author-card, inline-styled) restyled to match the trust block. */
.pb-prose .eeat-author-card { margin: 48px 0 0 !important; padding: 26px 0 0 !important; border: 0 !important; border-top: 2px solid var(--text) !important; border-radius: 0 !important; background: none !important; font-family: var(--sans); }
.pb-prose .eeat-author-card p { color: var(--muted) !important; font-size: 0.98rem !important; line-height: 1.55; }
.pb-prose .eeat-author-card p:first-child { font: 650 0.74rem/1.2 var(--sans) !important; letter-spacing: 0.09em !important; text-transform: uppercase; color: var(--muted) !important; }
.pb-prose .eeat-author-card p:nth-child(2) { font-size: 1.05rem !important; color: var(--text) !important; }
.pb-prose .eeat-author-card a { color: var(--text); font-weight: 600; font-size: 0.88rem; }

/* Trust block */
.pb-trust { display: grid; grid-template-columns: auto 1fr; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--text); font-size: 1rem; color: var(--muted); }
.pb-trust p { margin: 0 0 10px; }
.pb-trust a { color: var(--text); text-underline-offset: 3px; }
.pb-trust__mark { width: 56px; height: 56px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font: 800 1.15rem/1 var(--sans); letter-spacing: -0.04em; grid-auto-flow: column; }
.pb-trust__mark .pb-wordmark__dot { width: 6px; height: 6px; align-self: end; margin: 0 0 18px 1px; }
.pb-trust__h { font: 700 1.05rem/1.3 var(--sans); color: var(--text); }
.pb-trust__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 0.88rem/1.3 var(--sans); }

.pb-related { background: var(--paper-2); }
.pb-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .pb-grid--3 { grid-template-columns: 1fr; gap: 32px; } .pb-related .pb-card { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: start; } .pb-related .pb-card__title { font-size: 1.02rem; } .pb-related .pb-plate__topic { font-size: 0.95rem; } }

/* Comments */
.pb-comments-wrap { padding-bottom: 72px; }
.pb-comments { max-width: var(--measure); margin-inline: auto; border-top: 1px solid var(--line); padding-top: 40px; font-family: var(--sans); }
.pb-comments .pb-section__title { font-size: 1.5rem; margin-bottom: 20px; }
.pb-comments__list { list-style: none; padding: 0; margin: 0 0 32px; }
.pb-comments__list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.pb-comments__list .children { list-style: none; padding-left: 28px; }
.pb-comments .avatar { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.pb-comments .comment-meta a { color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.pb-comments label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.pb-comments input[type="text"], .pb-comments input[type="email"], .pb-comments input[type="url"], .pb-comments textarea {
	width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 400 1rem/1.4 var(--sans); border-radius: 0;
}
.pb-comments input[type="submit"] { background: var(--ink); color: var(--on-ink); border: 0; padding: 14px 22px; font: 600 0.95rem var(--sans); cursor: pointer; border-radius: 0; }
.pb-comments input[type="submit"]:hover { background: var(--accent); }
.pb-comments .comment-notes, .pb-comments .logged-in-as { color: var(--muted); font-size: 0.88rem; }

/* Elementor-built pages (Contact) keep their builder layout */
.pb-builder-page { min-height: 40vh; }
.pb-builder-page .elementor-button, .pb-builder-page button[type="submit"] { background: var(--ink) !important; color: var(--on-ink) !important; border-radius: 0 !important; font-family: var(--sans) !important; font-weight: 600 !important; }
.pb-builder-page .elementor-button:hover, .pb-builder-page button[type="submit"]:hover { background: var(--accent) !important; }
.pb-builder-page .elementor-field-textual { border-radius: 0 !important; font-family: var(--sans) !important; }
.pb-builder-page .elementor-widget-container { border-radius: 0 !important; }

/* Footer */
.pb-footer { background: var(--ink); color: var(--on-ink-muted); padding-top: clamp(48px, 6vw, 80px); font-family: var(--sans); font-size: 0.95rem; }
.pb-footer__grid { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 40px; padding-bottom: 48px; }
.pb-footer__brand p { max-width: 40ch; margin: 18px 0 0; line-height: 1.6; }
.pb-footer__h { font: 650 0.74rem/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-ink-muted); margin: 6px 0 14px; }
.pb-footer ul { list-style: none; margin: 0; padding: 0; }
.pb-footer li { margin: 0 0 10px; }
.pb-footer a { color: var(--on-ink); text-decoration: none; }
.pb-footer__col a:hover { color: var(--accent-ink); }
.pb-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 22px 28px; border-top: 1px solid #2a2c30; font-size: 0.82rem; }
.pb-footer__legal p { margin: 0; }
@media (max-width: 799px) { .pb-footer__grid { grid-template-columns: 1fr 1fr; } .pb-footer__brand { grid-column: 1 / -1; } }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.pb-card:hover .pb-card__media img, .pb-archive__item:hover img, .pb-topic--img a:hover .pb-topic__img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }