/* ==========================================================================
   envitron 2026 - prose.css
   Sauberes Default-Styling fuer Page-Content (was aus the_content() kommt)
   - Reset fuer den Render-Output unserer Inhaltsseiten.

   Konvention:
   - `.prose` ist der Innen-Container im einheitlichen `.container`-Wrapper.
   - Lange Lesetext-Spalte (max-width 75ch) bleibt gut lesbar.
   - Wenn ein Block "out-of-flow" full-width braucht (Galerien etc.):
     vom Editor-Markup mit `wp-block-*--wide` arbeiten - das brechen wir per
     Negativ-Margin durch (Standard-Gutenberg-Verhalten).

   Hard-Cap: 1000 Zeilen. Aktuell weit drunter.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Container
   .prose ist VOLL-BREIT (container hat schon max-width = wide-width 1290px).
   Lesetext-Children (p, ul, ol, h2-h6) werden per Default auf 75ch begrenzt,
   Wide-Blocks (wp-block-columns, alignwide, figure aligncenter) sind voll.
*/
.prose {
	color: var(--ink-800);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}
.prose > p,
.prose > ul,
.prose > ol,
.prose > h1,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6,
.prose > blockquote,
.prose > pre,
.prose > table {
	max-width: 75ch;
	margin-inline: auto;
}
.prose > .wp-block-columns,
.prose > .wp-block-buttons,
.prose > figure,
.prose > .alignwide,
.prose > .alignfull,
.prose > img {
	max-width: 100%;
	margin-inline: auto;
}

/* H1 im post_content (z.B. DE-Schneelast hat H1 statt H2): visuell als H2
 * darstellen, da der Page-Hero bereits einen H1 traegt. Semantisch bleibt
 * der DOM-Knoten H1, aber Lighthouse-Score zaehlt sichtbar; mittelfristig
 * werden diese H1s per Migration zu H2. */
.prose h1 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	color: var(--ink-900);
	margin-top: 0;
	margin-bottom: var(--space-4);
	letter-spacing: -0.005em;
	line-height: 1.2;
}

/* Lead-Paragraph mit Gutenberg-Klasse .has-large-font-size.
 *
 * WICHTIG: Gutenberg/Block-Editor injiziert global eine Regel mit
 * !important:
 *   .has-large-font-size { font-size: var(--wp--preset--font-size--large)
 *                          !important; }
 * Ohne !important hier verliert unser Theme-Selektor und der Absatz
 * wird ~32px gross gerendert (Bug-Report 19.05.: EN-Schneelast-Lead
 * "ist sogar groesser geworden"). Wir setzen daher die Schriftgroesse
 * mit !important - das ist hier ein zulaessiger Override gegen einen
 * Vendor-!important und keine Stil-Schludrigkeit. */
.prose > p.has-large-font-size,
.prose > .has-large-font-size {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem) !important;
	font-weight: 500;
	color: var(--ink-900);
	line-height: 1.6;
	border-left: 4px solid var(--brand-500);
	padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.5rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 70ch;
	background: linear-gradient(90deg, rgba(24, 169, 87, 0.06), rgba(24, 169, 87, 0));
	border-radius: 0 var(--radius-md, 0.4rem) var(--radius-md, 0.4rem) 0;
}

/* Gutenberg-Columns als richtige Cards rendern (statt nur Flex-Spalten).
 * Wir greifen explizit auf 3 Spalten ab 880px - sodass bei der typischen
 * 3-Card-Verteilung (Schneelast-Page) alle Cards EXAKT gleich breit
 * sind und das erste/letzte Element nicht aus der Reihe taenzelt. */
.prose .wp-block-columns {
	display: grid;
	gap: clamp(0.875rem, 2vw, 1.25rem);
	grid-template-columns: 1fr;
	margin-block: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 560px) {
	.prose .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 880px) {
	.prose .wp-block-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}
.prose .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--ink-50);
	border: 1px solid var(--ink-200);
	border-radius: var(--radius-md);
	box-shadow:
		0 1px 2px rgba(15, 23, 32, 0.04),
		0 8px 18px -14px rgba(15, 23, 32, 0.15);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.prose .wp-block-column:hover {
	border-color: var(--brand-200);
	transform: translateY(-2px);
	box-shadow:
		0 1px 2px rgba(15, 23, 32, 0.04),
		0 16px 28px -18px rgba(40, 167, 69, 0.30);
}
.prose .wp-block-column > h2,
.prose .wp-block-column > h3 {
	margin-top: 0;
	margin-bottom: 0.25rem;
}
.prose .wp-block-column > h2 {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
	padding-bottom: 0;
}
.prose .wp-block-column > h2::after {
	display: none;
}
.prose .wp-block-column > h3 {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
}
.prose .wp-block-column > p {
	font-size: 0.95rem;
	color: var(--ink-700);
	margin: 0;
	max-width: none;
}
.prose .wp-block-column > p + p {
	margin-top: 0.65rem;
}
.prose .wp-block-column .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.prose .wp-block-column,
	.prose .wp-block-column:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------- 2. Headings */
.prose h2,
.prose h3,
.prose h4 {
	color: var(--ink-900);
	letter-spacing: -0.005em;
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
}
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose h2 {
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
	position: relative;
	padding-bottom: var(--space-3);
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: manual;
}
.prose h2::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--brand-500);
	margin-top: var(--space-3);
	border-radius: 2px;
}

.prose h3 {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	font-weight: 600;
}

.prose h4 {
	font-size: 1.1rem;
	font-weight: 600;
}

/* ------------------------------------------------------------- 3. Text-Blocks */
.prose p {
	margin: 0 0 var(--space-4);
}

.prose strong { color: var(--ink-900); font-weight: 600; }
.prose em { font-style: italic; }

.prose a {
	color: var(--brand-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}
.prose a:hover { color: var(--brand-800); text-decoration-thickness: 2px; }

/* ------------------------------------------------------------- 4. Listen */
.prose ul,
.prose ol {
	margin: 0 0 var(--space-5);
	padding-left: 0;
	list-style: none;
}
.prose ul li,
.prose ol li {
	position: relative;
	padding-left: 1.85rem;
	margin: 0 0 0.65rem;
	line-height: var(--lh-relaxed);
}
.prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--brand-500);
	box-shadow: 0 0 0 4px var(--brand-100);
}
.prose ol {
	counter-reset: prose-counter;
}
.prose ol li {
	counter-increment: prose-counter;
}
.prose ol li::before {
	content: counter(prose-counter);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-800);
	font-weight: 700;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Nested Lists */
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
	margin-top: 0.6rem;
	margin-bottom: 0.6rem;
	margin-left: 0.5rem;
}
.prose ul ul li::before { background: var(--ink-500); box-shadow: none; }

/* ------------------------------------------------------------- 5. Blockquote */
.prose blockquote {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--brand-500);
	background: var(--brand-50);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--ink-800);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- 6. Code / inline */
.prose code {
	background: var(--ink-100);
	padding: 0.1rem 0.4rem;
	border-radius: var(--radius-sm);
	font-size: 0.92em;
	color: var(--ink-900);
}
.prose pre {
	background: var(--ink-900);
	color: var(--ink-100);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: 0 0 var(--space-5);
}
.prose pre code { background: transparent; color: inherit; padding: 0; }

/* ------------------------------------------------------------- 7. Tables */
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-5);
	font-size: 0.95em;
}
.prose th,
.prose td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--ink-300);
	text-align: left;
	vertical-align: top;
}
.prose th {
	font-weight: 600;
	color: var(--ink-900);
	background: var(--ink-50);
}

/* ------------------------------------------------------------- 8. Media */
.prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: var(--space-5) auto;
	border-radius: var(--radius-md);
	background: var(--ink-50);
}
.prose figure {
	margin: clamp(2rem, 4vw, 2.75rem) auto;
	max-width: 100%;
}
.prose figure img { margin: 0 auto; }
.prose figcaption {
	margin-top: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--ink-600);
	text-align: center;
	font-style: italic;
}

/* Schneelastzonen-Karte: prominente Darstellung als Landscape-Figure.
 * Wird auf Snow-Load / Schneelast prose-Pages eingebunden. */
.prose .snowzone-map {
	max-width: 760px;
	margin-inline: auto;
}
.prose .snowzone-map img {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border-radius: var(--radius-md);
	background: var(--white);
	box-shadow:
		0 1px 2px rgba(15, 23, 32, 0.05),
		0 16px 36px -18px rgba(15, 23, 32, 0.30);
}

/* Gutenberg-Button-Output (.wp-block-buttons / .wp-block-button) auf
 * unsere Button-Optik mappen — out-of-the-box ist's ein blasses Default. */
.prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: clamp(1.5rem, 3vw, 2rem) 0;
	max-width: 75ch;
}
.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	background: var(--brand-500);
	color: var(--white);
	border: 1px solid var(--brand-500);
	line-height: 1.2;
}
.prose .wp-block-button__link:hover,
.prose .wp-block-button__link:focus-visible {
	background: var(--brand-700);
	border-color: var(--brand-700);
	color: var(--white);
	text-decoration: none;
	transform: translateY(-1px);
}
.prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand-700);
	border-color: var(--brand-500);
}
.prose .wp-block-button.is-style-outline .wp-block-button__link:hover,
.prose .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--brand-500);
	color: var(--white);
	border-color: var(--brand-500);
}
/* Direkter <a> mit <img> drin (Lightbox-Pattern) */
.prose a:has(> img) {
	display: block;
	text-decoration: none;
	border: 0;
}
.prose a > img { transition: opacity var(--transition-fast); }
.prose a:hover > img { opacity: 0.92; }

/* ------------------------------------------------------------- 9. HR */
.prose hr {
	border: 0;
	height: 1px;
	background: var(--ink-300);
	margin: var(--space-6) 0;
}

/* Klassische WordPress-Floats: in Prose neutralisieren (sonst zerlegt es
   Mehrspalter mit alignleft/right). */
.prose [class*="alignleft"],
.prose [class*="alignright"],
.prose .alignleft,
.prose .alignright {
	float: none !important;
	margin-inline: auto !important;
	display: block;
}

/* Slide-Anything- oder andere Shortcode-Klartext-Reste ausblenden. */
.prose p:empty,
.page-body p:empty { display: none; }

/* ------------------------------------------------------------- 11. Page-Hero (universal) */
.page-hero {
	position: relative;
	min-height: clamp(220px, 32vh, 360px);
	display: grid;
	place-items: end start;
	overflow: hidden;
	background: var(--ink-900);
	isolation: isolate;
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.55;
}
.page-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 49, 66, 0.35) 0%, rgba(42, 49, 66, 0.7) 100%);
	z-index: 1;
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(2rem, 5vw, 4rem);
	color: var(--white);
	width: 100%;
}
.page-hero__eyebrow {
	color: var(--brand-300);
	margin: 0 0 var(--space-2);
}
.page-hero__title {
	color: var(--white);
	max-width: 32ch;
	margin: 0 0 var(--space-3);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-wrap: balance;
}
.page-hero__lead {
	color: var(--ink-100);
	font-size: var(--fs-lg);
	max-width: 60ch;
	margin: 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-wrap: pretty;
}

/* Mobile (<=640px): kleinerer Lead, mehr Luft, sicheres Umbrechen. */
@media (max-width: 640px) {
	.page-hero__lead {
		font-size: 0.95rem;
		line-height: 1.5;
		max-width: 100%;
	}
	.page-hero__title {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------- 12. Body-Wrapper */
.page-body {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--white);
}

/* ------------------------------------------------------------- 13. Prose-Lightbox
 * Native <dialog>-basierte Bild-Lightbox fuer Content-Bilder, die per
 * <a href="bild.png"><img src="bild.png"></a> verlinkt sind. JS:
 * assets/js/prose-lightbox.js. Schliessen via X-Button, Escape oder
 * Klick auf Backdrop.
 */
body.has-lightbox-open {
	overflow: hidden;
}

.prose-lightbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.prose-lightbox::backdrop {
	background: rgba(8, 24, 33, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.prose-lightbox:not([open]) {
	display: none;
}

.prose-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
	padding: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
	overflow: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pinch-zoom;
}
.prose-lightbox__img {
	display: block;
	max-width: min(100%, 1600px);
	max-height: calc(100dvh - 6rem);
	width: auto;
	height: auto;
	margin: 0 auto;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	background: var(--white, #fff);
	border-radius: 8px;
	cursor: zoom-in;
	transition: max-width 0.2s ease, max-height 0.2s ease;
	touch-action: pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
}

/* Zoom-State: Figure wird scrollbar, Bild bekommt native Pixel-Groesse.
 * So kann der Nutzer mit Maus, Trackpad oder Touch nativ pannen/scrollen.
 * Maximaler Faktor ist 1.6 (capped per width:160%) damit Mobile-Devices
 * mit kleinen Originalen nicht ueber den Bildschirm hinaus laufen. */
.prose-lightbox.is-zoomed .prose-lightbox__figure {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
	cursor: grab;
	touch-action: pan-x pan-y pinch-zoom;
}
.prose-lightbox.is-zoomed .prose-lightbox__img {
	cursor: zoom-out;
	max-width: 160%;
	max-height: 160%;
	width: 160%;
	height: auto;
	margin: 0;
	flex-shrink: 0;
}
.prose-lightbox__caption {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	text-align: center;
	max-width: 80ch;
	margin: 0 auto;
}
.prose-lightbox__caption[hidden] {
	display: none;
}

.prose-lightbox__close {
	position: fixed;
	top: clamp(0.75rem, 2vw, 1.25rem);
	right: clamp(0.75rem, 2vw, 1.25rem);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	color: var(--ink, #08213b);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, background 0.15s ease;
	z-index: 2;
}
.prose-lightbox__close:hover,
.prose-lightbox__close:focus-visible {
	background: var(--white, #fff);
	transform: scale(1.06);
}
.prose-lightbox__close:focus-visible {
	outline: 3px solid var(--brand-500, #2aa84a);
	outline-offset: 3px;
}

/* Hinweis fuer Content-Bilder im prose, die durch unsere Lightbox aktiviert
 * werden - Cursor + Hover-Effekt fuer "ist klickbar" */
.prose a > img,
.prose-content a > img,
.entry-content a > img {
	cursor: zoom-in;
	transition: opacity 0.18s ease;
}
.prose a:hover > img,
.prose-content a:hover > img,
.entry-content a:hover > img {
	opacity: 0.92;
}

/* ------------------------------------------------------------- 14. Legal-Prose
 * Eigene Variante fuer Datenschutz / Impressum / Privacy / Imprint:
 *   - Ruhige Long-Read-Spalte (max 72ch, leicht groessere Zeilenhoehe)
 *   - Klare typografische Heading-Stack (H2 als Kapitel-Anker mit subtiler
 *     Linie, H3 als Sub-Kapitel)
 *   - Listen mit ordentlichem Block-Abstand
 *   - Tabellen mit weichem Card-Look (gerade bei IP/Cookie-Tabellen wichtig)
 *   - Heller Hintergrund + ein subtiler Vertical-Rhythm
 */
.page-body--legal {
	background: var(--section-bg, #f7f8fa);
	padding-block: clamp(var(--space-6, 2rem), 6vw, var(--space-9, 4.5rem));
}
.prose--legal {
	max-width: 78ch;
	margin-inline: auto;
	background: var(--white, #fff);
	padding: clamp(var(--space-5, 1.5rem), 4vw, var(--space-7, 3rem));
	border-radius: var(--radius-lg, 14px);
	box-shadow: 0 1px 0 rgba(15, 23, 32, 0.04), 0 10px 30px -18px rgba(15, 23, 32, 0.15);
	color: var(--ink-800, #2b3346);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
	line-height: 1.65;
}
.prose--legal > * {
	max-width: none;
}
.prose--legal h2 {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
	color: var(--ink-900, #2a3142);
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	padding-bottom: 0.45em;
	border-bottom: 1px solid var(--ink-200, #d8dde6);
	letter-spacing: -0.005em;
}
.prose--legal h2:first-child {
	margin-top: 0;
}
.prose--legal h3 {
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.25rem);
	color: var(--ink-900, #2a3142);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}
.prose--legal h4 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-900, #2a3142);
	margin-top: 1.4em;
	margin-bottom: 0.4em;
	letter-spacing: 0.005em;
}
.prose--legal p {
	margin-block: 0 1em;
}
.prose--legal ul,
.prose--legal ol {
	margin-block: 0.5em 1.2em;
	padding-inline-start: 1.4em;
}
.prose--legal li {
	margin-block: 0.3em;
}
.prose--legal li::marker {
	color: var(--brand-500, #2aa84a);
}
.prose--legal a {
	color: var(--brand-700, #1b7e36);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--transition-fast), text-decoration-thickness var(--transition-fast);
}
.prose--legal a:hover,
.prose--legal a:focus-visible {
	color: var(--ink-900, #2a3142);
	text-decoration-thickness: 2px;
}
.prose--legal strong { color: var(--ink-900, #2a3142); }
.prose--legal table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.2em 1.6em;
	font-size: 0.95em;
	background: var(--white, #fff);
	border: 1px solid var(--ink-200, #d8dde6);
	border-radius: var(--radius-md, 10px);
	overflow: hidden;
}
.prose--legal th,
.prose--legal td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--ink-200, #d8dde6);
	vertical-align: top;
}
.prose--legal th {
	background: var(--ink-50, #f2f4f7);
	font-weight: 600;
	color: var(--ink-900, #2a3142);
}
.prose--legal tr:last-child td {
	border-bottom: 0;
}
.prose--legal blockquote {
	margin: 1.4em 0;
	padding: 0.8em 1em;
	border-left: 4px solid var(--brand-500, #2aa84a);
	background: var(--brand-50, #e9f6ed);
	border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
	color: var(--ink-800, #2b3346);
}
.prose--legal hr {
	border: 0;
	height: 1px;
	background: var(--ink-200, #d8dde6);
	margin-block: 2em;
}
.prose--legal address {
	font-style: normal;
	padding: 0.8em 1em;
	background: var(--ink-50, #f2f4f7);
	border-radius: var(--radius-md, 10px);
	margin-block: 1em 1.4em;
}

@media (max-width: 640px) {
	.prose--legal {
		padding: var(--space-5, 1.25rem);
		border-radius: var(--radius-md, 10px);
	}
}