/* asquared · Grid Typography: the blog index (blog/index.html).
   This page's own layout, after style.css and pages.css (PAGES.md). Use the
   tokens and the module from style.css; never restyle the shell (header,
   footer) or the shared components here.

   The page: BLOG and a line on what the archive is; the four project
   launches (the studio's own web work) with their pictures; then every post,
   newest first, as a Swiss index on the module: the year in the cell
   alphabet on columns 1-3 (it stays in view while its posts pass on
   desktop), the posts on columns 4-8: date (Geist Mono) on the first
   column, title and excerpt on the next three, topics and reading time on
   the last. A row is mint while it is the active one (data-mint="hover"),
   the page's one mint field. Everything is written by blog/_index.py. */

/* JS-only parts and filtered rows stay out of the page (the grids below would
   otherwise override the hidden attribute) */
.bi-filter[hidden],
.bi-year[hidden],
.bi-row[hidden],
.bi-empty[hidden] { display: none !important; }

/* ---------- the head: the line on what this is, on the list's columns ---------- */

.bi-intro { grid-column: 1 / -1; }
@media (min-width: 640px) { .bi-intro { grid-column: 2 / -1; } }
@media (min-width: 1024px) { .bi-intro { grid-column: 4 / -1; } }

/* ---------- section headings ---------- */

.bi-h2 {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: clamp(30px, 1.1rem + 2.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.bi-h2n {
  margin-left: 0.18em;
  font-size: 0.36em;
  letter-spacing: 0;
  vertical-align: top;
  color: var(--ink-2);
}

.bi-when {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.bi-when .num + .num { margin-left: var(--g); }
@media (max-width: 639px) { .bi-when .num + .num { margin-left: 12px; } }

/* ---------- the project launches ---------- */

.bi-launches .bi-h2 { margin-bottom: calc(var(--g) * 3); }
.bi-lead,
.bi-mrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
}
.bi-lead-fig,
.bi-mfig { grid-column: 1 / -1; min-width: 0; }
.bi-lead-fig a,
.bi-mfig a { display: block; }
/* the covers are 3:2 screenshots: 39 x 26 and 15 x 10 units on desktop */
.bi-lead-img,
.bi-mimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e2e2df; }

.bi-lead-txt,
.bi-mtxt { grid-column: 1 / -1; min-width: 0; }
.bi-lead-txt { margin-top: 20px; }
.bi-lead-t {
  font-weight: 600;
  font-size: clamp(26px, 1rem + 1.5vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.bi-lead-t a,
.bi-mt a { text-decoration: none; }
.bi-lead-t a:hover,
.bi-mt a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bi-lead-txt .bi-when { margin-top: 14px; }
.bi-lead-ex { margin-top: 14px; max-width: 34em; text-wrap: pretty; }

.bi-more {
  grid-column: 1 / -1;
  margin-top: 40px;
  border-top: 1px solid var(--ink);
}
.bi-mrow {
  padding-block: 20px;
  border-bottom: 1px solid var(--hair);
}
.bi-mtxt { margin-top: 14px; }
.bi-mt {
  font-weight: 600;
  font-size: clamp(22px, 1rem + 0.9vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.bi-mtxt .bi-when { margin-top: 10px; }
.bi-mex { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }

@media (min-width: 640px) {
  .bi-lead-txt { grid-column: 1 / span 6; margin-top: calc(var(--g) * 2); }
  .bi-more { margin-top: calc(var(--g) * 4); }
  .bi-mrow { padding-block: var(--g); }
  .bi-mfig { grid-column: 1 / span 3; }
  .bi-mtxt { grid-column: 4 / -1; margin-top: 0; }
}
@media (min-width: 1024px) {
  .bi-lead-fig { grid-column: 1 / span 5; }
  .bi-lead-txt { grid-column: 6 / -1; margin-top: 0; }
  .bi-lead-txt .bi-when { margin-top: var(--g); }
  .bi-lead-ex { margin-top: var(--g); }
  .bi-mfig { grid-column: 1 / span 2; }
  /* title on columns 3-5, date and excerpt on 6-8 */
  .bi-mtxt {
    grid-column: 3 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "t t t w w w" "t t t e e e";
    grid-template-rows: auto 1fr;
    column-gap: var(--g);
    align-content: start;
  }
  .bi-mt { grid-area: t; }
  .bi-mtxt .bi-when { grid-area: w; margin-top: 0; padding-top: 0.5em; }
  .bi-mex { grid-area: e; margin-top: 0.6em; }
}

/* ---------- all posts: the heading, the filter ---------- */

.bi-archive .bi-h2 { margin-bottom: 28px; }
.bi-filter {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.bi-topics-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-tbtn {
  appearance: none;
  margin: 0;
  padding: 7px 11px 8px;
  border: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
.bi-tbtn .num { margin-left: 3px; font-size: 12px; color: var(--ink-2); }
.bi-tbtn:hover { border-color: var(--ink); }
.bi-tbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.bi-tbtn[aria-pressed="true"] .num { color: inherit; }

.bi-search {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
}
.bi-qlabel { flex: none; font-weight: 500; font-size: 15px; }
.bi-q {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}
.bi-count { flex: none; font-size: 13px; color: var(--ink-2); white-space: nowrap; }

.bi-years { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .bi-archive .bi-h2 { grid-column: 1 / span 3; margin-bottom: 0; }
  .bi-filter { grid-column: 4 / -1; gap: var(--g); }
  .bi-topics-bar { gap: calc(var(--g) / 3); }
  .bi-search { gap: var(--g); }
}

/* ---------- the years ---------- */

.bi-year {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  border-top: 1px solid var(--ink);
}
/* spacing above every year, so a filtered-out year leaves no gap */
.bi-year { margin-top: 40px; }
.bi-yr {
  grid-column: 1 / -1;
  padding-block: calc(var(--g) * 3) calc(var(--g) * 2);
  font-size: inherit;
  line-height: 1;
}
.bi-list { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 640px) {
  .bi-year { margin-top: calc(var(--g) * 4); }
  .bi-yr { padding-block: var(--g); }
}
@media (min-width: 1024px) {
  /* the year rides beside its posts */
  .bi-yr {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--g) * 2);
  }
  .bi-list { grid-column: 4 / -1; }
}

/* ---------- a post row ---------- */

.bi-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "d" "t" "e" "m";
  padding: 18px calc(var(--g) * 2) 20px;
  border-bottom: 1px solid var(--hair);
}
.bi-date { grid-area: d; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bi-t {
  grid-area: t;
  margin: 6px 0 0;
  font-weight: 600;
  font-size: clamp(19px, 0.95rem + 0.45vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.bi-t a { text-decoration: none; }
/* the whole row is the post's link */
.bi-t a::after { content: ""; position: absolute; inset: 0; }
.bi-ex {
  grid-area: e;
  margin-top: 0.45em;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.bi-meta { grid-area: m; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.bi-labels span + span::before { content: " · "; }
.bi-min { margin-left: 12px; }

/* tablet: date | title, excerpt | topics on the full measure (6 + 39 + 14 units) */
@media (min-width: 640px) {
  .bi-row {
    grid-template-columns: calc(var(--g) * 6) minmax(0, 1fr) calc(var(--g) * 14);
    grid-template-areas: "d t m" "d e m";
    grid-template-rows: auto 1fr;
    column-gap: var(--g);
    padding: var(--g);
  }
  .bi-date { padding-top: 0.42em; }
  .bi-t { margin: 0; }
  .bi-meta { margin-top: 0; padding-top: 0.42em; }
  .bi-labels span { display: block; }
  .bi-labels span + span::before { content: none; }
  .bi-min { display: block; margin: 0.5em 0 0; }
}
/* desktop: on columns 4-8, the date inset one unit, the title on 5-7, topics on 8 */
@media (min-width: 1024px) {
  .bi-row { grid-template-columns: calc(var(--g) * 6) minmax(0, 1fr) calc(var(--g) * 6); }
}

/* ---------- the empty state (a search that finds nothing) ---------- */

.bi-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 20px;
  margin-top: 40px;
  padding-top: calc(var(--g) * 3);
  border-top: 1px solid var(--ink);
}
.bi-empty-mark { grid-column: 1 / -1; }
.bi-empty-copy { grid-column: 1 / -1; min-width: 0; }
.bi-empty-t {
  font-weight: 600;
  font-size: clamp(24px, 1rem + 1.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.bi-empty-s { margin-top: 0.8em; max-width: 34em; color: var(--ink-2); }
.bi-reset {
  appearance: none;
  margin-top: 24px;
  padding: 10px 16px 11px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--ground);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
.bi-reset:hover { background: transparent; color: var(--ink); }

@media (min-width: 1024px) {
  .bi-empty { margin-top: calc(var(--g) * 4); row-gap: 0; }
  .bi-empty-mark { grid-column: 1 / span 3; }
  .bi-empty-copy { grid-column: 4 / -1; }
  .bi-reset { margin-top: calc(var(--g) * 2); }
}

/* ---------- entrances (blog.js defines "year" and "post") ----------
   The year's top rule waits for its entrance, as the homepage's rules do. */
html.is-motion .bi-year:has(> .bi-yr[data-in]:not(.m-in)) { border-top-color: transparent; }

@media print {
  .bi-filter, .bi-empty { display: none !important; }
  html.is-motion .bi-year { border-top-color: var(--ink) !important; }
}