/* ==========================================================================
   SINGLE POST — single.php + comments.php
   Needs: style.css + css/base-home.css.
   From blog-TEMPLATE-single.html (v15blog layer). The design used .wrap and
   .eyebrow without defining them; they use the site's styles here (approved).
   ========================================================================== */

/* ── Site styles the design assumed ── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-ink); font-weight: 400;
}

/* ── ARTICLE ── */
.art { max-width: 720px; margin: 0 auto; }
.art-head { text-align: center; padding: 66px 0 34px; }
.art-h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 200; letter-spacing: -.02em; line-height: 1.15; color: var(--head); margin-top: 14px; }
.art-meta { font-size: 11.5px; color: var(--body); opacity: .7; margin-top: 16px; }
.art-feature { margin: 0 0 36px; }
.art-feature img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.art-feature figcaption,
.art figure figcaption, .art .wp-element-caption {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--body); opacity: .6; margin-top: 10px;
}
.art p { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--body); margin: 0 0 22px; }
.art h2 { font-size: clamp(20px, 3vw, 27px); font-weight: 200; letter-spacing: -.01em; color: var(--head); margin: 40px 0 14px; }
.art h2 em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; color: var(--gold-ink); }
.art ul { margin: 0 0 22px; padding-left: 20px; }
.art ul li { font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--body); margin: 6px 0; }
.art ul li::marker { color: var(--gold); }
.art blockquote { border-left: 2px solid var(--gold); margin: 30px 0; padding: 6px 0 6px 22px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.6; color: var(--gold-ink); }
.art blockquote p { font: inherit; color: inherit; margin: 0; }
.art figure { margin: 30px 0; }
.art figure img { width: 100%; display: block; }
.art-call { background: var(--cream); border: 1px solid var(--rule); border-left: 2px solid var(--gold); padding: 20px 22px; margin: 30px 0; font-size: 13.5px; line-height: 1.75; color: var(--body); }
.art-call p { font-size: inherit; line-height: inherit; margin: 0; }
.art-call strong { font-weight: 500; color: var(--head); }

/* Content the sample article didn't show — styled from the same design rules */
.art ol { margin: 0 0 22px; padding-left: 22px; }
.art ol li { font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--body); margin: 6px 0; }
.art ol li::marker { color: var(--gold-ink); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.art h3 { font-size: 17.5px; font-weight: 400; color: var(--head); letter-spacing: -.01em; margin: 30px 0 10px; }
.art p:not(.art-back) a, .art li a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.art table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 13.5px; background: var(--white); border: 1px solid var(--rule); }
.art th, .art td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--body); font-weight: 300; }
.art th { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; background: var(--cream2); }
.art .alignleft { float: left; margin: 6px 22px 16px 0; max-width: 50%; }
.art .alignright { float: right; margin: 6px 0 16px 22px; max-width: 50%; }
.art .aligncenter { margin-left: auto; margin-right: auto; }
.art img { max-width: 100%; height: auto; }
.art::after { content: ''; display: block; clear: both; }

/* ── PREV / NEXT, CTA, BACK ── */
.art-nav { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--rule); margin-top: 44px; padding-top: 22px; font-size: 12px; }
.art-nav a { color: var(--gold-ink); max-width: 46%; }
.art-nav .art-nav-next { text-align: right; }                         /* was inline */
.art-cta { background: var(--cream); border: 1px solid var(--rule); text-align: center; padding: 36px 22px; margin: 44px 0 0; }
.art .art-cta-p { font-size: 16px; font-weight: 300; color: var(--head); margin: 10px 0 16px; }  /* was inline */
.art .art-back { margin-top: 26px; text-align: center; }                                        /* was inline */
.art-back a { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }

/* ── COMMENTS — quote-form look (white card, mono gold labels, cream inputs, gold focus) ── */
.cm { margin: 56px 0 72px; padding-top: 30px; border-top: 1px solid var(--rule); }
.cm-list { list-style: none; margin: 18px 0 34px; padding: 0; }
.cm-list .children { list-style: none; margin: 0; padding-left: 22px; border-left: 1px solid var(--rule); }
.cm-item { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cm-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.cm-author { font-size: 14px; font-weight: 500; color: var(--head); }
.cm-date { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--body); opacity: .7; }
.cm-text p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--body); margin: 8px 0 0; }
.cm-wait { font-size: 12px; color: var(--gold-ink); margin-top: 6px; }
.cm-reply a { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.cm-reply { margin-top: 8px; }
.cm-closed { font-size: 13px; color: var(--body); }

.comment-respond { background: var(--white); border: 1px solid var(--rule); padding: 26px 22px 24px; }
.cm-title { font-size: clamp(20px, 3vw, 27px); font-weight: 200; letter-spacing: -.01em; color: var(--head); margin-bottom: 6px; }
.cm-title small { display: block; margin-top: 6px; }
.cm-title small a { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.cm-note, .logged-in-as { font-size: 12.5px; font-weight: 300; color: var(--body); margin-bottom: 18px; }
.logged-in-as a { color: var(--gold-ink); }
.cm-form { display: grid; grid-template-columns: 1fr; gap: 16px 14px; }
.cm-form > p { grid-column: 1 / -1; }
.cm-fld { display: flex; flex-direction: column; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.cm-fld label em { font-style: normal; }
.cm-fld input, .cm-fld textarea {
  font-family: azo-sans-web, 'Inter', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px; color: var(--head);
  background: var(--cream); border: 1px solid var(--rule); padding: 13px 14px; letter-spacing: normal; text-transform: none;
  width: 100%; border-radius: 0; -webkit-appearance: none;
}
.cm-fld input:focus, .cm-fld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(173,161,117,.18); }
.cm-fld textarea { resize: vertical; min-height: 120px; }
.cm-full, .cm-actions { grid-column: 1 / -1; }
.cm-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
@media (min-width: 640px) {
  .comment-respond { padding: 32px 30px 30px; }
  .cm-form { grid-template-columns: 1fr 1fr; }
}

/* Keep the article (.art) typography out of the comments block */
.art .cm-list { padding: 0; margin: 18px 0 34px; }
.art .cm-list li { font-size: inherit; margin: 0; }
.art .cm-list li::marker { content: none; }
.art .cm-title { margin: 0 0 6px; }
.art .cm-note, .art .logged-in-as { font-size: 12.5px; line-height: 1.7; margin: 0 0 18px; }
.art .cm-text p { font-size: 14px; line-height: 1.75; margin: 8px 0 0; }
.art .cm-reply a { text-decoration: none; }
.art .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--body); margin: 0; }
.comment-form-cookies-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); }


/* Brand font unification (Rod, Oct 15): headings keep ONE font - no serif-italic accent lines */
h1 em, h2 em, h3 em, .hero-h1 em, .h-xl em, .h-lg em, .h-md em, .h-sm em, .serif, .f, .art-h1 em, .art h2 em, .bp-ask em, .uor-close em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}