/*
 * OAX Ai-LB-E datasheet page.
 * Desktop geometry is measured 1:1 from the PDF raster (page width 1240px = 595pt);
 * every length is N * --u, where --u = 1px at >= 1166px viewport and scales down proportionally
 * to 761px. <= 760px switches to a stacked mobile layout.
 */
@font-face {
	font-family: "Noto Sans OAX";
	src: url("../fonts/noto-sans-latin-wght-wdth.woff2") format("woff2-variations"),
	     url("../fonts/noto-sans-latin-wght-wdth.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62.5% 100%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.oax {
	--u: min(1px, calc((100cqw - 32px) / 1134));
	--font: "Noto Sans OAX", Tahoma, Verdana, "Segoe UI", sans-serif;
	--ink: #000;
	--text: #5c5c5c;
	--body: #616161;
	--muted: #889190;
	--panel: #f7f7f7;
	--rule: #adadad;
	--tb-outer: #c6c6c6;
	--tb-line: #d9d9d9;
	--tb-group: #adadad;
	--icon: #707070;

	container-type: inline-size;
	display: block;
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--body);
	font-family: var(--font);
	font-weight: 400;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
}
.oax *, .oax *::before, .oax *::after { box-sizing: border-box; }
.oax :where(h1, h2, p, ul, ol, li, figure, table, hgroup) { margin: 0; padding: 0; }
.oax a { color: inherit; text-decoration: none; }
.oax a:focus-visible { outline: 2px solid #4aa9c0; outline-offset: 3px; }

.oax-sheet {
	width: calc(1134 * var(--u));
	margin: 0 auto;
	padding: calc(40 * var(--u)) 0 calc(110 * var(--u));
}

/* ---------- Page 1 ---------- */
.oax-head { padding-left: calc(76 * var(--u)); }
.oax-sub {
	font-size: calc(25 * var(--u));
	line-height: calc(30 * var(--u));
	font-stretch: 79.7%;
	font-weight: 380;
	letter-spacing: calc(.15 * var(--u));
	color: var(--text);
	padding-top: calc(65 * var(--u));
}
.oax-title {
	font-size: calc(104.6 * var(--u));
	line-height: calc(96 * var(--u));
	font-stretch: 99.4%;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ink);
	margin-top: calc(10 * var(--u));
	margin-left: 0;
}

.oax-hero {
	position: relative;
	margin-top: calc(45 * var(--u));
	line-height: 0;
}
.oax-hero img { display: block; width: 100%; height: auto; }
.oax-model {
	position: absolute;
	left: calc(773 * var(--u));
	top: calc(333 * var(--u));
	font-size: calc(23 * var(--u));
	line-height: calc(31 * var(--u));
	font-stretch: 88%;
	font-weight: 380;
	letter-spacing: calc(.3 * var(--u));
	color: #555;
}

.oax-panel {
	background: var(--panel);
	min-height: calc(779 * var(--u));
	padding: calc(45 * var(--u)) 0 calc(60 * var(--u));
}
.oax-feats {
	display: grid;
	grid-template-columns: calc(331 * var(--u)) calc(330 * var(--u)) 1fr;
	padding-left: calc(76 * var(--u));
	min-height: calc(554 * var(--u));
}
.oax-feat svg {
	display: block;
	width: calc(140 * var(--u));
	height: calc(140 * var(--u));
	color: var(--icon);
	stroke-width: 1.5;
}
.oax-feat h2 {
	margin-top: calc(44 * var(--u));
	font-size: calc(25.5 * var(--u));
	line-height: calc(30 * var(--u));
	font-stretch: 84%;
	font-weight: 380;
	letter-spacing: calc(.2 * var(--u));
	color: var(--text);
}
.oax-feat ul {
	list-style: none;
	margin-top: calc(27 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: calc(18.5 * var(--u));
	font-stretch: 84%;
	font-weight: 380;
	color: var(--body);
}
.oax-feat li {
	position: relative;
	padding-left: calc(19 * var(--u));
	margin-bottom: calc(9.5 * var(--u));
}
.oax-feat li::before {
	content: "";
	position: absolute;
	left: calc(3 * var(--u));
	top: calc(7 * var(--u));
	width: calc(5 * var(--u));
	height: calc(5 * var(--u));
	border-radius: 50%;
	background: #666;
}
.oax-feat--1 ul { width: calc(237 * var(--u)); text-align: justify; font-stretch: 92%; }
.oax .oax-nw { white-space: nowrap; }
.oax-feat--2 ul { width: calc(232 * var(--u)); }
.oax-feat--3 ul { width: calc(282 * var(--u)); line-height: calc(21 * var(--u)); font-size: calc(16.8 * var(--u)); font-stretch: 87%; }
.oax-feat--3 li::before { top: calc(8 * var(--u)); }

.oax-brandbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin: 0 calc(33 * var(--u));
	border-top: max(1px, calc(2 * var(--u))) solid var(--rule);
	padding-top: calc(53 * var(--u));
	color: #5f5f5f;
}
.oax-logo { justify-self: start; display: block; line-height: 0; }
.oax-logo svg { width: calc(143 * var(--u)); height: calc(50 * var(--u)); color: #5f5f5f; display: block; }
.oax-url {
	font-size: calc(22 * var(--u));
	line-height: 1;
	font-stretch: 92%;
	font-weight: 380;
	letter-spacing: calc(.4 * var(--u));
}

/* ---------- Page 2: datasheet ---------- */
.oax-p2 { margin-top: calc(118 * var(--u)); padding: 0 calc(57 * var(--u)) 0 calc(49 * var(--u)); }
.oax-ds-title {
	font-size: calc(24 * var(--u));
	line-height: calc(28 * var(--u));
	font-stretch: 91%;
	font-weight: 400;
	letter-spacing: calc(.3 * var(--u));
	color: #555;
	padding-left: calc(6 * var(--u));
	margin-bottom: calc(3 * var(--u));
}
.oax-spec {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border: 1px solid var(--tb-outer);
	font-stretch: 84%;
	font-weight: 340;
	color: var(--body);
}
.oax-spec th, .oax-spec td {
	height: calc(37.6 * var(--u));
	padding: 0 calc(6 * var(--u)) calc(3 * var(--u));
	border-top: 1px solid var(--tb-line);
	border-left: 1px solid var(--tb-line);
	vertical-align: middle;
	font-size: calc(16 * var(--u));
	line-height: calc(19 * var(--u));
}
.oax-spec th[scope="row"] { text-align: left; font-weight: inherit; width: calc(369 * var(--u)); }
.oax-spec td { text-align: center; font-size: calc(15.6 * var(--u)); }
.oax-spec .oax-grp-2 tr:first-child > * { border-top-color: var(--tb-group); }
.oax-spec .oax-grp {
	width: calc(43 * var(--u));
	padding: 0 calc(4 * var(--u)) calc(3 * var(--u)) 0;
	vertical-align: bottom;
	text-align: center;
	border-left: 0;
	font-weight: 400;
}
.oax-grp span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: calc(22 * var(--u));
	line-height: 1;
	font-stretch: 90%;
	color: #555;
	white-space: nowrap;
}
.oax-roman { font-family: "Times New Roman", Times, serif; font-size: 1.05em; }
.oax-table-wrap { max-width: 100%; }
.oax-notes {
	list-style: none;
	counter-reset: n;
	margin: calc(3 * var(--u)) 0 0 calc(44 * var(--u));
	font-size: calc(15.5 * var(--u));
	line-height: calc(18 * var(--u));
	font-stretch: 84%;
	font-weight: 380;
	color: var(--muted);
	max-width: calc(900 * var(--u));
}
.oax-notes li { counter-increment: n; position: relative; padding-left: calc(15 * var(--u)); }
.oax-notes li::before { content: counter(n) "."; position: absolute; left: 0; }

/* ---------- Page 3: diagram ---------- */
.oax-p3 { margin-top: calc(150 * var(--u)); }
.oax-dg-title {
	padding-left: calc(60 * var(--u));
	font-size: calc(21 * var(--u));
	line-height: calc(26 * var(--u));
	font-weight: 800;
	font-stretch: 100%;
	letter-spacing: calc(-.4 * var(--u));
	color: #000;
}
.oax-diagram { margin: calc(32 * var(--u)) 0 0 calc(132 * var(--u)); width: calc(941 * var(--u)); line-height: 0; }
.oax-diagram svg { display: block; width: 100%; height: auto; }
.oax-dg-full { display: none; }

/* ---------- Mobile (stacked) ---------- */
@media (max-width: 760px) {
	.oax { --u: 1px; }
	.oax-sheet { width: 100%; padding: 28px 0 64px; }
	.oax-head { padding: 0 16px; }
	.oax-sub { font-size: 15px; line-height: 20px; padding-top: 0; letter-spacing: 0; }
	.oax-title { font-size: clamp(40px, 13vw, 56px); line-height: 1.1; margin: 4px 0 0 -1px; letter-spacing: -.3px; }
	.oax-hero { margin-top: 20px; }
	.oax-model { left: 68.2%; top: 57.6%; font-size: clamp(10px, 2.9vw, 15px); line-height: 1.35; letter-spacing: 0; }
	.oax-panel { min-height: 0; padding: 32px 16px 36px; }
	.oax-feats { display: block; padding: 0; min-height: 0; }
	.oax-feat + .oax-feat { margin-top: 36px; }
	.oax-feat svg { width: 92px; height: 92px; }
	.oax-feat h2 { margin-top: 14px; font-size: 22px; line-height: 28px; }
	.oax-feat ul, .oax-feat--1 ul, .oax-feat--2 ul, .oax-feat--3 ul { width: auto; max-width: 34em; margin-top: 12px; font-size: 15px; line-height: 21px; text-align: left; }
	.oax-feat li::before, .oax-feat--3 li::before { top: 8px; }
	.oax-brandbar { grid-template-columns: 1fr; justify-items: center; gap: 14px; margin: 40px 0 0; padding-top: 32px; text-align: center; }
	.oax-logo { justify-self: center; }
	.oax-brandbar-end { display: none; }
	.oax-logo svg { width: 120px; height: 35px; }
	.oax-url { font-size: 18px; }
	.oax-p2 { margin-top: 56px; padding: 0 16px; }
	.oax-ds-title { font-size: 21px; line-height: 26px; padding-left: 0; margin-bottom: 10px; }
	.oax-spec th, .oax-spec td { height: 38px; padding: 7px 6px; font-size: 13.5px; line-height: 17px; }
	.oax-spec td { font-size: 13.5px; }
	.oax-spec th[scope="row"] { width: 47%; }
	.oax-spec .oax-grp { width: 30px; padding: 0 0 8px; }
	.oax-grp span { font-size: 15px; }
	.oax-notes { margin: 8px 0 0; font-size: 13px; line-height: 17px; max-width: none; }
	.oax-notes li { padding-left: 14px; }
	.oax-p3 { margin-top: 56px; padding: 0 16px; }
	.oax-dg-title { padding-left: 0; font-size: 17px; line-height: 22px; letter-spacing: -.2px; }
	.oax-diagram { margin: 16px 0 0; width: 100%; }
	.oax-dg-full { display: inline-block; margin-top: 12px; font-size: 14px; line-height: 20px; color: #3d8fa3; text-decoration: underline; }
}

@media print {
	.oax-sheet { padding-top: 0; }
	.oax-p2, .oax-p3 { break-before: page; }
}

/* ---------- WordPress (Twenty Twenty-Five) integration ---------- */
body.oax-front { margin: 0; background: #fff; }
body.oax-front .wp-site-blocks { padding: 0; }
body.oax-front .wp-site-blocks > .oax { margin-block: 0; max-width: none; }