/* ===========================================================
   60db — editorial finishing layer over the Revision theme
   Paper, ink, one flame accent. Depth from rules and edges,
   never shadows. Loaded after theme styles; the base palette,
   fonts and radii are set through the theme's own customizer
   mods — this file covers what the customizer cannot reach.
   =========================================================== */

:root {
	--sixtydb-paper: #fcfaf7;   /* surface-1 */
	--sixtydb-sheet: #ffffff;   /* surface-0 */
	--sixtydb-panel: #f6f2ec;   /* surface-2 */
	--sixtydb-ink-0: #1c1a18;
	--sixtydb-ink-1: #2a2724;
	--sixtydb-ink-3: #706a5f;
	--sixtydb-flame: #b8451f;   /* flame-500 — 5.05:1 on paper */
	--sixtydb-flame-600: #9a3818;
	--sixtydb-flame-100: #f6e1d6;
	--sixtydb-rule: #e2dcd3;

	/* Block-editor preset shadows resolve to nothing. */
	--wp--preset--shadow--standard: none;
	--wp--preset--shadow--natural: none;
	--wp--preset--shadow--deep: none;
	--wp--preset--shadow--sharp: none;
	--wp--preset--shadow--crisp: none;
}

/* ---------- The ground ----------
   A warm sheet over a fine dot grid: graph paper under the page.
   Fixed, so the sheet travels over it as you scroll. */
body {
	background: var(--sixtydb-paper);
	background-image: radial-gradient(var(--sixtydb-rule) 1px, transparent 1px);
	background-size: 9px 9px;
	background-attachment: fixed;
	caret-color: var(--sixtydb-flame);
	scrollbar-color: #d3cabe transparent;
	scrollbar-width: thin;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--sixtydb-flame-100);
	color: var(--sixtydb-ink-0);
}

/* ---------- No shadows, no blurred glass ----------
   Depth comes from rules and edges only. The theme scatters
   soft shadows across dozens of one-off selectors, so they are
   switched off at the root rather than hunted one by one. */
*,
*::before,
*::after {
	box-shadow: none !important;
	text-shadow: none !important;
}

[class^="cs-"],
[class*=" cs-"] {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Enclosure is an edge: sidebar widgets trade their shadow for a rule. */
.cs-sidebar__area .widget,
.cs-widget-area .widget {
	border: 1px solid var(--sixtydb-rule);
	border-radius: 2px;
}

/* ---------- Header ----------
   The theme floats its "stretch" navbar 1.5rem below the top of the
   page, which clips the first line of content and reads as a gap on
   our flat paper. The main site's header is a flush bar; pin the
   navbar to the top while at rest and let the theme's scroll states
   (.cs-scroll-sticky) take over untouched. */
.cs-header.cs-header-stretch:not(.cs-scroll-sticky) {
	top: calc(var(--cs-header-height, 88px) + var(--cs-wpadminbar-height, 0px)) !important;
}

/* The sheet meets the header at a rule, the way sections do on the
   main site. */
.cs-header {
	border-bottom: 1px solid var(--sixtydb-rule);
}

/* ---------- Headlines ----------
   Newsreader with optical sizing on; weight stays at 400 — size
   carries the emphasis. Never italic at display size. */
h1, h2, h3, h4, h5, h6,
.cs-hero__heading,
.cs-entry__title,
.cs-post-title {
	font-optical-sizing: auto;
	text-wrap: balance;
}

h1 em, h2 em, h3 em,
.cs-hero__heading em,
.cs-entry__title em {
	font-style: normal !important;
	color: var(--sixtydb-ink-3) !important;
}

/* The hero's emphasised clause: the theme paints it with a hardcoded
   purple gradient clipped to the text. Emphasis inside a heading is a
   change of ink, never a wash. */
:root .cs-hero-type-1 .cs-hero__content .cs-hero__heading span,
body[data-scheme="light"] .cs-hero-type-1 .cs-hero__content .cs-hero__heading span,
body[data-scheme="dark"] .cs-hero-type-1 .cs-hero__content .cs-hero__heading span {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: var(--sixtydb-ink-3) !important;
	color: var(--sixtydb-ink-3) !important;
}

/* Any other gradient-clipped text resolves to plain ink. */
[class*="cs-"] [style*="background-clip: text"],
.cs-gradient-text {
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--sixtydb-ink-1) !important;
}

/* ---------- Links ----------
   Bare links in running copy are flame with a fine underline. */
.cs-entry__content p a:not(.wp-element-button):not(.wp-block-button__link),
.cs-entry__content li a:not(.wp-element-button),
.comment-content a {
	color: var(--sixtydb-flame);
	text-decoration-color: currentColor;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.cs-entry__content p a:hover,
.cs-entry__content li a:hover {
	color: var(--sixtydb-flame-600);
}

/* ---------- Buttons ----------
   A flat flame field under paper type, set in the mono — anything
   functional is mono. The theme sets buttons in the display face. */
.cs-button,
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background-image: none;
	font-family: var(--cs-font-input-family, "IBM Plex Mono"), ui-monospace, monospace;
	font-size: 0.84375rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	font-style: normal;
}

/* The header CTA always sits on a flame field. In the theme's overlay
   header mode the button resolves to an invalid var() and disappears;
   this pins it either way. */
.cs-header__custom-button,
.cs-display-header-overlay .cs-site-inner .cs-header__custom-button {
	background: var(--sixtydb-flame) !important;
	color: #fcfaf7 !important;
}

.cs-header__custom-button:hover,
.cs-header__custom-button:focus {
	background: var(--sixtydb-flame-600) !important;
	color: #fcfaf7 !important;
}

/* ---------- Figures ----------
   Numbers line up in columns instead of dancing as values change. */
time,
data,
.cs-meta-date,
.cs-entry__post-meta,
.cs-post-meta {
	font-variant-numeric: tabular-nums;
}

/* ---------- Focus ----------
   One focus treatment: a flame ring for keyboard users, none for
   pointer users. Replaces any shadow-based ring removed above. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sixtydb-flame) !important;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Rules and edges ----------
   Separators are hairlines in the rule colour, not tinted bands. */
hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sixtydb-rule);
	background: none;
	height: auto;
}

blockquote,
.wp-block-quote,
.entry-content > blockquote,
.cs-entry__content blockquote {
	border: none;
	border-left: 2px solid var(--sixtydb-flame);
	border-radius: 2px;
	background: var(--sixtydb-panel);
	font-style: normal;
}

blockquote em,
.wp-block-quote em {
	font-style: normal;
}

/* Tags are filed labels, not pills. */
.wp-block-tag-cloud a,
.is-style-outline .wp-block-tag-cloud a,
.cs-entry__tags a,
.cs-meta-category a,
.cs-category {
	border-radius: 2px !important;
}

/* Code is set on the panel with a rule around it, not on a dark slab. */
.cs-entry__content code,
.cs-entry__content pre {
	background: var(--sixtydb-panel);
	border: 1px solid var(--sixtydb-rule);
	border-radius: 2px;
}

.cs-entry__content pre {
	padding: 16px;
}

.cs-entry__content pre code {
	border: 0;
	background: none;
}

/* ---------- Tables ---------- */
.cs-entry__content table {
	border-collapse: collapse;
}

.cs-entry__content th {
	font-family: var(--cs-font-secondary-family), ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sixtydb-ink-3);
}

.cs-entry__content th,
.cs-entry__content td {
	border: 1px solid var(--sixtydb-rule);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #d3cabe;
	border: 3px solid var(--sixtydb-paper);
	border-radius: 2px;
}

/* ---------- Motion ----------
   Nothing lifts or scales on hover; controls change colour. */
.cs-entry__outer,
.cs-entry__inner,
.cs-entry__thumbnail img {
	transition-property: color, background-color, border-color, opacity;
}

.cs-entry__outer:hover,
.cs-entry__inner:hover {
	transform: none !important;
}

/* Vestibular safety: no page-wide motion when the OS asks for less. */
@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;
	}
}