/* Human Converter: the articles section (/articles and /articles/:slug).
   The header and footer are the home page's markup (base.css); the phone menu
   rules below are the home page's, scoped to body.page-articles. The article
   reads in one column of about 68 characters, with the Archivo display face for
   the title and mono labels for the date and reading time. The closing call to
   action is a dark panel with the sample role button and a drop zone.
   Classes here are acta-* / article-* / articles-* only: onboarding.js loads
   landing.css when the converter runs, and its .dropzone rules are unscoped. */

.page-articles { min-height: 100vh; display: flex; flex-direction: column; }
.page-articles main { flex: 1 0 auto; }
.page-articles main:focus { outline: none; box-shadow: none; }

/* =========================================================
   Header (same as the home page) and footer touch targets
   ========================================================= */

.page-articles .site-nav a:not(.btn):hover { color: var(--orange-dark); }
.page-articles .site-nav a[aria-current]:not(.btn) { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.page-articles .nav-cta { font-size: 15px; font-weight: 600; padding: 0 22px; }
.page-articles .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

.page-articles .menu-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: var(--border); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
}
.page-articles .menu-toggle svg { width: 20px; height: 20px; }
.page-articles .menu-toggle:focus-visible { border-radius: 50%; }
.page-articles .menu-icon-close { display: none; }
.page-articles .site-header.is-open .menu-icon-open { display: none; }
.page-articles .site-header.is-open .menu-icon-close { display: block; }

@media (max-width: 760px) {
  .page-articles .site-header .wrap { padding-top: 14px; padding-bottom: 14px; row-gap: 0; }
  .page-articles .logo { font-size: 14px; gap: 8px; }
  .page-articles .logo svg { width: 22px; height: 22px; }
  .page-articles .menu-toggle { display: inline-flex; }
  .page-articles .site-nav {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 0 6px;
  }
  .page-articles .site-header.is-open .site-nav { display: flex; }
  .page-articles .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px;
  }
  .page-articles .site-nav .nav-cta { margin-top: 14px; min-height: 48px; }
}

/* =========================================================
   One article
   ========================================================= */

.article-column { max-width: 68ch; margin: 0 auto; font-size: 19px; }

.article-head { padding-top: clamp(28px, 5vw, 56px); }
.article-head .article-column { padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--line); }

/* Breadcrumb: Home / Articles */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; }
.crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-3); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--orange-dark); }

.article-eyebrow { margin-top: 12px; font-size: 13px; }
.article-title {
  margin-top: 14px; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--ink); overflow-wrap: break-word;
}
.article-standfirst { margin-top: 22px; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; color: var(--text-2); }

/* ---------- The body text ---------- */

.article-body {
  padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(16px, 3vw, 32px);
  line-height: 1.65; color: var(--text-2); overflow-wrap: break-word;
}
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2 {
  margin: 2.1em 0 0.6em; scroll-margin-top: 24px;
  font-stretch: 112%; font-weight: 800; font-size: clamp(25px, 2.7vw, 31px); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink);
}
.article-body h3 {
  margin: 1.7em 0 0.4em; scroll-margin-top: 24px;
  font-stretch: 105%; font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--ink);
}
.article-body h4 { margin: 1.4em 0 0.3em; font-size: 19px; font-weight: 700; color: var(--ink); }
.article-body h2 + h3 { margin-top: 0.9em; }

.article-body a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.article-body a:hover { color: var(--orange-dark); }
.article-body strong { color: var(--ink); font-weight: 700; }

.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article-body li { margin: 0 0 0.55em; padding-left: 0.2em; }
.article-body li > p { margin-bottom: 0.4em; }
.article-body ul li::marker { color: var(--orange-dark); }
.article-body ol li::marker { font-family: var(--font-mono); font-size: 0.9em; font-weight: 600; color: var(--orange-dark); }

.article-body blockquote {
  margin: 1.6em 0; padding: 20px 24px;
  background: var(--paper); border: var(--border); border-left: 6px solid var(--orange); border-radius: 16px;
  color: var(--ink);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body hr { margin: 2.4em 0; border: none; border-top: 1px solid var(--line); }
.article-body img { height: auto; margin: 1.6em 0; border: var(--border); border-radius: var(--radius); }
.article-body code {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; color: var(--ink);
}
.article-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 0.9em; display: block; overflow-x: auto; }
.article-body th, .article-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { font-family: var(--font-mono); font-size: 0.8em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* =========================================================
   The closing call to action (dark panel)
   ========================================================= */

.acta { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(64px, 9vw, 104px); }
.acta-panel {
  max-width: 960px; margin: 0 auto; padding: clamp(28px, 5vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg);
}
.acta-eyebrow { color: var(--on-ink-muted); }
.acta-title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; letter-spacing: -0.02em; color: var(--on-ink); max-width: 24ch; overflow-wrap: break-word; }
.acta-text { max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--on-ink-2); }
.acta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.acta-panel .btn:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--orange-light); }

/* The drop zone: a <label> for the file input */
.acta-drop {
  position: relative; align-self: stretch; margin-top: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 22px 24px;
  border: 2px dashed var(--on-ink-muted); border-radius: 18px; cursor: pointer; color: var(--on-ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.acta-drop:hover { background: var(--ink-2); }
.acta-drop:focus-within { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--orange-light); }
@supports selector(:has(*)) {
  /* A ring for keyboard focus only, not after a click on the zone */
  .acta-drop:focus-within { box-shadow: none; }
  .acta-drop:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--orange-light); }
}
.acta-drop.is-dragover { border-style: solid; border-color: var(--orange-light); background: var(--ink-3); }
.acta-drop.is-disabled { cursor: not-allowed; opacity: .6; }
.acta-drop.is-disabled:hover { background: transparent; }
.acta-drop-icon { width: 30px; height: 30px; flex: none; color: var(--orange-light); }
.acta-drop-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.acta-drop-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.acta-drop-meta { font-size: 14px; color: var(--on-ink-muted); }
.acta-drop-btn { pointer-events: none; flex: none; }
.acta-tap { display: none; }

.acta-error {
  align-self: stretch; margin: 0; padding: 12px 16px;
  border: 1.5px solid var(--orange-light); border-radius: var(--radius-sm);
  background: var(--ink-2); color: var(--on-ink); font-size: 15px; font-weight: 600;
}
.acta-noscript { font-size: 15px; color: var(--on-ink-2); }

.acta-converter { max-width: 960px; margin: 24px auto 0; min-width: 0; scroll-margin-top: 16px; }
.acta-converter:focus { outline: none; box-shadow: none; }

/* Touch screens: no dragging, so the zone reads as an upload button */
@media (hover: none) and (pointer: coarse) {
  .acta-drag { display: none; }
  .acta-tap { display: inline; }
}

/* =========================================================
   The index
   ========================================================= */

.articles-hero { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(28px, 4vw, 48px); }
.articles-title { margin-top: 16px; max-width: 20ch; font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -0.025em; overflow-wrap: break-word; }
.articles-lede { margin-top: 22px; max-width: 640px; }

.articles-list-section { padding-bottom: clamp(16px, 3vw, 32px); }
.articles-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px;
}

.article-card > article {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 28px;
  background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.article-card > article:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.article-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.article-card-role {
  font-weight: 600; color: var(--orange-dark); border: 1px solid var(--orange-dark); border-radius: 999px; padding: 3px 10px;
}
.article-card-title { font-stretch: 112%; font-weight: 800; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.14; letter-spacing: -0.015em; }
.article-card-title a { color: var(--ink); text-decoration: none; }
/* The whole card is the link (the title's link stretches over it) */
.article-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.article-card-title a:focus-visible { box-shadow: none; }
.article-card-title a:focus-visible::after { box-shadow: var(--focus); }
.article-card-desc { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.article-card-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--ink); }
.article-card-more svg { width: 18px; height: 18px; transition: transform .15s ease; }
.article-card > article:hover .article-card-more { color: var(--orange-dark); }
.article-card > article:hover .article-card-more svg { transform: translateX(3px); }

.articles-empty {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px; background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
}
.articles-empty p { flex: 1 1 320px; color: var(--text-2); }

.acta-index .acta-panel { max-width: none; }
.acta-panel-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.acta-panel-row .acta-title { flex: 1 1 360px; }

/* =========================================================
   Phones and reduced motion
   ========================================================= */

@media (max-width: 600px) {
  .article-column { font-size: 18px; }
  .article-body h3 { font-size: 20px; }
  .article-body blockquote { padding: 16px 18px; }
  .acta-panel { border-radius: var(--radius); }
  .acta-panel .btn { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; }
  .acta-actions, .acta-actions .btn, .acta-panel-row .btn { width: 100%; }
  .acta-drop { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px; }
  .acta-drop-icon { align-self: center; }
  .acta-drop-text { flex-basis: auto; }
  .acta-drop-btn { width: 100%; }
  .article-card > article { padding: 22px; }
  .articles-empty { padding: 22px; }
  .articles-empty .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .article-card > article, .article-card-more svg, .acta-drop { transition: none; }
  .article-card > article:hover { transform: none; }
  .article-card > article:hover .article-card-more svg { transform: none; }
}