/* The Tonic. Inner pages are one parchment label card on apothecary green: Rye display type, red Besley capitals. */

/* Every rule is fenced to this look with :where(.tdc-look-tonic), which adds no weight to the selector. If a plugin ever
   pastes one look's styles into another look's page (Jetpack Boost's Critical CSS would), they match nothing there. */

:where(.tdc-look-tonic) a { color: #b3261e; }
:where(.tdc-look-tonic) a:hover { color: #1d1612; }

:where(.tdc-look-tonic) .tdc-main {
	--ink: #1d1612;
	--paper: #f4ead0;
	--accent: #b3261e;
	--soft: #c9bb96;
	--head-font: 'Rye', 'Besley', serif;
	--head-weight: 400;
	--head-track: 0.01em;
	--label-weight: 900;
	--label-size: 13px;
	--label-track: 0.18em;
	max-width: 1120px;
	margin: 28px auto 0;
	padding: clamp(34px, 6vw, 56px) clamp(26px, 6vw, 64px) clamp(34px, 5vw, 50px);
	background: var(--paper);
	border: 3px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: -12px;
}

:where(.tdc-look-tonic) .tdc-banner a { font-weight: 900; font-size: clamp(22px, 3vw, 34px); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; }
:where(.tdc-look-tonic) .tdc-banner span { font-family: 'Rye', serif; font-size: clamp(16px, 2vw, 21px); line-height: 1.2; }

:where(.tdc-look-tonic) .tdc-head { text-align: center; }
:where(.tdc-look-tonic) .tdc-title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
:where(.tdc-look-tonic) .tdc-content strong,
:where(.tdc-look-tonic) .tdc-content b { font-weight: 600; } /* the 900 cut is for labels; bold text in a post reads better at 600 */
:where(.tdc-look-tonic) .tdc-entry-title { font-size: clamp(21px, 2.4vw, 27px); }