/* ==========================================================================
   Otherwise — base
   Resets, typography defaults, and the neutralising layer that stops the
   parent theme's light-mode defaults from bleeding through.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--ow-bg);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body.ow {
	margin: 0;
	background: var(--ow-bg);
	color: var(--ow-text);
	font-family: var(--ow-font-body);
	font-size: var(--ow-fs-body);
	line-height: var(--ow-lh-body);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* A very light grain keeps large flat blacks from banding on cheap panels.
   It is a 120-byte inline SVG, not an image request. */
body.ow::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ow-page {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ow-main {
	flex: 1 0 auto;
}

/* ---- Typography ---------------------------------------------------------- */

body.ow h1,
body.ow h2,
body.ow h3,
body.ow h4,
body.ow h5,
body.ow h6 {
	margin: 0 0 var(--ow-space-4);
	font-family: var(--ow-font-display);
	font-weight: 400;
	line-height: var(--ow-lh-heading);
	letter-spacing: var(--ow-track-display);
	color: var(--ow-text);
	text-wrap: balance;
}

body.ow h1 { font-size: var(--ow-fs-h1); }
body.ow h2 { font-size: var(--ow-fs-h2); }
body.ow h3 { font-size: var(--ow-fs-h3); }
body.ow h4 { font-size: var(--ow-fs-h4); }

body.ow p {
	margin: 0 0 var(--ow-space-4);
	color: var(--ow-text);
}

body.ow a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ow-dur-fast) var(--ow-ease);
}

body.ow strong { font-weight: 700; }

body.ow img,
body.ow svg,
body.ow video {
	max-width: 100%;
	height: auto;
	display: block;
}

body.ow ul,
body.ow ol {
	margin: 0 0 var(--ow-space-4);
	padding-left: 1.15rem;
}

body.ow hr {
	border: 0;
	border-top: var(--ow-hairline);
	margin: var(--ow-space-7) 0;
}

/* ---- Focus -------------------------------------------------------------- */

body.ow :focus-visible {
	outline: 2px solid var(--ow-accent);
	outline-offset: 3px;
	border-radius: var(--ow-radius-sm);
}

body.ow :focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The skip link comes from the parent theme (repointed at #ow-main in
   inc/blocksy-compat.php). It carries .screen-reader-text, so it must undo the
   clipping above on focus — styled here rather than relying on the parent
   theme's stylesheet. */
body.ow a.skip-link:focus {
	position: fixed !important;
	top: var(--ow-space-4);
	left: var(--ow-space-4);
	z-index: 9999;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--ow-space-3) var(--ow-space-5);
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: var(--ow-radius);
	background: var(--ow-accent);
	color: var(--ow-on-accent);
	font-family: var(--ow-font-body);
	font-size: var(--ow-fs-sm);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Layout primitives --------------------------------------------------- */

.ow-container {
	width: 100%;
	max-width: var(--ow-container);
	margin-inline: auto;
	padding-inline: var(--ow-gutter);
}

.ow-container--narrow { max-width: var(--ow-container-narrow); }
.ow-container--text { max-width: var(--ow-container-text); }

.ow-section {
	padding-block: var(--ow-section);
}

.ow-section--tight {
	padding-block: var(--ow-section-tight);
}

.ow-section--surface {
	background: var(--ow-surface);
}

.ow-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---- Neutralise parent-theme chrome -------------------------------------- */

body.ow .ct-header,
body.ow .ct-footer,
body.ow #search-modal,
body.ow .ct-back-to-top,
body.ow .ct-drawer-canvas,
body.ow .ct-page-title-wrap {
	display: none !important;
}

body.ow .ct-container,
body.ow .ct-container-full,
body.ow .entry-content,
body.ow .site-main,
body.ow article {
	background: transparent;
}