/* The Articles section: the list on articles.html and each article in articles/. */

/* The list: newest first, one card per article. */
.ar-list{max-width:var(--maxw); margin:0 auto; padding:0 24px 80px}
.ar-cards{display:grid; gap:18px; margin-top:18px}
.ar-card{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:center; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); text-decoration:none}
.ar-card:hover{border-color:var(--accent); background:var(--accent-soft); text-decoration:none; color:var(--ink)}
.ar-card time{display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.ar-card h2{font-size:22px; line-height:1.25; letter-spacing:-.015em; font-weight:800; margin:0 0 8px}
.ar-card p{font-size:15.5px; line-height:1.6; color:var(--ink-2); margin:0}
.ar-card .more{display:inline-block; margin-top:10px; font-size:14px; font-weight:700; color:var(--accent)}
.ar-card img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; border-radius:var(--radius-sm); border:1px solid #b9c0ce}
.ar-empty{color:var(--muted)}
@media (max-width:720px){.ar-list{padding:0 16px 60px} .ar-card{grid-template-columns:1fr; gap:14px; padding:16px} .ar-card img{order:-1}}

/* One article: a reading column, with figures allowed a little wider. */
.ar{max-width:760px; margin:0 auto; padding:0 24px 80px}
.ar-head{padding:34px 0 8px}
.ar-head .eyebrow{display:block; margin:0 0 8px}
.ar-head .eyebrow a{color:var(--accent)}
.ar-head h1{font-size:clamp(28px,4vw,40px); line-height:1.12; letter-spacing:-.025em; font-weight:800; margin:0 0 14px; text-wrap:balance}
.ar-head .lede{font-size:19px; line-height:1.55; color:var(--ink-2); margin:0}

.ar-body{font-size:17px; line-height:1.7; color:var(--ink-2)}
.ar-body h2{font-size:24px; line-height:1.25; letter-spacing:-.015em; color:var(--ink); font-weight:800; margin:40px 0 10px}
.ar-body h3{font-size:18px; line-height:1.35; color:var(--ink); font-weight:700; margin:28px 0 6px}
.ar-body p{margin:0 0 16px}
.ar-body ul{margin:0 0 18px; padding-left:22px}
.ar-body li{margin-bottom:8px}
.ar-body strong{color:var(--ink)}
.ar-body mark{background:var(--amber-soft); color:var(--ink); padding:0 2px; border-radius:3px}
.ar-body code{font-size:.9em; background:var(--bg-soft); padding:1px 5px; border-radius:5px}

.ar-body .fig{margin:28px 0}
.ar-body .fig img{display:block; width:100%; height:auto; border-radius:var(--radius-sm); border:1px solid #b9c0ce; box-shadow:var(--shadow)}
.ar-body .fig figcaption{margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted)}

/* A table of figures. It scrolls sideways on a phone rather than squashing. */
.ar-body .tbl{overflow-x:auto; margin:4px 0 20px}
.ar-body table{border-collapse:collapse; font-size:15px; line-height:1.45; min-width:100%}
.ar-body th{text-align:left; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 14px 8px 0; border-bottom:2px solid var(--ink)}
.ar-body td{padding:9px 14px 9px 0; border-bottom:1px solid var(--line); vertical-align:top}
.ar-body td:not(:first-child){white-space:nowrap}

/* Author-only scratch, shown on localhost only (md.js drops it elsewhere). */
.ar-body .draft-notes{margin:48px 0 8px; padding:18px 20px 6px; border:1px dashed #b9c0ce; border-radius:var(--radius); background:var(--bg-soft)}
.ar-body .draft-notes .draft-tag{display:inline-block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--muted); border:1px solid #c9cfdb; border-radius:20px; padding:3px 10px; margin-bottom:10px}
.ar-body .draft-notes h2{margin-top:0}
.ar-body .draft-notes, .ar-body .draft-notes p, .ar-body .draft-notes li{font-size:15px; color:var(--ink-2)}

.ar-foot{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:720px){.ar{padding:0 16px 60px} .ar-head{padding-top:24px} .ar-head .lede{font-size:17px} .ar-body{font-size:16px}}
.ar-body .li-post{white-space:pre-wrap; font-family:var(--font); font-size:15px; line-height:1.6; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; margin:0 0 16px}

/* A figure opens full size over the page when clicked (articles.js). */
.ar-body .fig img[role="button"]{cursor:zoom-in}
.ar-body .fig img[role="button"]:hover, .ar-body .fig img[role="button"]:focus-visible{border-color:var(--accent); outline:none}
.ar-zoom{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(22,24,29,.9); cursor:zoom-out}
.ar-zoom img{max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); width:auto; height:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg)}