/* Devlog: the index (/devlog/) and the post pages (/devlog/<slug>). Loads after site.css.
   How to add a post: design/README.md, "The devlog". */

/* ---------- Index ---------- */
.devlog-head { position: relative; }
.devlog-head__grid { display: grid; gap: var(--space-5); align-items: center; }
.devlog-mascot { display: none; }
@media (min-width: 900px) {
  .devlog-head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); }
  .devlog-mascot { display: block; }
  .devlog-mascot .parallax { aspect-ratio: 1.5; max-width: 400px; margin: 0 auto; overflow: visible; --amp-x: 30px; --amp-y: 14px; }
  .devlog-mascot .parallax__stage { inset: 0; }
  .devlog-mascot .ground { position: absolute; inset: auto; left: 4%; width: 92%; bottom: 4%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 122, 32, 0.45), rgba(60, 122, 32, 0)); --depth: 0.2; }
  .c-dl-ram { --x: 6%; --w: 46%; --ar: 1.186; --depth: 0.55; --act-h: 93%; bottom: 8%; }
  .c-dl-grunt { --x: 56%; --w: 36%; --ar: 0.9136; --depth: 0.65; --act-h: 93%; bottom: 6%; --delay: -1.2s; }
}

.devlog-posts { padding-top: 0; }
.post-list { margin-top: var(--space-4); }
.post-list > li { display: flex; }
.post-list .card { width: 100%; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; margin: 0 0 0.45rem; font-size: var(--step--1); color: var(--ink-soft); font-weight: 700; }
.post-meta time { font-variant-numeric: tabular-nums; }
.card__summary { margin: 0.5rem 0 0; }
.card__more { margin: 0.8rem 0 0; font-weight: 800; }
.card__more::after { content: " \2192"; }

/* Drafts stay out of the public list. CSS hides them (so it works with no script); js/devlog.js removes them
   from the page, or, with ?drafts in the address (Jonathan's preview), shows them with a DRAFT chip. */
.post-list > li[data-draft] { display: none; }
.post-list.show-drafts > li[data-draft] { display: flex; }
.draft-chip { display: none; }
.show-drafts .draft-chip { display: inline-flex; }
.chip.draft-chip { --dot: var(--ember); }

.devlog-empty { max-width: 40rem; margin: var(--space-5) 0; }
.devlog-empty[hidden] { display: none; }
.post-list:has(> li:not([data-draft])) ~ .devlog-empty { display: none; }
.post-list.show-drafts ~ .devlog-empty { display: none; }

/* ---------- Post page ---------- */
.post-head { padding: var(--space-6) 0 var(--space-5); }
.post-head .back { display: inline-block; font-weight: 800; margin-bottom: var(--space-4); }
.post-head .back::before { content: "\2190\00a0"; }
.post-head h1 { font-size: clamp(2.3rem, 7.5vw, 4rem); letter-spacing: -0.02em; margin-bottom: var(--space-3); max-width: 20ch; }
.post-head .lede { max-width: 46ch; margin-bottom: var(--space-3); }
.post-head .post-meta { margin-bottom: 0; }

.draft-banner {
  border: var(--line); border-left-width: 10px; border-left-color: var(--ember);
  background: #fde7df; color: var(--ink);
  border-radius: var(--radius-m); box-shadow: var(--shadow-s);
  padding: 0.8rem 1rem; margin: 0 0 var(--space-5);
}
.draft-banner p { margin: 0; }

.post-hero { margin: 0 0 var(--space-6); }
.post-hero img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
@media (max-width: 759px) { .post-hero img { aspect-ratio: 16 / 9; } }

/* The reading column: a touch larger than body text, generous leading, a comfortable line length. */
.post-body { max-width: 66ch; font-size: 1.2rem; line-height: 1.65; }
.post-body > * + * { margin-top: 1.1em; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 0; }
.post-body h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: var(--space-7) 0 var(--space-3); line-height: 1.08; }
.post-body h3 { font-size: 1.5rem; margin: var(--space-5) 0 var(--space-2); }
.post-body h2 + *, .post-body h3 + * { margin-top: 0; }
.post-body a { font-weight: 700; }
.post-body li + li { margin-top: 0.45em; }
.post-body li::marker { color: var(--ink-soft); }
.post-body hr { border: 0; border-top: 3px dotted var(--ink-soft); margin: var(--space-6) 0; }

.post-body figure { margin: var(--space-6) 0; }
.post-body figure img { width: 100%; height: auto; border: var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-m); background: var(--paper); }
.post-body figcaption { margin-top: 0.8rem; font-size: var(--step--1); line-height: 1.4; color: var(--ink-soft); font-style: italic; }
/* Two pictures under one caption: <figure><div class="figure-pair"><img><img></div><figcaption>…</figcaption></figure> */
.post-body .figure-pair { display: grid; gap: var(--space-4); }
.post-body .figure-pair img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 560px) { .post-body .figure-pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .post-body figure.wide { width: min(1000px, calc(100vw - 2 * var(--gutter))); max-width: none; }
}

.post-body blockquote { margin: var(--space-5) 0; padding: 0.9rem 1.2rem; background: var(--paper); border: var(--line); border-left: 10px solid var(--gold); border-radius: var(--radius-m); box-shadow: var(--shadow-s); font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.post-body blockquote p { margin: 0; }
.post-body blockquote cite { display: block; margin-top: 0.5rem; font: 400 var(--step--1)/1.3 var(--sans); font-style: normal; color: var(--ink-soft); }

.post-body code, .post-body kbd { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace; font-size: 0.86em; }
.post-body :not(pre) > code { background: var(--paper); border: 2px solid rgba(42, 29, 18, 0.35); border-radius: 6px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.post-body pre {
  margin: var(--space-5) 0; padding: 1rem 1.1rem; overflow-x: auto;
  background: var(--night); color: var(--on-dark); border: var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-m);
  font-size: 0.95rem; line-height: 1.5; tab-size: 2; -webkit-overflow-scrolling: touch;
}
.post-body pre code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.post-body pre:focus-visible { outline-offset: 3px; }

/* A true timeline of the night */
.timeline { list-style: none; padding: 0; margin-left: 0; border-left: 4px dotted var(--ink-soft); }
.timeline li { position: relative; padding: 0 0 var(--space-4) 1.4rem; margin: 0; }
.timeline li + li { margin-top: 0; }
.timeline li::before { content: ""; position: absolute; left: -0.6rem; top: 0.45em; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: var(--line); transform: translateX(-2px); }
.timeline li.is-bad::before { background: var(--ember); }
.timeline strong { display: block; font-family: var(--serif); font-size: 1.15em; line-height: 1.2; }

/* The "your words go here" marks in a draft post */
.fill { background: #fff0a6; border-radius: 4px; padding: 0.05em 0.3em; font-weight: 700; }

/* End of post: the two calls to action */
.post-foot { margin: var(--space-7) 0 var(--space-6); }
.post-foot .panel { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .post-foot .panel { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--space-6); } }
.post-foot h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin: 0 0 var(--space-2); }
.post-foot p { margin: 0 0 0.6rem; }
.post-foot .btn-row { margin: var(--space-3) 0 var(--space-2); }
.post-foot__learn { border-top: 3px dotted var(--ink-soft); padding-top: var(--space-4); }
@media (min-width: 760px) { .post-foot__learn { border-top: 0; border-left: 3px dotted var(--ink-soft); padding: 0 0 0 var(--space-5); } }
.post-foot__learn h2 { font-size: 1.5rem; }
.post-foot__learn .soon { font-weight: 800; }
.post-nav { margin: 0 0 var(--space-7); }

@media print {
  .post-foot, .post-nav { display: none; }
}