/* The blog: the landing page's world, set for reading. Link styles.css and companion.css
   first; every colour, curve and shadow here is one of their tokens. The markup comes from
   scripts/blog-lib.ts, and every class of the blog starts with `blog-`, so nothing here can
   meet a class of the landing page. Yellow stays the action: the two keys, and nothing else. */

body.blog {
  --blog-link: color-mix(in srgb, var(--pink) 86%, #000);
  --blog-lip: 0 3px 0 var(--paper-3), 0 30px 40px -24px rgba(var(--shadow-rgb), .38);
  /* the landing page keeps room for its fixed dock; the blog has none */
  padding-bottom: 0;
}
@media (prefers-color-scheme: dark) {
  /* the app's pink is too dark for a line of text on the night ground */
  body.blog { --blog-link: var(--pink-light); }
}

.blog main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* the landing's yellow ring cannot be seen on paper; ink can, in both schemes */
.blog a:focus-visible,
.blog-table:focus-visible { outline-color: var(--ink); }

/* ---------- The hues of a tile: the cover with no image, and the chip on one with ---------- */

.blog [data-hue] { --c: var(--pink); --cl: var(--pink-light); --cs: var(--pink-shade); --ti: #fff; }
.blog [data-hue="mint"] { --c: var(--mint); --cl: var(--mint-light); --cs: var(--mint-shade); --ti: var(--ink-fixed); }
.blog [data-hue="purple"] { --c: var(--purple); --cl: var(--purple-light); --cs: var(--purple-shade); --ti: #fff; }
.blog [data-hue="orange"] { --c: var(--orange); --cl: var(--orange-light); --cs: var(--orange-shade); --ti: var(--ink-fixed); }
.blog [data-hue="lime"] { --c: var(--lime); --cl: var(--lime-light); --cs: var(--lime-shade); --ti: var(--ink-fixed); }

/* ---------- The bar ---------- */

/* the bar is the landing's own: .topbar and .commit--bar in styles.css */
/* On a phone the blog's bar (the mark, three links and the key) does not fit one row: the mark
   and the key stay on top, the links go to a row of their own under them. */
@media (max-width: 560px) {
  .blog .topbar { flex-wrap: wrap; row-gap: 0; }
  .blog .topbar nav { display: contents; }
  .blog .topbar .commit--bar { order: 1; margin-left: auto; }
  .blog .topbar::after { content: ""; order: 2; flex-basis: 100%; }
  .blog .topbar__link { order: 3; padding: 10px 2px 4px; }
}

/* ---------- Cap's seats ---------- */

/* blog.js draws the figure; the box is here before it, so nothing moves when it lands */
.blog-coach {
  --size: 200px;
  width: var(--size);
  height: var(--size);
}
.blog-coach--seat { --size: 112px; }
.blog-coach--end { --size: 148px; }
/* companion.css sizes the bubble from the figure; a small Cap still says a line you can read */
.blog-coach--seat .av__say,
.blog-coach--end .av__say {
  max-width: min(280px, 72vw);
  font-size: 15px;
}

/* ---------- The list page ---------- */

.blog-hero {
  padding-top: 26px;
  text-align: center;
}
.blog-hero .blog-coach { margin: 0 auto; }
.blog-hero h1 {
  margin: 6px 0 0;
  font: 900 clamp(40px, 7.4vw, 78px)/1.04 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.blog-hero__sub {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.blog-empty {
  margin: 56px 0 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-soft);
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.blog-card {
  display: flex;
  border-radius: 32px;
  corner-shape: squircle;
  background: var(--paper);
  box-shadow: var(--blog-lip);
  transform-origin: 50% 100%;
  transition: transform var(--t-spring) var(--ease-spring);
}
.blog-card > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 14px 14px 22px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .blog-card:hover { transform: translateY(-5px); }
}
/* paper keys press like every key: down on the DROP curve, back on the spring */
@media (prefers-reduced-motion: no-preference) {
  .blog-card:active {
    transform: translateY(3px) scale(1.006, .988);
    transition: transform var(--t-drop) var(--ease-drop);
  }
}

.blog-card__text { padding: 18px 8px 0; }
.blog-card h2 {
  margin: 0;
  font: 800 25px/1.12 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.blog-card__text > p:not(.blog-meta) {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-card__text > .blog-meta { margin-top: 14px; }

.blog-meta {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* the newest post: the whole row, the cover next to the words */
.blog-card--feature { grid-column: 1 / -1; }
.blog-card--feature > a {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
}
.blog-card--feature .blog-card__text { padding: 12px 22px 16px 18px; }
.blog-card--feature h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06; letter-spacing: -.03em; }
.blog-card--feature .blog-card__text > p:not(.blog-meta) { font-size: 17px; -webkit-line-clamp: 4; }

/* ---------- The cover: the featured image, or the post's own tile ---------- */

.blog-cover {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: 22px;
  corner-shape: squircle;
  background: var(--paper-2);
}
.blog-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the reading time, stuck on the picture like a small candy key */
.blog-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px 9px;
  border-radius: 12px;
  corner-shape: squircle;
  background: linear-gradient(180deg, var(--cl) 0%, var(--c) 30%, var(--cs) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 12px -6px rgba(0, 0, 0, .5);
  font: 800 14px/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ti);
  transform: rotate(-3deg);
}

/* a post with no picture is a tile of the wall, and its count is the minutes */
.blog-cover--tile {
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  background: linear-gradient(180deg, var(--cl) 0%, var(--c) 30%, var(--cs) 100%);
  color: var(--ti);
}
.blog-cover--tile::before {
  content: "";
  position: absolute;
  inset: 1.4cqw 1.8cqw 3.6cqw;
  z-index: -1;
  border-radius: 17px;
  corner-shape: squircle;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 92%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .12);
}
.blog-cover__count {
  margin-top: -2cqw;
  font: 900 72px/.9 var(--font-display);
  font: 900 24cqw/.9 var(--font-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.blog-cover__word {
  font: 800 17px/1 var(--font-display);
  font: 800 5cqw/1 var(--font-display);
  letter-spacing: -.01em;
  opacity: .86;
}

/* ---------- A post ---------- */

.blog-post__head {
  max-width: 800px;
  margin: 44px auto 0;
  text-align: center;
}
.blog-post__head h1 {
  margin: 0;
  font: 900 clamp(34px, 5.6vw, 62px)/1.05 var(--font-display);
  letter-spacing: -.032em;
  text-wrap: balance;
}
.blog-post__head .blog-meta { margin-top: 18px; font-size: 14.5px; }

/* the cover is wider than the words, and Cap stands on its top edge: the feet
   (182 of the 200 box) meet the corner, like on the landing's wall card */
.blog-post__cover {
  position: relative;
  max-width: 960px;
  margin: calc(112px * .91 + 30px) auto 0;
}
.blog-post__cover .blog-cover {
  border-radius: 32px;
  box-shadow: var(--blog-lip);
}
.blog-post__cover .blog-cover--tile::before { border-radius: 26px; }
.blog-post__cover .blog-chip {
  left: 22px;
  bottom: 22px;
  padding: 8px 15px 12px;
  border-radius: 14px;
  font-size: 17px;
}
.blog-coach--seat {
  position: absolute;
  left: clamp(10px, 5%, 46px);
  top: calc(var(--size) * -.91);
  z-index: 2;
}

/* ---------- The words ---------- */

.blog-prose {
  max-width: 680px;                   /* about 68 characters at this size */
  margin: 52px auto 0;
  font-size: 19px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > :last-child { margin-bottom: 0; }
.blog-prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
}
.blog-prose h2 { margin: 2.1em 0 .55em; font-size: 31px; line-height: 1.12; letter-spacing: -.028em; }
.blog-prose h3 { margin: 1.8em 0 .5em; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
.blog-prose h4 { margin: 1.6em 0 .4em; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.blog-prose strong { font-weight: 800; }

.blog-prose a {
  color: var(--blog-link);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--blog-link) 40%, transparent);
  transition: text-decoration-color .2s var(--ease-out);
}
.blog-prose a:hover { text-decoration-color: var(--blog-link); }

/* a bullet is a small keycap, and the wall's hues take turns */
.blog-prose ul,
.blog-prose ol {
  margin: 0 0 1.35em;
  padding: 0;
  list-style: none;
}
.blog-prose li {
  position: relative;
  margin: .5em 0;
  padding-left: 1.75em;
}
.blog-prose li > ul,
.blog-prose li > ol { margin: .5em 0 0; }
.blog-prose ul > li::before {
  --c: var(--pink); --cl: var(--pink-light); --cs: var(--pink-shade);
  content: "";
  position: absolute;
  left: .2em;
  top: .56em;
  width: .62em;
  height: .62em;
  border-radius: .2em;
  corner-shape: squircle;
  background: linear-gradient(180deg, var(--cl) 0%, var(--c) 30%, var(--cs) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.blog-prose ul > li:nth-child(3n + 2)::before { --c: var(--mint); --cl: var(--mint-light); --cs: var(--mint-shade); }
.blog-prose ul > li:nth-child(3n)::before { --c: var(--purple); --cl: var(--purple-light); --cs: var(--purple-shade); }

/* a step is a paper key with its number on it */
.blog-prose ol { counter-reset: blog-step; }
.blog-prose ol > li {
  counter-increment: blog-step;
  padding-left: 2.35em;
}
.blog-prose ol > li::before {
  content: counter(blog-step);
  position: absolute;
  left: 0;
  top: .12em;
  min-width: 1.85em;
  height: 1.85em;
  padding: 0 .3em;
  display: grid;
  place-items: center;
  border-radius: .55em;
  corner-shape: squircle;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--paper-3), 0 8px 10px -8px rgba(var(--shadow-rgb), .4);
  font: 800 .74em/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* a quote is a paper note, laid down a little crooked */
.blog-prose blockquote {
  margin: 1.9em 0;
  padding: 24px 28px;
  border-radius: 26px;
  corner-shape: squircle;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--paper-3), 0 22px 30px -22px rgba(var(--shadow-rgb), .38);
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  transform: rotate(-.7deg);
}
.blog-prose blockquote p:last-child { margin-bottom: 0; }

/* a picture may be wider than the words, and is never stretched past its own size */
.blog-prose img { max-width: 100%; height: auto; }
.blog-prose > p > img,
.blog-prose > p > a > img,
.blog-prose > figure > img {
  display: block;
  max-width: min(860px, calc(100vw - var(--gutter) * 2));
  height: auto;
  margin: 2.1em 0 2.1em 50%;
  transform: translateX(-50%);
  border-radius: 24px;
  corner-shape: squircle;
  background: var(--paper-2);
}
.blog-prose figure { margin: 2.1em 0; }
.blog-prose > figure > img { margin-top: 0; margin-bottom: 0; }
.blog-prose figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.blog-prose code {
  padding: .12em .38em;
  border-radius: 7px;
  background: var(--paper-2);
  font: 600 .86em/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}
.blog-prose pre {
  margin: 1.9em 0;
  padding: 20px 22px;
  overflow-x: auto;
  border-radius: 22px;
  corner-shape: squircle;
  background: #1C1B33;
  color: #F2F2F8;
  font-size: 15px;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 242, 248, .3) transparent;
}
@media (prefers-color-scheme: dark) {
  .blog-prose pre { background: var(--paper-3); }
}
.blog-prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

/* the build wraps a table, so a wide one scrolls by itself and the page never does */
.blog-table {
  margin: 1.9em 0;
  overflow-x: auto;
  border-radius: 24px;
  corner-shape: squircle;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--paper-3), 0 22px 30px -22px rgba(var(--shadow-rgb), .38);
  scrollbar-width: thin;
}
.blog-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16.5px;
  line-height: 1.45;
}
.blog-prose th,
.blog-prose td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
}
.blog-prose th {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}
.blog-prose td { box-shadow: inset 0 1px 0 var(--paper-2); }
.blog-prose td:first-child { font-weight: 700; }

/* the rule is the wall mark: three chips */
.blog-prose hr {
  width: 14px;
  height: 14px;
  margin: 3em auto;
  border: 0;
  border-radius: 4.5px;
  background: var(--mint);
  box-shadow: -19px 0 0 var(--pink), 19px 0 0 var(--purple);
}

/* ---------- The end of a post: Cap goes SUPER over the one key ---------- */

.blog-end {
  position: relative;
  max-width: 760px;
  margin: calc(148px * .91 + 96px) auto 0;
  padding: 44px 28px 38px;
  border-radius: 32px;
  corner-shape: squircle;
  background: var(--paper);
  box-shadow: var(--blog-lip);
  text-align: center;
}
.blog-coach--end {
  position: absolute;
  left: calc(50% - var(--size) / 2);
  top: calc(var(--size) * -.91);
  z-index: 2;
}
.blog-end h2 {
  margin: 0;
  font: 900 clamp(30px, 5vw, 46px)/1.08 var(--font-display);
  letter-spacing: -.032em;
  text-wrap: balance;
}
.blog-end > p {
  margin: 16px auto 0;
  max-width: 44ch;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.blog-end .commit { margin-top: 24px; }
.blog-end > .blog-end__fine {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
}

.blog-more { margin-top: 96px; }
.blog-more h2 {
  margin: 0 4px 20px;
  font: 800 22px/1 var(--font-display);
  letter-spacing: -.02em;
}
.blog-list--more { margin-top: 0; }

/* the landing's footer keeps its last line clear of a dock the blog does not have */
.blog-footer { padding-bottom: calc(44px + var(--safe-bottom)); }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  body.blog { padding-bottom: 0; }


  .blog-coach { --size: 148px; }
  .blog-coach--seat { --size: 84px; }
  .blog-coach--end { --size: 112px; }

  /* the bubble hangs over Cap's shoulder here: keep it clear of the bar's key */
  .blog-hero { padding-top: 46px; }
  .blog-hero__sub { font-size: 15.5px; max-width: 34ch; }

  .blog-list { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 44px; }
  .blog-card { border-radius: 28px; }
  .blog-card > a,
  .blog-card--feature > a { display: flex; align-items: stretch; padding: 12px 12px 20px; gap: 0; }
  .blog-card--feature .blog-card__text { padding: 18px 8px 0; }
  .blog-card h2,
  .blog-card--feature h2 { font-size: 24px; line-height: 1.12; letter-spacing: -.025em; }
  .blog-card--feature .blog-card__text > p:not(.blog-meta) { font-size: 16px; -webkit-line-clamp: 3; }
  .blog-cover { border-radius: 20px; }

  .blog-post__head { margin-top: 30px; text-align: left; }
  .blog-post__cover { margin-top: calc(84px * .91 + 26px); }
  .blog-post__cover .blog-cover { border-radius: 26px; }
  .blog-post__cover .blog-cover--tile::before { border-radius: 21px; }
  .blog-post__cover .blog-chip { left: 14px; bottom: 14px; padding: 6px 12px 9px; border-radius: 12px; font-size: 14px; }

  .blog-prose { margin-top: 36px; font-size: 17.5px; line-height: 1.68; }
  .blog-prose h2 { font-size: 26px; }
  .blog-prose h3 { font-size: 21px; }
  .blog-prose blockquote { padding: 20px 22px; border-radius: 22px; }
  .blog-prose img { border-radius: 20px; }
  .blog-prose pre { font-size: 14px; border-radius: 20px; }
  .blog-prose th,
  .blog-prose td { padding: 12px 16px; }

  .blog-end { margin-top: calc(112px * .91 + 72px); padding: 36px 20px 32px; border-radius: 28px; }
  .blog-more { margin-top: 72px; }
}