/* ============================================================
   /ball-flight/ article (release 004), scoped under .post.
   Tokens come from /assets/css/site.css. Figures are drawn by
   article.js at the width of .fig-plot.
   ============================================================ */

/* ---------- header ---------- */
.post .article-header{max-width:72ch;margin-bottom:28px;}
.post .article-header .kicker{display:block;margin-bottom:14px;}
.post .article-header h1{margin-bottom:14px;}
.post .article-header .dek{
  font-size:17px;
  color:var(--ink-soft);
  max-width:60ch;
  line-height:1.6;
  margin-bottom:18px;
}
.post .article-header .byline{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.02em;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.post .article-header .byline .sep{margin:0 8px;color:var(--line);}

/* ---------- call to action cards ---------- */
.post .cta-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
  margin:36px 0;
}
.post .cta-card.cta-top{margin:0 0 32px;max-width:72ch;}
.post .cta-card .kicker{display:block;margin-bottom:10px;}
.post .cta-card .cta-title{display:block;color:var(--ink);font-size:22px;}
.post .cta-card .cta-title,
.post .cta-card h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  max-width:42ch;
  line-height:1.3;
  margin-bottom:10px;
}
.post .cta-card p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:60ch;
  margin-bottom:14px;
}

/* ---------- chapters ---------- */
.post .chapter{margin:52px 0;}
.post .chapter:first-of-type{margin-top:36px;}
.post .chapter-kicker{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-bottom:10px;
}
.post .chapter h2{
  margin-top:0;
  max-width:34ch;
  line-height:1.28;
  font-size:24px;
}
.post .chapter a:not(.btn){color:var(--clay-text);text-underline-offset:2px;}

/* numbered coaching moves */
.post ol.moves{
  max-width:72ch;
  margin:6px 0 20px;
  padding-left:0;
  list-style:none;
  counter-reset:move;
}
.post ol.moves li{
  counter-increment:move;
  position:relative;
  padding:0 0 0 42px;
  margin-bottom:18px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-soft);
}
.post ol.moves li::before{
  content:counter(move);
  position:absolute;
  left:0;
  top:1px;
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  color:var(--clay-text);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- figures ---------- */
.post figure.fig{margin:28px 0 30px;padding:18px 18px 14px;}
.post figure.fig .fig-title{font-size:14px;color:var(--ink);line-height:1.4;margin-bottom:10px;font-weight:500;}
.post figure.fig .fig-title strong{font-weight:600;}
.post figure.fig .fig-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
}
.post figure.fig .legend-item{display:inline-flex;align-items:center;gap:6px;}
.post figure.fig .legend-item svg{flex:none;}
.post figure.fig .fig-plot{position:relative;min-height:120px;}
.post figure.fig .fig-plot svg{display:block;max-width:100%;overflow:visible;}
.post figure.fig .fig-plot .hit{cursor:default;outline:none;}
.post figure.fig .fig-plot .hit:hover .mark,
.post figure.fig .fig-plot .hit:focus-visible .mark{filter:brightness(1.12);}
.post figure.fig .fig-plot .hit:focus-visible rect:first-child,
.post figure.fig .fig-plot .hit:focus-visible circle:first-child{stroke:var(--clay);stroke-width:2;}
.post figure.fig .fig-plot rect[tabindex]:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}
.post figure.fig .fig-plot noscript{font-size:13px;color:var(--ink-soft);}
.post figure.fig figcaption{margin-top:12px;}
.post figure.fig figcaption strong{color:var(--ink);font-weight:500;}
.post figure.fig .badge-modeled{margin-left:6px;}

/* data table fallback inside a details element */
.post details.fig-table{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
.post details.fig-table summary{
  cursor:pointer;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--clay-text);
  letter-spacing:.06em;
  padding:6px 0;
  min-height:32px;
}
.post details.fig-table .tbl-note{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.6;
  margin-top:8px;
  max-width:none;
}

/* tables */
.post .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px;}
.post table.data{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.post table.data th,
.post table.data td{
  padding:7px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.4;
}
.post table.data thead th{
  font-weight:500;
  color:var(--ink-soft);
  font-size:11px;
  letter-spacing:.03em;
  border-bottom:2px solid var(--line);
  vertical-align:bottom;
}
.post table.data th.l,
.post table.data td.l{text-align:left;}
.post table.data th.r,
.post table.data td.r{text-align:right;white-space:nowrap;}
.post table.data tbody th{font-weight:500;color:var(--ink);white-space:nowrap;background:var(--card);}
.post table.data.presets tbody tr.group-start th,
.post table.data.presets tbody tr.group-start td{border-top:2px solid var(--line);}
.post table.data.presets tbody tr:first-child th,
.post table.data.presets tbody tr:first-child td{border-top:0;}
.post table.data .badge-modeled{
  display:inline-block;
  margin:0 0 0 6px;
  font-size:9.5px;
  padding:0 6px;
}
.post .scroll-hint{
  display:none;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 6px;
  max-width:none;
}
.post .tbl-wrap:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}
@media (max-width:760px){.post .scroll-hint{display:block;}}
.post figure.fig-table-first .tbl-wrap{margin-top:4px;}
.post table.data.presets tbody th{position:sticky;left:0;z-index:1;}

/* tooltip (one shared element, appended to body by article-svg.js) */
.fig-tip{
  position:fixed;
  z-index:50;
  pointer-events:none;
  background:var(--ink);
  color:var(--card);
  border-radius:var(--radius);
  padding:9px 11px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.5;
  max-width:min(300px,calc(100vw - 24px));
  box-shadow:0 2px 10px rgba(28,27,24,.25);
}
.fig-tip[hidden]{display:none;}
.fig-tip .tip-head{font-family:var(--sans);font-weight:600;font-size:12px;margin-bottom:4px;}
.fig-tip .tip-row{display:flex;align-items:center;gap:8px;}
.fig-tip .tip-key{flex:none;}
.fig-tip .tip-val{font-weight:500;}
.fig-tip .tip-lab{color:#D9CFBD;}
.fig-tip .tip-key line{filter:brightness(1.6);}

/* figure 3 panel pair */
.post .fig-panels{width:100%;}

/* figure 5 grid */
.post .win-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 12px;
}
.post .win{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 8px 8px;
  background:var(--bg);
  min-width:0;
}
.post .win svg{width:100%;height:auto;display:block;}
.post .win-name{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ink);margin-top:6px;}
.post .win-nums{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:2px;}
.post .win-recipe{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5;}

/* ---------- methods and limits ---------- */
.post details.method{
  margin:44px 0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  max-width:72ch;
}
.post details.method summary{
  cursor:pointer;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  padding:16px 20px;
  min-height:48px;
  list-style:none;
}
.post details.method summary::-webkit-details-marker{display:none;}
.post details.method summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--clay-text);font-size:16px;}
.post details.method[open] summary::after{content:"\2212";}
.post details.method .method-hint{font-size:13px;color:var(--ink-soft);}
.post details.method .method-body{padding:2px 20px 18px;border-top:1px solid var(--line);}
.post details.method .method-body p{font-size:14.5px;margin-top:14px;}
.post details.method ul{margin:10px 0 0 0;padding-left:0;list-style:none;}
.post details.method li{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
  padding:10px 0;
  border-top:1px solid var(--line);
}
.post details.method li:first-child{border-top:0;}
.post details.method li strong{color:var(--ink);}

/* ---------- sources ---------- */
.post .sources h2{margin-top:44px;}
.post .sources dl{max-width:72ch;}
.post .sources dt{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-top:18px;
  margin-bottom:6px;
}
.post .sources dt:first-child{margin-top:0;}
.post .sources dd{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.65;
  overflow-wrap:anywhere;
}
.post .sources dd a{color:var(--clay-text);}
.post .sources .sources-note{font-size:13px;margin-top:22px;}

/* ---------- phones ---------- */
@media (max-width:640px){
  .post .cta-card{padding:22px 20px;}
  .post figure.fig{padding:14px 12px 12px;}
  .post .chapter h2{font-size:22px;}
  .post .win-grid{gap:10px 6px;}
  .post .win{padding:5px 5px 6px;}
  .post .win-name{font-size:12.5px;}
  .post .win-nums{font-size:10px;}
  .post .win-recipe{display:none;}
  .post details.method summary{padding:14px 16px;}
  .post details.method .method-body{padding:2px 16px 16px;}
}