/* ===========================================================================
   A Dream in Venice — shared reader foundation (all modes)
   =========================================================================== */

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

:root {
	--ink: #f4ece0;
	--ink-dim: #c9bda9;
	--paper: #f3e9d8;
	--paper-ink: #35291c;
	--sea: #3f7a8c;
	--sea-light: #7fc6d8;
	--night: #0c151d;
	--panel: rgba(10, 20, 30, 0.40);
	--panel-line: rgba(255, 255, 255, 0.14);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--display: "Cormorant Garamond", Georgia, serif;
}

html, body { margin: 0; padding: 0; height: 100%; }

body {
	background: var(--night);
	color: var(--ink);
	font-family: var(--serif);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: inherit; }

img { max-width: 100%; }

/* Cross-document crossfade between pages (Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.55s;
	animation-timing-function: var(--ease);
}

/* ---------------------------------------------------------------------------
   Mode switcher / compare bar
   --------------------------------------------------------------------------- */
.modeswitch {
	position: fixed;
	z-index: 50;
	top: max(12px, env(safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 4px 4px 12px;
	font-family: var(--display);
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	background: rgba(8, 16, 24, 0.55);
	border: 1px solid var(--panel-line);
	border-radius: 999px;
	backdrop-filter: blur(12px) saturate(1.3);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	opacity: 0.6;
	transition: opacity 0.35s var(--ease);
}
.modeswitch:hover,
.modeswitch:focus-within { opacity: 1; }

.modeswitch__label {
	color: var(--ink-dim);
	font-style: italic;
	font-size: 0.82rem;
	margin-right: 4px;
}
.modeswitch a {
	color: var(--ink);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.modeswitch a:hover { background: rgba(255, 255, 255, 0.1); }
.modeswitch a[aria-current="page"] {
	background: var(--sea);
	color: #fff;
}
.modeswitch__contents {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--ink-dim) !important;
}

@media (max-width: 560px) {
	.modeswitch { font-size: 0.8rem; padding-left: 8px; gap: 0; }
	.modeswitch__label { display: none; }
	.modeswitch a { padding: 4px 7px; }
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--sea-light);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.05ms !important;
	}
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: 0.01s; }
}