/* =========================================================================
   RUH — base: tokens, reset, shared utilities, reveal states.
   Load order: base.css → components.css → pages/{page}.css
   Values come from the Figma file "RUH Agency Website (Copy)":
     mobile  = 440px frames  → --u = 1 design px of 440 (<1200px; capped at 640px wide, centred)
     desktop = 1728px frames → --u = 1 design px of 1728 (≥1200px)
   Comments show the Figma value (y = distance from the frame top).
   Motion only animates transform/opacity (+ clip-path on the hero).
   ========================================================================= */

:root {
	--black: #000;
	--white: #fff;
	--teal: #00d9bf;      /* active client, menu panel, dots */
	--cyan: #00ffe1;      /* mobile menu "Work", mobile About button */
	--grey-text: #565656; /* insights description */
	--tag-text: #8e8e8e;
	--tag-line: #a9a9a9;
	--dot: #d9d9d9;
	--copy-grey: #9c9c9c;
	--red: #e10600;       /* site cursor */

	--font: var(--wp--preset--font-family--inter-tight, "Inter Tight", system-ui, sans-serif);
	--mono: var(--wp--preset--font-family--azeret-mono, "Azeret Mono", ui-monospace, monospace);
	--plex: var(--wp--preset--font-family--ibm-plex-mono, "IBM Plex Mono", ui-monospace, monospace);
	/* Figma: Neue Haas Grotesk Display Pro 55 Roman (Figma labels it 500). Stand-in: Geist (OFL, variable)
	   at 450 — same stroke weight as Neue Haas 55 (ink within 0.3%), width within ~1.5%. */
	--nhg: var(--wp--preset--font-family--geist, Geist), var(--font);
	--nhg-weight: 450;

	/* Phones scale the 440 design to the screen; tablets (up to 1199px) keep the phone layout but stop
	   growing at 640px (×1.45) — the content column centres, full-width backgrounds still bleed. */
	--u: calc(min(100vw, 640px) / 440);
	--gutter: max(calc(20 * var(--u)), calc((100vw - 400 * var(--u)) / 2));
	--header-h: calc(118 * var(--u));
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1200px) {
	:root {
		--u: calc(min(100vw, 1920px) / 1728);
		--gutter: calc(64 * var(--u));
		--header-h: calc(108 * var(--u));
	}
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 400;
	color: var(--black);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Effects that draw past the page edge (water.js canvas margin) never add sideways scroll. On the
   page wrapper, not body: body's overflow passes up to the viewport, where clip turns into hidden
   (still scrollable). clip, unlike hidden, makes no scroll container, so position: sticky still works. */
.wp-site-blocks { overflow-x: clip; }

[hidden] { display: none !important; } /* a display rule on a component must never unhide it */
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; font-weight: inherit; }
ul { padding: 0; list-style: none; }

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

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

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

.wp-site-blocks > * { margin-block: 0 !important; }

.arrow-inline { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.arrow-inline svg { display: block; width: 100%; height: auto; }

/* Mobile tag: stroke #A9A9A9 1px, r79, pad 4/15, Azeret Mono 300 12/20 uppercase #8E8E8E */
.tag {
	display: inline-flex;
	align-items: center;
	padding: calc(4 * var(--u) - 1px) calc(15 * var(--u));
	border: 1px solid var(--tag-line);
	border-radius: 79px;
	font-family: var(--mono);
	font-size: calc(12 * var(--u));
	font-weight: 300;
	line-height: calc(20 / 12);
	text-transform: uppercase;
	color: var(--tag-text);
}

/* Desktop tag (Figma "WORK – List" Frame 46/114): 34 tall, pad 15 + 1px stroke, Azeret Mono 400 12/20 */
@media (min-width: 1200px) {
	/* letter-spacing .006em: our Azeret Mono file sets ~.07px/char narrower than Figma's (ls 0) — keeps tag rows on the design's x */
	.tag { padding: calc(7 * var(--u) - 1px) calc(15 * var(--u)); font-weight: 400; letter-spacing: 0.006em; }
}

.brandmark svg { display: block; width: 100%; height: auto; }
.nowrap { white-space: nowrap; }

/* ---------- Reveal states (only when JS is running) ---------- */

.js [data-reveal="rise"] { opacity: 0; }
.js [data-reveal="lines"] { visibility: hidden; }
/* Opened by the page transition: the hero is already there inside the growing window (as the reference) */
.js.pt-in [data-reveal-once] [data-reveal], .js.pt-in [data-reveal-once][data-reveal] { opacity: 1; visibility: visible; }
/* Line masks get room for descenders (tight line-heights like the 175px project title clipped the "g"); net layout change 0. */
[data-reveal="lines"] { display: flow-root; } /* keeps the masks' negative margin inside the heading (no collapse) */
[data-reveal="lines"] .line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1 !important; visibility: visible !important; }
	.roll > span, .roll > span::after { transition: none; }
	.js .site-header .wordmark svg path,
	.js .site-header .menu-toggle__icon svg path,
	.js .site-header .menu-toggle__icon svg rect { transform: none; }
	.js [data-header-item] { opacity: 1; }
	*, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Video thumbnails / heroes (ruh_media): fill their frame like images do */
.ruh-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Site Content image + phone version with a video involved (ruh_picture): CSS shows one */
.ruh-only-desktop { display: none !important; }
@media (min-width: 1200px) {
	.ruh-only-desktop { display: block !important; }
	.ruh-only-phone { display: none !important; }
}

/* Site Content → Display & motion: effects switched off (html.m-off-*) — the still version, nothing hidden */
.js.m-off-reveal [data-reveal], .js.m-off-reveal .ruh-reveal-lines, .js.m-off-reveal .ruh-reveal-rise { opacity: 1 !important; visibility: visible !important; }
.m-off-roll .roll > span { transform: none !important; transition: none !important; }
.m-off-roll .roll > span::after { display: none; }