/* ==========================================================================
   Base — reset, document, links, animations. Layout lives in directory.css.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	cursor: default;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color .35s ease, color .35s ease;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { opacity: .75; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent-25); }

/* Accessible focus ring for keyboard users. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Skip link. */
.nath-skip {
	position: absolute; left: -999px; top: 0;
	background: var(--ink); color: var(--bg);
	padding: 10px 16px; z-index: 10000;
	font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}
.nath-skip:focus { left: 8px; top: 8px; opacity: 1; }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes marq     { from { transform: translateX(0); }        to { transform: translateX(-50%); } }
@keyframes blink    { 0%,100% { opacity: 1; }                   50% { opacity: .15; } }
@keyframes inkline  { from { width: 0; }                        to { width: 100%; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; }                      to { opacity: 1; } }
@keyframes floatSlow{ 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } }

/* Respect reduced-motion: kill animations and smooth scroll. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.nath-cursor, .nath-preview { display: none !important; }
}