/* AVICO — article pages (/articles, /articles/<slug>) and the live preview in the admin editor.
   Loaded only on article pages and in /admin, so nothing here touches the rest of the site.
   The colours fall back to the site's palette when style.css isn't on the page (the admin). */

.prose{
  --p-ink:var(--ink,#111);--p-ink2:var(--ink2,#2E2E2E);--p-mute:var(--mute,#6B6B6B);--p-line:var(--line,#D8D8D4);
  --p-accent:var(--blue,#2BB5FF);--p-link:var(--blue-ink,#0B6FA8);
  max-width:42rem;font-size:clamp(17.5px,1.25vw,19px);line-height:1.85;color:var(--p-ink2);
  font-family:var(--fd,"Heebo","Helvetica Neue",Arial,sans-serif);overflow-wrap:break-word
}
.prose > * + *{margin-top:1.15em}
.prose p{margin:0}
.prose h2{margin:2.2em 0 0;font-size:clamp(25px,2.2vw,31px);line-height:1.25;font-weight:800;letter-spacing:-.02em;color:var(--p-ink);scroll-margin-top:96px}
.prose h3{margin:1.8em 0 0;font-size:clamp(20px,1.6vw,23px);line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--p-ink);scroll-margin-top:96px}
.prose h4{margin:1.6em 0 0;font-size:18px;font-weight:700;color:var(--p-ink)}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.6em}
.prose > :first-child{margin-top:0}
.prose strong{font-weight:700;color:var(--p-ink)}
.prose a{color:var(--p-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{margin-block:1.15em 0;padding-inline-start:1.4em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--p-mute)}
.prose ol li::marker{font-weight:700}
.prose blockquote{margin-inline:0;padding:.2em 1.1em .2em 0;border-inline-start:3px solid var(--p-accent);color:var(--p-ink);font-size:1.06em}
.prose blockquote > * + *{margin-top:.8em}
.prose hr{border:0;border-top:1px solid var(--p-line);margin:2.4em 0}
.prose img{display:block;max-width:100%;height:auto}
.prose figure{margin-inline:0}
.prose figcaption{margin-top:.6em;font-size:14.5px;line-height:1.5;color:var(--p-mute)}
.prose code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:rgba(0,0,0,.05);padding:.1em .35em;direction:ltr;unicode-bidi:isolate}
.prose-table{overflow-x:auto;border-top:1px solid var(--p-ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.92em;line-height:1.55}
.prose th,.prose td{text-align:start;vertical-align:top;padding:.7em 0 .7em 1em;border-bottom:1px solid var(--p-line)}
.prose th{font-weight:700;color:var(--p-ink)}

/* table of contents, shown when an article has three sections or more */
.art-toc{border-top:1px solid var(--p-ink);border-bottom:1px solid var(--p-line);padding:1em 0 1.1em}
.prose .art-toc-title{margin:0 0 .4em;font-size:14px;font-weight:500;letter-spacing:0;color:var(--p-mute)}
.art-toc ol{margin:0;padding-inline-start:1.3em;font-size:16px;line-height:1.6}
.art-toc a{text-decoration:none;color:var(--p-ink)}
.art-toc a:hover{text-decoration:underline}

/* ---------- the article page ---------- */
.art-hero.phero{padding-bottom:clamp(36px,5vw,64px)}
.art-hero .copy{max-width:860px}
.art-title{font-size:clamp(38px,4.6vw,72px);line-height:1.04}
.art-kicker{margin-bottom:16px}
.art-meta{margin-top:26px;font-size:15px;color:var(--mute,#6B6B6B)}
.art-main{padding-bottom:clamp(56px,8vw,110px)}
.art-cover{margin:0 0 clamp(36px,5vw,60px);max-width:1040px}
.art-cover img{display:block;width:100%;height:auto;border:1px solid var(--line,#D8D8D4);background:#fff}
.art-faq{max-width:42rem;margin-top:clamp(56px,7vw,90px)}
.art-faq h2{font-size:clamp(25px,2.2vw,31px);font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.art-faq .faq summary{font-size:18px}
.art-faq .faq details p{font-size:17px;line-height:1.75}
.art-tags{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:42rem}
.art-tags li{font-size:14px;border:1px solid var(--line,#D8D8D4);background:rgba(255,255,255,.7);padding:5px 12px}

/* the reading column sits on the page: on phones the ribbon behind it fades almost out */
@media (max-width:760px){ body:has(.art-main) #ribbon{opacity:.12} }

/* ---------- article cards (the list and "more articles") ---------- */
.art-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.art-grid{grid-template-columns:1fr}}
.art-card{display:flex}
.art-card-link{display:flex;flex-direction:column;width:100%;background:var(--card,#fff);border:1px solid var(--line,#D8D8D4);text-decoration:none;color:var(--ink,#111);transition:transform .5s var(--ease,ease),box-shadow .5s var(--ease,ease),border-color .3s}
.art-card-link:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(0,0,0,.35);border-color:var(--ink,#111)}
.art-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#E9E9E6;border-bottom:1px solid var(--line,#D8D8D4)}
.art-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.art-thumb-empty{background:linear-gradient(135deg,#ECECE9 0,#E2E2DE 100%)}
.art-card-text{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.art-cat{font-size:13.5px;font-weight:500;color:var(--mute,#6B6B6B)}
.art-card-title{margin:0;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.art-card-desc{font-size:15.5px;line-height:1.6;color:var(--mute,#6B6B6B)}
.art-date{margin-top:auto;padding-top:8px;font-size:13.5px;color:var(--mute,#6B6B6B)}

.art-more{padding-bottom:clamp(40px,6vw,80px)}
.art-more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 30px;border-top:1px solid var(--ink,#111);padding-top:22px;margin-bottom:26px}
.art-more-head h2{font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em}
.art-empty .story a{color:var(--blue-ink,#0B6FA8)}

/* the admin preview of a page that isn't live yet */
.art-preview-flag{position:fixed;bottom:16px;inset-inline-start:16px;z-index:60;background:#111;color:#fff;font-size:14px;padding:8px 14px}