/* Digext "Your shelf": the blog (blog/index.html and the posts). Linked after /assets/shelf/pages.css, which gives the page
   bar, the sheets, the type, the buttons and the footer; only the blog's own rules are here.
   The layout is the legal pages' (pages.css, ".legal-head" and ".sheet--paper:has(> .sheet__in > .prose)"): the title on
   the sky (stars in dark), then the text on paper, in one centred reading column of 44rem; from 900 px the title sheet
   and the text sheet hug that column (64 px each side) like a document page, and the footer stays full width.
   These rules are copies of those; change both together.
   The posts' pictures are bare iPhone captures (402 x 874 pt): no frame is drawn. Each is clipped to the display's real
   corner radius, .1545 of the width as on the home page; on a 402:874 box that is 15.45% of the width and 7.106% of the
   height, so the corner stays circular at any size. One 1 px ring outside the box and one soft shadow, nothing else. */
:root {
  --post-col: 44rem;
  --post-card: #fff;
  --post-ring: rgba(11,13,20,.10); --post-shadow: 0 28px 60px -28px rgba(20,30,70,.45);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --post-card: rgba(255,255,255,.035);
  --post-ring: rgba(255,255,255,.14); --post-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
} }
:root[data-theme="dark"] {
  --post-card: rgba(255,255,255,.035);
  --post-ring: rgba(255,255,255,.14); --post-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}

/* ---- the title sheet: kicker, title, then the byline (posts) or the lead (index), in the reading column ---- */
.post-head .sheet__in { max-width: calc(var(--post-col) + 2 * var(--pad)); padding-block: clamp(44px, 6vw, 72px); display: grid; gap: 16px; justify-items: start; }
.post-head .h2 { color: var(--ink); }
.post-head .lead { max-width: 38em; }
a.kicker { text-decoration: none; }
a.kicker:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.post-byline { margin: 0; font-size: 13px; }

/* ---- from 900 px both sheets hug the column, like the legal pages ---- */
@media (min-width: 900px) {
  .post-head, .post-paper { max-width: calc(var(--post-col) + 128px); margin-inline: auto; }
  .post-head .sheet__in, .post-paper > .sheet__in { max-width: none; padding-inline: 64px; }
}

/* ---- the post: one reading column on the paper ---- */
.post { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--post-col); margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.post > * { min-width: 0; margin: 0; }
.post > * + * { margin-top: 1.1em; }
.post > h2 { margin-top: clamp(40px, 5vw, 56px); font: 800 clamp(1.5rem, 1.25rem + 1vw, 1.95rem)/1.12 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.post > h2 + * { margin-top: 14px; }
.post strong { color: var(--ink); font-weight: 650; }
.post ul { padding-left: 1.3em; }
.post li + li { margin-top: .65em; }
.post li::marker { color: var(--ink-3); }
.post a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.post > .closer { margin-top: 1.6em; font: 700 clamp(1.2rem, 1.05rem + .7vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }

/* ---- figures: one screen centred in the column; two side by side (.pair); six as a grid (.collage) ---- */
.post > figure { display: grid; justify-items: center; gap: 16px; }
.post > figure, .post > figure + * { margin-top: clamp(36px, 5vw, 56px); }
.post figure img, .post figure video { display: block; width: 100%; height: auto; aspect-ratio: 402 / 874; object-fit: cover; background: #000;
  border-radius: 15.45% / 7.106%; box-shadow: 0 0 0 1px var(--post-ring), var(--post-shadow); }
.post figure > img, .post figure > video { width: min(280px, 72%); }
.post .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; gap: clamp(12px, 3vw, 28px); width: 100%; }
.post .collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (min-width: 560px) { .post .collage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.post figcaption { max-width: 34em; text-align: center; font-size: 14px; line-height: 1.45; color: var(--ink-3); text-wrap: balance; }

/* ---- the comparison table (chat): hairlines, mono headings; it scrolls inside itself if a phone is too narrow ---- */
.post > .table-wrap { margin-top: 1.4em; overflow-x: auto; }
.post table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.post th, .post td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.post tr > :last-child { padding-right: 0; }
.post th { font: 600 12px/1.3 var(--font-mono); color: var(--ink-3); }
.post td:first-child { color: var(--ink); font-weight: 600; }

/* ---- back to all posts: a pill, like the page bar's ---- */
.post > .post-back { justify-self: start; margin-top: clamp(40px, 5vw, 56px); display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 99px;
  background: var(--pill); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 650 .9rem/1 var(--font-text); text-decoration: none; }
.post > .post-back:hover { background: var(--pill-on); color: var(--pill-on-ink); box-shadow: none; }

/* ---- the blog index: the posts as cards in the reading column ---- */
.posts { display: grid; gap: 12px; max-width: var(--post-col); margin: 0 auto; padding: 0; list-style: none; }
.post-card { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 18px; align-items: center; padding: 22px 20px 22px 24px; border-radius: 22px;
  background: var(--post-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .18s; }
.post-card h2 { margin: 0; font: 800 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.15 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.post-card p { margin: 6px 0 0; color: var(--ink-2); font-size: .97rem; line-height: 1.45; }
.post-card__go { width: 44px; height: 44px; padding: 13px; border-radius: 50%; background: var(--pill); box-shadow: inset 0 0 0 1px var(--line);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .18s, color .18s; }
.post-card:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.post-card:hover .post-card__go { background: var(--pill-on); color: var(--pill-on-ink); box-shadow: none; }

@media (min-width: 700px) { .post { font-size: 18px; } }
@media (max-width: 699px) { .post-card { gap: 14px; padding: 18px 16px 18px 18px; border-radius: 18px; } }