/* ==========================================================================
   Common Strangers — Base
   Reset, document shell, typography, chunky scrollbar.
   Desktop: 100vw × 100vh, no page scroll. Mobile: normal vertical flow.
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Desktop shell: fill the viewport, no page scroll. Scrolling lives in windows.
   The .cs-desktop class is added by app.js only at ≥1024px so mobile stays fluid. */
html.cs-locked, html.cs-locked body {
	height: 100%;
	overflow: hidden;
}

img, svg, video, audio, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

a {
	color: var(--orange);
	text-decoration: none;
}
a:hover, a:focus-visible { text-decoration: underline; }

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

/* --- Typographic roles --- */
.cs-display {
	font-size: var(--fs-display); font-weight: 800;
	line-height: var(--lh-display); letter-spacing: var(--tr-display);
}
h1, .cs-title {
	font-size: var(--fs-title); font-weight: 800;
	line-height: var(--lh-title); letter-spacing: var(--tr-title);
	margin: 0 0 var(--sp-4);
}
h2, .cs-section {
	font-size: var(--fs-section); font-weight: 700; text-transform: uppercase;
	line-height: var(--lh-section); letter-spacing: var(--tr-section);
	margin: 0 0 var(--sp-3);
}
h3, .cs-heading {
	font-size: var(--fs-heading); font-weight: 700;
	line-height: 1.3; margin: 0 0 var(--sp-2);
}
p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

.cs-data  { font-size: var(--fs-data); line-height: var(--lh-data); }
.cs-label {
	font-size: var(--fs-label); font-weight: 500; text-transform: uppercase;
	line-height: var(--lh-label); letter-spacing: var(--tr-label); color: var(--muted);
}
.cs-micro { font-size: var(--fs-micro); color: var(--muted); }

.cs-muted { color: var(--muted); }
.cs-faint { color: var(--faint); }

/* --- Chunky scrollbar (windows own their scroll) --- */
.cs-scroll {
	overflow: auto;
	/* NB: do NOT set the standard `scrollbar-width` / `scrollbar-color` here —
	   Chrome 121+ treats their presence as opting into the native scrollbar and
	   then ignores our ::-webkit-scrollbar chrome (grey face, arrows, width).
	   WebKit/Blink get the custom bar below; Firefox falls back to its default. */
}
.cs-scroll::-webkit-scrollbar {
	width: var(--scrollbar-size);
	height: var(--scrollbar-size);
}
.cs-scroll::-webkit-scrollbar-track {
	background: var(--sb-track);
}
.cs-scroll::-webkit-scrollbar-thumb {
	background: var(--sb-face);
	box-shadow: var(--sb-bevel-raised);
}
.cs-scroll::-webkit-scrollbar-thumb:active { box-shadow: var(--sb-bevel-pressed); }
.cs-scroll::-webkit-scrollbar-corner { background: var(--sb-track); }

/* --- Arrow buttons on the scrollbar (▲▼◀▶) — late-90s chrome.
   WebKit/Blink only; Firefox falls back to a plain chunky bar (fine).
   Single button at each end: the "double button" halves are hidden. --- */
.cs-scroll::-webkit-scrollbar-button,
.cs-window__body::-webkit-scrollbar-button {
	background-color: var(--sb-face);
	box-shadow: var(--sb-bevel-raised);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px 8px;
	display: block;
	height: var(--scrollbar-size);
	width: var(--scrollbar-size);
}
.cs-scroll::-webkit-scrollbar-button:active,
.cs-window__body::-webkit-scrollbar-button:active { box-shadow: var(--sb-bevel-pressed); }

/* Hide the extra half of the default double-button so only one arrow shows per end. */
.cs-scroll::-webkit-scrollbar-button:vertical:start:increment,
.cs-scroll::-webkit-scrollbar-button:vertical:end:decrement,
.cs-scroll::-webkit-scrollbar-button:horizontal:start:increment,
.cs-scroll::-webkit-scrollbar-button:horizontal:end:decrement,
.cs-window__body::-webkit-scrollbar-button:vertical:start:increment,
.cs-window__body::-webkit-scrollbar-button:vertical:end:decrement,
.cs-window__body::-webkit-scrollbar-button:horizontal:start:increment,
.cs-window__body::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }

.cs-scroll::-webkit-scrollbar-button:vertical:decrement,
.cs-window__body::-webkit-scrollbar-button:vertical:decrement {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M4%201L7%206H1Z'%20fill='%238A8A90'/%3E%3C/svg%3E");
}
.cs-scroll::-webkit-scrollbar-button:vertical:increment,
.cs-window__body::-webkit-scrollbar-button:vertical:increment {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M4%207L1%202H7Z'%20fill='%238A8A90'/%3E%3C/svg%3E");
}
.cs-scroll::-webkit-scrollbar-button:horizontal:decrement,
.cs-window__body::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M1%204L6%201V7Z'%20fill='%238A8A90'/%3E%3C/svg%3E");
}
.cs-scroll::-webkit-scrollbar-button:horizontal:increment,
.cs-window__body::-webkit-scrollbar-button:horizontal:increment {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M7%204L2%207V1Z'%20fill='%238A8A90'/%3E%3C/svg%3E");
}

/* --- Utility --- */
.cs-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect reduced motion — we ship no motion, but guard anyway. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}