/* ============================================================
   CoffeeBench article — minimal overlay on top of distill.pub
   template.v2 (https://distill.pub/template.v2.js).

   Strategy:  let template.v2 handle d-article / d-appendix
   typography, grid, citations, etc.  Only style what's
   genuinely ours:
     - 3-column masthead (Resources | Authors | Published)
     - <d-contents> TOC
     - wide-figure break-out using template.v2's grid columns
     - <d-citation-list> compactness
   ============================================================ */

:root {
  --content-width: 984px;
  --rule: rgba(0, 0, 0, 0.1);
  --muted: rgba(0, 0, 0, 0.55);
  --link: #6f4e37;
  --link-hover: #543a29;
}

/* ---- Front matter container (custom, not d-front-matter) ---- */
.front-matter {
  max-width: 984px;
  margin: 0 auto;
  padding: 88px 24px 8px 24px;
}

/* ---- Widen distill's article text column to match the front-matter
       (984px) so the body lines up with the title above. template.v2 puts
       <p>/<h2>/etc. into the narrow `text` grid column by default; we
       re-route them to `page` (full width of d-article) and cap with
       max-width + auto margins to keep the same 984px line length. ---- */
d-article > p,
d-article > h1,
d-article > h2,
d-article > h3,
d-article > h4,
d-article > h5,
d-article > h6,
d-article > ul,
d-article > ol,
d-article > blockquote,
d-article > aside {
  grid-column: page;
  box-sizing: border-box;
  max-width: 984px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.article-header { padding: 0; }

h1.title {
  font-size: 36px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px 0;
}

p.subtitle {
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 36px 0;
  font-weight: 300;
}

/* ---- Masthead: Resources | Authors | Published ---- */
.masthead {
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(0, 2fr) minmax(140px, 0.6fr);
  gap: 32px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 24px 0;
  align-items: start;
}

.meta-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 10px 0;
}

.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}
.resource-list li { margin: 0 0 4px 0; }
.resource-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--link);
  text-decoration: none;
}
.resource-list a span {
  border-bottom: 1px solid rgba(111, 78, 55, 0.25);
}
.resource-list a:hover { color: var(--link-hover); }
.res-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
}
.res-icon-arxiv {
  width: 11px;
  height: 14px;
  flex: 0 0 11px;
}

.authors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 18px;
}
.author p { margin: 0; font-size: 13px; line-height: 1.4; }
.author .name { font-weight: 600; }
.author .affiliation { color: var(--muted); font-size: 12px; margin-top: 2px; }

.masthead-right { text-align: right; }
.masthead-right .meta-label { text-align: right; }
.pub-date { font-size: 14px; font-weight: 500; margin: 0; }

/* ---- Wide figures live in the page column but are capped at the same
       984px container as body text so figure edges and body edges line up.
       Inner image is constrained to the container minus the 24px padding. ---- */
d-article figure.figure-wide {
  grid-column: page;
  box-sizing: border-box;
  max-width: 984px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
d-article figure {
  margin: 32px 0;
  text-align: center;
}
d-article figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
d-article figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 12px;
  text-align: left;
}
d-article figcaption strong { color: rgba(0, 0, 0, 0.85); font-weight: 600; }

/* ---- Appendix citation block ---- */
.citation-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  background: #fafafa;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
}

/* ---- d-bibliography is data-only; hide it visually ---- */
d-bibliography { display: none; }

/* ---- d-citation-list: shrink template.v2's default to a compact list ---- */
d-citation-list {
  display: block !important;
  max-width: var(--content-width);
  margin: 8px auto 64px auto;
  padding: 0 24px;
}
d-citation-list h3 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 28px 0 10px 0;
  border: none;
}
d-citation-list .references {
  list-style: decimal;
  padding-left: 24px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  grid-column: unset !important;
}
d-citation-list .references li { margin: 0 0 10px 0; padding-left: 4px; }
d-citation-list .references .title { font-weight: 600; }
d-citation-list .references a { color: var(--link); font-size: 13px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .masthead { grid-template-columns: 1fr; gap: 22px; }
  .masthead-right,
  .masthead-right .meta-label { text-align: left; }
  .authors { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  h1.title { font-size: 28px; }
  p.subtitle { font-size: 16px; }
  .authors { grid-template-columns: repeat(2, 1fr); }
  .front-matter { padding-top: 48px; }
}

@media (max-width: 420px) {
  .authors { grid-template-columns: 1fr; }
}

/* ============================================================
   Replay-viewer CTA (link from the blog to replay.html)
   ============================================================ */

.replay-cta {
  grid-column: page;
  box-sizing: border-box;
  max-width: 984px;
  width: 100%;
  margin: 18px auto 32px auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  justify-content: flex-end;
}
.replay-cta-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--link);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--link);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.12s, transform 0.12s;
  white-space: nowrap;
}
.replay-cta-link:hover {
  background: var(--link-hover);
  border-color: var(--link-hover);
  transform: translateX(2px);
}
.replay-cta-arrow {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 720px) {
  .replay-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .replay-cta-link { width: 100%; justify-content: center; }
}