/* c-article.css — Single post / article page — MDU 2026 */

/* Suppress Storefront single-post layout */
.ar~#secondary,.ar~.widget-area{display:none}
#primary:has(.ar){float:none;width:100%;padding:0}

.ar{padding:24px 0 80px;background:var(--paper)}
.ar .wrap{max-width:1320px;margin-left:auto;margin-right:auto;padding:0 32px}

/* breadcrumbs */
.ar-crumbs{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.ar-crumbs a{color:var(--muted);transition:color .2s}
.ar-crumbs a:hover{color:var(--gold-2)}
.ar-crumbs span:not(.ar-curr){opacity:.4}
.ar-curr{color:var(--ink)}

/* cover — full-bleed (margin breaks out of .wrap padding) */
.ar-cover{margin:0 -32px 48px;background:var(--ink);color:var(--paper);aspect-ratio:21/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ar-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.60) sepia(.15) contrast(.95)}
.ar-cover-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%);z-index:1}
.ar-cover-glyph{font-family:var(--serif);font-size:clamp(120px,22vw,260px);font-weight:400;letter-spacing:-.04em;opacity:.18;position:relative;z-index:1}
.ar-cover-tag{position:absolute;top:24px;left:32px;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,241,232,.9);padding:8px 14px;border:1px solid rgba(246,241,232,.3);z-index:2}

/* title block */
.ar-title-block{max-width:780px;margin:0 auto 48px}
.ar-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.ar-eyebrow span{color:var(--muted)}
.ar h1{font-family:var(--serif) !important;font-size:clamp(38px,4.6vw,64px) !important;line-height:1.05 !important;letter-spacing:-.018em;text-align:center;margin:0 0 24px !important;font-weight:500 !important;text-wrap:balance;color:var(--ink) !important}
.ar-tagline{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink-2);text-align:center;font-style:italic;text-wrap:pretty;max-width:640px;margin:0 auto 32px}

.ar-byline{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.ar-avi{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;letter-spacing:.02em;overflow:hidden;flex-shrink:0}
.ar-avi img{width:100%;height:100%;object-fit:cover;filter:saturate(.60) sepia(.15) contrast(.95)}
.ar-byline-name{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);line-height:1.2}
.ar-byline-name a{color:inherit;border-bottom:1px solid var(--rule);transition:border-color .15s}
.ar-byline-name a:hover{border-color:var(--gold-2);color:var(--gold-2)}
.ar-byline-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.ar-byline-sep{width:1px;height:32px;background:var(--rule)}
.ar-byline-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}

/* 3-col body grid */
.ar-body{display:grid;grid-template-columns:200px 720px 200px;gap:48px;justify-content:center;margin-bottom:64px}

/* left rail */
.ar-rail-l{position:sticky;top:152px;align-self:start;display:flex;flex-direction:column;gap:24px}
.ar-rail-block{padding-bottom:18px;border-bottom:1px solid var(--rule)}
.ar-rail-block:last-child{border-bottom:0;padding-bottom:0}
.ar-rail-title{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ar-rail-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ar-rail-list a{color:inherit;transition:color .15s}
.ar-rail-list a:hover{color:var(--gold-2)}

.ar-toc{gap:0}
.ar-toc li{padding:0;margin:0}
.ar-toc li::before{display:none}
.ar-toc li a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:none;color:var(--muted);text-decoration:none;display:block;padding:7px 0 7px 12px;border-left:1px solid var(--rule);transition:color .15s,border-color .15s;line-height:1.4}
.ar-toc li a:hover{color:var(--ink);border-left-color:var(--ink)}
.ar-toc li.ar-toc-h3{opacity:.75}
.ar-toc li.ar-toc-h3 a{font-size:9.5px;padding-left:20px}
.ar-toc li.ar-toc-active>a{color:var(--ink);border-left-color:var(--ink);font-weight:500}

/* right rail */
.ar-rail-r{position:sticky;top:152px;align-self:start;display:flex;flex-direction:column;gap:24px}
.ar-share{display:flex;flex-direction:column;gap:6px}
.ar-share button,.ar-share-btn,.ar-print-btn{display:block;padding:8px 12px;border:1px solid var(--rule);background:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s;text-decoration:none;width:100%}
.ar-share button:hover,.ar-share-btn:hover,.ar-print-btn:hover{border-color:var(--ink)}

/* prose */
.ar-prose{min-width:0}
.ar-lede{font-family:var(--serif) !important;font-size:24px !important;line-height:1.45 !important;color:var(--ink) !important;font-style:italic;margin-bottom:32px !important;padding-bottom:32px;border-bottom:1px solid var(--rule);text-wrap:pretty}
.ar-lede::first-letter{font-size:88px;line-height:.85;float:left;margin:6px 12px 0 -6px;font-weight:500;font-style:normal;color:var(--ink);font-family:var(--serif)}
.ar-lede-nodrp::first-letter{font-size:inherit;line-height:inherit;float:none;margin:0;font-weight:inherit}
.ar-prose p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 0 24px;text-wrap:pretty}
.ar-prose h2{font-family:var(--serif) !important;font-size:32px !important;line-height:1.15 !important;letter-spacing:-.01em;margin:48px 0 20px !important;font-weight:500 !important;color:var(--ink) !important;text-wrap:balance}
.ar-prose h3{font-family:var(--serif) !important;font-size:24px !important;line-height:1.2 !important;margin:36px 0 14px !important;font-weight:500 !important}
.ar-prose h4{font-family:var(--serif) !important;font-size:19px !important;line-height:1.25 !important;letter-spacing:-.005em;margin:28px 0 10px !important;font-weight:500 !important;color:var(--ink) !important}
.ar-prose blockquote{margin:40px 0;padding:0 0 0 32px;border-left:2px solid var(--gold)}
.ar-prose blockquote p{font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--ink);font-style:italic;margin-bottom:14px}
.ar-prose blockquote cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-style:normal;display:block}
.ar-prose img{max-width:100%;height:auto;margin:32px 0}
.ar-prose ul,.ar-prose ol{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink-2);padding-left:24px;margin-bottom:20px}
.ar-prose li{margin-bottom:2px}
.ar-prose a{color:var(--gold-2);border-bottom:1px solid var(--gold-2);transition:color .15s}
.ar-prose a:hover{color:var(--ink)}

/* end tags */
.ar-end{max-width:720px;margin:0 auto 64px;padding:32px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.ar-end-tags{display:flex;flex-wrap:wrap;gap:8px}
.ar-end-tag{padding:6px 12px;border:1px solid var(--rule);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:border-color .15s}
.ar-end-tag:hover{border-color:var(--ink);color:var(--ink)}

/* author card */
.ar-author{max-width:720px;margin:0 auto 64px;padding:32px;background:var(--paper-2);display:grid;grid-template-columns:auto 1fr;gap:24px;border:1px solid var(--rule)}
.ar-author-avi{width:84px;height:84px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:30px;letter-spacing:.02em;overflow:hidden;flex-shrink:0}
.ar-author-avi img{width:100%;height:100%;object-fit:cover;filter:saturate(.60) sepia(.15) contrast(.95)}
.ar-author-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ar-author h3{font-family:var(--serif) !important;font-size:24px !important;line-height:1.15;margin:0 0 6px !important;font-weight:500 !important}
.ar-author h3 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .15s}
.ar-author h3 a:hover{border-bottom-color:var(--gold-2);color:var(--gold-2)}
.ar-author-role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px}
.ar-author-bio{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;margin:0}

/* image captions */
.ar-prose figcaption,.ar-prose .wp-element-caption,.ar-prose .wp-caption-text{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important;text-align:center;margin-top:10px!important;margin-bottom:0!important;line-height:1.5}
.ar-prose figure{margin-bottom:32px}
.ar-prose figure img{display:block}

/* related */
.ar-related{padding:48px 0 0;border-top:1px solid var(--ink);margin-bottom:0}
.ar-related-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.ar-related-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px}
.ar-related-h h3{font-family:var(--serif) !important;font-size:32px !important;line-height:1.1;letter-spacing:-.01em;font-weight:500 !important;margin:0 !important}
.ar-related-h a{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .15s}
.ar-related-h a:hover{color:var(--gold-2)}
.ar-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}

/* responsive */
@media(max-width:1100px){
  .ar-body{grid-template-columns:160px 1fr 160px;gap:32px}
}
@media(max-width:860px){
  .ar-body{grid-template-columns:1fr;gap:0}
  .ar-rail-l{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;margin-bottom:32px}
  .ar-rail-r{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:32px}
  .ar-rail-block{border-bottom:0;padding-bottom:0}
  .ar-related-grid{grid-template-columns:1fr 1fr}
  .ar-cover{margin:0 -18px 32px;aspect-ratio:16/9}
}
@media(max-width:560px){
  .ar-related-grid{grid-template-columns:1fr}
  .ar-byline-sep{display:none}
  .ar h1{font-size:clamp(28px,8vw,44px) !important}
  .ar-lede{font-size:20px !important}
  .ar-prose p{font-size:17px}
}

/* ── ESL-CORE token bridge ───────────────────────────────────────────────── */
/* Map esl-core CSS vars to MDU design tokens so engagement/likes/reports
   inherit the site's visual language without touching esl-core source. */
.ar {
  --hairline:   var(--rule);
  --hairline-2: var(--ink);
  --bg-card:    var(--paper);
  --bg-subtle:  var(--paper-2);
  --font-sans:  var(--sans);
  --font-mono:  var(--mono);
}

/* ── Engagement bar ──────────────────────────────────────────────────────── */
.ar-engage {
  max-width: 720px;
  margin: 0 auto 48px;
}
.ar-engage.esl-engage--bottom {
  padding: 16px 0 14px;
  border-top: 1px solid var(--rule);
}

/* Override esl-core pill buttons → MDU sharp-corner mono style */
.ar-engage .esl-engage-btn {
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-color: var(--rule);
  color: var(--muted);
}
.ar-engage .esl-engage-btn:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
}

/* Like active — MDU burgundy/gold accent instead of red */
.ar-engage .esl-like-btn.esl-like-active {
  border-color: var(--burgundy, #7a2e2a);
  color: var(--burgundy, #7a2e2a);
  background: rgba(122,46,42,.06);
}
.ar-engage .esl-like-btn.esl-like-active svg {
  fill: var(--burgundy, #7a2e2a);
  stroke: var(--burgundy, #7a2e2a);
}

/* Save active — gold accent */
.ar-engage .esl-save-btn.esl-save-active {
  border-color: var(--gold-2);
  color: var(--gold-2);
  background: rgba(184,137,63,.06);
}
.ar-engage .esl-save-btn.esl-save-active svg {
  fill: var(--gold-2);
  stroke: var(--gold-2);
}
.ar-engage .esl-save-btn.esl-save-active:hover { background: rgba(184,137,63,.1); }

/* Share popup — MDU paper style */
.ar-engage .esl-share-popup {
  border-radius: 2px;
  border-color: var(--rule);
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(21,22,26,.1);
}
.ar-engage .esl-share-item {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ar-engage .esl-share-item:hover { background: var(--paper-2); color: var(--ink); }

/* Report button — push right, inherit engagement style */
.ar-engage .esl-report-btn.ar-engage-report {
  margin-left: auto;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ar-engage .esl-report-btn.ar-engage-report::before { content: none; }
.ar-engage .esl-report-btn.ar-engage-report:hover { border-color: var(--burgundy, #7a2e2a); color: var(--burgundy, #7a2e2a); background: transparent; }

/* ── WP Comments ─────────────────────────────────────────────────────────── */
.ar-comments {
  max-width: 720px;
  margin: 0 auto 64px;
  padding-top: 0 !important; /* override Storefront #comments { padding-top } */
}
/* Override Storefront parent theme's #comments { padding-top } — ID selector needs !important */
.ar-comments .comments-area { padding: 0 !important; margin: 0 !important; }
.ar-comments .comments-title,
.ar-comments #reply-title {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin: 0 0 32px !important;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ar-comments #reply-title { font-size: 22px !important; margin-bottom: 20px !important; }
.ar-comments #reply-title small { font-size: 13px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ar-comments #reply-title small a { color: var(--muted); }

/* Comment list */
.ar-comments .comment-list,
.ar-comments .children { list-style: none; padding: 0; margin: 0; }
.ar-comments .comment { margin-bottom: 32px; }
.ar-comments .children { margin: 20px 0 0 40px; padding-left: 20px; border-left: 1px solid var(--rule); }
.ar-comments .comment-body { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.ar-comments .comment-author .avatar {
  width: 48px !important; height: 48px !important;
  border-radius: 50%; object-fit: cover;
}
.ar-comments .comment-meta { grid-column: 2; }
.ar-comments .comment-author b { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); font-style: normal; }
.ar-comments .comment-author b a { color: inherit; text-decoration: none; }
.ar-comments .comment-metadata,
.ar-comments .comment-metadata a {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); text-decoration: none; margin-top: 4px; display: block;
}
.ar-comments .comment-content { grid-column: 2; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ar-comments .comment-content p { margin: 0 0 12px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.ar-comments .comment-content p:last-child { margin-bottom: 0; }
.ar-comments .reply { grid-column: 2; margin-top: 8px; }
.ar-comments .comment-reply-link {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .15s;
}
.ar-comments .comment-reply-link:hover { color: var(--gold-2); }
.ar-comments .bypostauthor .comment-author b::after {
  content: 'Autorius';
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper); background: var(--gold-2); padding: 2px 7px; margin-left: 8px;
  vertical-align: middle;
}
.ar-comments .comment-awaiting-moderation {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: 6px;
}

/* Comment form — no top spacing by default (no comments yet case) */
.ar-comments .comment-respond { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
/* Add separator only when a comment list precedes the form */
.ar-comments .comment-list ~ .comment-respond,
.ar-comments .comments-area .comment-list ~ .comment-respond {
  margin-top: 48px !important; padding-top: 32px !important; border-top: 1px solid var(--rule) !important;
}
.ar-comments .comment-form-comment label,
.ar-comments .comment-form-author label,
.ar-comments .comment-form-email label,
.ar-comments .comment-form-url label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ar-comments .comment-form-comment textarea,
.ar-comments .comment-form-author input,
.ar-comments .comment-form-email input,
.ar-comments .comment-form-url input {
  display: block; width: 100%; padding: 12px 14px;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 2px; outline: none; box-sizing: border-box;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
}
.ar-comments .comment-form-comment textarea { resize: vertical; min-height: 120px; }
.ar-comments .comment-form-comment textarea:focus,
.ar-comments .comment-form-author input:focus,
.ar-comments .comment-form-email input:focus,
.ar-comments .comment-form-url input:focus {
  border-color: var(--gold); background: var(--paper);
}
.ar-comments .comment-form { display: flex; flex-direction: column; gap: 16px; }
.ar-comments .form-submit { margin: 0; }
.ar-comments .comment-form p { margin: 0; }
.ar-comments #submit {
  display: inline-block; padding: 13px 28px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border: 0; border-radius: 2px; cursor: pointer; transition: background .2s;
}
.ar-comments #submit:hover { background: var(--gold-2); }
.ar-comments .comment-notes,
.ar-comments .logged-in-as {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.ar-comments .logged-in-as a,
.ar-comments .comment-notes a {
  color: var(--gold, #c9a96e) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.ar-comments .no-comments {
  font-family: var(--serif); font-size: 17px; color: var(--muted);
  text-align: center; padding: 32px 0;
}
@media(max-width:560px){
  .ar-comments .comment-body { grid-template-columns: 36px 1fr; gap: 12px; }
  .ar-comments .children { margin-left: 20px; padding-left: 12px; }
}