/*
 * blg3.css: the blog index and its archives.
 *
 * Scoped to body.apex-blg3. The night masthead, the white sheet laid over it,
 * the topics and search bar, the article cards (shared with "Read next" on a
 * post, which loads this sheet's card rules from pst3.css), the pager, the
 * empty states, and a page-only re-skin of the shared footer.
 *
 * 10 Nov rebuild. Before: _archive/blog-2026-11-10/.
 */

body.apex-blg3 {
  --blg3-navy: #0a1730;
  --blg3-night: #02122f;
  background: var(--a-paper);
}

body.apex-blg3 .site-main {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--a-paper);
}

body.apex-blg3 .blg3,
body.apex-blg3 .blg3 * {
  font-family: var(--a-sans);
  -webkit-font-smoothing: antialiased;
}

.blg3 { color: var(--a-body) }

/* the sheet ends the page (no form under it since 10 Nov), so the paper shows
   below it before the footer's ice */
.blg3 { padding-bottom: clamp(56px, 7vw, 96px) }

/* ---------- night masthead ---------- */

/* The blog ran the widest column on the site, 1344 against everyone else's
   1200, so its first line started 72px outside the site's edge. The sky and the
   sheet both take the shell; the sheet is still a white sheet lifted over the
   night, it just closes on the same column the page above it opened. */
.blg3-sky {
  position: relative;
  min-height: clamp(390px, 44vw, 520px);
  background: linear-gradient(180deg, #040b1a 0%, #061532 46%, #050d1c 100%);
  overflow: hidden;
}

/* The ridge sits whole and lifts clear of the sheet edge, so no peak is cut. */
.blg3-sky__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(48px, 6vw, 76px);
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
}

.blg3-sky__sprig {
  position: absolute;
  right: clamp(-40px, 2vw, 44px);
  top: clamp(-150px, -9vw, -96px);
  width: clamp(230px, 28vw, 400px);
  height: auto;
  opacity: .78;
  transform: rotate(168deg);
  filter: drop-shadow(-8px 20px 26px rgba(2, 8, 24, .6)) brightness(.88);
  pointer-events: none;
  will-change: transform;
}

.blg3-sky__inner {
  position: relative;
  z-index: 2;
  width: var(--a-shell);
  margin: 0 auto;
  /* the site's opening. Every other page starts its h1 at the same distance
     below the fixed header; this one started 43px higher, which is enough to
     read as a different site before a word is read. */
  padding-block: var(--a-hero-pt) clamp(96px, 11vw, 130px);
}

.blg3-sky h1 {
  margin: 0 0 22px;
  max-width: 50rem;
  font-size: var(--a-t-h1);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: #f4f9ff;
  text-wrap: pretty;
}

.blg3-sky__lede {
  margin: 0 0 28px;
  max-width: 34rem;
  font-size: var(--a-t-lede);
  line-height: 1.6;
  color: rgba(233, 243, 255, .8);
  text-wrap: pretty;
}

/* ---------- the sheet ---------- */

.blg3-sheet {
  position: relative;
  z-index: 3;
  width: var(--a-shell);
  margin: clamp(-70px, -5vw, -40px) auto 0;
  padding: clamp(24px, 3vw, 40px) clamp(18px, 3.4vw, 48px) clamp(56px, 6vw, 88px);
  background: #fff;
  border-radius: var(--a-r) var(--a-r) 0 0;
  box-shadow: 0 -14px 40px rgba(2, 8, 24, .26);
}

/* ---------- topics and search ---------- */

.blg3-bar {
  display: flex;
  align-items: center;
  gap: 16px 32px;
  padding-bottom: 18px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--a-hair);
}

.blg3-topics {
  flex: 1 1 auto;
  min-width: 0;
}

.blg3-topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blg3-topics a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 0;
  font-size: var(--a-t-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--a-body);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--a-dur-fast), border-color var(--a-dur-fast);
}

.blg3-topics a:hover { color: var(--a-ink); border-bottom-color: var(--a-line) }

.blg3-topics a[aria-current] {
  font-weight: 600;
  color: var(--a-ink);
  border-bottom-color: var(--a-brand);
}

.blg3-topics__n {
  font-size: var(--a-t-mark);
  font-weight: 400;
  color: var(--a-soft);
  font-variant-numeric: tabular-nums;
}

.blg3-find {
  position: relative;
  flex: 0 0 min(300px, 100%);
}

.blg3-find input {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 48px 0 16px;
  font: 400 var(--a-t-body)/1 var(--a-sans);
  color: var(--a-ink);
  background: var(--a-paper);
  border: 1px solid transparent;
  border-radius: var(--a-r-sm);
  box-shadow: none;
  transition: border-color var(--a-dur-fast), background var(--a-dur-fast);
  -webkit-appearance: none;
  appearance: none;
}

.blg3-find input::placeholder { color: var(--a-soft); opacity: 1 }
.blg3-find input:hover { border-color: var(--a-line) }
.blg3-find input:focus { background: #fff; border-color: var(--a-brand); outline: none }
.blg3-find input:focus-visible { outline: var(--a-focus); outline-offset: 1px }
.blg3-find input::-webkit-search-cancel-button { -webkit-appearance: none; display: none }

.blg3-find button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--a-body);
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color var(--a-dur-fast), background var(--a-dur-fast);
}

.blg3-find button:hover { color: #fff; background: var(--a-brand) }
.blg3-find button svg { width: 17px; height: 17px }

.blg3-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: calc(clamp(28px, 3.4vw, 44px) * -.4) 0 clamp(28px, 3.4vw, 40px);
  font-size: var(--a-t-body);
  color: var(--a-body);
}

.blg3-count span { font-weight: 600; color: var(--a-ink) }

.blg3-count a {
  color: var(--a-brand);
  text-decoration: underline;
  text-decoration-color: rgba(34, 69, 138, .35);
  text-underline-offset: 3px;
}

.blg3-count a:hover { text-decoration-color: currentColor }

/* ---------- article cards ----------
   Editorial, not boxed: the cover is the object, the words sit under it on the
   sheet. The title's link covers the whole card; the topic link sits above it
   so it stays its own link. */

.blg3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 64px) clamp(24px, 2.6vw, 36px);
}

.blg3-grid:empty { display: none }

/* two or four articles sit as pairs rather than leaving one alone on a row */
.blg3-grid:has(> :last-child:nth-child(2)),
.blg3-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) }

.blg3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.blg3-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--a-r);
  background: var(--blg3-navy, #0a1730);
  box-shadow: var(--a-card-shadow);
  isolation: isolate;
}

.blg3-card__cover img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--a-ease);
}

/* No cover: the blog's own night, its ridge set at a different place per card. */
.blg3-card__night {
  position: absolute;
  inset: 0;
  background:
    url("../media/blog/blg3-aurora-ridge.png") var(--x, 50%) 100% / auto 92% no-repeat,
    linear-gradient(180deg, #040b1a 0%, #0a1c40 60%, #061532 100%);
  transition: transform .9s var(--a-ease);
}

.blg3-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 20px;
}

.blg3-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0 0 10px;
  font-size: var(--a-t-mark);
  line-height: 1.4;
  color: var(--a-soft);
}

.blg3-card__meta a {
  position: relative;
  z-index: 2;
  font-weight: 600;
  color: var(--a-brand);
  text-decoration: none;
}

.blg3-card__meta a:hover { text-decoration: underline; text-underline-offset: 3px }

.blg3-card__meta span { font-variant-numeric: tabular-nums }

.blg3 .blg3-card__title,
.pst3 .blg3-card__title {
  margin: 0 0 10px;
  font-size: var(--a-t-sub);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--a-ink);
  text-wrap: pretty;
}

.blg3-card__title a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .5s var(--a-ease);
}

.blg3-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blg3-card__title a:focus-visible { outline: none }
.blg3-card:has(.blg3-card__title a:focus-visible) .blg3-card__cover { outline: var(--a-focus); outline-offset: var(--a-focus-off) }

.blg3-card__dek {
  margin: 0 0 14px;
  font-size: var(--a-t-body);
  line-height: 1.6;
  color: var(--a-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blg3-card__date {
  margin: auto 0 0;
  font-size: var(--a-t-mark);
  color: var(--a-soft);
  font-variant-numeric: tabular-nums;
}

.blg3-card:hover .blg3-card__cover img,
.blg3-card:hover .blg3-card__night { transform: scale(1.035) }
.blg3-card:hover .blg3-card__title a { background-size: 100% 1.5px }

/* The lead: the newest article on the page, cover left and words right. */
.blg3-card--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(56px, 6vw, 88px);
}

.blg3-card--lead .blg3-card__cover { aspect-ratio: 16 / 10 }
.blg3-card--lead .blg3-card__body { padding-top: 0 }

.blg3 .blg3-card--lead .blg3-card__title {
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.024em;
}

.blg3-card--lead .blg3-card__dek {
  font-size: var(--a-t-lede);
  line-height: 1.6;
  -webkit-line-clamp: 5;
}

.blg3-card--lead .blg3-card__date { margin-top: 6px }

/* ---------- pager ---------- */

.blg3-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: clamp(56px, 6vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--a-hair);
}

.blg3-pager__nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px }
.blg3-pager__side--end { text-align: right }

.blg3-pager .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-size: var(--a-t-btn);
  font-weight: 600;
  color: var(--a-ink);
  text-decoration: none;
  border-radius: var(--a-r-sm);
  font-variant-numeric: tabular-nums;
  transition: background var(--a-dur-fast), color var(--a-dur-fast);
}

.blg3-pager a.page-numbers:hover { background: var(--a-paper) }

.blg3-pager .page-numbers.current {
  color: #fff;
  background: var(--a-brand);
}

.blg3-pager .page-numbers.dots { min-width: 24px; padding: 0; color: var(--a-soft) }
.blg3-pager .prev,
.blg3-pager .next { border: 1px solid var(--a-card-line) }

/* ---------- empty states ---------- */

.blg3-empty {
  max-width: 40rem;
  padding: clamp(8px, 2vw, 24px) 0 clamp(8px, 2vw, 16px);
}

.blg3 .blg3-empty h2 {
  margin: 0 0 12px;
  font-size: var(--a-t-sub);
  font-weight: 600;
  line-height: 1.3;
  color: var(--a-ink);
}

.blg3-empty p {
  margin: 0 0 22px;
  font-size: var(--a-t-body);
  line-height: 1.65;
}

.blg3-empty p:last-child { margin-bottom: 0 }

.blg3-empty p a {
  color: var(--a-brand);
  text-decoration: underline;
  text-decoration-color: rgba(34, 69, 138, .35);
  text-underline-offset: 3px;
}

.blg3-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--a-btn-pad);
  font: var(--a-btn-font);
  color: #fff;
  background: var(--a-brand);
  border-radius: var(--a-btn-r);
  box-shadow: var(--a-btn-glow);
  text-decoration: none;
  transition: background var(--a-dur-fast), transform var(--a-dur-fast);
}

.blg3-btn:hover { background: var(--a-brand-deep); transform: translateY(-1px) }

/* ---------- the shared footer, re-skinned for these pages only ---------- */

body.apex-blg3 .nx-footer,
body.apex-pst3 .nx-footer {
  /* the blog sits on the paper ground, so the ice dissolves into paper */
  --footer-fade: #f2f6fb;
  position: relative;
  background: linear-gradient(to bottom, var(--footer-fade, #fff) 0, var(--footer-fade, #fff) 4px, var(--blg3-night, #02122f) 4px); /* the top 4px match the page, so a fractional footer edge never shows a grey seam */
  padding-top: 0;
  overflow: hidden;
}

body.apex-blg3 .nx-footer__ridge,
body.apex-pst3 .nx-footer__ridge { display: none }

body.apex-blg3 .nx-footer::before,
body.apex-pst3 .nx-footer::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2172 / 374;
  /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/blog/blg3-ice-shelf.png") top center / 100% auto no-repeat;
}

/* the footer's own shell rule owns position, z-index, padding and font now */

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .blg3-bar { flex-direction: column; align-items: stretch }
  .blg3-find { flex-basis: auto }
}

@media (max-width: 1023px) {
  .blg3-grid,
  .blg3-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 860px) {
  .blg3-card--lead { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .blg3-card--lead .blg3-card__cover { aspect-ratio: 3 / 2 }
}

/* On a phone the topics stay on one line and scroll sideways, fading at the
   edge so it reads as more to come rather than cut off. */
@media (max-width: 700px) {
  .blg3-topics {
    margin-inline: calc(clamp(18px, 3.4vw, 48px) * -1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
  }
  .blg3-topics::-webkit-scrollbar { display: none }
  .blg3-topics ul { flex-wrap: nowrap; gap: 22px; padding-inline: clamp(18px, 3.4vw, 48px) }
}

@media (max-width: 640px) {
  .blg3-grid,
  .blg3-grid:has(> :last-child:nth-child(2)),
  .blg3-grid:has(> :last-child:nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: 44px }
  .blg3-sky__sprig { right: -70px; width: 220px }
  .blg3-sheet { width: 100%; border-radius: var(--a-r) var(--a-r) 0 0; padding-inline: 4vw }
  .blg3-topics { margin-inline: -4vw }
  .blg3-topics ul { padding-inline: 4vw }
  .blg3-pager { grid-template-columns: 1fr 1fr; row-gap: 18px }
  .blg3-pager__nums { grid-column: 1 / -1; grid-row: 1 }
  .blg3-pager__side { grid-row: 2 }
}

@media (prefers-reduced-motion: reduce) {
  .blg3-card__cover img,
  .blg3-card__night,
  .blg3-sky__sprig { transition: none !important; transform: none !important }
  body.apex-blg3 [data-reveal] { opacity: 1; transform: none; filter: none; transition: none }
}