/**
 * The handful of rules a copied page needs and live never did.
 *
 * A mirrored page loads fonts.css, live.css and this file, and nothing else —
 * the theme's own style.css is deliberately not enqueued there, because it was
 * written for theme-rendered pages and redefines class names the builder also
 * uses. So anything a mirrored page needs has to be written down here. It is
 * not a place for design opinions: every rule below exists because copying the
 * markup broke something the live runtime used to handle.
 */

/* WordPress's own skip link, hidden until a keyboard reaches it.

   Normally core's stylesheet does this, but the mirror loads live.css and
   nothing else, so nothing defines .screen-reader-text and the link draws as
   ordinary text above the header — 18px that pushes every page down by that
   much. On the MYS build every block still matched live's to the pixel while
   all 137 pages were 36px too tall, and a sweep that only looked at blocks
   called every one of them exact.

   Clipped rather than display:none, so a screen reader can still reach it. */
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Give a paragraph that had to stop being a <p> its paragraph styling back.
 *
 * Live builds some blocks with DOM calls, so a <p> there can legally hold more
 * <p> elements, a <ul> and an <h2>. HTML cannot write that down — a parser
 * closes the outer <p> at the first inner one — so duplicate_from_live.py turns
 * it into a <div> and marks it data-bw-unnested.
 *
 * That costs it every rule live.css keys on the element name, which is where
 * body copy gets its typeface. Without this the text falls back to the page
 * default, the browser substitutes a wider face, and headings inside the block
 * wrap onto an extra line.
 *
 * The rules below restate live's, unchanged, against the marker attribute
 * instead of the tag. They read the same custom properties, so whatever the
 * block sets for its body text still decides what these look like.
 */
[data-bw-unnested] {
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-style: var(--body-font-style);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--body-color);
	text-decoration: var(--body-text-decoration);
	text-transform: var(--body-text-transform);
	letter-spacing: var(--body-letter-spacing);
}

@media screen and (width <= 920px) {

	[data-bw-unnested] {
		font-family: var(--body-m-font-family, var(--body-font-family));
		font-size: var(--body-m-font-size, var(--body-font-size));
		font-style: var(--body-m-font-style, var(--body-font-style));
		font-weight: var(--body-m-font-weight, var(--body-font-weight));
		line-height: var(--body-m-line-height, var(--body-line-height));
		color: var(--body-m-color, var(--body-color));
		text-decoration: var(--body-m-text-decoration, var(--body-text-decoration));
		text-transform: var(--body-m-text-transform, var(--body-text-transform));
		letter-spacing: var(--body-m-letter-spacing, var(--body-letter-spacing));
	}
}

/* Let the page shrink to the screen instead of breaking words to fit it.
   =====================================================================

   The builder lays every page out on a fixed pixel grid, and BioWave's numbers
   are the same ones Made Ya Skinny's are, read out of this site's own capture
   rather than assumed: the desktop grid is `--v3f3138e2:1224px` on <main>, the
   mobile grid is `--c27f45b8:360px`, and live.css switches between them at
   `@media screen and (max-width:920px)`, which appears 127 times in it.

   When the screen is narrower than the grid in force, the builder scales the
   grid down but leaves the type at whatever size it was. The boxes shrink and
   the words in them do not, and past a certain width that stops being cramped
   and starts being broken: the cell is narrower than a single long word, so
   overflow-wrap splits it — "Neuropath" on one line and "y" on the next, no
   hyphen, nothing to tell the reader it is one word.

   Live does exactly this at exactly these widths. It is not something the
   duplicate introduced, and it is what DJ meant by cutting words up.

   The fix is to scale the whole page by the same factor the builder is already
   scaling its grid by, so the text comes down with the boxes. zoom is the one
   property that does that to a layout and its text together, and unlike a
   transform it still contributes the right height to the document, so nothing
   below the fold moves and nothing scrolls sideways.

   Two things that cost time on the MYS build and are written down so they do
   not cost it again:

   zoom needs a dimensionless number, so the divisor has to carry the unit.
   calc((100vw - 16px) / 1224) is not 1224px-worth of division — it computes to
   1 and does nothing at all, silently.

   The 16px is the scrollbar. A desktop browser reserves a gutter that 100vw
   does not know about, so dividing by the raw viewport width overshoots and
   hands back the sideways scroll this is meant to remove. Where the scrollbar
   is an overlay and takes no room — every phone and tablet — the page ends up
   16 device pixels narrower than it could be, which is invisible and is the
   safe direction to be wrong in.

   Three bands, because there are two grids and a gap between them. From 921px
   to 1223px the desktop grid is being squeezed; below 375px the mobile grid
   is. */
@media screen and (min-width: 921px) and (max-width: 1223px) {
	main.page {
		zoom: calc((100vw - 16px) / 1224px);
	}
}

@media screen and (max-width: 374px) {
	main.page {
		zoom: calc((100vw - 16px) / 360px);
	}
}

/* And the tablet gap, 601px to 920px, which is the opposite problem.

   Nothing is squeezed here — the mobile grid fits at its full 360px with room
   to spare, because `--c27f45b8:360px` is written into the markup of every
   block on the site and 360px is what it stays. So an iPad held upright, 768px
   across, gets a 360px ribbon of website down the middle with 204px of white
   either side of it. It is not broken and no word is split; it is simply half a
   screen of nothing, which is the other half of "adjusting to the screen".

   601px is the builder's own tablet breakpoint, not a number picked here, and
   starting there is what keeps phones out of this. A 390px phone is inside the
   360px design's natural range and must stay at 1, or every page grows 4% and
   stops matching live at the width most visitors actually arrive on.

   Capped at 1.5 because filling the width exactly is the wrong goal. The
   uncapped factor is 2.09 at 768px and 2.51 at 919px, and a 16px body set at
   2.5 is a large-print edition, not a website. At 1.5 the column comes out
   540px — a comfortable measure, 70% of an iPad — and the type lands where a
   tablet reader wants it. The min() keeps the arithmetic honest below 601px
   should the band ever move down. */
@media screen and (min-width: 601px) and (max-width: 920px) {
	main.page {
		zoom: min(1.5, calc((100vw - 16px) / 360px));
	}
}
/* sitev3 zoom rotator (DJ-approved look, MYS 2026-09-04) */
.bw-home-rotator { display:grid; place-items:center; width:100%; min-height:2.04em; color:#fff; font-weight:800; letter-spacing:.01em;
  font-size:clamp(2.25rem,4.1vw,3.25rem); line-height:1.02; text-align:center;
  -webkit-text-stroke:2px #33ccff; paint-order:stroke fill; text-shadow:0 0 10px #33ccffe6, 0 2px 3px rgba(0,0,0,.35); }
.bw-home-rotator__phrase { display:grid; gap:0; max-width:100%; }
.bw-home-rotator__phrase > span { display:block; white-space:nowrap; animation: sitev3-zoom 2.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sitev3-zoom { 0% { transform:scale(.55); opacity:0; } 14% { transform:scale(1.12); opacity:1; } 24% { transform:scale(1); }
  82% { transform:scale(1); opacity:1; } 100% { transform:scale(1.25); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .bw-home-rotator__phrase > span { animation:none; } }
@media (max-width:600px){ .bw-home-rotator { font-size:clamp(1.7rem, 8.4vw, 2.25rem); } }