/* ==================================================================
   ARTICLES — /arthra/ and every article under it. Built on work.css
   and landing.css (labels, buttons, FAQ); this file only adds the
   reading column, the short-answer box, tables and the article list.
   Greek text falls back to Helvetica Neue via --gr, like the landing.
   ================================================================== */

.ar-hero {
  padding: clamp(130px, 15vw, 200px) var(--pad) clamp(40px, 5vw, 70px);
}

/* The article hero sits on the same 720px column as the text below;
   the /arthra/ index keeps the full width. */
.ar-hero.is-column > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.ar-hero.is-column h1 { font-size: clamp(38px, 4.6vw, 66px); }

.ar-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ar-crumbs li + li::before { content: "/"; margin-right: 8px; }
.ar-crumbs a:hover { color: var(--blue); }

.ar-hero h1 {
  max-width: 15em;
  margin: 0;
  font: 700 clamp(40px, 5.6vw, 92px)/1 var(--gr);
  letter-spacing: -.04em;
}

.ar-hero h1 span { color: var(--blue); }

.ar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 28px 0 0;
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Reading column ---------- */

.ar-body {
  padding: 0 var(--pad) clamp(70px, 9vw, 130px);
}

.ar-body > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.ar-body p,
.ar-body li {
  font: 400 clamp(17px, 1.2vw, 19px)/1.7 var(--gr);
  color: #2b2924;
}

.ar-body p { margin-top: 0; margin-bottom: 22px; }

.ar-body .ar-lead {
  font: 400 clamp(19px, 1.5vw, 23px)/1.55 var(--gr);
  color: var(--ink);
}

.ar-body h2 {
  margin-top: clamp(56px, 6vw, 84px);
  margin-bottom: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
  font: 700 clamp(26px, 2.4vw, 38px)/1.12 var(--gr);
  letter-spacing: -.025em;
}

.ar-body h3 {
  margin-top: 34px;
  margin-bottom: 10px;
  font: 700 clamp(19px, 1.5vw, 23px)/1.25 var(--gr);
  letter-spacing: -.015em;
}

.ar-body ul,
.ar-body ol { padding-left: 1.3em; margin-bottom: 26px; }
.ar-body ul { list-style: disc; }
.ar-body ol { list-style: decimal; }
.ar-body li { margin-bottom: 10px; }
.ar-body li::marker { color: var(--blue); font-weight: 700; }

.ar-body a:not(.wk-btn) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
}

.ar-body strong { font-weight: 700; color: var(--ink); }

/* ---------- Short answer ---------- */

.ar-answer {
  margin-top: 8px;
  margin-bottom: 40px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
  background: var(--ink);
  color: var(--white);
}

.ar-answer .wk-label { color: #9aa4ff; margin: 0 0 14px; }

.ar-body .ar-answer p {
  margin: 0;
  font: 400 clamp(17px, 1.3vw, 20px)/1.6 var(--gr);
  color: var(--white);
}

.ar-body .ar-answer strong { color: var(--white); }

/* ---------- Tables ---------- */

.ar-table-wrap { overflow-x: auto; margin-bottom: 30px; }

.ar-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 clamp(15.5px, 1.1vw, 17.5px)/1.45 var(--gr);
}

.ar-table th,
.ar-table td {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ar-table th {
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--ink);
}

.ar-table td:last-child { font-weight: 700; white-space: nowrap; }

.ar-note {
  font-size: 15px !important;
  color: var(--muted) !important;
}

/* ---------- Closing call to action ---------- */

.ar-cta {
  margin-top: clamp(56px, 6vw, 84px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 18px;
  background: var(--paper-deep);
  color: var(--ink);
}

.ar-body .ar-cta h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.ar-cta .lp-actions { margin-top: 26px; }

.ar-body .lp-faq { margin-top: 10px; }

/* ---------- Article list (/arthra/) ---------- */

.ar-list {
  margin: 0;
  padding: 0 var(--pad) clamp(70px, 9vw, 130px);
  list-style: none;
}

.ar-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 40px;
  align-items: end;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--ink);
}

.ar-list li:last-child a { border-bottom: 1px solid var(--ink); }

.ar-list .wk-label { grid-column: 1 / -1; color: var(--blue); margin: 0; }

.ar-list h2 {
  margin: 0;
  font: 700 clamp(26px, 3vw, 48px)/1.05 var(--gr);
  letter-spacing: -.03em;
  transition: color .25s;
}

.ar-list p {
  grid-column: 1;
  max-width: 44em;
  margin: 0;
  font: 400 clamp(16px, 1.15vw, 18px)/1.6 var(--gr);
  color: #38352f;
}

.ar-go {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background .25s, color .25s, box-shadow .25s;
}

.ar-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ar-list a:hover h2 { color: var(--blue); }
.ar-list a:hover .ar-go { background: var(--blue); color: var(--white); box-shadow: none; }

@media (width <= 700px) {
  .ar-list a { grid-template-columns: 1fr; }
  .ar-go { display: none; }
  .ar-table td:last-child { white-space: normal; }
}