/*
 * Shared by the archive page (#dt-archive) and the item page (#dt-item):
 * tokens and patterns from the UX spec (Visual Language, Core Component
 * Patterns). Every rule is scoped under the page's ID and classes are
 * prefixed dt-. The ID outranks the theme's and Elementor's global rules
 * (such as its button colours), which would otherwise win over single-class
 * selectors.
 */
:is(#dt-archive, #dt-item) {
	--gold: #D4990F;
	--gold-2: #B8860B;
	--gold-ink: #8B6914;
	--brown: #5C3A1E;
	--ink: #2B2118;
	--muted: #6B5A48;
	--paper: #FEFCF7;
	--cream: #F5EDE0;
	--cream-2: #FAF4EA;
	--line: #E8DCC8;
	--white: #FFFFFF;
	--focus: #1F5FBF;
	--font-display: 'Frank Ruhl Libre', 'David Libre', serif;
	--font-body: 'Rubik', system-ui, sans-serif;
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
	--r-sm: 6px; --r: 10px; --r-lg: 16px;
	--shadow: 0 1px 2px rgba(92, 58, 30, .06), 0 4px 16px rgba(92, 58, 30, .06);
	--shadow-lg: 0 8px 32px rgba(92, 58, 30, .14);
	/* Height of a sticky site header above the finder, if the theme has one. */
	--dt-sticky-top: 0px;

	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s5) var(--s7);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	text-align: start;
}
:is(#dt-archive, #dt-item) *,
:is(#dt-archive, #dt-item) *::before,
:is(#dt-archive, #dt-item) *::after { box-sizing: border-box; }
:is(#dt-archive, #dt-item) a { color: var(--gold-ink); }
/* :where() keeps this reset weaker than the component rules below. */
:is(#dt-archive, #dt-item) :where(button, input, select) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
:is(#dt-archive, #dt-item) :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:is(#dt-archive, #dt-item) :focus:not(:focus-visible) { outline: none; } /* The theme's ring on mouse clicks; keyboard focus keeps ours. */
:is(#dt-archive, #dt-item) [hidden] { display: none !important; }
:is(#dt-archive, #dt-item) h1,
:is(#dt-archive, #dt-item) h2,
:is(#dt-archive, #dt-item) h3 { font-family: var(--font-display); color: var(--brown); margin: 0; line-height: 1.25; text-wrap: balance; letter-spacing: normal; text-transform: none; }
:is(#dt-archive, #dt-item) .dt-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(#dt-archive, #dt-item) .dt-only-phone { display: none !important; }

:is(#dt-archive, #dt-item) .dt-eyebrow { font-size: 13px; font-weight: 500; color: var(--gold-ink); letter-spacing: .04em; }

:is(#dt-archive, #dt-item) .dt-muted { color: var(--muted); }
:is(#dt-archive, #dt-item) .dt-missing { color: #8a7a66; font-style: italic; }

/* Buttons */
:is(#dt-archive, #dt-item) .dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 20px; border: 1px solid transparent; cursor: pointer; font-weight: 500; font-size: 15px; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s; }
:is(#dt-archive, #dt-item) .dt-btn-primary { background: var(--brown); color: #fff; }
:is(#dt-archive, #dt-item) .dt-btn-primary:hover { background: #4a2e17; box-shadow: var(--shadow); }
:is(#dt-archive, #dt-item) .dt-btn-secondary { background: var(--white); border-color: var(--line); color: var(--brown); }
:is(#dt-archive, #dt-item) .dt-btn-secondary:hover { border-color: var(--gold); background: var(--cream-2); }
:is(#dt-archive, #dt-item) .dt-btn-ghost { background: transparent; color: var(--gold-ink); padding-inline: 10px; }
:is(#dt-archive, #dt-item) .dt-btn-ghost:hover { background: var(--cream); }
:is(#dt-archive, #dt-item) .dt-btn-sm { padding: 6px 14px; font-size: 14px; }
:is(#dt-archive, #dt-item) .dt-icon { width: 18px; height: 18px; flex: none; }

:is(#dt-archive, #dt-item) .dt-tag { display: inline-flex; align-items: center; font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--cream); color: var(--brown); text-decoration: none; border: 1px solid transparent; line-height: 1.7; }
:is(#dt-archive, #dt-item) .dt-tag:hover { border-color: var(--gold); }

:is(#dt-archive, #dt-item) .dt-state { text-align: center; padding: var(--s8) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
:is(#dt-archive, #dt-item) .dt-glyph { font-family: var(--font-display); font-size: 64px; color: var(--gold); line-height: 1; }
:is(#dt-archive, #dt-item) .dt-state h2 { font-size: 28px; margin: var(--s3) 0 var(--s2); }
:is(#dt-archive, #dt-item) .dt-state p { color: var(--muted); margin: 0 auto var(--s4); max-width: 460px; }
:is(#dt-archive, #dt-item) .dt-actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }

/* Toast */
:is(#dt-archive, #dt-item) .dt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 400; font-size: 15px; max-width: calc(100vw - 32px); text-align: center; transition: opacity .2s, transform .2s; }
:is(#dt-archive, #dt-item) .dt-toast.dt-show { opacity: 1; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
	:is(#dt-archive, #dt-item) *,
	:is(#dt-archive, #dt-item) *::before { animation: none !important; transition: none !important; }
}

/* Phone */
@media (max-width: 639px) {
	:is(#dt-archive, #dt-item) { padding-inline: 16px; }
	:is(#dt-archive, #dt-item) .dt-only-phone { display: revert !important; }
	:is(#dt-archive, #dt-item) .dt-not-phone { display: none !important; }
	:is(#dt-archive, #dt-item) .dt-tag { padding: 6px 12px; }
	:is(#dt-archive, #dt-item) .dt-state { padding: var(--s6) var(--s4); }
}