:root {
	--ground:#c8903a;
	--ground-deep:#9e6e24;
	--ground-dark:#785317;
	--surface:#b8802e;
	--surface-lift:#d49d4a;
	--surface-sunken:#a77222;
	--ink:#1a160f;
	--ink-muted:#3d3424;
	--ink-faint:#5c4f37;
	--accent-green:#0e2319;
	--accent-green-bright:#1c3b2c;
	--accent-signal:#8f2212;
	--border:rgba(26, 22, 15, 0.35);
	--border-strong:rgba(26, 22, 15, 0.65);
	--border-faint:rgba(26, 22, 15, 0.18);
	--line:rgba(26, 22, 15, 0.28);
	--line-strong:rgba(26, 22, 15, 0.55);
	--overlay-bg:rgba(26, 22, 15, 0.94);
	--overlay-ink:#eadbc8;
	--overlay-muted:#b8a892;

	--tuwi-061:"Cinzel Decorative", "Noto Serif JP", serif;
	--tuwi-52e:"Roboto Slab", "Noto Serif JP", serif;
	--tuwi-28a:"JetBrains Mono", monospace;

	--type-display-3xl:clamp(2.4rem, 6vw, 4.8rem);
	--type-display-2xl:clamp(2rem, 4.5vw, 3.4rem);
	--type-display-xl:clamp(1.6rem, 3.5vw, 2.5rem);
	--type-display-lg:clamp(1.35rem, 2.4vw, 1.95rem);
	--type-display-md:clamp(1.15rem, 1.8vw, 1.45rem);
	--type-body-lg:clamp(1.05rem, 1.2vw, 1.2rem);
	--type-body:clamp(0.95rem, 1vw, 1.05rem);
	--type-body-sm:clamp(0.85rem, 0.9vw, 0.92rem);
	--type-caption:0.78rem;

	--tracking-tight:-0.02em;
	--tracking-normal:0em;
	--tracking-wide:0.06em;
	--tracking-mono:0.04em;

	--leading-tight:1.15;
	--leading-display:1.22;
	--leading-snug:1.35;
	--leading-body:1.68;
	--leading-loose:1.85;

	--space-3xs:0.25rem;
	--space-2xs:0.5rem;
	--space-xs:0.75rem;
	--space-sm:1rem;
	--space-md:1.5rem;
	--space-lg:2.25rem;
	--space-xl:3.5rem;
	--space-2xl:5rem;
	--space-3xl:7.5rem;

	--max-width-shell:1240px;
	--max-width-reading:780px;
	--max-width-wide:1400px;

	--pad-gutter:clamp(1.1rem, 3.5vw, 2.75rem);
	--header-height:4.5rem;

	--trans-fast:140ms cubic-bezier(0.2, 0, 0, 1);
	--trans-base:220ms cubic-bezier(0.2, 0, 0, 1);
	--trans-slow:400ms cubic-bezier(0.2, 0, 0, 1);
	--trans-motion:600ms cubic-bezier(0.16, 1, 0.3, 1);

	--shadow-hud:0 4px 0 rgba(26, 22, 15, 0.12);
	--shadow-deep:0 12px 32px rgba(26, 22, 15, 0.24);

	--corner-tick:6px;
}

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

html {
	font-size:16px;
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--tuwi-52e);
	font-weight:400;
	line-height:var(--leading-body);
	letter-spacing:var(--tracking-normal);
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	scroll-padding-top:calc(var(--header-height) + 1.5rem);
}

body {
	min-height:100vh;
	background-color:var(--ground);
	color:var(--ink);
	overflow-x:hidden;
	position:relative;
	display:flex;
	flex-direction:column;
}

body::before {
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:999;
	opacity:0.035;
	background-image:
		linear-gradient(to right, var(--ink) 1px, transparent 1px),
		linear-gradient(to bottom, var(--ink) 1px, transparent 1px);
	background-size:48px 48px;
}

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

button, input, select, textarea {
	font:inherit;
	color:inherit;
	border-radius:0;
}

a {
	color:var(--ink);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:color var(--trans-fast), text-decoration-color var(--trans-fast);
}

a:hover {
	color:var(--accent-green);
	text-decoration-thickness:2px;

}

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

ul, ol { list-style:none; }

table {
	border-collapse:collapse;
	width:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family:var(--tuwi-061);

	font-weight:700;
	line-height:var(--leading-display);
	letter-spacing:var(--tracking-tight);
	color:var(--ink);
	text-wrap:balance;
}

h1 { font-size:var(--type-display-3xl); }

h2 { font-size:var(--type-display-2xl); }

h3 { font-size:var(--type-display-xl); }

h4 { font-size:var(--type-display-lg); }

h5 { font-size:var(--type-display-md); }

h6 {
	font-family:var(--tuwi-28a);
	font-size:var(--type-body-sm);
	letter-spacing:var(--tracking-mono);
	text-transform:uppercase;
}

p {
	font-size:var(--type-body);
	line-height:var(--leading-body);
	color:var(--ink);
	margin-block-end:1em;
}

p:last-child { margin-block-end:0; }

strong, b {
	font-weight:700;
	color:var(--ink);
}

code, kbd, samp, pre {
	font-family:var(--tuwi-28a);
	font-size:0.9em;
}

.mono {
	font-family:var(--tuwi-28a);
	font-variant-numeric:tabular-nums;
	letter-spacing:var(--tracking-mono);
}

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

.shell-container-wide {
	width:100%;
	max-width:var(--max-width-wide);
	margin-inline:auto;
	padding-inline:var(--pad-gutter);
}

.shell-container-reading {
	width:100%;
	max-width:var(--max-width-reading);
	margin-inline:auto;
	padding-inline:var(--pad-gutter);
}

.screen-reader-only,
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}

.skip-link {
	position:absolute;
	top:-100px;
	left:var(--pad-gutter);
	background:var(--ink);
	color:var(--ground);
	padding:0.75rem 1.25rem;
	z-index:10000;
	font-family:var(--tuwi-28a);
	font-size:0.9rem;
	font-weight:500;
	text-decoration:none;
	border:1px solid var(--ground);
	transition:top var(--trans-fast);
}

.skip-link:focus {
	top:1rem;
	outline:3px solid var(--accent-green);
}

.prose {
	font-size:var(--type-body);
	line-height:var(--leading-loose);
	color:var(--ink);
	max-width:var(--max-width-reading);
}

.prose p { margin-block-end:1.35em; }

.prose h2 {
	margin-block-start:2.2em;
	margin-block-end:0.8em;
	padding-block-end:0.4em;
	border-block-end:1px solid var(--border);
}

.prose h3 {
	margin-block-start:1.8em;
	margin-block-end:0.6em;
}

.prose ul, .prose ol {
	margin-block:1.2em;
	padding-inline-start:1.5em;
}

.prose ul { list-style:square; }

.prose ol { list-style:decimal; }

.prose li { margin-block-end:0.5em; }

.prose blockquote {
	margin-block:1.8em;
	padding:1rem 1.5rem;
	border-left:3px solid var(--ink);
	background-color:var(--surface);
	font-style:italic;
}

.flow > * + * { margin-block-start:var(--flow-space, 1.5rem); }

.hud-panel {
	position:relative;
	background-color:var(--surface);
	border:1px solid var(--border-strong);
	padding:1.5rem;

	border-radius:0;
}

.hud-panel::before,
.hud-panel::after {
	content:"";
	position:absolute;
	width:var(--corner-tick);
	height:var(--corner-tick);
	border-color:var(--ink);
	border-style:solid;
	pointer-events:none;
}

.hud-panel::before {
	top:-1px;
	left:-1px;
	border-width:2px 0 0 2px;
}

.hud-panel::after {
	bottom:-1px;
	right:-1px;
	border-width:0 2px 2px 0;
}

.hud-tag {
	display:inline-flex;
	align-items:center;
	gap:0.4rem;
	font-family:var(--tuwi-28a);
	font-size:var(--type-caption);
	text-transform:uppercase;
	letter-spacing:var(--tracking-mono);
	padding:0.2rem 0.55rem;
	background-color:var(--surface-sunken);
	color:var(--ink);
	border:1px solid var(--border);
	line-height:1;
}

.hud-tag-accent {
	background-color:var(--accent-green);
	color:var(--ground);
	border-color:var(--accent-green);
}

.icon {
	width:1.2em;
	height:1.2em;
	fill:currentColor;
	display:inline-block;
	vertical-align:middle;
	flex-shrink:0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}