/*
Theme Name:  ABTB Theme
Theme URI:   https://anotherboringtechblog.com
Author:      Vinicius Grippa
Description: Paper of Record — a mid-century academic monograph treatment for Another Boring Tech Blog. Source Serif 4 + JetBrains Mono, cool-white paper, deep-cyan accent, dual-mode (light / inverted monograph).
Version:     3.11.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abtb
Tags:        serif, academic, tech, blog, code, dark-mode
*/

/*
 * The heavy lifting happens in:
 *   assets/css/paper-tokens.css      — design tokens (colors, type, spacing, radii)
 *   assets/css/paper-components.css  — every .abtb-* component
 *   assets/js/abtb.js                — theme toggle, ⌘K palette, scrollspy, copy-code, progress bar
 *
 * WordPress-only adjustments go below this line.
 * The original v1 stylesheet is preserved as style-v1.css.bak in this directory.
 */

/* WordPress block-injected utility classes */
.alignwide { margin-left: auto; margin-right: auto; max-width: 960px; }
.alignfull { margin-left: calc(50% - 50vw); width: 100vw; }
.alignleft  { float: left;  margin-right: var(--sp-5); margin-bottom: var(--sp-3); }
.alignright { float: right; margin-left:  var(--sp-5); margin-bottom: var(--sp-3); }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }

/* Post thumbnails inside the article body */
.abtb-prose .wp-caption { margin: var(--sp-7) 0; }
.abtb-prose .wp-caption-text,
.abtb-prose figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--rule);
  margin-top: var(--sp-3);
}

/* Legacy wrappers from AI-chat pasted content (ng-tns-* / code-block / code-block-decoration).
   We leave them in the DOM but neutralise any margins they introduce so the upgraded
   .abtb-codeblock wrapper controls spacing. */
.abtb-prose .code-block,
.abtb-prose .code-block-decoration {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Urvanov Syntax Highlighter — let the plugin do its thing but give it breathing room */
.abtb-prose .crayon-syntax {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  border-radius: var(--r-2);
}

/* Fallback only for bare <pre> if JS fails to load — keep minimal to not fight .abtb-codeblock */
.abtb-prose > pre {
  background: var(--code-paper);
  color: var(--code-ink);
  border: 1px solid var(--code-rule);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-variant-ligatures: none;
  margin: 0 0 var(--sp-5);
}

/* Accessibility */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--paper-elev);
  color: var(--ink-1);
  box-shadow: var(--shadow-2);
  clip: auto !important;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  left: var(--sp-4);
  top: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  z-index: 100000;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 10000;
  background: var(--ink-1);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  transition: top 180ms ease;
}
.skip-link:focus { top: var(--sp-2); }

/* Jetpack Subscriptions — re-skin to match .abtb-newsletter tokens.
   We keep the plugin's form markup + nonce + action so submissions land on
   Jetpack's backend, and overlay our typography / spacing via CSS only. */
.abtb-newsletter__jp {
  margin: 0;
}
.abtb-newsletter__jp .jetpack_subscription_widget,
.abtb-newsletter__jp .wp-block-jetpack-subscriptions,
.abtb-newsletter__jp .jetpack-subscribe-modal,
.abtb-newsletter__jp #subscribe-blog {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.abtb-newsletter__jp form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  margin: 0;
}
@media (max-width: 520px) {
  .abtb-newsletter__jp form { grid-template-columns: 1fr; }
}
.abtb-newsletter__jp input[type="email"] {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-elev);
  color: var(--ink-1);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  outline: none;
  width: 100%;
}
.abtb-newsletter__jp input[type="email"]:focus { border-color: var(--accent); }
.abtb-newsletter__jp button,
.abtb-newsletter__jp input[type="submit"] {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-1);
  color: var(--paper);
  border: 1px solid var(--ink-1);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.abtb-newsletter__jp button:hover,
.abtb-newsletter__jp input[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Hide the plugin's own title / intro / footer text — we provide our own copy above */
.abtb-newsletter__jp .widgettitle,
.abtb-newsletter__jp .wp-block-jetpack-subscriptions__subscribers,
.abtb-newsletter__jp .subscribe-title,
.abtb-newsletter__jp p.subscribe-title,
.abtb-newsletter__jp h3.widget-title { display: none; }

/* Hide the Google Translate injected element */
#google_translate_element { position: absolute !important; left: -9999px !important; visibility: hidden !important; }
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* Admin bar spacing */
body.admin-bar .abtb-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .abtb-progress { top: 46px; } }

/* Pagination */
.abtb-pagination {
  display: flex;
  justify-content: center;
  padding: var(--sp-7) 0 var(--sp-11);
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-9);
}
.abtb-pagination .page-numbers {
  display: inline-flex;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.abtb-pagination a,
.abtb-pagination .page-numbers {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-4);
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  min-width: 2.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abtb-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.abtb-pagination .current,
.abtb-pagination .page-numbers.current,
.abtb-pagination .page-numbers .current {
  background: var(--ink-1) !important;
  color: var(--paper) !important;
  border-color: var(--ink-1) !important;
}
.abtb-pagination .dots {
  border-color: transparent;
  color: var(--ink-4);
  background: transparent;
}

/* Post navigation (prev / next at end of single.php) */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-8);
  margin: var(--sp-10) 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule-strong);
}
.post-navigation .nav-previous {
  grid-column: 1;
  padding-right: var(--sp-5);
  border-right: 1px solid var(--rule);
}
.post-navigation .nav-next {
  grid-column: 2;
  padding-left: var(--sp-5);
}
.post-navigation a {
  text-decoration: none;
  display: grid;
  gap: var(--sp-2);
}
.post-navigation .nav-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-navigation .nav-previous .nav-label::before { content: "← "; color: var(--ink-4); }
.post-navigation .nav-next     .nav-label::after  { content: " →"; color: var(--ink-4); }
.post-navigation .nav-title {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 30ch;
}
.post-navigation .nav-next .nav-title { margin-left: auto; text-align: left; }
.post-navigation a:hover .nav-title { color: var(--accent); }

@media (max-width: 720px) {
  .post-navigation { grid-template-columns: 1fr; gap: var(--sp-5); }
  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    grid-column: 1;
    padding: 0;
    border: 0;
  }
  .post-navigation .nav-previous { border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-5); }
  .post-navigation .nav-next .nav-title { margin-left: 0; }
  .post-navigation .nav-title { max-width: none; }
}

/* Article tags footer */
.abtb-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-7);
}
.abtb-article__tags a {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  padding: 4px var(--sp-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  text-decoration: none;
}
.abtb-article__tags a:hover { border-color: var(--accent); color: var(--accent); }

.edit-link {
  display: inline-block;
  margin-left: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Comments — Paper of Record
   ============================================================ */

.abtb-comments {
  margin-top: var(--sp-11);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--rule-strong);
}

/* Header row */
.abtb-comments__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ink-1);
  margin-bottom: var(--sp-7);
  flex-wrap: wrap;
}
.abtb-comments__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
.abtb-comments__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.abtb-comments__meta .sep { color: var(--ink-5); }

.abtb-comments__closed {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
}

/* Comment list */
.abtb-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-9);
  counter-reset: abtbcomment;
}
.abtb-comment-list .children {
  list-style: none;
  padding-left: var(--sp-8);
  margin: var(--sp-4) 0 0;
  border-left: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .abtb-comment-list .children { padding-left: var(--sp-5); }
}

.abtb-comment {
  counter-increment: abtbcomment;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.abtb-comment:last-child { border-bottom: 0; }
.abtb-comment-list .children .abtb-comment:last-child { padding-bottom: 0; }

.abtb-comment__body { display: grid; gap: var(--sp-3); }

.abtb-comment__header {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
}
.abtb-comment__avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--paper-sink);
}
.abtb-comment__avatar img,
.abtb-comment__avatar .abtb-comment__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.04);
}
[data-theme="dark"] .abtb-comment__avatar img,
[data-theme="dark"] .abtb-comment__avatar .abtb-comment__avatar-img {
  filter: grayscale(0.15) brightness(0.95);
}

.abtb-comment__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.abtb-comment__author {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink-1);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.abtb-comment__author a {
  text-decoration: none;
  color: inherit;
}
.abtb-comment__author a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.abtb-comment__badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  vertical-align: middle;
  line-height: 1.4;
}

.abtb-comment__byline {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.abtb-comment__byline .sep { color: var(--ink-5); }
.abtb-comment__permalink {
  color: var(--ink-3);
  text-decoration: none;
}
.abtb-comment__permalink:hover { color: var(--accent); }

.abtb-comment__edit {
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-4);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 2px var(--sp-2);
  border-radius: var(--r-2);
}
.abtb-comment__edit:hover { color: var(--accent); border-color: var(--accent); }

.abtb-comment__text {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-1);
  padding-left: calc(56px + var(--sp-4));
  text-wrap: pretty;
}
.abtb-comment__text p { margin: 0 0 var(--sp-3); }
.abtb-comment__text p:last-child { margin-bottom: 0; }
.abtb-comment__text code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--code-paper);
  padding: 1px 5px;
  border: 1px solid var(--code-rule);
  border-radius: var(--r-2);
  font-variant-ligatures: none;
}
.abtb-comment__text a { text-decoration-color: var(--accent); }
@media (max-width: 520px) {
  .abtb-comment__header { grid-template-columns: 44px 1fr auto; }
  .abtb-comment__avatar { width: 44px; height: 44px; }
  .abtb-comment__text { padding-left: 0; }
}

.abtb-comment__pending {
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--warn);
  background: var(--warn-soft);
  margin-left: calc(56px + var(--sp-4));
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  border-radius: var(--r-1);
}
.abtb-comment__pending .abtb-callout__label {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--warn);
  margin-bottom: 2px;
}
@media (max-width: 520px) { .abtb-comment__pending { margin-left: 0; } }

.abtb-comment__footer {
  padding-left: calc(56px + var(--sp-4));
  display: flex;
  gap: var(--sp-4);
}
.abtb-comment__footer .comment-reply-link {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.abtb-comment__footer .comment-reply-link:hover { border-bottom-color: var(--accent); }
@media (max-width: 520px) { .abtb-comment__footer { padding-left: 0; } }

/* Editor's own replies get a subtle accent border */
.abtb-comment--by-author > .abtb-comment__body {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-1);
}
[data-theme="dark"] .abtb-comment--by-author > .abtb-comment__body { background: var(--accent-soft); }

/* Pagination */
.abtb-comments__nav,
.abtb-comments nav.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-7) 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
}
.abtb-comments__nav a { color: var(--accent); text-decoration: none; }
.abtb-comments__nav a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   Commenter identity strip — "commenting as X" / "sign in to comment"
   ---------------------------------------------------------------- */
.abtb-commenter {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--rule-strong);
  background: var(--paper-sink);
  border-radius: var(--r-2);
  margin: var(--sp-7) 0 var(--sp-5);
}
.abtb-commenter__label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
  display: block;
}
.abtb-commenter__as {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}
.abtb-commenter__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-1);
  font-weight: 700;
}
.abtb-commenter__as a { color: var(--accent); text-decoration: none; }
.abtb-commenter__as a:hover { text-decoration: underline; }
.abtb-commenter__as .sep { color: var(--ink-5); }

.abtb-commenter__signin { display: grid; gap: var(--sp-3); }
.abtb-commenter__note {
  color: var(--ink-3);
  margin: 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}

/* Sign-in row — puts the social button(s) + WordPress button + guest hint on
   a single line. Wraps gracefully on narrow screens. */
.abtb-sso-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.abtb-sso__or {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Shared button style — WordPress + any social provider we normalize below. */
.abtb-sso-btn,
.abtb-sso a.mo_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-1);
  background: var(--paper-elev);
  border: 1px solid var(--ink-1);
  border-radius: var(--r-1);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.abtb-sso-btn:hover,
.abtb-sso a.mo_btn:hover {
  background: var(--ink-1);
  color: var(--paper);
}
.abtb-sso-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

/* miniOrange shortcode output — the plugin wraps the anchor in a div and
   prepends a "Connect with" <p>. Their own stylesheet loads AFTER our theme
   CSS, so we need !important on every layout override. Approach: let the
   wrappers stay in the layout as inline boxes (no `display: contents` — it
   interacts badly with miniOrange's rules), neutralise their visuals, and
   hide the redundant "Connect with" label. */
.abtb-sso {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.abtb-sso .mo-openid-app-icons {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
}
.abtb-sso .mo-openid-app-icons > p { display: none !important; }

/* The actual button anchor — matched to our WordPress button exactly. */
.abtb-sso a.mo_btn {
  margin: 0 !important;
  padding: 0 var(--sp-4) !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  border: 1px solid var(--ink-1) !important;
  border-radius: var(--r-1) !important;
  background: var(--paper-elev) !important;
  color: var(--ink-1) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
}
.abtb-sso a.mo_btn:hover {
  background: var(--ink-1) !important;
  color: var(--paper) !important;
}

/* Hide miniOrange's low-res raster G and render the sharp SVG via ::before. */
.abtb-sso a.mo_btn img.fa { display: none !important; }

.abtb-sso a.mo_btn-google::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: url('assets/img/google-g.svg') center / contain no-repeat;
}

/* ----------------------------------------------------------------
   Comment form
   ---------------------------------------------------------------- */

.abtb-commentform {
  margin-top: var(--sp-5);
}
.abtb-commentform__title,
#reply-title.comment-reply-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-xl);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.abtb-commentform__cancel a,
#cancel-comment-reply-link {
  margin-left: var(--sp-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.abtb-commentform__notes,
.comment-notes {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
/* The field rows below use `display: grid` to stack label over input. The
   notes paragraph and the logged-in-as strip are inline prose, not form rows —
   keep them as a block so "... * required" and "Signed in as X. Edit · Out"
   stay on one line. */
.abtb-commentform p.abtb-commentform__notes,
.abtb-commentform p.comment-notes,
.abtb-commentform p.logged-in-as,
.abtb-commentform__loggedin {
  display: block;
}
.abtb-commentform__loggedin {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.abtb-commentform__loggedin strong {
  color: var(--ink-1);
  font-weight: 600;
}
.abtb-commentform__loggedin a {
  text-decoration-color: var(--rule-strong);
}
.abtb-commentform__loggedin .sep { color: var(--ink-5); margin: 0 4px; }
.abtb-commentform .required { color: var(--accent); }

.abtb-commentform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 720px) {
  .abtb-commentform__grid { grid-template-columns: 1fr; }
}

.abtb-commentform p {
  margin: 0 0 var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
.abtb-commentform label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-2);
}
.abtb-commentform__optional {
  display: inline-block;
  margin-left: 4px;
  color: var(--ink-4);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xs);
}
.abtb-commentform textarea.abtb-input {
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
/* Any checkbox+label row (cookies consent, Jetpack subscribe-to-site,
   Jetpack subscribe-to-comments) collapses to a flex row: checkbox left,
   label right, small gap. Overrides the inherited grid layout from
   .abtb-commentform p. */
.abtb-commentform .comment-form-cookies-consent,
.abtb-commentform .comment-subscription-form,
.abtb-commentform p.comment-subscription-form {
  display: flex !important;
  align-items: center;
  gap: var(--sp-3);
  grid-template-columns: none !important;
  margin: 0 0 var(--sp-3) !important;
}
.abtb-commentform .comment-form-cookies-consent label,
.abtb-commentform .comment-subscription-form label,
.abtb-commentform .comment-subscription-form .subscribe-label {
  font-family: var(--font-serif) !important;
  font-style: italic;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-3);
  font-size: var(--fs-sm) !important;
  display: inline !important;
  margin: 0 !important;
  line-height: 1.4;
}
.abtb-commentform .comment-form-cookies-consent input[type="checkbox"],
.abtb-commentform .comment-subscription-form input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  margin: 0 !important;
  float: none !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
}

.abtb-commentform .form-submit {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.abtb-commentform .form-submit::after {
  content: "Comments are reviewed before publication.";
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
@media (max-width: 520px) {
  .abtb-commentform .form-submit::after { display: none; }
}
.abtb-commentform input[type="submit"].abtb-button {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-1);
  color: var(--paper);
  border: 1px solid var(--ink-1);
  border-radius: var(--r-1);
  cursor: pointer;
}
.abtb-commentform input[type="submit"].abtb-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Search input reused from the legacy template — match the paper-of-record look */
.abtb-header-search input[type="search"] {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper-elev);
  color: var(--ink-1);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  outline: none;
}
.abtb-header-search input[type="search"]:focus { border-color: var(--accent); }

/* 404 */
.abtb-not-found {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-10) 0 var(--sp-11);
  text-align: center;
}
.abtb-not-found__code {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(88px, 18vw, 220px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: var(--tr-display);
}
.abtb-not-found h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: var(--sp-3) 0 var(--sp-6);
  text-wrap: balance;
}
.abtb-not-found__requested {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}
.abtb-not-found__url {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-1);
  background: var(--code-paper);
  padding: 2px var(--sp-3);
  border: 1px solid var(--code-rule);
  border-radius: var(--r-2);
  word-break: break-all;
  max-width: 100%;
  font-variant-ligatures: none;
}
.abtb-not-found__dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  margin: 0 auto var(--sp-7);
  max-width: 56ch;
  text-wrap: pretty;
}

/* Search form, paper-of-record style */
.abtb-not-found__search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  max-width: 520px;
  margin: 0 auto var(--sp-9);
  padding: var(--sp-4);
  border: 1px solid var(--rule-strong);
  background: var(--paper-sink);
  border-radius: var(--r-2);
}
.abtb-not-found__search .abtb-input {
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3);
}
@media (max-width: 520px) {
  .abtb-not-found__search { grid-template-columns: 1fr; }
}

/* Recent entries suggestion block */
.abtb-not-found__picks {
  max-width: 560px;
  margin: 0 auto var(--sp-9);
  text-align: left;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.abtb-not-found__picks .abtb-widget__head {
  margin-bottom: var(--sp-4);
  text-align: left;
}
.abtb-not-found__picks .abtb-picks__item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.abtb-not-found__picks .abtb-picks__item:last-child { border-bottom: 0; }

.abtb-not-found__back {
  margin-top: var(--sp-6);
}