/*
* TCguitar Child — Components
* Nav, footer, buttons, article components (answer, takeaways, keyfacts,
* callouts, pullquote, method_box, table, faq, related, toc, author endcard,
* affiliate disclosure, chips, pagination, filter-bar, heritage-strip).
*/
/* ─── Wrap ──────────────────────────────────────────────────────────────── */
html, body, body.tc-root {
background: var(--bg);
color: var(--text);
}
/* Defeat Kadence's inline customizer h1-h6 overrides (heads loaded last in ). */
body.tc-root h1,
body.tc-root h2,
body.tc-root h3,
body.tc-root h4,
body.tc-root h5,
body.tc-root h6,
.tc-main h1,
.tc-main h2,
.tc-main h3,
.tc-main h4 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.015em;
}
/* Body-level typography enforcement */
body.tc-root,
.tc-main,
.tc-main p,
.tc-main li {
font-family: var(--font-body);
}
/* Footer headings opt-out of Cormorant (they use Inter mono-style caps) */
.tc-footer h5,
.tc-footer-col h5 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; }
.tc-root {
min-height: 100vh;
background: var(--bg);
color: var(--text);
}
.tc-main { background: var(--bg); }
body .tc-article-body { background: var(--bg); }
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.skip-link:focus {
clip: auto;
clip-path: none;
height: auto;
width: auto;
z-index: 100000;
background: var(--accent);
color: #fff;
padding: 12px 16px;
top: 8px;
left: 8px;
position: absolute;
}
/* ─── Logo ──────────────────────────────────────────────────────────────── */
.tc-logo {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
font-size: 24px;
color: var(--text);
}
.tc-logo-mark {
background: var(--text);
color: var(--bg);
padding: 2px 6px;
border-radius: 3px;
font-style: italic;
margin-right: 4px;
}
.tc-logo:hover { color: var(--text); }
/* ─── Nav ───────────────────────────────────────────────────────────────── */
.tc-nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--border);
}
.tc-nav-inner {
max-width: var(--max-w);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px var(--pad-x);
position: relative;
}
.tc-nav-links {
display: flex;
gap: 26px;
align-items: center;
font-size: 13px;
font-weight: 500;
}
.tc-nav-links a {
color: var(--text-muted);
padding: 6px 0;
border-bottom: 1.5px solid transparent;
transition: color .15s, border-color .15s;
}
.tc-nav-links a:hover { color: var(--text); }
.tc-nav-links a.is-active {
color: var(--text);
border-bottom-color: var(--accent);
}
.tc-nav button.tc-nav-toggle,
.tc-nav .tc-nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border);
border-radius: 3px;
padding: 6px 10px;
cursor: pointer;
color: var(--text);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: none;
text-shadow: none;
font-weight: 500;
line-height: 1.2;
}
.tc-nav button.tc-nav-toggle:hover,
.tc-nav .tc-nav-toggle:hover { border-color: var(--text); background: transparent; color: var(--text); }
/* ─── Buttons ───────────────────────────────────────────────────────────── */
.tc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
transition: transform .12s, background .15s, color .15s, border-color .15s;
cursor: pointer;
border: 1px solid transparent;
}
.tc-btn--primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.tc-btn--primary:hover {
background: var(--accent-soft);
border-color: var(--accent-soft);
color: #fff;
}
.tc-btn--ghost {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.tc-btn--ghost:hover { border-color: var(--text); color: var(--text); }
/* ─── Footer ────────────────────────────────────────────────────────────── */
.tc-footer {
background: var(--text);
color: color-mix(in oklab, var(--bg) 85%, transparent);
margin-top: 0;
}
.tc-footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 64px var(--pad-x) 40px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
}
.tc-footer-brand .tc-logo-mark { background: var(--bg); color: var(--text); }
.tc-footer-brand .tc-logo-word { color: var(--bg); }
.tc-footer-brand p {
font-size: 13px;
line-height: 1.6;
color: color-mix(in oklab, var(--bg) 60%, transparent);
margin: 20px 0 0;
max-width: 340px;
}
.tc-footer-col h5,
.tc-footer h5 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8b294;
margin: 4px 0 18px;
font-family: var(--font-body);
}
.tc-footer-col a,
.tc-footer a {
display: block;
font-size: 14px;
color: #e8dcc4;
padding: 5px 0;
transition: color .15s;
border-bottom: none;
text-decoration: none;
}
.tc-footer-col a:hover,
.tc-footer a:hover { color: #fff; }
.tc-footer-bottom {
border-top: 1px solid color-mix(in oklab, var(--bg) 12%, transparent);
background: var(--text);
}
.tc-footer-bottom-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 22px var(--pad-x);
font-size: 12px;
color: color-mix(in oklab, var(--bg) 50%, transparent);
}
/* ─── Breadcrumb ────────────────────────────────────────────────────────── */
.tc-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-bottom: 24px;
}
.tc-breadcrumb a { transition: color .15s; }
.tc-breadcrumb a:hover { color: var(--text); }
.tc-breadcrumb span[aria-hidden="true"] { opacity: 0.4; }
/* ─── AnswerBlock ──────────────────────────────────────────────────────── */
.tc-answer-block {
margin: 0 0 28px;
padding: 24px 28px;
background: var(--accent-bg);
border-left: 3px solid var(--accent);
border-radius: 2px;
}
.tc-answer-block p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(20px, 1.9vw, 24px);
font-style: italic;
line-height: 1.4;
color: var(--text);
text-wrap: balance;
}
/* ─── KeyTakeaways ─────────────────────────────────────────────────────── */
.tc-takeaways {
margin: 0 0 32px;
padding: 24px 28px 26px;
background: color-mix(in oklab, var(--surface) 50%, var(--bg));
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 2px;
}
.tc-takeaways-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.tc-takeaways ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.tc-takeaways li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
font-size: 16px;
line-height: 1.55;
color: var(--text);
align-items: baseline;
}
.tc-takeaways li strong {
color: var(--text);
font-weight: 600;
}
.tc-takeaways-num {
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
font-feature-settings: "lnum";
}
/* ─── KeyFacts ─────────────────────────────────────────────────────────── */
.tc-keyfacts {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 22px 26px 24px;
margin: 32px 0;
}
.tc-keyfacts-title {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.tc-keyfacts ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.tc-keyfacts-item {
display: flex;
gap: 12px;
font-size: 14px;
line-height: 1.5;
color: var(--text);
}
.tc-keyfacts-dot {
width: 9px;
height: 9px;
border-radius: 50%;
margin-top: 7px;
flex-shrink: 0;
box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 8%, transparent);
}
.tc-keyfacts-item[data-state="ok"] .tc-keyfacts-dot { background: #4a7a4a; }
.tc-keyfacts-item[data-state="warn"] .tc-keyfacts-dot { background: #a86a1b; }
.tc-keyfacts-item[data-state="alert"] .tc-keyfacts-dot { background: var(--accent); }
/* ─── Pipeline-emitted Quick Reference block (.tcg-quick-ref.tcg-quick-ref) ──────────
* Pipeline writes raw
* into post_content. Style both emoji-legacy 🟢 … and the
* cleaner form so old and new posts render identically. */
.tcg-quick-ref.tcg-quick-ref {
background: var(--surface, #fbf6ea);
border: 1px solid var(--border, rgba(41, 38, 27, 0.10));
border-left: 3px solid var(--accent, #7a2a20);
border-radius: 2px;
padding: 22px 26px 24px;
margin: 32px 0;
font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
}
.tcg-quick-ref.tcg-quick-ref > strong {
display: block;
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent, #7a2a20);
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border, rgba(41, 38, 27, 0.10));
}
.tcg-quick-ref.tcg-quick-ref ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.tcg-quick-ref.tcg-quick-ref li {
font-size: 15px;
line-height: 1.55;
color: var(--text, #29261b);
margin: 0;
padding-left: 0;
}
.tcg-quick-ref.tcg-quick-ref li[data-state] {
display: flex;
align-items: baseline;
gap: 12px;
}
.tcg-quick-ref.tcg-quick-ref li[data-state]::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 7px;
box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 6%, transparent);
}
.tcg-quick-ref.tcg-quick-ref li[data-state="ok"]::before { background: #4a7a4a; }
.tcg-quick-ref.tcg-quick-ref li[data-state="warn"]::before { background: #a86a1b; }
.tcg-quick-ref.tcg-quick-ref li[data-state="alert"]::before { background: var(--accent, #7a2a20); }
/* ─── Callouts ────────────────────────────────────────────────────────── */
.tc-callout {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
padding: 18px 22px;
margin: 28px 0;
border-left: 3px solid var(--accent);
background: color-mix(in oklab, var(--accent-bg) 70%, var(--bg));
border-radius: 2px;
}
.tc-callout--watch {
border-left-color: #a86a1b;
background: color-mix(in oklab, #f1e7d1 65%, var(--bg));
}
.tc-callout--myth {
border-left-color: #6b6354;
background: color-mix(in oklab, var(--surface) 70%, var(--bg));
}
.tc-callout-label {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
padding-top: 4px;
}
.tc-callout--watch .tc-callout-label { color: #a86a1b; }
.tc-callout--myth .tc-callout-label { color: var(--text-muted); }
.tc-callout-body {
font-size: 16px;
line-height: 1.6;
color: var(--text);
}
.tc-callout-body p { margin: 0 0 0.6em; }
.tc-callout-body p:last-child { margin-bottom: 0; }
/* ─── Heritage callout (in-article) ────────────────────────────────────── */
.tc-heritage-callout {
margin: 36px 0;
padding: 28px 32px;
background: color-mix(in oklab, var(--surface) 60%, var(--accent-bg));
border-top: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
border-radius: 2px;
}
.tc-heritage-callout h3 {
font-family: var(--font-display);
font-size: 22px;
margin: 0 0 12px;
color: var(--text);
}
.tc-heritage-callout p {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 0.8em;
}
.tc-heritage-callout p:last-child { margin-bottom: 0; }
/* ─── Method box ───────────────────────────────────────────────────────── */
.tc-method-box {
margin: 28px 0;
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
}
.tc-method-box-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.tc-method-box-body {
font-size: 15px;
line-height: 1.6;
}
.tc-method-box-body p { margin: 0 0 0.7em; }
.tc-method-box-body p:last-child { margin-bottom: 0; }
/* ─── Pull quote ───────────────────────────────────────────────────────── */
.tc-pullquote {
margin: 36px 0;
padding: 24px 0 24px 28px;
border-left: 3px solid var(--accent);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.35;
color: var(--text);
text-wrap: balance;
}
.tc-pullquote p { margin: 0 0 14px; }
.tc-pullquote cite {
display: block;
font-family: var(--font-body);
font-style: normal;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-muted);
}
/* ─── Affiliate disclosure ─────────────────────────────────────────────── */
.tc-affiliate-disclosure {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
padding: 14px 18px;
margin: 24px 0;
border-radius: 2px;
}
.tc-affiliate-disclosure strong { color: var(--text); }
/* ─── Table ────────────────────────────────────────────────────────────── */
.tc-table-wrap {
margin: 28px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: 2px;
max-width: 100%;
}
.tc-table,
.tc-table-wrap > table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: var(--surface);
}
/* Base styling for raw inside post content (pipeline writes naked tables). */
.tc-table-wrap > table th,
.tc-table-wrap > table td {
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.tc-table-wrap > table th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
background: color-mix(in oklab, var(--surface) 60%, var(--bg));
border-bottom: 1.5px solid var(--border);
}
.tc-table th,
.tc-table td {
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.tc-table tr:last-child td { border-bottom: 0; }
.tc-table th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
background: color-mix(in oklab, var(--surface) 60%, var(--bg));
border-bottom: 1.5px solid var(--border);
}
.tc-table tbody tr:hover {
background: color-mix(in oklab, var(--accent-bg) 30%, var(--surface));
}
/* ─── FAQ accordion ────────────────────────────────────────────────────── */
.tc-faq {
border-top: 1px solid var(--border);
margin-top: 56px;
}
.tc-faq > h2.tc-h2 {
margin-top: 24px;
}
.tc-faq details {
border-bottom: 1px solid var(--border);
}
.tc-faq summary {
list-style: none;
cursor: pointer;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
transition: color .15s;
}
.tc-faq summary::-webkit-details-marker { display: none; }
.tc-faq summary:hover .tc-faq-q { color: var(--accent); }
.tc-faq-q {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.3;
color: var(--text);
letter-spacing: -0.005em;
text-wrap: balance;
transition: color .15s;
}
.tc-faq-chev {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
color: var(--text-muted);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .2s, color .15s;
}
.tc-faq details[open] .tc-faq-chev {
transform: rotate(45deg);
color: var(--accent);
}
.tc-faq-a {
padding: 0 50px 24px 0;
font-size: 15px;
line-height: 1.65;
color: var(--text-muted);
}
.tc-faq-a p { margin: 0 0 0.8em; }
/* ─── TOC sticky sidebar ───────────────────────────────────────────────── */
.tc-toc-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.tc-toc ol {
list-style: none;
padding: 0;
margin: 0;
}
.tc-toc li { display: block; }
.tc-toc a {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
padding: 8px 0 8px 12px;
font-size: 13px;
line-height: 1.35;
color: var(--text-muted);
border-left: 2px solid transparent;
margin-left: -14px;
transition: color .15s, border-color .15s;
}
.tc-toc a:hover { color: var(--text); }
.tc-toc li.is-active a {
color: var(--text);
border-left-color: var(--accent);
font-weight: 600;
}
.tc-toc-num {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.tc-toc li.is-active .tc-toc-num { color: var(--accent); }
/* ─── TOC inline (mobile / no-sidebar) ─────────────────────────────────── */
.tc-toc-inline {
margin: 0 0 40px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 4px;
}
.tc-toc-inline summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.tc-toc-inline summary::-webkit-details-marker { display: none; }
.tc-toc-inline summary:hover { color: var(--text); }
.tc-toc-inline-chev {
font-family: var(--font-display);
font-size: 18px;
color: var(--text-muted);
font-weight: 400;
transition: transform .2s;
}
.tc-toc-inline[open] .tc-toc-inline-chev { transform: rotate(45deg); }
.tc-toc-inline ol {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--border);
}
.tc-toc-inline li { border-bottom: 1px solid var(--border); }
.tc-toc-inline li:last-child { border-bottom: 0; }
.tc-toc-inline a {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 12px 18px;
font-size: 14px;
color: var(--text);
}
.tc-toc-inline a:hover { background: var(--accent-bg); color: var(--accent); }
/* When sidebar TOC is visible, hide the inline TOC */
.tc-article-body.with-sidebar .tc-toc-inline { display: none; }
/* ─── Author endcard ───────────────────────────────────────────────────── */
.tc-article-author {
margin: 72px 0 0;
padding: 32px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.tc-author {
display: flex;
flex-direction: column;
gap: 18px;
}
.tc-author-header {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
}
.tc-author-photo {
position: relative;
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
background: var(--accent-bg);
flex-shrink: 0;
}
.tc-author-photo-bg {
position: absolute;
inset: 0;
background: radial-gradient(
80% 60% at 50% 35%,
color-mix(in oklab, var(--accent) 35%, var(--bg)) 0%,
color-mix(in oklab, var(--accent) 70%, var(--text) 30%) 100%
);
}
.tc-author-initials {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
color: var(--bg);
letter-spacing: -0.01em;
}
.tc-author-eyebrow {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.tc-author-name {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.tc-author-role {
font-size: 12px;
color: var(--text-muted);
line-height: 1.35;
}
.tc-author-bio {
font-size: 14.5px;
line-height: 1.6;
color: var(--text);
margin: 0;
max-width: 640px;
text-wrap: pretty;
}
.tc-author-link {
font-size: 13px;
font-weight: 600;
color: var(--accent);
border-bottom: 1.5px solid var(--accent);
align-self: flex-start;
padding-bottom: 2px;
}
/* ─── Related grid ─────────────────────────────────────────────────────── */
.tc-related {
margin-top: 72px;
}
.tc-section-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.tc-related-title {
font-family: var(--font-display);
font-size: clamp(28px, 2.8vw, 36px);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.012em;
margin: 0 0 32px;
}
.tc-related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.tc-related-card {
display: flex;
flex-direction: column;
padding: 22px 22px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tc-related-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.20);
}
.tc-related-card-kicker {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.tc-related-card-title {
font-family: var(--font-display);
font-size: 19px;
line-height: 1.2;
font-weight: 500;
margin: 0 0 8px;
text-wrap: balance;
}
.tc-related-card-sub {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 0 0 12px;
flex: 1;
}
.tc-related-card-cta {
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
}
/* ─── Category chips ───────────────────────────────────────────────────── */
.tc-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tc-chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 10px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 14px;
font-weight: 500;
transition: background .15s, border-color .15s, color .15s;
}
.tc-chip:hover {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent);
}
.tc-chip-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.tc-chip:hover .tc-chip-count { color: var(--accent); }
/* ─── Filter bar (BlogIndex) ───────────────────────────────────────────── */
.tc-filter-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 16px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}
.tc-filter-bar a {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: 100px;
transition: color .15s, border-color .15s, background .15s;
}
.tc-filter-bar a:hover {
color: var(--accent);
border-color: var(--accent);
}
.tc-filter-bar a.is-active {
color: var(--accent);
background: var(--accent-bg);
border-color: var(--accent);
}
/* ─── Pagination ───────────────────────────────────────────────────────── */
.tc-pagination {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
margin: 64px 0 24px;
}
.tc-pagination-info {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.tc-pagination-pages {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.tc-pagination .page-numbers,
.tc-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-muted);
background: transparent;
border: 1px solid var(--border);
border-radius: 2px;
transition: color .15s, border-color .15s, background .15s;
}
.tc-pagination .page-numbers:hover,
.tc-page-btn:hover {
color: var(--accent);
border-color: var(--accent);
}
.tc-pagination .page-numbers.current,
.tc-page-btn.is-current,
.tc-page-btn.is-active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.tc-pagination .page-numbers.dots {
border-color: transparent;
}
.tc-page-btn.is-disabled,
.tc-page-btn[disabled] {
opacity: 0.4;
pointer-events: none;
}
/* ─── Heritage strip (dark band) ───────────────────────────────────────── */
.tc-heritage {
background: var(--text);
color: color-mix(in oklab, var(--bg) 92%, transparent);
margin-top: var(--gap-section);
border-top: 1px solid var(--border);
}
.tc-heritage-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(48px, 5.5vw, 72px) var(--pad-x);
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 56px;
align-items: center;
}
.tc-heritage-head { max-width: 460px; }
.tc-heritage-head .tc-section-eyebrow {
color: color-mix(in oklab, var(--accent) 80%, var(--bg));
margin-bottom: 12px;
}
.tc-heritage-title {
font-family: var(--font-display);
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.15;
font-weight: 500;
color: var(--bg);
margin: 0 0 14px;
text-wrap: balance;
}
.tc-heritage-title em {
color: color-mix(in oklab, var(--accent) 75%, var(--bg));
font-style: italic;
}
.tc-heritage-lead {
font-size: 14px;
line-height: 1.6;
color: color-mix(in oklab, var(--bg) 70%, transparent);
margin: 0;
}
.tc-heritage-links {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: color-mix(in oklab, var(--bg) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--bg) 12%, transparent);
}
.tc-heritage-tile {
display: flex;
flex-direction: column;
padding: 18px 16px 16px;
background: var(--text);
transition: background .15s;
min-height: 130px;
}
.tc-heritage-tile:hover {
background: color-mix(in oklab, var(--bg) 8%, var(--text));
}
.tc-heritage-tile-eyebrow {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklab, var(--bg) 50%, transparent);
margin-bottom: 10px;
}
.tc-heritage-tile-title {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.18;
font-weight: 500;
color: var(--bg);
margin: 0 0 auto;
text-wrap: balance;
}
.tc-heritage-tile-cta {
font-size: 11.5px;
font-weight: 600;
color: color-mix(in oklab, var(--accent) 75%, var(--bg) 30%);
margin-top: 18px;
transition: color .15s;
}
.tc-heritage-tile:hover .tc-heritage-tile-cta { color: var(--bg); }
/* ─── Article hero (single.php + page.php + cheatsheet/contact) ────────── */
.tc-article-hero {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 56px);
}
.tc-article-hero-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--pad-x);
}
.tc-article-kicker {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin: 16px 0 18px;
}
.tc-article-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(36px, 5.5vw, 64px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 20px;
color: var(--text);
text-wrap: balance;
}
.tc-article-title em {
font-style: italic;
color: var(--accent);
}
.tc-article-deck {
font-family: var(--font-body);
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 24px;
max-width: 720px;
text-wrap: pretty;
}
.tc-editorial-byline {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--text-muted);
padding-top: 18px;
border-top: 1px solid var(--border);
}
.tc-editorial-byline strong { color: var(--text); font-weight: 600; }
.tc-editorial-byline .meta-sep { opacity: 0.5; }
.tc-editorial-byline time { color: var(--text); }
/* ─── Article body layout (used by single.php in Phase 3) ──────────────── */
.tc-article-body {
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(56px, 7vw, 96px);
}
.tc-article-body.with-sidebar {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
.tc-sidebar {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 32px;
max-height: calc(100vh - 110px);
overflow-y: auto;
padding-right: 4px;
}
.tc-content { max-width: 720px; min-width: 0; }
.tc-article-body.no-sidebar .tc-content { margin: 0 auto; }
/* ─── Prose (article body) ─────────────────────────────────────────────── */
.tc-prose {
font-size: 17px;
line-height: 1.7;
color: var(--text);
}
.tc-prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.tc-prose h2 {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 36px);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.012em;
margin: 56px 0 22px;
scroll-margin-top: 80px;
text-wrap: balance;
}
.tc-prose h2:first-child { margin-top: 0; }
.tc-prose h3 {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.25;
font-weight: 500;
margin: 32px 0 12px;
}
.tc-prose ul,
.tc-prose ol {
margin: 0 0 1.5em;
padding-left: 22px;
}
.tc-prose li {
margin-bottom: 8px;
padding-left: 6px;
}
.tc-prose ol li::marker {
color: var(--accent);
font-family: var(--font-mono);
font-size: 0.85em;
font-weight: 600;
}
.tc-prose ul li::marker { color: var(--accent); }
.tc-inline-link {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
transition: border-color .15s;
}
.tc-inline-link:hover {
border-bottom-color: var(--accent);
}
.tc-prose a:not(.tc-aff):not(.tc-author-link):not(.tc-tag) {
color: var(--accent);
border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
transition: border-color .15s;
}
.tc-prose a:not(.tc-aff):hover { border-bottom-color: var(--accent); }
/* ─── Affiliate links (inline) ─────────────────────────────────────────── */
.tc-aff {
color: var(--accent);
border-bottom: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
padding-bottom: 1px;
transition: border-color .15s;
}
.tc-aff:hover { border-bottom-style: solid; border-color: var(--accent); }
/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.tc-nav-links { gap: 18px; font-size: 12.5px; }
.tc-article-body.with-sidebar { grid-template-columns: 200px 1fr; gap: 48px; }
}
@media (max-width: 960px) {
.tc-nav button.tc-nav-toggle,
.tc-nav .tc-nav-toggle { display: inline-block; }
.tc-nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 8px var(--pad-x) 16px;
font-size: 15px;
}
.tc-nav-links.is-open { display: flex; }
.tc-nav-links a {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.tc-nav-links a:last-child { border-bottom: 0; }
.tc-article-body.with-sidebar { grid-template-columns: 1fr; }
.tc-sidebar { display: none; }
.tc-article-body.with-sidebar .tc-toc-inline { display: block; }
.tc-related-grid { grid-template-columns: 1fr; }
.tc-heritage-inner { grid-template-columns: 1fr; gap: 28px; }
.tc-heritage-head { max-width: none; }
.tc-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 740px) {
.tc-heritage-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.tc-heritage-links { grid-template-columns: 1fr; }
.tc-footer-inner { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================================
* Homepage (front-page)
* ============================================================ */
/* ─── Split hero ───────────────────────────────────────────── */
.tc-hero {
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 72px var(--pad-x) 56px;
}
.tc-hero-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.tc-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.tc-hero-eyebrow .tc-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
display: inline-block;
}
.tc-hero-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.015em;
margin: 0 0 18px;
color: var(--text);
}
.tc-hero-title em {
font-style: italic;
color: var(--accent);
}
.tc-hero-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 28px;
max-width: 56ch;
}
.tc-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.tc-hero-facts {
list-style: none;
padding: 0; margin: 0;
display: flex;
gap: 36px;
flex-wrap: wrap;
border-top: 1px solid var(--border);
padding-top: 22px;
}
.tc-hero-facts li {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 1.3;
color: var(--text-muted);
}
.tc-hero-facts strong {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 26px;
line-height: 1;
color: var(--text);
margin-bottom: 4px;
}
.tc-hero-feature {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
color: inherit;
text-decoration: none;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tc-hero-feature:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
box-shadow: 0 12px 28px -16px rgba(0,0,0,0.18);
}
.tc-hero-feature-media {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--surface)), var(--surface));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tc-hero-feature-media img,
.tc-hero-feature-media .tc-card-fallback-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-hero-feature-media::after {
content: attr(data-label);
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 1.3;
color: var(--text-muted);
letter-spacing: 0.04em;
text-align: center;
padding: 0 16px;
}
.tc-hero-feature-badge {
position: absolute;
top: 16px; left: 16px;
background: var(--accent);
color: #fff;
font-family: var(--font-body);
font-weight: 600;
font-size: 10.5px;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 999px;
}
.tc-hero-feature-body { padding: 28px 28px 32px; }
.tc-hero-feature-kicker {
display: flex;
gap: 8px;
align-items: center;
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 1.3;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.tc-hero-feature-kicker .tc-kicker {
color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tc-hero-feature-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1.18;
margin: 0 0 14px;
color: var(--text);
}
.tc-hero-feature-excerpt {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 18px;
}
.tc-hero-feature-cta {
color: var(--accent);
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
line-height: 1;
letter-spacing: 0.02em;
}
/* ─── Pillar block (homepage) ─────────────────────────────── */
.tc-pillar-block {
padding: 80px var(--pad-x);
background: color-mix(in oklab, var(--accent) 6%, var(--surface));
border-bottom: 1px solid var(--border);
}
.tc-pillar-block-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 180px 1fr;
gap: 56px;
align-items: start;
}
.tc-pillar-block-mark-num {
font-family: var(--font-display);
font-weight: 500;
font-size: 84px;
line-height: 1;
color: var(--accent);
line-height: 0.9;
}
.tc-pillar-block-mark-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 8px;
}
.tc-pillar-block-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.tc-pillar-block-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 44px;
line-height: 1.08;
letter-spacing: -0.012em;
margin: 0 0 16px;
color: var(--text);
}
.tc-pillar-block-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 28px;
max-width: 62ch;
}
.tc-pillar-block-features {
list-style: none;
padding: 0; margin: 0 0 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
}
.tc-pillar-block-features li {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--text-muted);
display: flex;
gap: 8px;
}
.tc-pillar-block-features li span:first-child {
color: var(--accent);
font-weight: 700;
}
.tc-pillar-block-actions {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
.tc-pillar-block-secondary {
text-decoration: none;
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: var(--text-muted);
display: flex;
flex-direction: column;
}
.tc-pillar-block-secondary-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.04em; }
.tc-pillar-block-secondary-link { color: var(--accent); font-weight: 600; }
/* ─── Generic section header (homepage + blog index) ─────── */
.tc-section {
padding: 72px var(--pad-x);
border-bottom: 1px solid var(--border);
}
.tc-section-head {
max-width: 1240px;
margin: 0 auto 36px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: end;
}
.tc-section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.012em;
margin: 6px 0 0;
color: var(--text);
}
.tc-section-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
max-width: 56ch;
}
.tc-section-link {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1.3;
color: var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
}
.tc-section-link:hover { text-decoration: underline; }
/* ─── Model guides grid (homepage) ───────────────────────── */
.tc-models { background: var(--surface); }
.tc-model-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
}
.tc-model-card {
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
color: inherit;
text-decoration: none;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tc-model-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
box-shadow: 0 10px 24px -14px rgba(0,0,0,0.16);
}
.tc-model-card-media {
aspect-ratio: 4 / 3;
background: linear-gradient(140deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 1.4;
text-align: center;
padding: 0;
overflow: hidden;
}
.tc-model-card-media img,
.tc-model-card-media .tc-card-fallback-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-model-card-body {
padding: 18px 18px 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tc-model-card-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 10.5px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.tc-model-card-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.18;
margin: 0 0 8px;
color: var(--text);
}
.tc-model-card-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
margin: 0 0 14px;
flex-grow: 1;
}
.tc-model-card-cta {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.02em;
}
.tc-model-foot {
max-width: 1240px;
margin: 36px auto 0;
text-align: center;
}
/* ─── Latest posts (homepage blog grid) ──────────────────── */
.tc-latest { background: var(--bg); }
.tc-blog-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.tc-blog-grid-lead {
grid-column: span 3;
}
.tc-blog-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
color: inherit;
text-decoration: none;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tc-blog-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
box-shadow: 0 10px 24px -14px rgba(0,0,0,0.16);
}
.tc-blog-card-media {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface));
overflow: hidden;
}
.tc-blog-card-media img,
.tc-blog-card-media .tc-card-fallback-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-blog-card-lead .tc-blog-card-media { aspect-ratio: 16 / 7; }
.tc-blog-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.tc-blog-card-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 10.5px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.tc-blog-card-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.18;
margin: 0 0 10px;
color: var(--text);
}
.tc-blog-card-lead .tc-blog-card-title { font-size: 32px; }
.tc-blog-card-excerpt {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 14px;
flex-grow: 1;
}
.tc-blog-card-meta {
display: flex;
gap: 8px;
font-family: var(--font-body);
font-weight: 400;
font-size: 12.5px;
line-height: 1.3;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.tc-blog-card-meta .tc-meta-dot { opacity: 0.5; }
/* ─── Categories (homepage) ──────────────────────────────── */
.tc-categories { background: var(--surface); }
.tc-categories .tc-chip-row {
max-width: 1240px;
margin: 0 auto;
gap: 12px;
}
/* ============================================================
* Blog index (home.php)
* ============================================================ */
.tc-index-header {
padding: 64px var(--pad-x) 32px;
background: var(--bg);
}
.tc-index-header-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 56px;
align-items: end;
}
.tc-index-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.tc-index-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 48px;
line-height: 1.08;
letter-spacing: -0.012em;
margin: 0 0 16px;
color: var(--text);
}
.tc-index-title em { font-style: italic; color: var(--accent); }
.tc-index-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: 17px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
max-width: 58ch;
}
.tc-index-stats {
display: flex;
gap: 28px;
}
.tc-index-stats > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.tc-index-stats strong {
font-family: var(--font-display);
font-weight: 600;
font-size: 32px;
line-height: 1;
color: var(--text);
margin-bottom: 4px;
}
.tc-index-stats span {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.tc-index-section {
padding: 36px var(--pad-x) 56px;
background: var(--bg);
}
.tc-index-featured {
max-width: 1240px;
margin: 0 auto 40px;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.tc-index-featured-media {
display: block;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface));
overflow: hidden;
}
.tc-index-featured-media img,
.tc-index-featured-media .tc-card-fallback-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-index-featured-body { padding: 28px 32px 36px; }
.tc-index-featured-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.tc-index-featured-kicker {
display: flex;
gap: 8px;
align-items: center;
font-family: var(--font-body);
font-weight: 400;
font-size: 12.5px;
line-height: 1.3;
color: var(--text-muted);
margin-bottom: 14px;
}
.tc-index-featured-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 30px;
line-height: 1.15;
margin: 0 0 14px;
color: var(--text);
}
.tc-index-featured-title a {
color: inherit;
text-decoration: none;
}
.tc-index-featured-title a:hover { color: var(--accent); }
.tc-index-featured-excerpt {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 18px;
max-width: 56ch;
}
.tc-index-featured-cta {
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.02em;
text-decoration: none;
}
.tc-index-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.tc-index-empty {
max-width: 1240px;
margin: 0 auto;
padding: 60px 0;
text-align: center;
color: var(--text-muted);
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
/* ============================================================
* Cheatsheet (page-cheatsheet.php) — DatingCheatsheet.html prototype
* ============================================================ */
.tc-cheat-hero {
padding: clamp(40px, 5.5vw, 72px) var(--pad-x) clamp(28px, 3vw, 40px);
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, var(--accent-bg, color-mix(in oklab, var(--accent) 16%, var(--bg))) 0%, transparent 100%);
}
.tc-cheat-hero-inner {
max-width: 1320px;
margin: 0 auto;
}
.tc-cheat-kicker {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
padding-bottom: 8px;
margin: 20px 0 16px;
border-bottom: 1.5px solid var(--accent);
}
.tc-cheat-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.02;
letter-spacing: -0.018em;
margin: 0 0 18px;
color: var(--text);
text-wrap: balance;
}
.tc-cheat-deck {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.45;
color: var(--text);
margin: 0;
max-width: 720px;
text-wrap: pretty;
}
.tc-cheat-section {
max-width: 1320px;
margin: 0 auto;
padding: clamp(48px, 5vw, 72px) var(--pad-x);
border-bottom: 1px solid var(--border);
}
.tc-cheat-section:last-of-type { border-bottom: 0; }
.tc-cheat-section-head {
max-width: 920px;
margin-bottom: 32px;
}
.tc-cheat-section-eyebrow {
font-family: var(--font-mono);
font-weight: 600;
font-size: 10.5px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.tc-cheat-section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.012em;
margin: 0;
color: var(--text);
text-wrap: balance;
}
.tc-cheat-section-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--text-muted);
margin: 14px 0 0;
max-width: 640px;
text-wrap: pretty;
}
/* Era cards grid */
.tc-cheat-era-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.tc-cheat-era-card {
padding: 22px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--accent);
border-radius: 2px;
}
.tc-cheat-era-card[data-tone="warm"] { border-top-color: #a86a1b; }
.tc-cheat-era-card[data-tone="cream"] { border-top-color: var(--accent); }
.tc-cheat-era-card[data-tone="dark"] { border-top-color: var(--text); }
.tc-cheat-era-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.tc-cheat-era-head h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.1;
margin: 0;
color: var(--text);
letter-spacing: -0.005em;
}
.tc-cheat-era-years {
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
line-height: 1.3;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.tc-cheat-era-body {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.5;
color: var(--text);
margin: 0;
text-wrap: pretty;
}
/* Year letter grid — 11 cells + 2-wide note cell = 13 columns */
.tc-cheat-year-grid {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: 4px;
}
.tc-cheat-year-cell {
padding: 14px 6px 10px;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 2px;
transition: transform .15s, border-color .15s, background .15s;
}
.tc-cheat-year-cell:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: color-mix(in oklab, var(--accent-bg, color-mix(in oklab, var(--accent) 16%, var(--bg))) 60%, var(--surface));
}
.tc-cheat-year-letter {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.01em;
}
.tc-cheat-year-num {
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
line-height: 1;
color: var(--text-muted);
margin-top: 6px;
letter-spacing: 0.02em;
}
.tc-cheat-year-cell--note {
grid-column: span 2;
background: color-mix(in oklab, var(--accent-bg, color-mix(in oklab, var(--accent) 16%, var(--bg))) 50%, var(--surface));
border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.tc-cheat-year-letter--small {
font-size: 16px;
padding-top: 8px;
}
/* Pre-1990 numbered list (Step 3) */
.tc-cheat-numbered {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.tc-cheat-numbered li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: var(--text);
align-items: baseline;
}
.tc-cheat-num {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1;
color: var(--accent);
padding-top: 4px;
letter-spacing: -0.02em;
font-feature-settings: "lnum";
}
.tc-cheat-num-body {
font-size: 14.5px;
line-height: 1.55;
color: var(--text);
}
.tc-cheat-num-body strong { color: var(--text); font-weight: 600; }
/* Split section — speaker codes table + circuit list */
.tc-cheat-section--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 4vw, 64px);
}
.tc-cheat-circuit-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px 22px;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.tc-cheat-circuit-list dt {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
padding-top: 4px;
white-space: nowrap;
}
.tc-cheat-circuit-list dd {
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.tc-cheat-circuit-prefixes { color: var(--text); font-weight: 500; }
.tc-cheat-circuit-examples {
font-size: 12.5px;
color: var(--text-muted);
font-style: italic;
}
/* AB763 note */
.tc-cheat-section--note { padding-top: 0; padding-bottom: clamp(36px, 4vw, 56px); }
.tc-cheat-note {
padding: 22px 26px;
background: color-mix(in oklab, var(--accent) 16%, var(--bg));
border-left: 3px solid var(--accent);
border-radius: 2px;
}
.tc-cheat-note-label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.tc-cheat-note p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--text);
margin: 0;
}
.tc-cheat-note strong { color: var(--text); font-weight: 600; }
/* Troubleshooting prose */
.tc-cheat-prose {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--text);
margin: 0 0 18px;
max-width: 760px;
text-wrap: pretty;
}
.tc-cheat-prose:last-of-type { margin-top: 18px; margin-bottom: 0; }
.tc-cheat-prose .tc-inline-link {
color: var(--accent);
border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}
.tc-cheat-prose .tc-inline-link:hover { border-bottom-color: var(--accent); }
.tc-cheat-mismatch-list {
list-style: none;
counter-reset: tcgmismatch;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 760px;
}
.tc-cheat-mismatch-list li {
counter-increment: tcgmismatch;
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--text);
}
.tc-cheat-mismatch-list li::before {
content: counter(tcgmismatch, decimal-leading-zero);
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--accent);
padding-top: 6px;
}
.tc-cheat-mismatch-list li strong { color: var(--text); font-weight: 600; }
/* CTA band at the bottom */
.tc-cheat-cta-band {
background: color-mix(in oklab, var(--accent) 16%, var(--bg));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.tc-cheat-cta-inner {
max-width: 1320px;
margin: 0 auto;
padding: clamp(40px, 4.5vw, 60px) var(--pad-x);
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
/* ============================================================
* Contact (page-contact.php)
* ============================================================ */
.tc-content--contact { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-x); }
.tc-contact-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 56px;
padding: 36px 0 64px;
}
.tc-contact-form-wrap { min-width: 0; }
/* Override WPForms Modern CSS-vars — its render uses these tokens internally. */
.tc-contact-form-wrap .wpforms-container {
--wpforms-field-background-color: var(--surface);
--wpforms-field-border-color: rgba(41, 38, 27, 0.18);
--wpforms-field-border-color-spare: rgba(41, 38, 27, 0.18);
--wpforms-field-text-color: var(--text);
--wpforms-field-border-radius: 4px;
--wpforms-field-border-size: 1px;
--wpforms-field-border-style: solid;
--wpforms-label-color: var(--text);
--wpforms-label-sublabel-color: var(--text-muted);
--wpforms-button-background-color: var(--accent);
--wpforms-button-border-color: var(--accent);
--wpforms-button-text-color: #ffffff;
--wpforms-button-border-radius: 2px;
--wpforms-page-break-color: var(--accent);
background: transparent;
}
.tc-contact-form-wrap .wpforms-form { background: transparent; }
.tc-contact-form-wrap .wpforms-field { padding: 0 0 18px; }
.tc-contact-form-wrap .wpforms-field-label,
.tc-contact-form-wrap .wpforms-field-sublabel,
.tc-contact-form-wrap label {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
display: block;
margin-bottom: 6px;
}
.tc-contact-form-wrap .wpforms-field-sublabel {
font-weight: 500;
font-size: 10px;
letter-spacing: 0.08em;
margin-top: 4px;
color: var(--text-muted);
}
.tc-contact-form-wrap .wpforms-field input[type=text],
.tc-contact-form-wrap .wpforms-field input[type=email],
.tc-contact-form-wrap .wpforms-field input[type=tel],
.tc-contact-form-wrap .wpforms-field input[type=url],
.tc-contact-form-wrap .wpforms-field textarea,
.tc-contact-form-wrap .wpforms-field select {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px 14px;
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.4;
color: var(--text);
transition: border-color .15s, background .15s;
box-shadow: none;
}
.tc-contact-form-wrap .wpforms-field input:focus,
.tc-contact-form-wrap .wpforms-field textarea:focus,
.tc-contact-form-wrap .wpforms-field select:focus {
outline: none;
border-color: var(--accent);
background: var(--bg);
}
.tc-contact-form-wrap .wpforms-field textarea { min-height: 160px; resize: vertical; }
.tc-contact-form-wrap .wpforms-submit-container { padding-top: 8px; }
.tc-contact-form-wrap button.wpforms-submit,
.tc-contact-form-wrap .wpforms-submit {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
border-radius: 2px;
padding: 14px 24px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1;
letter-spacing: 0.04em;
cursor: pointer;
transition: background .15s, transform .15s;
width: 100%;
display: block;
text-shadow: none;
box-shadow: none;
}
.tc-contact-form-wrap button.wpforms-submit:hover,
.tc-contact-form-wrap .wpforms-submit:hover {
background: color-mix(in oklab, var(--accent) 85%, black);
transform: translateY(-1px);
color: #fff;
}
.tc-contact-side { display: grid; gap: 22px; align-content: start; }
.tc-contact-side-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 20px 22px;
}
.tc-contact-side-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.tc-contact-side-block p,
.tc-contact-side-block ul {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
.tc-contact-side-block ul {
padding-left: 18px;
}
.tc-contact-side-block li { margin-bottom: 4px; }
/* ============================================================
* Responsive — Phase 4 sections
* ============================================================ */
@media (max-width: 1200px) {
.tc-hero-inner { gap: 36px; }
.tc-hero-title { font-size: 48px; }
.tc-model-grid { grid-template-columns: repeat(3, 1fr); }
.tc-cheat-year-grid { grid-template-columns: repeat(9, 1fr); }
.tc-index-stats { gap: 20px; }
}
@media (max-width: 960px) {
.tc-hero { padding: 48px var(--pad-x) 36px; }
.tc-hero-inner { grid-template-columns: 1fr; gap: 32px; }
.tc-hero-title { font-size: 40px; }
.tc-pillar-block { padding: 56px var(--pad-x); }
.tc-pillar-block-inner { grid-template-columns: 1fr; gap: 24px; }
.tc-pillar-block-mark-num { font-size: 56px; }
.tc-pillar-block-title { font-size: 34px; }
.tc-pillar-block-features { grid-template-columns: 1fr; }
.tc-section { padding: 56px var(--pad-x); }
.tc-section-head { grid-template-columns: 1fr; gap: 18px; }
.tc-section-title { font-size: 30px; }
.tc-model-grid { grid-template-columns: repeat(2, 1fr); }
.tc-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tc-blog-grid-lead { grid-column: span 2; }
.tc-blog-card-lead .tc-blog-card-title { font-size: 26px; }
.tc-index-header-inner { grid-template-columns: 1fr; gap: 24px; }
.tc-index-title { font-size: 36px; }
.tc-index-featured { grid-template-columns: 1fr; }
.tc-index-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tc-cheat-era-grid { grid-template-columns: repeat(2, 1fr); }
.tc-cheat-year-grid { grid-template-columns: repeat(6, 1fr); }
.tc-cheat-section--split { grid-template-columns: 1fr; gap: 40px; }
.tc-cheat-cta-inner { grid-template-columns: 1fr; gap: 20px; }
.tc-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 740px) {
.tc-hero-title { font-size: 32px; }
.tc-hero-feature-title { font-size: 22px; }
.tc-model-grid { grid-template-columns: 1fr; }
.tc-blog-grid { grid-template-columns: 1fr; }
.tc-blog-grid-lead { grid-column: 1; }
.tc-cheat-era-grid { grid-template-columns: 1fr; }
.tc-cheat-year-grid { grid-template-columns: repeat(4, 1fr); }
.tc-index-stats { flex-wrap: wrap; }
.tc-index-grid { grid-template-columns: 1fr; }
}
/* ====================================================
TCG content classes — used in pillar, model guides,
cheatsheet extended reference. Brand tokens (--accent
= dark red #7a2a20, --bg/--surface/--accent-bg = warm
cream family) from tokens.css.
==================================================== */
.tcg-tldr-callout {
background: var(--surface);
border-left: 4px solid var(--accent);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
border-radius: 4px;
}
.tcg-tldr-callout h3 {
margin-top: 0;
font-family: var(--font-display);
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
}
.tcg-tldr-callout p { margin-bottom: 0; }
.tcg-direct-answer {
background: var(--accent-bg);
border-left: 3px solid var(--accent);
padding: 0.85rem 1.1rem;
margin: 0.75rem 0 1.25rem;
font-size: 1rem;
}
.tcg-direct-answer strong { font-weight: 600; color: var(--accent); }
.tcg-quotable-fact {
background: var(--text);
color: var(--bg);
padding: 1.25rem 1.5rem;
margin: 1.75rem 0;
border-radius: 4px;
font-size: 0.98rem;
line-height: 1.6;
}
.tcg-quotable-fact strong {
display: block;
margin-bottom: 0.5rem;
color: var(--accent-soft);
font-weight: 600;
}
.tcg-heritage-callout {
background: var(--surface);
border: 1px solid var(--border);
padding: 1.25rem 1.5rem;
margin: 2rem 0;
border-radius: 4px;
}
.tcg-heritage-callout h3 {
margin-top: 0;
font-family: var(--font-display);
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
}
.tcg-cheatsheet-table,
.tcg-spec-table,
.tcg-speaker-table,
.tcg-tube-table,
.tcg-date-table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0 1.75rem;
font-size: 0.93rem;
}
.tcg-cheatsheet-table th,
.tcg-spec-table th,
.tcg-speaker-table th,
.tcg-tube-table th,
.tcg-date-table th {
background: var(--accent-bg);
padding: 0.6rem 0.75rem;
text-align: left;
border-bottom: 2px solid var(--accent);
font-weight: 600;
color: var(--text);
}
.tcg-cheatsheet-table td,
.tcg-spec-table td,
.tcg-speaker-table td,
.tcg-tube-table td,
.tcg-date-table td {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
/* Era badges represent literal amp finishes (tweed = yellow-tan
lacquer, blackface = black panel, silverface = silver-gray panel,
brown/blonde = brown tolex, woodie = light wood). Colors are
content-semantic, not brand-derived. */
.tcg-era-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 3px;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
background: var(--text-muted);
color: var(--bg);
}
.tcg-era-badge.blackface { background: #1a1a1a; color: #fff; }
.tcg-era-badge.silverface { background: #5a6a7a; color: #fff; }
.tcg-era-badge.tweed { background: #b8860b; color: #fff; }
.tcg-era-badge.brown { background: #6b4423; color: #fff; }
.tcg-era-badge.woodie { background: #8b7355; color: #fff; }
.tcg-takeaways {
background: var(--accent-bg);
border-left: 3px solid var(--accent);
padding: 1.1rem 1.4rem 1.1rem 2.5rem;
margin: 1.5rem 0;
border-radius: 4px;
list-style: disc;
}
.tcg-takeaways li { margin-bottom: 0.45rem; }
.tcg-takeaways li:last-child { margin-bottom: 0; }
.tcg-toc {
background: var(--surface);
border: 1px solid var(--border);
padding: 1rem 1.4rem 1rem 2.5rem;
margin: 1.5rem 0;
border-radius: 4px;
}
.tcg-toc h2 {
margin: 0 0 0.5rem -1.2rem;
font-family: var(--font-display);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
}
.tcg-toc ul { margin: 0; padding-left: 0; list-style: disc; }
.tcg-toc li { margin-bottom: 0.25rem; }
.tcg-meta-byline {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
font-size: 0.85rem;
color: var(--text-muted);
margin: 1rem 0 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.tcg-meta-byline .meta-sep { color: var(--border); }
.tcg-reading-time { font-style: italic; }
.tcg-method-box {
background: var(--surface);
border: 1px solid var(--border);
padding: 1rem 1.25rem;
margin: 1.25rem 0;
border-radius: 4px;
}
.tcg-method-box h4 {
margin-top: 0;
font-family: var(--font-display);
font-size: 1rem;
color: var(--accent);
}
.tcg-final-cta {
background: var(--accent-bg);
border: 1px solid var(--border);
padding: 1.5rem 1.5rem 1.75rem;
margin: 2rem 0;
border-radius: 4px;
text-align: center;
}
.tcg-final-cta p { margin: 0 0 0.5rem; }
.tcg-cta-primary {
display: inline-block;
background: var(--accent);
color: var(--bg);
padding: 0.65rem 1.5rem;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
margin-top: 0.5rem;
transition: background .15s;
}
.tcg-cta-primary:hover { background: var(--accent-soft); }