/* rottoken.com frontend CSS — only what theme.json cannot express.
   Japanese-minimalist (ma) register: negative space is the primary material.
   Asymmetric off-centre placement, hairline rules, no shadows, no rounding,
   no hard contrast blocks. The 1:2.6 ratio in the layout is the same one the
   generated SVG design elements in assets/svg/ are built on. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--background: #1C1B18;
		--wp--preset--color--surface: #24231F;
		--wp--preset--color--text: #EDEAE2;
		--wp--preset--color--muted: #A29E94;
		--wp--preset--color--border: #35332D;
		--wp--preset--color--accent: #C4A98A;
	}
}
:root[data-theme="dark"] {
	--wp--preset--color--background: #1C1B18;
	--wp--preset--color--surface: #24231F;
	--wp--preset--color--text: #EDEAE2;
	--wp--preset--color--muted: #A29E94;
	--wp--preset--color--border: #35332D;
	--wp--preset--color--accent: #C4A98A;
}

/* Generated paper grain, applied to the page ground. Very low opacity so it
   reads as material rather than texture. */
body {
	background-image: url("../svg/grain.svg");
	background-repeat: repeat;
	background-size: 220px 220px;
}

:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--background);
	padding: 12px 16px;
	z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* --- Header: identity AND nav both pushed to the far right, leaving the left
   of the container deliberately empty. Every prior site in this network
   anchors identity left or centre; the emptiness here is the point. --- */
.rot-header-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}
.rot-header-inner .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}
.rot-primary-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--30) !important; }
.rot-primary-nav a,
.rot-footer-nav a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	letter-spacing: 0.06em;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 500ms ease, border-color 500ms ease;
}
.rot-primary-nav a:hover,
.rot-primary-nav a:focus-visible,
.rot-footer-nav a:hover,
.rot-footer-nav a:focus-visible {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--border);
}
@media (min-width: 900px) {
	.rot-header-inner {
		flex-direction: row;
		justify-content: flex-end;
		align-items: baseline;
		gap: var(--wp--preset--spacing--50);
	}
}

/* --- Main: a narrow text column set off-centre inside a very wide container,
   with an empty margin column carrying the page metadata. 660px of text in a
   1400px field is the ma proportion. --- */
.rot-main { display: block; }
.rot-margin { margin-bottom: var(--wp--preset--spacing--30); }
.rot-margin-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	letter-spacing: 0.06em;
}
.rot-meta-line { margin: 0 0 var(--wp--preset--spacing--20); }
.rot-meta-rule {
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}
@media (min-width: 1040px) {
	.rot-main {
		display: grid;
		grid-template-columns: 1fr 660px 1fr;
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
	/* Metadata sits in the left margin; the right margin stays empty. */
	.rot-margin { grid-column: 1; text-align: right; margin-bottom: 0; padding-top: 14px; }
	.rot-column { grid-column: 2; }
	.rot-meta-rule { border-top: 0; padding-top: 0; }
	.rot-margin-meta { position: sticky; top: var(--wp--preset--spacing--40); }
}

/* --- Body copy: generous leading, wide paragraph spacing --- */
.entry-content p { margin-bottom: var(--wp--preset--spacing--30); }
.entry-content a,
.wp-block-post-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* --- Pull quote: no bar, no fill — set in the display serif, italic,
   indented into the whitespace. --- */
.entry-content blockquote,
.wp-block-post-content blockquote {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--60) 0;
	padding-left: var(--wp--preset--spacing--40);
	border: 0;
}
.entry-content blockquote p,
.wp-block-post-content blockquote p { margin: 0; }

/* --- Tables: hairlines only, no fills, no heavy rules --- */
.entry-content table,
.wp-block-post-content table {
	width: 100%;
	margin: var(--wp--preset--spacing--40) 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}
.entry-content th,
.wp-block-post-content th {
	text-align: left;
	vertical-align: bottom;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.entry-content td,
.wp-block-post-content td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--border);
	line-height: 1.7;
}
.entry-content tr:last-child td,
.wp-block-post-content tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table,
.wp-block-post-content .wp-block-table { overflow-x: auto; }

/* --- Lists: hairline markers set in the margin, no bullets --- */
.entry-content ol,
.wp-block-post-content ol {
	list-style: none;
	counter-reset: rot-step;
	padding-left: 0;
}
.entry-content ol > li,
.wp-block-post-content ol > li {
	counter-increment: rot-step;
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}
.entry-content ol > li::before,
.wp-block-post-content ol > li::before {
	content: counter(rot-step);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}
.entry-content ul,
.wp-block-post-content ul { list-style: none; padding-left: 0; }
.entry-content ul > li,
.wp-block-post-content ul > li {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}
.entry-content ul > li::before,
.wp-block-post-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 20px;
	height: 1px;
	background: var(--wp--preset--color--border);
}

/* --- Images: no border, no rounding — the image floats on the ground the
   way everything else does --- */
.entry-content figure.wp-block-image img,
.wp-block-post-content figure.wp-block-image img { width: 100%; height: auto; }
.entry-content figure.wp-block-image,
.wp-block-post-content figure.wp-block-image { margin: var(--wp--preset--spacing--60) 0; }
.entry-content figcaption,
.wp-block-post-content figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--20);
	letter-spacing: 0.04em;
}

/* --- Generated ornament divider --- */
.rot-ornament {
	color: var(--wp--preset--color--text);
	margin: var(--wp--preset--spacing--60) 0;
	max-width: 100%;
}
.rot-ornament svg { width: 100%; height: auto; display: block; }

/* --- FAQ: hairline-separated, no cards --- */
.rot-faq-list { margin: var(--wp--preset--spacing--40) 0; }
.rot-faq-item {
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rot-faq-item:first-child { border-top: 1px solid var(--wp--preset--color--border); }
.rot-faq-question {
	margin: 0 0 var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}
.rot-faq-answer { margin: 0; color: var(--wp--preset--color--muted); }

/* --- Footer: standing notice, then identity and links right-aligned to
   mirror the header, with a large empty field above. --- */
.rot-standing-notice {
	max-width: 660px;
	margin-bottom: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
}
.rot-standing-notice p { margin: 0; }
.rot-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}
.rot-footer-inner .wp-block-site-title { margin: 0; }
.rot-footer-inner .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}
@media (min-width: 900px) {
	.rot-footer-inner {
		flex-direction: row;
		justify-content: flex-end;
		align-items: baseline;
		gap: var(--wp--preset--spacing--50);
	}
}

/* Slow, opacity-led transitions are the genre's motion register — and are
   removed entirely for users who ask for that. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Progressive-enhancement components -------------------------------
   Quiet by construction: hairline fields, no fills, no rounding, no motion
   beyond the shared 500ms colour transition. The ma register is about
   stillness, so these read as part of the page rather than as widgets. --- */

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

.rot-theme-toggle {
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0 0 3px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color 500ms ease, border-color 500ms ease;
}
.rot-theme-toggle:hover,
.rot-theme-toggle:focus-visible {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--border);
}

.rot-tool {
	margin: var(--wp--preset--spacing--50) 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}
.rot-tool[hidden] { display: none; }

.rot-tool-label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rot-tool-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}
@media (min-width: 560px) {
	.rot-tool-row { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
}
.rot-field { display: block; }
.rot-field > span {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
	letter-spacing: 0.04em;
}
.rot-field input {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 6px 0;
	font: inherit;
	/* 16px minimum prevents iOS zooming the page on focus. */
	font-size: 1rem;
	color: var(--wp--preset--color--text);
	font-variant-numeric: tabular-nums;
	transition: border-color 500ms ease;
}
.rot-field input:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent);
}
.rot-field input::placeholder { color: var(--wp--preset--color--border); }

.rot-tool-out {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--text);
}
.rot-tool-note {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.rot-tool-foot {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	opacity: 0.85;
}

/* --- Motion -----------------------------------------------------------
   The ma register has a specific motion vocabulary: slow, opacity-led,
   no bounce, no overshoot, position shifts kept minimal. Everything below
   stays inside that, and all of it is off by default — the `is-in` class
   is added by JS, so nothing moves for a reader without scripting, and
   nothing moves at all under prefers-reduced-motion. --- */

/* Illustrations settle in rather than appearing. 700ms opacity with a 6px
   rise — the rise is small enough to read as settling, not sliding. */
.entry-content figure.wp-block-image,
.wp-block-post-content figure.wp-block-image {
	opacity: 1;
}
.js-motion .entry-content figure.wp-block-image,
.js-motion .wp-block-post-content figure.wp-block-image {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 700ms ease, transform 700ms ease;
	will-change: opacity, transform;
}
.js-motion .entry-content figure.wp-block-image.is-in,
.js-motion .wp-block-post-content figure.wp-block-image.is-in {
	opacity: 1;
	transform: none;
}

/* The generated ornament draws itself once, on entry. */
.rot-ornament line,
.rot-ornament circle { opacity: 1; }
.js-motion .rot-ornament line {
	stroke-dasharray: 640;
	stroke-dashoffset: 640;
	transition: stroke-dashoffset 1200ms ease;
}
.js-motion .rot-ornament circle {
	opacity: 0;
	transition: opacity 600ms ease 700ms;
}
.js-motion .rot-ornament.is-in line { stroke-dashoffset: 0; }
.js-motion .rot-ornament.is-in circle { opacity: 0.75; }

/* --- Cross-rate demonstrator ---
   Three traces drawn in sequence: the flat leg, then the drifting leg,
   then the result that follows it. The stagger is the argument — the
   third line moves because the second did, not because the first did. */
.rot-crossrate-wrap {
	margin: var(--wp--preset--spacing--50) 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}
.rot-crossrate-wrap .rot-tool-label {
	margin-bottom: var(--wp--preset--spacing--20);
}
.rot-crossrate { width: 100%; height: auto; display: block; overflow: visible; }
.rot-crossrate .rot-axis {
	stroke: var(--wp--preset--color--border);
	stroke-width: 1;
}
.rot-crossrate .rot-trace {
	fill: none;
	stroke: var(--wp--preset--color--text);
	stroke-width: 1.5;
	stroke-linecap: round;
}
.rot-crossrate .rot-leg-3 .rot-trace { stroke: var(--wp--preset--color--accent); }
.rot-crossrate .rot-dot { fill: var(--wp--preset--color--muted); }

.js-motion .rot-crossrate .rot-trace {
	stroke-dasharray: 620;
	stroke-dashoffset: 620;
}
.js-motion .rot-crossrate.is-in .rot-trace {
	transition: stroke-dashoffset 1400ms ease;
	stroke-dashoffset: 0;
}
.js-motion .rot-crossrate.is-in .rot-leg-2 .rot-trace { transition-delay: 500ms; }
.js-motion .rot-crossrate.is-in .rot-leg-3 .rot-trace { transition-delay: 1100ms; }

.rot-crossrate-legend {
	display: grid;
	gap: 6px;
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	list-style: none;
	padding: 0;
}
.rot-crossrate-legend li { padding-left: 0; margin: 0; }
.rot-crossrate-legend li::before { content: none; }
.rot-crossrate-legend .rot-key-accent { color: var(--wp--preset--color--accent); }

/* Nothing above applies when the reader has asked for less motion. The
   .js-motion class is never added in that case, so every element sits in
   its finished state — this block is belt-and-braces for anything that
   slips through. */
@media (prefers-reduced-motion: reduce) {
	.js-motion .entry-content figure.wp-block-image,
	.js-motion .wp-block-post-content figure.wp-block-image,
	.js-motion .rot-ornament line,
	.js-motion .rot-ornament circle,
	.js-motion .rot-crossrate .rot-trace {
		opacity: 1 !important;
		transform: none !important;
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
}