/* Hallmark · v2.0.0 · redesign: full (system kept, chrome and templates rebuilt) · built: the project · genre: editorial · theme: brand (Throttle Buff: warm paper, ink, signal red oklch 50% 0.19 27; Bricolage Grotesque display, Source Serif 4 body) · job: read a buying guide, then buy through it · nav: edge-aligned wordmark, category menus, search (decided) · footer: a dark colophon, name and note over one row of links and socials (decided) · hero: Stage (/), Settled (posts) · signature: the index of every guide, filed by the gear it covers */
/* critique: Astra shipped ~470 KB of CSS and JS per page for a site that needs about 30; the chrome, cards and article page are rebuilt here on one container, one type pair and one accent, with no jQuery and no framework CSS. */
/*
Theme Name: Throttle Buff 26
Theme URI: https://throttlebuff.com/
Author: Throttle Buff
Description: A lean, fast editorial theme for Throttle Buff's motorcycle gear guides.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: throttle-buff-26
*/

:root{
	color-scheme: light;
	--space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
	--text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
	--text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
	--text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
	--text-article: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
	--text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
	--text-h2: clamp(1.75rem, 1.4vw + 1.1rem, 2.5rem);
	--text-h3: clamp(1.3rem, 0.7vw + 1rem, 1.7rem);
	--text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem);
	--text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
	--text-body: 1.125rem;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-micro: 120ms; --dur-short: 220ms;
	--container: 1440px; --gutter: 64px; --gap-columns: 32px; --measure: 68ch; --sidebar: 300px;
	--section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
	--z-dropdown: 100; --z-skip: 600;
	--color-paper: oklch(97% 0.007 86);
	--color-paper-2: oklch(94% 0.010 86);
	--color-paper-3: oklch(91% 0.012 84);
	--color-card: oklch(99.4% 0.003 86);
	--color-ink: oklch(16% 0.012 280);
	--color-ink-2: oklch(29% 0.011 280);
	--color-muted: oklch(48% 0.010 75);
	--color-rule: oklch(85% 0.009 85);
	--color-rule-2: oklch(64% 0.010 80);
	--color-accent: oklch(50% 0.190 27);
	--color-accent-ink: oklch(98% 0.005 88);
	--color-focus: oklch(52% 0.190 27);
	--color-on-ink: oklch(97% 0.007 86);
	--color-on-ink-2: oklch(82% 0.008 86);
	--color-on-ink-rule: oklch(36% 0.010 280);
	--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Source Serif 4", ui-serif, Georgia, serif;
	--rule-hair: 1px; --rule-heavy: 4px;
	--tracking-display: -0.012em;
}
@media (max-width: 60rem){ :root{ --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem){ :root{ --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ overflow-x: clip; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{ margin: 0; background: var(--color-paper); color: var(--color-ink-2); font: 400 var(--text-md)/1.55 var(--font-body); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
img, svg, video{ max-width: 100%; height: auto; }
img{ display: block; }
a{ color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover{ color: var(--color-accent); }
:focus-visible{ outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection{ background: color-mix(in oklab, var(--color-accent) 22%, transparent); }
h1, h2, h3, h4, h5, h6{ margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-synthesis: none; letter-spacing: var(--tracking-display); color: var(--color-ink); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
button, input, select, textarea{ font: inherit; color: inherit; }
.screen-reader-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip{ position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-skip); background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-sm) var(--space-md); }
.skip:focus{ top: var(--space-md); color: var(--color-on-ink); }
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- buttons ---------- */
.btn, .wp-block-button__link, .comment-form .submit{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-on-ink); font: 500 var(--text-md)/1.2 var(--font-display); font-variation-settings: "opsz" 12; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover, .wp-block-button__link:hover, .comment-form .submit:hover{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:active, .wp-block-button__link:active{ transform: translateY(1px); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.btn--secondary{ background: transparent; color: var(--color-ink); }
.btn--light{ background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }

/* ---------- masthead ---------- */
.masthead{ background: var(--color-paper); border-bottom: var(--rule-heavy) solid var(--color-ink); position: relative; z-index: var(--z-dropdown); }
.masthead__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 84px; }
.brand, .custom-logo-link{ flex: none; display: block; }
.brand img, .custom-logo-link img{ width: 220px; height: auto; }
.nav{ display: flex; align-items: center; gap: var(--space-md); }
.nav .menu, .nav .sub-menu{ list-style: none; margin: 0; padding: 0; }
.nav .menu{ display: flex; align-items: center; gap: var(--space-2xs); }
.nav .menu > li{ position: relative; }
.nav a{ display: block; padding: var(--space-sm) var(--space-sm); color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-display); font-variation-settings: "opsz" 12; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav .current-menu-item > a, .nav .current-menu-ancestor > a{ color: var(--color-accent); }
.nav .sub-menu{ position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--space-xs) 0; background: var(--color-paper); border-top: 2px solid var(--color-ink); box-shadow: 0 12px 32px color-mix(in oklab, var(--color-ink) 14%, transparent); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.nav .sub-menu a{ padding: var(--space-xs) var(--space-md); font-size: 0.95rem; white-space: normal; }
.nav .sub-menu .sub-menu{ top: calc(var(--space-xs) * -1); left: 100%; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .sub-menu li{ position: relative; }
.nav .menu-item-has-children > a::after{ content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav .sub-menu .menu-item-has-children > a::after{ transform: translateY(-1px) rotate(-45deg); }
.sub-toggle{ display: none; }
.nav-toggle{ display: none; }
.hsearch{ position: relative; }
.hsearch summary{ list-style: none; display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs); cursor: pointer; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); }
.hsearch summary::-webkit-details-marker{ display: none; }
.hsearch summary:hover{ color: var(--color-accent); }
.hsearch__label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hsearch__panel{ position: absolute; right: 0; top: calc(100% + var(--space-sm)); width: min(420px, 90vw); padding: var(--space-md); background: var(--color-paper); border-top: 2px solid var(--color-ink); box-shadow: 0 12px 32px color-mix(in oklab, var(--color-ink) 14%, transparent); }
.search-form{ display: flex; gap: var(--space-xs); }
.search-field{ flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); background: var(--color-card); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 0; }
.search-field:focus-visible{ outline: 2px solid var(--color-focus); outline-offset: 0; }

@media (max-width: 68rem){
	.nav a{ padding-inline: var(--space-xs); font-size: 0.95rem; }
}
@media (max-width: 60rem){
	.masthead__row{ flex-wrap: wrap; min-height: 72px; }
	.brand img, .custom-logo-link img{ width: 170px; }
	.js .nav-toggle{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); background: transparent; border: var(--rule-hair) solid var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); cursor: pointer; }
	.nav-toggle[aria-expanded="true"]{ background: var(--color-ink); color: var(--color-on-ink); }
	.nav{ flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-md); }
	.js .nav{ display: none; }
	.js .nav.is-open{ display: flex; }
	.nav .menu{ flex-direction: column; align-items: stretch; gap: 0; }
	.nav .menu > li{ border-bottom: var(--rule-hair) solid var(--color-rule); }
	.nav li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.nav a{ padding: var(--space-sm) 0; font-size: 1.125rem; }
	.nav .menu-item-has-children > a::after{ display: none; }
	.nav .sub-menu, .nav .sub-menu .sub-menu{ grid-column: 1 / -1; position: static; min-width: 0; padding: 0 0 var(--space-xs) var(--space-md); border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; display: none; transition: none; }
	.nav li.is-open > .sub-menu{ display: block; }
	.nav .sub-menu a{ padding: var(--space-xs) 0; font-size: 1rem; color: var(--color-ink-2); }
	.sub-toggle{ display: block; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; position: relative; }
	.sub-toggle::before{ content: ""; position: absolute; left: 17px; top: 15px; width: 8px; height: 8px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
	.sub-toggle[aria-expanded="true"]::before{ transform: translateY(4px) rotate(-135deg); }
	.hsearch{ margin-top: var(--space-md); }
	.hsearch summary{ display: none; }
	.hsearch__panel{ position: static; width: auto; padding: 0; border: 0; box-shadow: none; }
}

/* ---------- article ---------- */
.layout-article{ display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: var(--space-3xl); padding-block: var(--space-xl) var(--section-gap-s); }
.layout-page{ max-width: calc(var(--measure) + 2 * var(--gutter) + 8ch); padding-block: var(--space-2xl) var(--section-gap-s); }
.article{ min-width: 0; }
.article__head{ border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.crumbs{ color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variation-settings: "opsz" 12; margin-bottom: var(--space-md); }
.crumbs a{ color: var(--color-muted); text-decoration: none; }
.crumbs a:hover{ color: var(--color-accent); }
.crumbs .separator{ margin-inline: var(--space-2xs); }
.article__title{ font-size: var(--text-article); line-height: 1.02; max-width: 22ch; }
.byline{ display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-md); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variation-settings: "opsz" 12; }
.byline a{ color: var(--color-muted); text-decoration: none; }
.byline a:hover{ color: var(--color-accent); }
.article__hero{ margin: var(--space-xl) 0 0; background: var(--color-paper-2); aspect-ratio: 1200 / 630; overflow: hidden; }
.article__hero img{ width: 100%; height: 100%; object-fit: cover; }

/* prose */
.prose{ margin-top: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-body); line-height: 1.65; }
.prose > *{ margin-block: 0 1.1em; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > .tb-disclosure, .prose > #toc_container{ max-width: var(--measure); }
.prose h2{ font-size: var(--text-h2); line-height: 1.08; margin-top: 1.9em; margin-bottom: 0.55em; max-width: 26ch; }
.prose h3{ font-size: var(--text-h3); line-height: 1.15; margin-top: 1.6em; margin-bottom: 0.45em; }
.prose h4{ font-size: 1.15rem; margin-top: 1.4em; margin-bottom: 0.4em; }
.prose ul, .prose ol{ padding-left: 1.3em; }
.prose li{ margin-bottom: 0.35em; }
.prose li::marker{ color: var(--color-rule-2); }
.prose strong{ font-weight: 600; color: var(--color-ink); }
.prose hr{ border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin-block: var(--space-xl); }
.prose figure{ margin-inline: 0; }
.prose figure img{ height: auto; }
.prose figcaption{ margin-top: var(--space-xs); color: var(--color-muted); font: 400 var(--text-sm)/1.45 var(--font-display); font-variation-settings: "opsz" 12; }
.prose .aligncenter{ margin-inline: auto; }
.prose .alignleft{ float: left; margin: 0 var(--space-lg) var(--space-md) 0; }
.prose .alignright{ float: right; margin: 0 0 var(--space-md) var(--space-lg); }
.prose blockquote{ margin-inline: 0; padding: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-lead); color: var(--color-ink); }
.prose .tb-disclosure{ color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.prose .tb-disclosure em{ font-style: normal; }
.prose table{ width: 100%; border-collapse: collapse; font: 400 0.95rem/1.45 var(--font-display); font-variation-settings: "opsz" 12; font-variant-numeric: lining-nums tabular-nums; }
.prose th{ text-align: left; font-weight: 600; color: var(--color-ink); border-bottom: 2px solid var(--color-ink); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; vertical-align: bottom; }
.prose td{ border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; vertical-align: top; }
.prose .wp-block-table{ overflow-x: auto; margin-block: var(--space-lg); }
.prose .wp-block-table table{ min-width: 560px; }
.prose figure.tb-product{ max-width: 320px; background: var(--color-card); border: var(--rule-hair) solid var(--color-rule); }
.prose figure.tb-product img{ width: 100%; }
.prose .tb-thumbs{ display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.prose .tb-thumbs figure{ margin: 0; }
.prose .tb-buy{ display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-md) var(--space-xl); }
.prose .tb-buy > a, .prose .tb-buy > a:visited{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); background: var(--color-ink); color: var(--color-on-ink); border: var(--rule-hair) solid var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-display); font-variation-settings: "opsz" 12; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.prose .tb-buy > a + a{ background: transparent; color: var(--color-ink); }
.prose .tb-buy > a:hover{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.prose .tb-buy > a:active{ transform: translateY(1px); }
.prose p > a.wp-block-button__link{ margin-block: var(--space-2xs); }
.prose .wp-block-buttons{ display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.prose .wp-block-image{ margin-block: var(--space-lg); }
.prose .wp-block-embed iframe, .prose iframe{ max-width: 100%; }
.prose .wp-block-columns{ display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.prose .wp-block-column{ flex: 1 1 240px; min-width: 0; }

/* contents box (table-of-contents-plus) */
#toc_container{ margin-block: var(--space-lg) var(--space-xl); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule-2); background: transparent; width: auto !important; }
#toc_container .toc_title{ margin: 0 0 var(--space-xs); font: 600 var(--text-md)/1.3 var(--font-display); font-variation-settings: "opsz" 12; color: var(--color-ink); }
#toc_container .toc_toggle{ display: none; }
#toc_container .toc_list, #toc_container .toc_list ul{ list-style: none; margin: 0; padding: 0; }
#toc_container .toc_list ul{ padding-left: var(--space-md); }
#toc_container .toc_list li{ margin: 0; font: 400 var(--text-md)/1.5 var(--font-display); font-variation-settings: "opsz" 12; }
#toc_container .toc_list a{ display: inline-block; padding-block: var(--space-3xs); text-decoration: none; }
#toc_container .toc_list a:hover{ text-decoration: underline; }
#toc_container .toc_number{ color: var(--color-muted); margin-right: var(--space-2xs); }

/* article foot */
.article__foot{ margin-top: var(--space-2xl); max-width: var(--measure); }
.tags{ color: var(--color-muted); font: 500 var(--text-sm)/1.5 var(--font-display); margin-bottom: var(--space-lg); }
.author-box{ border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-md); }
.author-box__name{ font: 700 var(--text-lg)/1.2 var(--font-display); font-variation-settings: "wdth" 75, "opsz" 96; color: var(--color-ink); }
.author-box__bio{ margin-top: var(--space-xs); color: var(--color-ink-2); }

/* related + cards */
.related{ margin-top: var(--space-3xl); border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.related h2{ font-size: var(--text-h2); margin-bottom: var(--space-xl); }
.cards{ display: grid; gap: var(--space-2xl) var(--gap-columns); }
.cards--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card{ display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.card__link{ display: flex; flex-direction: column; gap: var(--space-md); text-decoration: none; color: var(--color-ink); }
.card__media{ aspect-ratio: 1200 / 630; overflow: hidden; background: var(--color-paper-2); }
.card__media img{ width: 100%; height: 100%; object-fit: cover; }
.card__title{ font-size: var(--text-title); line-height: 1.12; }
.card__link:hover .card__title{ color: var(--color-accent); }
.card__meta{ color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variation-settings: "opsz" 12; }
.card__excerpt{ color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.layout-article .cards--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* sidebar */
.sidebar{ min-width: 0; }
.sidebar > .widget + .widget{ margin-top: var(--space-2xl); }
.sidebar h2, .sidebar h3{ font-size: 1.6rem; line-height: 1.05; margin: 0 0 var(--space-sm); }
.sidebar .widget{ border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-md); }
.sidebar ul{ list-style: none; margin: 0; padding: 0; }
.sidebar li{ border-bottom: var(--rule-hair) solid var(--color-rule); padding: 10px 0; margin: 0; }
.sidebar li a{ font: 500 1.05rem/1.3 var(--font-display); font-variation-settings: "opsz" 12; color: var(--color-ink); text-decoration: none; }
.sidebar li a:hover{ color: var(--color-accent); }
.sidebar .tb-side-shop{ margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-ink); color: var(--color-on-ink-2); }
.sidebar .tb-side-shop h3{ color: var(--color-on-ink); }
.sidebar .tb-side-shop p{ font-size: 0.95rem; line-height: 1.55; margin-bottom: var(--space-md); }
.sidebar .tb-side-shop .wp-block-button__link{ background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.sidebar .tb-side-shop .wp-block-button__link:hover{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

/* comments */
.comments{ margin-top: var(--space-3xl); max-width: var(--measure); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.comments__title, .comment-reply-title{ font-size: var(--text-title); margin-bottom: var(--space-md); }
.comment-list{ list-style: none; margin: 0 0 var(--space-xl); padding: 0; }
.comment-list .comment{ padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.comment-list .children{ list-style: none; padding-left: var(--space-lg); }
.comment-meta{ font: 500 var(--text-sm)/1.4 var(--font-display); color: var(--color-muted); }
.comment-meta a{ color: var(--color-muted); text-decoration: none; }
.comment-author .says{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.comment-content{ margin-top: var(--space-xs); }
.comment-content p + p{ margin-top: 0.8em; }
.reply a{ font: 500 var(--text-sm)/1 var(--font-display); }
.comment-form p{ margin-bottom: var(--space-md); }
.comment-form label{ display: block; margin-bottom: var(--space-2xs); font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-ink); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{ width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); background: var(--color-card); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 0; }
.comment-form textarea{ min-height: 140px; }
.comment-form .comment-form-cookies-consent{ display: flex; gap: var(--space-xs); align-items: baseline; }
.comment-form .comment-form-cookies-consent label{ display: inline; font-weight: 400; }

/* ---------- listings ---------- */
.listing{ padding-block: var(--space-2xl) var(--section-gap-s); }
.listing__head{ border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); margin-bottom: var(--space-2xl); }
.listing__title{ font-size: var(--text-display); line-height: 0.98; }
.listing__desc{ margin-top: var(--space-lg); max-width: var(--measure); font-size: var(--text-md); line-height: 1.6; }
.listing__desc p + p{ margin-top: var(--space-sm); }
.listing__head .search-form{ margin-top: var(--space-lg); max-width: 520px; }
.listing__empty{ font-size: var(--text-lead); }
.pagination{ margin-top: var(--space-3xl); }
.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pagination .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; }
.pagination .page-numbers.current{ background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.pagination a.page-numbers:hover{ border-color: var(--color-accent); color: var(--color-accent); }
.notfound .lead{ margin-block: var(--space-md) var(--space-lg); font-size: var(--text-lead); }
.notfound__hubs{ list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font: 600 var(--text-lg)/1.3 var(--font-display); }

/* ---------- colophon ---------- */
.colophon{ background: var(--color-ink); color: var(--color-on-ink-2); padding-top: var(--space-3xl); }
.colophon a{ color: var(--color-on-ink); text-decoration-color: var(--color-on-ink-rule); }
.colophon a:hover{ color: var(--color-on-ink); text-decoration-color: var(--color-accent); }
.colophon__grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-xl) var(--gap-columns); padding-bottom: var(--space-2xl); }
.colophon__name{ font: 800 var(--text-section)/1 var(--font-display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: var(--tracking-display); color: var(--color-on-ink); }
.colophon__note{ margin-top: var(--space-md); max-width: 44ch; font-size: var(--text-md); line-height: 1.55; }
.colophon__links, .social{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font: 500 var(--text-md)/1.4 var(--font-display); font-variation-settings: "opsz" 12; }
.colophon__base{ border-top: var(--rule-hair) solid var(--color-on-ink-rule); padding-block: var(--space-lg); font: 400 var(--text-sm)/1.4 var(--font-display); }

/* ---------- front page (page 9388 content) ---------- */
.front{ margin: 0; }
.tb-home{ color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; }
.tb-home h1, .tb-home h2, .tb-home h3{ margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.tb-home h1{ font-size: calc(var(--text-display) * 1.15); line-height: 0.92; max-width: 20ch; }
.tb-home h2{ font-size: var(--text-section); line-height: 1.02; max-width: 30ch; }
.tb-home h3{ font-size: var(--text-title); line-height: 1.2; max-width: 40ch; }
.tb-home .lead{ font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
.tb-home ol, .tb-home ul{ margin: 0; }
.tb-home li{ margin: 0; }
.tb-home a{ color: inherit; text-decoration-color: var(--color-rule-2); }
.tb-home a:hover{ color: inherit; text-decoration-color: var(--color-accent); }
.tb-home a.btn--primary, .tb-home a.btn--primary:hover{ color: var(--color-on-ink); }
.tb-home a.btn--secondary{ color: var(--color-ink); }
.tb-home a.btn--secondary:hover{ color: var(--color-accent-ink); }
.tb-home a.btn--light, .tb-home a.btn--light:hover{ color: var(--color-ink); }
.tb-home [data-slot]{ position: relative; overflow: hidden; background: var(--color-paper-2); }
.tb-home [data-slot] > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.tb-home .opens{ border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.tb-home .hero{ padding-block: var(--space-2xl) var(--space-3xl); }
.tb-home .hero .container{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.tb-home .hero .lead{ margin-top: var(--space-lg); color: var(--color-ink); }
.tb-home .hero .actions{ display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.tb-home .hero figure{ margin: 0 calc(var(--gutter) * -1) 0 0; }
.tb-home .hero [data-slot]{ height: min(600px, 70dvh); min-height: 440px; }
.tb-home .hero [data-slot] > img{ object-position: 60% 50%; }
.tb-home .about-intro{ padding-block: var(--section-gap-s) 0; }
.tb-home .about-intro .head{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-md) var(--gap-columns); align-items: start; }
.tb-home .about-intro .head h2{ grid-row: 1 / span 2; max-width: 14ch; }
.tb-home .about-intro .head p{ grid-column: 2; max-width: var(--measure); font-size: var(--text-lead); line-height: 1.55; }
.tb-home .about-intro .head p + p{ font-size: var(--text-md); }
.tb-home .index{ padding-block: var(--section-gap-s) var(--section-gap); }
.tb-home .index .head{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.tb-home .index .head .lead{ color: var(--color-ink); }
.tb-home .index ol{ list-style: none; padding: 0; }
.tb-home .index li.row{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.tb-home .index li.row:last-child{ border-bottom: var(--rule-hair) solid var(--color-rule); }
.tb-home .index .row h3{ font-size: var(--text-section); max-width: none; }
.tb-home .index .row h3 a{ text-decoration: none; }
.tb-home .index .row h3 a:hover{ text-decoration: underline; text-decoration-color: var(--color-accent); }
.tb-home .index .guides{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--gap-columns); list-style: none; padding: 0; font: 500 var(--text-title)/1.4 var(--font-display); font-variation-settings: "opsz" 24; }
.tb-home .index .guides a{ color: var(--color-ink); }
.tb-home .statement{ padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.tb-home .statement .container{ display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: end; }
.tb-home .statement blockquote{ margin: 0; padding: 0; border: 0; max-width: 28ch; font: 400 var(--text-display-s)/1.15 var(--font-body); color: var(--color-ink); }
.tb-home .statement .side{ display: grid; gap: var(--space-md); justify-items: start; }
.tb-home .compare{ padding-block: var(--section-gap); }
.tb-home .compare .container{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.tb-home .compare h2{ position: sticky; top: var(--space-xl); align-self: start; }
.tb-home .compare ol{ list-style: none; padding: 0; border-top: var(--rule-heavy) solid var(--color-ink); }
.tb-home .compare li{ border-bottom: var(--rule-hair) solid var(--color-rule); }
.tb-home .compare li a{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: baseline; padding-block: var(--space-lg); text-decoration: none; }
.tb-home .compare li h3{ font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem); color: var(--color-ink); }
.tb-home .compare li .meta{ color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.tb-home .compare li a:hover h3{ color: var(--color-accent); }
.tb-home .latest{ padding-block: var(--section-gap-s) 0; }
.tb-home ul.tb-latest{ list-style: none; max-width: var(--container); margin: var(--space-2xl) auto 0; padding: 0 var(--gutter) var(--section-gap-l); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: start; }
.tb-home ul.tb-latest li{ display: flex; flex-direction: column; gap: var(--space-md); }
.tb-home .tb-latest .wp-block-latest-posts__featured-image{ margin: 0; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--color-paper-2); }
.tb-home .tb-latest .wp-block-latest-posts__featured-image img{ width: 100%; height: 100%; object-fit: cover; }
.tb-home .tb-latest .wp-block-latest-posts__post-title{ font: 800 var(--text-title)/1.15 var(--font-display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.tb-home .tb-latest li:first-child .wp-block-latest-posts__post-title{ font-size: var(--text-3xl); }
.tb-home .tb-latest .wp-block-latest-posts__post-title:hover{ color: var(--color-accent); }
.tb-home .shop{ background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--section-gap-s); }
.tb-home .shop .container{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; }
.tb-home .shop h2{ color: var(--color-on-ink); }
.tb-home .shop ul{ list-style: none; padding: 0; font-size: var(--text-lead); }
.tb-home .shop li{ padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-on-ink-rule); }
.tb-home .shop li a{ color: var(--color-on-ink); }
.tb-home .shop .actions{ display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-xl); }
.tb-home .shop .btn--secondary{ color: var(--color-on-ink); border-color: var(--color-on-ink); }
.tb-home .shop .note{ margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-ink-2); max-width: 52ch; }

/* ---------- responsive ---------- */
@media (max-width: 75rem){
	.layout-article{ gap: var(--space-2xl); }
	.layout-article .cards--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layout-article .cards--3 .card:nth-child(3){ display: none; }
}
@media (max-width: 60rem){
	.layout-article{ grid-template-columns: minmax(0, 1fr); padding-top: var(--space-lg); }
	.article__head, .listing__head{ border-top: 0; padding-top: 0; }
	.cards--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.colophon__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.colophon__brand{ grid-column: 1 / -1; }
	.tb-home .hero .container, .tb-home .about-intro .head, .tb-home .index .head, .tb-home .index li.row, .tb-home .statement .container, .tb-home .compare .container, .tb-home .shop .container{ grid-template-columns: minmax(0, 1fr); }
	.tb-home .hero .container{ gap: var(--space-xl); }
	.tb-home .hero figure{ margin-right: 0; }
	.tb-home .hero [data-slot]{ min-height: 0; height: auto; aspect-ratio: 4 / 3; }
	.tb-home .about-intro .head h2{ grid-row: auto; max-width: none; }
	.tb-home .about-intro .head p{ grid-column: 1; }
	.tb-home .compare h2{ position: static; }
	.tb-home ul.tb-latest{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-home ul.tb-latest li:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 40rem){
	.cards--3, .layout-article .cards--3{ grid-template-columns: minmax(0, 1fr); }
	.layout-article .cards--3 .card:nth-child(3){ display: flex; }
	.prose{ font-size: 1.0625rem; }
	.prose .tb-buy > a{ flex: 1 1 100%; }
	.prose .alignleft, .prose .alignright{ float: none; margin: 0 0 var(--space-md); }
	.colophon__grid{ grid-template-columns: minmax(0, 1fr); }
	.tb-home .index .guides, .tb-home ul.tb-latest{ grid-template-columns: minmax(0, 1fr); }
	.tb-home .hero .actions .btn{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print{
	.masthead, .sidebar, .colophon, .related, .comments, .tb-buy{ display: none; }
	.layout-article{ display: block; }
}

/* Home hero: Stage on ink, rider photo as a toned backdrop (Nov 2026) */
.tb-home .hero{ position: relative; isolation: isolate; overflow: hidden; background: var(--color-ink); color: var(--color-on-ink); padding-block: clamp(88px, 9vw, 152px); }
.tb-home .hero .container{ display: block; }
.tb-home .hero .container > div:first-child{ position: relative; z-index: 2; max-width: 36rem; }
.tb-home .hero h1{ color: var(--color-on-ink); }
.tb-home .hero .lead{ color: color-mix(in oklch, var(--color-on-ink) 82%, transparent); }
.tb-home .hero figure{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(68%, 1120px); margin: 0; }
.tb-home .hero [data-slot]{ height: 100%; min-height: 0; aspect-ratio: auto; }
.tb-home .hero [data-slot] > img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; filter: saturate(.45) contrast(1.06) brightness(.8); }
.tb-home .hero figure::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-accent); mix-blend-mode: color; opacity: .16; pointer-events: none; }
.tb-home .hero figure::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--color-ink) 0%, color-mix(in oklch, var(--color-ink) 80%, transparent) 20%, color-mix(in oklch, var(--color-ink) 28%, transparent) 55%, transparent 82%), linear-gradient(0deg, color-mix(in oklch, var(--color-ink) 75%, transparent) 0%, transparent 38%); }
.tb-home .hero .btn--primary{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.tb-home .hero .btn--primary:hover{ background: color-mix(in oklch, var(--color-accent) 85%, black); }
.tb-home .hero a.btn--secondary{ background: transparent; color: var(--color-on-ink); border-color: color-mix(in oklch, var(--color-on-ink) 65%, transparent); }
.tb-home .hero a.btn--secondary:hover{ border-color: var(--color-on-ink); background: color-mix(in oklch, var(--color-on-ink) 10%, transparent); }
.tb-home .hero .btn:focus-visible{ outline: 2px solid var(--color-on-ink); outline-offset: 3px; }
@media (max-width: 60rem){
	.tb-home .hero{ padding-block: 58vw var(--space-2xl); }
	.tb-home .hero figure{ inset: 0 0 auto 0; width: 100%; height: 78vw; }
	.tb-home .hero figure::after{ background: linear-gradient(0deg, var(--color-ink) 0%, color-mix(in oklch, var(--color-ink) 70%, transparent) 30%, transparent 70%); }
}
@media (prefers-reduced-transparency: reduce){ .tb-home .hero figure::before{ display: none; } }

/* Hero seam fix: no paper bg behind photo, overscan the fade layer */
.tb-home .hero [data-slot]{ background: transparent; }
.tb-home .hero figure::after{ inset: -2px; }