/* ==========================================================================
   Laraib Organic — Editorial
   Blog index · archives · single post · search · comments · sidebar

   Owns:  .lo-jmast .lo-feature .lo-catbar .lo-pgrid .lo-postcard .lo-blog
          .lo-aside .lo-jabout .lo-jshop .lo-jcta .lo-ahero .lo-article
          .lo-share .lo-ptags .lo-author .lo-adjacent .lo-related
          .lo-comments .lo-cform .lo-shead .lo-sresult .lo-noresult .lo-avatar
   Borrows: .lo-prose (owned by pages.css) — only `--article` refinements here.
            .lo-widget/.lo-chip/.lo-tag/.lo-media-frame (components.css).
   Consumes tokens.css only — no raw hex, no external assets.

   1.  Editorial primitives
   2.  Journal masthead
   3.  Featured lead story
   4.  Topic filter rail
   5.  Post grid + post card
   6.  Listing layout + sidebar
   7.  Sidebar cards
   8.  Closing CTA band
   9.  Article hero
   10. Article body + share rail
   11. Prose
   12. Tags · author card · prev/next
   13. Related reading
   14. Comments
   15. Search results
   16. Empty state
   17. Pagination helpers
   18. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Editorial primitives
   ========================================================================== */

/* Meta separator dot */
.lo-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* Self-hosted initials avatar — never a remote Gravatar request. */
.lo-avatar {
	--lo-av-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--lo-av-size);
	height: var(--lo-av-size);
	border-radius: 50%;
	font-family: var(--lo-font-body);
	font-size: calc(var(--lo-av-size) * .36);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

.lo-avatar--xs { --lo-av-size: 28px; }
.lo-avatar--lg { --lo-av-size: 78px; }

.lo-avatar--a { background: var(--lo-green-100); color: var(--lo-green-800); }
.lo-avatar--b { background: var(--lo-gold-100);  color: var(--lo-gold-700); }
.lo-avatar--c { background: var(--lo-ruby-soft); color: var(--lo-ruby); }
.lo-avatar--d { background: var(--lo-sand);      color: var(--lo-green-900); }

.lo-avatar--ring {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 6px rgba(255, 255, 255, .16);
}

/* Kicker inside a page-hero H1 (archive / category / 404 fallback) */
.lo-hkicker {
	display: block;
	margin-bottom: var(--lo-s3);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--lo-gold-300);
}

/* Count chip appended to a page-hero subtitle */
.lo-hcount {
	display: inline-block;
	margin-left: var(--lo-s2);
	padding: 3px 12px;
	border-radius: var(--lo-r-pill);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The scroll-progress bar (built by motion.js) reads as a reading indicator
   on an article, so give it a touch more presence there. */
.single-post .lo-progress { height: 4px; }


/* ==========================================================================
   2. Journal masthead
   ========================================================================== */

.lo-jmast {
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 82% -10%, var(--lo-green-50) 0%, rgba(241, 250, 245, 0) 58%),
		linear-gradient(180deg, var(--lo-paper) 0%, var(--lo-cream) 100%);
	border-bottom: 1px solid var(--lo-line-soft);
}

.lo-jmast .lo-crumbs { margin-bottom: var(--lo-s6); }

.lo-jmast__inner { max-width: 760px; }

.lo-jmast__title {
	margin-bottom: var(--lo-s5);
	font-size: var(--lo-fs-4xl);
	line-height: var(--lo-lh-tight);
}

.lo-jmast__lede {
	max-width: 62ch;
	font-size: var(--lo-fs-lg);
	line-height: 1.62;
	color: var(--lo-text-soft);
}

.lo-jmast__count {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	margin: var(--lo-s5) 0 0;
	padding: 8px 18px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
	color: var(--lo-green-800);
	font-size: var(--lo-fs-sm);
	font-weight: 600;
}
.lo-jmast__count strong { font-weight: 800; }


/* ==========================================================================
   3. Featured lead story
   ========================================================================== */

.lo-feature {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	margin-bottom: var(--lo-s9);
}

.lo-feature__media {
	grid-column: 1 / 9;
	grid-row: 1;
	border-radius: var(--lo-r-xl);
	box-shadow: var(--lo-shadow-lg);
	aspect-ratio: 16 / 10;
}
.lo-feature__media img { width: 100%; height: 100%; object-fit: cover; }

.lo-feature__panel {
	position: relative;
	z-index: 2;
	grid-column: 7 / 13;
	grid-row: 1;
	padding: clamp(28px, 3vw, 48px);
	background: var(--lo-paper);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	box-shadow: var(--lo-shadow-lg);
}

.lo-feature__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s2);
	margin-bottom: var(--lo-s4);
}

.lo-feature__cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-50);
	color: var(--lo-green-800);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .22s var(--lo-ease), color .22s var(--lo-ease);
}
.lo-feature__cat:hover { background: var(--lo-green-900); color: var(--lo-paper); }

.lo-feature__title {
	margin-bottom: var(--lo-s4);
	font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -.02em;
}
.lo-feature__title a { color: var(--lo-text); background-image: none; }
.lo-feature__title a:hover { color: var(--lo-green-700); }

.lo-feature__excerpt {
	margin-bottom: var(--lo-s5);
	color: var(--lo-text-soft);
	font-size: var(--lo-fs-md);
	line-height: 1.68;
}

.lo-feature__meta {
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	padding-bottom: var(--lo-s5);
	margin-bottom: var(--lo-s5);
	border-bottom: 1px solid var(--lo-line-soft);
}

.lo-feature__by { display: flex; flex-direction: column; min-width: 0; }
.lo-feature__by strong {
	font-size: var(--lo-fs-base);
	font-weight: 700;
	color: var(--lo-text);
	line-height: 1.3;
}
.lo-feature__by > span {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	flex-wrap: wrap;
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
	font-weight: 600;
}

.lo-feature__cta { align-self: flex-start; }


/* ==========================================================================
   4. Topic filter rail
   ========================================================================== */

.lo-catbar {
	display: flex;
	align-items: center;
	gap: var(--lo-s5);
	padding-block: var(--lo-s4);
	margin-bottom: var(--lo-s7);
	border-top: 1px solid var(--lo-line-soft);
	border-bottom: 1px solid var(--lo-line-soft);
}
.lo-catbar--flush { border-top: 0; padding-top: 0; }

.lo-catbar__label {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	flex: 0 0 auto;
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lo-muted);
}
.lo-catbar__label svg { color: var(--lo-gold-600); }

.lo-catbar__scroll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lo-s2);
	min-width: 0;
	flex: 1 1 auto;
}

/* Count bubble inside a chip */
.lo-chip__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 6px;
	margin-left: 2px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-50);
	color: var(--lo-green-700);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.5;
	transition: background-color .22s var(--lo-ease), color .22s var(--lo-ease);
}
.lo-chip.is-active .lo-chip__n {
	background: rgba(255, 255, 255, .18);
	color: var(--lo-paper);
}


/* ==========================================================================
   5. Post grid + post card
   ========================================================================== */

.lo-pgrid {
	display: grid;
	gap: clamp(22px, 2.4vw, 34px);
}
.lo-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lo-pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lo-postcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	overflow: hidden;
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-postcard:hover {
	transform: translateY(-6px);
	box-shadow: var(--lo-shadow-lg);
	border-color: transparent;
}
.lo-postcard:focus-within {
	box-shadow: var(--lo-shadow-lg);
	border-color: var(--lo-green-200);
}

.lo-postcard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--lo-green-50);
}
.lo-postcard__media img { width: 100%; height: 100%; object-fit: cover; }

.lo-postcard__cat,
.lo-postcard__pin {
	position: absolute;
	top: var(--lo-s4);
	left: var(--lo-s4);
	/* above .lo-media-frame::after, which sits at z-index 2 */
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	border-radius: var(--lo-r-pill);
	background: rgba(252, 249, 243, .93);
	color: var(--lo-green-900);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.4;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	box-shadow: var(--lo-shadow-xs);
}
.lo-postcard__pin {
	top: auto;
	bottom: var(--lo-s4);
	background: linear-gradient(135deg, var(--lo-gold-500), var(--lo-gold-600));
	color: var(--lo-green-950);
}

.lo-postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--lo-s6);
	min-width: 0;
}

.lo-postcard__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lo-s2);
	margin-bottom: var(--lo-s3);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lo-muted);
}

.lo-postcard__title {
	margin: 0 0 var(--lo-s3);
	font-size: var(--lo-fs-lg);
	line-height: 1.28;
	letter-spacing: -.012em;
}
.lo-postcard__title a {
	color: var(--lo-text);
	background-image: none;
	transition: color .22s var(--lo-ease);
}
.lo-postcard__title a:hover { color: var(--lo-green-700); }

/* Make the whole card clickable while keeping real links for a11y. */
.lo-postcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.lo-postcard__excerpt {
	margin: 0 0 var(--lo-s5);
	color: var(--lo-text-soft);
	font-size: var(--lo-fs-base);
	line-height: 1.66;
}

.lo-postcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-s3);
	margin-top: auto;
	padding-top: var(--lo-s4);
	border-top: 1px solid var(--lo-line-soft);
}

.lo-postcard__by {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	min-width: 0;
	font-size: var(--lo-fs-sm);
	font-weight: 700;
	color: var(--lo-text-soft);
}
.lo-postcard__by > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The title's overlay covers the image, so the zoom is driven from the card. */
.lo-postcard:hover .lo-postcard__media img,
.lo-postcard:focus-within .lo-postcard__media img { transform: scale(1.06); }

.lo-postcard__cta { flex: 0 0 auto; font-size: var(--lo-fs-sm); }
.lo-postcard:hover .lo-postcard__cta { color: var(--lo-gold-600); }
.lo-postcard:hover .lo-postcard__cta svg { transform: translateX(5px); }

.lo-postcard--pinned { border-color: var(--lo-gold-300); }


/* ==========================================================================
   6. Listing layout + sidebar shell
   ========================================================================== */

.lo-blog__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 344px;
	gap: clamp(32px, 4vw, 68px);
	align-items: start;
}
.lo-blog__layout--full { grid-template-columns: minmax(0, 1fr); }

.lo-blog__main { min-width: 0; }

.lo-blog__count {
	margin: 0 0 var(--lo-s5);
	font-size: var(--lo-fs-sm);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lo-muted);
}
.lo-blog__count strong { color: var(--lo-green-800); font-weight: 800; }

.lo-aside { min-width: 0; }
.lo-aside__inner { display: block; }


/* ==========================================================================
   7. Sidebar cards
   ========================================================================== */

.lo-jabout { position: relative; overflow: hidden; }
.lo-jabout__leaf {
	position: absolute;
	right: -22px;
	bottom: -26px;
	color: var(--lo-green-200);
	opacity: .5;
	pointer-events: none;
}
.lo-jabout .lo-eyebrow { margin-bottom: var(--lo-s2); }

.lo-jabout__title {
	position: relative;
	margin: 0 0 var(--lo-s3);
	font-size: var(--lo-fs-xl);
	line-height: 1.24;
}
.lo-jabout__text {
	position: relative;
	margin-bottom: var(--lo-s4);
	font-size: var(--lo-fs-base);
	line-height: 1.68;
	color: var(--lo-text-soft);
}
.lo-jabout__ur {
	position: relative;
	margin-bottom: var(--lo-s4);
	font-size: var(--lo-fs-md);
	color: var(--lo-green-800);
}
.lo-jabout__drap { position: relative; }

/* Shop the range */
.lo-jshop {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--lo-green-900) 0%, var(--lo-green-950) 100%);
	border-color: transparent;
	color: rgba(255, 255, 255, .78);
}
.lo-jshop__glow {
	position: absolute;
	top: -70px;
	right: -70px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(208, 160, 60, .42) 0%, rgba(208, 160, 60, 0) 68%);
	pointer-events: none;
}
.lo-jshop .lo-eyebrow { color: var(--lo-gold-400); }
.lo-jshop__title {
	position: relative;
	margin: 0 0 var(--lo-s3);
	color: var(--lo-paper);
	font-size: var(--lo-fs-xl);
}
.lo-jshop__text {
	position: relative;
	margin-bottom: var(--lo-s5);
	font-size: var(--lo-fs-base);
	line-height: 1.66;
	color: rgba(255, 255, 255, .74);
}
.lo-jshop__list {
	position: relative;
	list-style: none;
	margin: 0 0 var(--lo-s6);
	padding: 0;
	display: grid;
	gap: var(--lo-s2);
}
.lo-jshop__list li {
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	margin: 0;
	border: 0;
	font-size: var(--lo-fs-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, .84);
}
.lo-jshop__list li svg { color: var(--lo-gold-400); }
.lo-jshop .lo-btn { position: relative; }


/* ==========================================================================
   8. Closing CTA band
   ========================================================================== */

.lo-jcta {
	position: relative;
	isolation: isolate;
	padding-block: clamp(52px, 6vw, 92px);
	background-image: var(--lo-jcta-img);
	background-size: cover;
	background-position: center;
	color: rgba(255, 255, 255, .8);
}
.lo-jcta__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(6, 37, 28, .93) 0%, rgba(6, 37, 28, .78) 52%, rgba(6, 37, 28, .62) 100%);
}
.lo-jcta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
}
.lo-jcta .lo-eyebrow { color: var(--lo-gold-400); }
.lo-jcta__title {
	margin: 0 0 var(--lo-s3);
	max-width: 20ch;
	color: var(--lo-paper);
	font-size: var(--lo-fs-2xl);
	line-height: 1.16;
}
.lo-jcta__title .lo-accent { color: var(--lo-gold-300); }
.lo-jcta__text {
	max-width: 56ch;
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: rgba(255, 255, 255, .72);
}
.lo-jcta .lo-btn { flex: 0 0 auto; }


/* ==========================================================================
   9. Article hero
   ========================================================================== */

.lo-ahero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(440px, 54vw, 660px);
	padding-block: clamp(48px, 7vw, 84px);
	overflow: hidden;
	background: var(--lo-green-950);
}

.lo-ahero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.lo-ahero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
}

.lo-ahero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6, 37, 28, .58) 0%, rgba(6, 37, 28, .18) 32%, rgba(6, 37, 28, .82) 78%, rgba(6, 37, 28, .95) 100%);
}

.lo-ahero__leaf {
	position: absolute;
	top: 8%;
	right: -30px;
	z-index: -1;
	color: var(--lo-gold-300);
	opacity: .1;
	pointer-events: none;
}

.lo-ahero__inner { position: relative; max-width: 940px; }

.lo-ahero .lo-crumbs {
	justify-content: flex-start;
	margin-bottom: var(--lo-s5);
	color: rgba(255, 255, 255, .6);
}
.lo-ahero .lo-crumbs a { color: rgba(255, 255, 255, .78); }
.lo-ahero .lo-crumbs a:hover { color: var(--lo-gold-400); }
.lo-ahero .lo-crumbs > span:last-child { color: var(--lo-gold-300); }
.lo-ahero .lo-crumbs__sep { color: rgba(255, 255, 255, .4); opacity: 1; }

.lo-ahero__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: var(--lo-s5);
	padding: 8px 17px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--lo-r-pill);
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	color: var(--lo-paper);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color .24s var(--lo-ease), color .24s var(--lo-ease), border-color .24s var(--lo-ease);
}
.lo-ahero__cat:hover {
	background: var(--lo-gold-500);
	border-color: var(--lo-gold-500);
	color: var(--lo-green-950);
}
.lo-ahero__cat svg { color: var(--lo-gold-300); }
.lo-ahero__cat:hover svg { color: var(--lo-green-950); }

.lo-ahero__title {
	margin: 0 0 var(--lo-s5);
	max-width: 18ch;
	color: var(--lo-paper);
	font-size: var(--lo-fs-4xl);
	line-height: 1.06;
	letter-spacing: -.024em;
	text-wrap: balance;
}

.lo-ahero__sub {
	max-width: 60ch;
	margin: 0 0 var(--lo-s6);
	color: rgba(255, 255, 255, .8);
	font-size: var(--lo-fs-lg);
	line-height: 1.6;
}

.lo-ahero__meta {
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	padding-top: var(--lo-s5);
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.lo-ahero__by { display: flex; flex-direction: column; min-width: 0; }
.lo-ahero__by strong {
	color: var(--lo-paper);
	font-size: var(--lo-fs-base);
	font-weight: 700;
	line-height: 1.35;
}
.lo-ahero__facts {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lo-s2);
	color: rgba(255, 255, 255, .68);
	font-size: var(--lo-fs-sm);
	font-weight: 600;
}
.lo-ahero__facts a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; }
.lo-ahero__facts a:hover { color: var(--lo-gold-300); }


/* ==========================================================================
   10. Article body + share rail
   ========================================================================== */

.lo-article { padding-block: clamp(44px, 5vw, 84px); }

.lo-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lo-s7);
	max-width: 1080px;
	margin-inline: auto;
}

.lo-article__main { min-width: 0; order: 1; }
.lo-article__rail { display: none; }

/* Share rail — a horizontal strip under the article by default, a sticky
   vertical rail beside it on wide screens. */
.lo-share {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s3);
	padding-top: var(--lo-s5);
	border-top: 1px solid var(--lo-line);
}

.lo-share__label {
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lo-muted);
}

.lo-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--lo-line);
	border-radius: 50%;
	background: var(--lo-paper);
	color: var(--lo-green-800);
	cursor: pointer;
	transition:
		background-color .24s var(--lo-ease),
		color .24s var(--lo-ease),
		border-color .24s var(--lo-ease),
		transform .24s var(--lo-ease-out),
		box-shadow .24s var(--lo-ease-out);
}
.lo-share__btn:hover {
	background: var(--lo-green-900);
	border-color: var(--lo-green-900);
	color: var(--lo-paper);
	transform: translateY(-3px);
	box-shadow: var(--lo-shadow);
}
.lo-share__btn--whatsapp:hover { background: var(--lo-green-600); border-color: var(--lo-green-600); }
.lo-share__btn--copy:hover     { background: var(--lo-gold-500); border-color: var(--lo-gold-500); color: var(--lo-green-950); }

/* Tooltip */
.lo-share__btn::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translate(-50%, 6px);
	padding: 6px 11px;
	border-radius: var(--lo-r-sm);
	background: var(--lo-green-950);
	color: var(--lo-paper);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s var(--lo-ease), transform .22s var(--lo-ease-out);
}
.lo-share__btn:hover::after,
.lo-share__btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.lo-share__ico { display: inline-flex; }
.lo-share__ico--done { display: none; }
.lo-share__btn.is-copied { background: var(--lo-green-600); border-color: var(--lo-green-600); color: var(--lo-paper); }
.lo-share__btn.is-copied .lo-share__ico--idle { display: none; }
.lo-share__btn.is-copied .lo-share__ico--done { display: inline-flex; }


/* ==========================================================================
   11. Prose
   ========================================================================== */

/* `.lo-prose` itself is owned by pages.css — the shared reading style.
   Only the article-specific refinements live here. */


/* Article-only refinements */
.lo-prose--article { max-width: 72ch; margin-inline: auto; }

.lo-prose--article > p:first-of-type {
	font-size: var(--lo-fs-lg);
	line-height: 1.68;
	color: var(--lo-text);
}

/* Drop cap — only where the measure is wide enough to carry it. */
@media (min-width: 621px) {
	.lo-prose--article > p:first-of-type::first-letter {
		float: left;
		margin: 8px 14px 0 0;
		font-family: var(--lo-font-display);
		font-size: 4.1rem;
		font-weight: 600;
		line-height: .78;
		color: var(--lo-gold-600);
	}
}



/* ==========================================================================
   12. Tags · author card · prev/next
   ========================================================================== */

.lo-ptags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s4);
	max-width: 72ch;
	margin: var(--lo-s8) auto 0;
	padding-top: var(--lo-s6);
	border-top: 1px solid var(--lo-line-soft);
}
.lo-ptags__label {
	flex: 0 0 auto;
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lo-muted);
}

.lo-author {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s6);
	max-width: 72ch;
	margin: var(--lo-s8) auto 0;
	padding: clamp(26px, 3vw, 40px);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
	border-radius: var(--lo-r-lg);
}
.lo-author__leaf {
	position: absolute;
	right: -20px;
	bottom: -24px;
	color: var(--lo-green-200);
	opacity: .55;
	pointer-events: none;
}
.lo-author__avatar { position: relative; flex: 0 0 auto; }
.lo-author__body { position: relative; min-width: 0; }
.lo-author .lo-eyebrow { margin-bottom: var(--lo-s2); }
.lo-author__name {
	margin: 0 0 var(--lo-s3);
	font-size: var(--lo-fs-xl);
	line-height: 1.25;
}
.lo-author__bio {
	margin-bottom: var(--lo-s4);
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-text-soft);
}

.lo-adjacent {
	padding-block: 0 clamp(44px, 5vw, 84px);
}
.lo-adjacent__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	max-width: 1080px;
	margin-inline: auto;
}

.lo-adjacent__item {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	min-width: 0;
	padding: var(--lo-s4);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-adjacent__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--lo-shadow);
	border-color: transparent;
}
.lo-adjacent__item.is-empty {
	background: none;
	border-color: transparent;
	box-shadow: none;
	pointer-events: none;
}
.lo-adjacent__item--next { text-align: right; }

.lo-adjacent__media {
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	border-radius: var(--lo-r);
	overflow: hidden;
}
.lo-adjacent__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lo-dur) var(--lo-ease-out); }
.lo-adjacent__item:hover .lo-adjacent__media img { transform: scale(1.07); }

.lo-adjacent__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lo-adjacent__dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}
.lo-adjacent__item--next .lo-adjacent__dir { justify-content: flex-end; }
.lo-adjacent__title {
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	line-height: 1.32;
	color: var(--lo-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lo-adjacent__item:hover .lo-adjacent__title { color: var(--lo-green-700); }


/* ==========================================================================
   13. Related reading
   ========================================================================== */

.lo-related {
	overflow: hidden;
	background: var(--lo-green-50);
	border-top: 1px solid var(--lo-line-soft);
}
.lo-related .lo-head { margin-bottom: var(--lo-s7); }


/* ==========================================================================
   14. Comments
   ========================================================================== */

.lo-comments-shell {
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(26px, 4vw, 56px);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-xl);
	box-shadow: var(--lo-shadow-sm);
}

.lo-comments__head { margin-bottom: var(--lo-s7); }
.lo-comments__title {
	margin: 0 0 var(--lo-s3);
	font-size: var(--lo-fs-2xl);
	line-height: 1.18;
}
.lo-comments__lede {
	max-width: 62ch;
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-text-soft);
}

.lo-comments__list,
.lo-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lo-comments__list > li { margin: 0 0 var(--lo-s5); }
.lo-comments__list > li:last-child { margin-bottom: 0; }

.lo-comments__list .children {
	margin: var(--lo-s5) 0 0 var(--lo-s6);
	padding-left: var(--lo-s6);
	border-left: 2px solid var(--lo-green-100);
}
.lo-comments__list .children > li { margin-bottom: var(--lo-s5); }
.lo-comments__list .children > li:last-child { margin-bottom: 0; }

.lo-comment { list-style: none; }

.lo-comment__box {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s4);
	padding: var(--lo-s5);
	background: var(--lo-cream);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	transition: border-color .24s var(--lo-ease), box-shadow .24s var(--lo-ease-out);
}
.lo-comment__box:hover { border-color: var(--lo-green-200); box-shadow: var(--lo-shadow-xs); }
.lo-comment.bypostauthor > .lo-comment__box {
	background: var(--lo-green-50);
	border-color: var(--lo-green-100);
}

.lo-comment__avatar { flex: 0 0 auto; }
.lo-comment__main { flex: 1 1 auto; min-width: 0; }

.lo-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lo-s2) var(--lo-s4);
	margin-bottom: var(--lo-s3);
}
.lo-comment__author {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lo-s2);
	margin: 0;
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-md);
	font-weight: 800;
	color: var(--lo-text);
	letter-spacing: -.005em;
}
.lo-comment__author a { color: inherit; }
.lo-comment__author a:hover { color: var(--lo-green-700); }

.lo-comment__badge {
	padding: 3px 10px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-gold-100);
	color: var(--lo-gold-700);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lo-comment__time {
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lo-muted);
}
.lo-comment__time:hover { color: var(--lo-green-700); }

.lo-comment__pending {
	margin: 0 0 var(--lo-s3);
	padding: 9px 14px;
	border-radius: var(--lo-r-sm);
	background: var(--lo-gold-100);
	color: var(--lo-gold-700);
	font-size: var(--lo-fs-sm);
	font-weight: 700;
}

.lo-comment__body {
	font-size: var(--lo-fs-base);
	line-height: 1.72;
	color: var(--lo-text-soft);
}
.lo-comment__body > *:last-child { margin-bottom: 0; }

.lo-comment__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s4);
	margin-top: var(--lo-s4);
}
.lo-comment__foot .comment-reply-link,
.lo-comment__edit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--lo-fs-sm);
	font-weight: 700;
	color: var(--lo-green-800);
	transition: color .22s var(--lo-ease);
}
.lo-comment__foot .comment-reply-link svg { transition: transform .3s var(--lo-ease-out); }
.lo-comment__foot .comment-reply-link:hover { color: var(--lo-gold-600); }
.lo-comment__foot .comment-reply-link:hover svg { transform: translateX(4px); }
.lo-comment__edit a { color: var(--lo-muted); }

.lo-comment--ping .lo-comment__box { background: var(--lo-paper); }

.lo-comments__closed { margin-top: var(--lo-s6); }

/* --- Comment form ------------------------------------------------------- */

.lo-crespond {
	margin-top: var(--lo-s8);
	padding-top: var(--lo-s7);
	border-top: 1px solid var(--lo-line);
}
.lo-comment .lo-crespond {
	margin-top: var(--lo-s5);
	padding: var(--lo-s5);
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-lg);
	background: var(--lo-paper);
}

.lo-cform__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lo-s3);
	margin-bottom: var(--lo-s5);
	font-size: var(--lo-fs-xl);
}
.lo-cform__title small { font-size: var(--lo-fs-sm); font-weight: 600; }
.lo-cform__title small a { color: var(--lo-ruby); font-weight: 700; }

.lo-cform__note {
	margin-bottom: var(--lo-s5);
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}

.lo-cform .lo-field { margin-bottom: var(--lo-s4); }
.lo-cform textarea.lo-input { min-height: 150px; resize: vertical; }

.lo-cform .lo-checkbox,
.lo-cform__consent {
	margin: var(--lo-s2) 0 var(--lo-s5);
	font-size: var(--lo-fs-sm);
	color: var(--lo-text-soft);
}

.lo-cform__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s4);
	margin-top: var(--lo-s5);
}
.lo-cform .logged-in-as,
.lo-cform .comment-notes {
	margin-bottom: var(--lo-s5);
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}
.lo-cform .logged-in-as a { font-weight: 700; }

/* WordPress puts the identity fields side by side once there is room. */
@media (min-width: 621px) {
	.lo-cform .comment-form-author,
	.lo-cform .comment-form-email,
	.lo-cform > .lo-field:nth-of-type(2),
	.lo-cform > .lo-field:nth-of-type(3) {
		display: inline-block;
		width: calc(50% - (var(--lo-s4) / 2));
		vertical-align: top;
	}
	.lo-cform > .lo-field:nth-of-type(2) { margin-right: var(--lo-s4); }
}


/* ==========================================================================
   15. Search results
   ========================================================================== */

.lo-shead {
	overflow: hidden;
	background:
		radial-gradient(110% 130% at 88% -20%, var(--lo-gold-100) 0%, rgba(250, 240, 216, 0) 56%),
		linear-gradient(180deg, var(--lo-paper) 0%, var(--lo-cream) 100%);
	border-bottom: 1px solid var(--lo-line-soft);
}
.lo-shead .lo-crumbs { margin-bottom: var(--lo-s6); }
.lo-shead__inner { max-width: 780px; }
.lo-shead__title {
	margin-bottom: var(--lo-s3);
	font-size: var(--lo-fs-3xl);
	line-height: 1.1;
}
.lo-shead__title .lo-accent { display: inline-block; }
.lo-shead__count {
	margin-bottom: var(--lo-s6);
	font-size: var(--lo-fs-md);
	color: var(--lo-text-soft);
}
.lo-shead__count strong { color: var(--lo-green-800); }
.lo-shead__form { max-width: 540px; }
.lo-shead__filter { margin-top: var(--lo-s6); margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

.lo-sresults { display: grid; gap: var(--lo-s5); }

.lo-sresult {
	position: relative;
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: var(--lo-s5);
	padding: var(--lo-s4);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-left: 3px solid var(--lo-green-200);
	border-radius: var(--lo-r-lg);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-sresult:hover {
	transform: translateY(-4px);
	box-shadow: var(--lo-shadow);
}
.lo-sresult--product { border-left-color: var(--lo-gold-500); }
.lo-sresult--page    { border-left-color: var(--lo-line); }

.lo-sresult__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
}
.lo-sresult__media img { width: 100%; height: 100%; object-fit: cover; }
.lo-sresult:hover .lo-sresult__media img,
.lo-sresult:focus-within .lo-sresult__media img { transform: scale(1.05); }
.lo-sresult--product .lo-sresult__media { background: var(--lo-sand); }
.lo-sresult--product .lo-sresult__media img { object-fit: contain; padding: var(--lo-s3); }

.lo-sresult__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--lo-s2) var(--lo-s3) var(--lo-s2) 0;
}

.lo-sresult__kind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-bottom: var(--lo-s3);
	padding: 4px 11px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-50);
	color: var(--lo-green-700);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.lo-sresult--product .lo-sresult__kind { background: var(--lo-gold-100); color: var(--lo-gold-700); }
.lo-sresult--page .lo-sresult__kind { background: var(--lo-sand); color: var(--lo-green-900); }

.lo-sresult__title {
	margin: 0 0 var(--lo-s2);
	font-size: var(--lo-fs-lg);
	line-height: 1.28;
}
.lo-sresult__title a { color: var(--lo-text); background-image: none; }
.lo-sresult__title a:hover { color: var(--lo-green-700); }
.lo-sresult__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.lo-sresult__excerpt {
	margin: 0 0 var(--lo-s4);
	font-size: var(--lo-fs-base);
	line-height: 1.66;
	color: var(--lo-text-soft);
}

.lo-sresult__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s3);
	margin-top: auto;
}
.lo-sresult__price {
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	font-weight: 600;
	color: var(--lo-green-900);
}
.lo-sresult__price del { color: var(--lo-muted); font-size: var(--lo-fs-base); margin-right: 6px; }
.lo-sresult__price ins { text-decoration: none; }

.lo-sresult__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lo-muted);
}
.lo-sresult__cta { position: relative; z-index: 3; margin-left: auto; }


/* ==========================================================================
   16. Empty state
   ========================================================================== */

.lo-noresult {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(30px, 4vw, 56px);
	text-align: center;
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-xl);
	box-shadow: var(--lo-shadow-sm);
}

.lo-noresult__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--lo-s5);
	border-radius: 50%;
	background: var(--lo-green-50);
	color: var(--lo-green-700);
}

.lo-noresult__title { margin-bottom: var(--lo-s3); font-size: var(--lo-fs-2xl); }
.lo-noresult__text {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--lo-s6);
	color: var(--lo-text-soft);
}

.lo-noresult__form { max-width: 440px; margin: 0 auto var(--lo-s7); }

.lo-noresult__ideas-label {
	display: block;
	margin-bottom: var(--lo-s3);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lo-muted);
}

.lo-noresult__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lo-s2);
	list-style: none;
	margin: 0 0 var(--lo-s7);
	padding: 0;
	text-align: left;
}
.lo-noresult__list li { margin: 0; }
.lo-noresult__list a {
	display: block;
	padding: 11px 16px;
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r);
	background: var(--lo-cream);
	transition: border-color .22s var(--lo-ease), background-color .22s var(--lo-ease), transform .22s var(--lo-ease-out);
}
.lo-noresult__list a:hover {
	background: var(--lo-green-50);
	border-color: var(--lo-green-200);
	transform: translateY(-2px);
}
.lo-noresult__list strong {
	display: block;
	font-size: var(--lo-fs-base);
	color: var(--lo-text);
}
.lo-noresult__list span {
	display: block;
	font-size: var(--lo-fs-xs);
	color: var(--lo-muted);
	line-height: 1.5;
}

.lo-noresult__cats { margin-bottom: var(--lo-s7); }
.lo-noresult__cats .lo-chips { justify-content: center; }

.lo-noresult__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lo-s3);
}


/* ==========================================================================
   17. Pagination helpers
   ========================================================================== */

.lo-pagenav { margin-top: var(--lo-s8); }
.lo-pagenav .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lo-s2);
}
.lo-pagenav .page-numbers.prev,
.lo-pagenav .page-numbers.next {
	gap: 8px;
	font-size: var(--lo-fs-sm);
	font-weight: 700;
}
.lo-comments .lo-pagenav { margin-top: var(--lo-s6); }


/* ==========================================================================
   18. Responsive
   ========================================================================== */

/* --- Sticky share rail only when there is genuinely room for it ---------- */
@media (min-width: 1200px) {
	.lo-article__grid {
		grid-template-columns: 72px minmax(0, 1fr) 72px;
		gap: var(--lo-s7);
		align-items: start;
	}

	.lo-share {
		order: 0;
		position: sticky;
		top: calc(var(--lo-header-h) + 28px);
		flex-direction: column;
		align-items: center;
		gap: var(--lo-s3);
		padding-top: 0;
		border-top: 0;
	}
	.lo-share__label {
		writing-mode: vertical-rl;
		letter-spacing: .3em;
		margin-bottom: var(--lo-s2);
	}
	.lo-share__btn::after {
		left: calc(100% + 10px);
		bottom: auto;
		top: 50%;
		transform: translate(-6px, -50%);
	}
	.lo-share__btn:hover::after,
	.lo-share__btn:focus-visible::after { transform: translate(0, -50%); }

	/* Explicit order on all three children — the rail must never win column 2.
	   The prose keeps `margin-inline:auto` so it stays optically centred with
	   the tag row and author card that follow it. */
	.lo-article__main { order: 1; }
	.lo-article__rail { order: 2; display: block; }
}

@media (max-width: 1200px) {
	.lo-blog__layout { grid-template-columns: minmax(0, 1fr) 312px; }
	.lo-feature__media { grid-column: 1 / 8; }
	.lo-feature__panel { grid-column: 7 / 13; }
}

@media (max-width: 1024px) {
	.lo-blog__layout { grid-template-columns: minmax(0, 1fr); }

	.lo-aside { margin-top: var(--lo-s8); }
	.lo-aside__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lo-s5);
		align-items: start;
	}
	.lo-aside__inner > .lo-widget { margin-bottom: 0; }

	.lo-feature {
		display: block;
		margin-bottom: var(--lo-s8);
	}
	.lo-feature__media { border-radius: var(--lo-r-lg); }
	.lo-feature__panel {
		width: calc(100% - var(--lo-s7));
		margin: calc(var(--lo-s7) * -1) auto 0;
	}

	.lo-pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.lo-ahero__title { max-width: 22ch; }
}

@media (max-width: 860px) {
	.lo-pgrid--2 { grid-template-columns: minmax(0, 1fr); }

	.lo-catbar {
		display: block;
		padding-block: var(--lo-s3) var(--lo-s4);
	}
	.lo-catbar__label { display: none; }
	.lo-catbar__scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: var(--lo-s2);
		margin-inline: calc(var(--lo-gutter) * -1);
		padding-inline: var(--lo-gutter);
	}
	.lo-catbar__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
	.lo-catbar__scroll > .lo-chip { flex: 0 0 auto; }

	.lo-jcta__inner { flex-direction: column; align-items: flex-start; }
	.lo-jcta__title { max-width: none; }

	.lo-adjacent__grid { grid-template-columns: minmax(0, 1fr); }
	.lo-adjacent__item--next { text-align: left; flex-direction: row-reverse; }
	.lo-adjacent__item--next .lo-adjacent__dir { justify-content: flex-start; flex-direction: row-reverse; }
	.lo-adjacent__item.is-empty { display: none; }

	.lo-sresult { grid-template-columns: 132px minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.lo-pgrid--3,
	.lo-pgrid--2 { grid-template-columns: minmax(0, 1fr); }

	.lo-aside__inner { grid-template-columns: minmax(0, 1fr); }

	.lo-feature__panel {
		width: 100%;
		margin-top: calc(var(--lo-s6) * -1);
		border-radius: var(--lo-r);
	}
	.lo-feature__media { border-radius: var(--lo-r); }
	.lo-feature__cta { width: 100%; }

	.lo-ahero {
		min-height: 0;
		padding-block: clamp(120px, 34vw, 200px) var(--lo-s7);
	}
	.lo-ahero__title { font-size: var(--lo-fs-3xl); max-width: none; }
	.lo-ahero__sub { font-size: var(--lo-fs-md); }
	.lo-ahero__leaf { display: none; }

	.lo-author {
		flex-direction: column;
		gap: var(--lo-s4);
	}

	.lo-sresult {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lo-s4);
	}
	.lo-sresult__media { aspect-ratio: 16 / 9; }
	.lo-sresult__body { padding: 0 var(--lo-s2) var(--lo-s2); }
	.lo-sresult__cta { margin-left: 0; }

	.lo-noresult__list { grid-template-columns: minmax(0, 1fr); }

	.lo-comments__list .children {
		margin-left: 0;
		padding-left: var(--lo-s4);
	}
	.lo-comment__box { padding: var(--lo-s4); gap: var(--lo-s3); }
	.lo-comment__head { flex-direction: column; align-items: flex-start; }

	.lo-comments-shell { padding: var(--lo-s5); border-radius: var(--lo-r-lg); }
}

@media (max-width: 430px) {
	.lo-postcard__body { padding: var(--lo-s5); }
	.lo-postcard__foot { flex-wrap: wrap; }

	.lo-jmast__title { font-size: var(--lo-fs-3xl); }
	.lo-jmast__lede { font-size: var(--lo-fs-md); }

	.lo-share { gap: var(--lo-s2); }
	.lo-share__btn { width: 40px; height: 40px; }

	.lo-avatar--lg { --lo-av-size: 60px; }

	.lo-noresult { padding: var(--lo-s5); }
	.lo-noresult__actions .lo-btn { width: 100%; }

	.lo-adjacent__media { flex-basis: 64px; width: 64px; height: 64px; }

	.lo-cform__actions .lo-btn { width: 100%; }
}