/* home/substack.css: the Substack section of index.html (homepage only).

   The panel itself is styled in global.css (.sbstk-panel, shared with
   newsletter.html). Everything here is scoped to .h-substack, which only the
   homepage markup carries, and overrides global.css by loading later.

   THE SIGNATURE: a reading list that opens. The essay card holds the essays
   as entries; one is always open (the newest, until you choose another). The
   open entry is set as a title page: its number large in the AXON face, the
   title large in the serif, an orange go button. Pointing at, focusing or
   tapping another entry opens it; home/substack.js glides the number, the
   title and the button from their old places to their new ones.

   ORANGE: --sbstk is the mark, the button fill and the paper tint. Never text
   on light paper (2.54:1). --sbstk-ink is the navy that sits on it (6.45:1). */

/* ── CALL TO ACTION: the page's pill, filled Substack orange ───────────────
   The source values sit at the lowest weight so .h-btn:hover and :active
   still swap them; the painted properties sit above global.css. */
:where(.h-substack) .sbstk-panel__cta {
  --b-bg: var(--sbstk);
  --b-bg-hover: var(--sbstk-deep);
  --b-bg-press: var(--sbstk-deep);
  --b-fg: var(--sbstk-ink);
  --b-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(11, 15, 46, 0.16), 0 8px 20px -10px rgba(11, 15, 46, 0.4);
  --b-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 5px rgba(11, 15, 46, 0.16), 0 16px 30px -12px rgba(11, 15, 46, 0.45);
}
.h-substack .sbstk-panel__cta {
  height: auto;
  min-height: 50px;
  padding: 0 1.6rem;
  border-radius: var(--h-r-pill);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: var(--b-shadow);
  transform: none;
  transition:
    background-color var(--h-t) var(--h-ease-out),
    box-shadow var(--h-t) var(--h-ease-out),
    scale var(--h-spring-dur) var(--h-spring);
}
.h-substack .sbstk-panel__cta::after { content: none; }
.h-substack .sbstk-panel__mark { transition: transform var(--h-t) var(--h-ease-out); }

/* ── THE STACK ─────────────────────────────────────────────────────────────
   The essay card lies on two more pages: the rest of the archive, which is on
   Substack. They sit a little askew, the way working pages do. Pick an essay
   and the pile squares up behind it; point at Read on Substack and the pile
   fans out toward you. Two pseudo pages of one wrapper, so they arrive with
   the card and never cover it. */
.sbstk-panel.h-substack .h-substack-stack {
  --h-substack-a: translate(12px, 13px) rotate(1.5deg);
  --h-substack-b: translate(-5px, 8px) rotate(-1.1deg);
  grid-area: posts;
  align-self: start;
  position: relative;
  isolation: isolate;
  margin-top: 0.75rem;
}
.h-substack .h-substack-stack::before,
.h-substack .h-substack-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--h-r-box);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 15, 46, 0.08), 0 1px 2px rgba(11, 15, 46, 0.04), 0 14px 30px -20px rgba(11, 15, 46, 0.3);
  transform: var(--h-substack-a);
  transition: transform var(--h-t-sheet) var(--h-ease-sheet);
  pointer-events: none;
}
.h-substack .h-substack-stack::after { transform: var(--h-substack-b); }
/* choosing an essay squares the pile (a finger: the tapped entry's focus) */
.sbstk-panel.h-substack .h-substack-stack:focus-within {
  --h-substack-a: translate(7px, 8px) rotate(0.4deg);
  --h-substack-b: translate(-2px, 4px) rotate(-0.3deg);
}
/* the button reaches past these two, into the whole archive (a finger: the press) */
.sbstk-panel.h-substack:has(.sbstk-panel__cta:is(:focus-visible, :active)) .h-substack-stack {
  --h-substack-a: translate(20px, 19px) rotate(2.8deg);
  --h-substack-b: translate(-11px, 14px) rotate(-2.1deg);
}
@media (hover: hover) and (pointer: fine) {
  .sbstk-panel.h-substack .h-substack-stack:hover {
    --h-substack-a: translate(7px, 8px) rotate(0.4deg);
    --h-substack-b: translate(-2px, 4px) rotate(-0.3deg);
  }
  .sbstk-panel.h-substack:has(.sbstk-panel__cta:hover) .h-substack-stack {
    --h-substack-a: translate(20px, 19px) rotate(2.8deg);
    --h-substack-b: translate(-11px, 14px) rotate(-2.1deg);
  }
}

/* ── THE CARD ──────────────────────────────────────────────────────────────
   White paper on top of the pile. The pointer tilt global.js gives it is
   switched off: on this page the book is the one object that turns in space.
   One heavy selector beats every global variant (hover, phone, :has). */
.sbstk-panel.h-substack .sbstk-panel__posts.sbstk-panel__posts {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.6rem 2.1rem;
  border: 0;
  border-radius: var(--h-r-box);
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(11, 15, 46, 0.07),
    0 2px 6px rgba(11, 15, 46, 0.04),
    0 22px 48px -18px rgba(11, 15, 46, 0.2);
  transform: none;
  transform-style: flat;
}

/* ── AN ENTRY ──────────────────────────────────────────────────────────────
   Closed: a contents line. The number over the title and date, a small go
   mark beside them. Open and closed share one anchor (top left), so on a
   swap everything grows or shrinks from where it already is. */
.sbstk-panel.h-substack .sbstk-panel__post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "no go" "text go";
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  align-items: start;
  padding: 1.35rem 0 1.45rem;
  border-bottom: 1px solid rgba(11, 15, 46, 0.08);
  opacity: 1;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--h-spring-dur) var(--h-spring);
}
.sbstk-panel.h-substack .sbstk-panel__post:last-child { border-bottom: 0; }
/* global.js hides the rows for its own fade in; on this page they arrive
   with the card instead (below), so its states are neutralised. */
.h-substack[data-sbstk-anim] .sbstk-panel__post,
.h-substack[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post { opacity: 1; transform: none; }
.h-substack[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post:nth-child(n) { transition-delay: 0s; }
.h-substack .sbstk-panel__posts:has(.sbstk-panel__post:hover) .sbstk-panel__post:not(:hover),
.h-substack .sbstk-panel__posts:has(.sbstk-panel__post:focus-visible) .sbstk-panel__post:not(:focus-visible) { opacity: 1; }

/* the number, in Bebas Neue (the AXON face: these are the AXON issues).
   substack.js glides it between its closed and open size and place.
   0.6 navy is 4.9:1 on the card. */
.sbstk-panel.h-substack .sbstk-panel__post > span:first-child {
  grid-area: no;
  justify-self: start;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.3rem;
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: rgba(11, 15, 46, 0.6);
  transform: none;
  transition: color var(--h-t) var(--h-ease-out);
}

.sbstk-panel.h-substack .sbstk-panel__post > span:nth-child(2) { grid-area: text; min-width: 0; text-wrap: balance; }

.sbstk-panel.h-substack .sbstk-panel__post strong {
  display: inline;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.24;
  color: rgba(11, 15, 46, 0.74);
  padding-bottom: 2px;
  transform: none;
  /* the underline that draws under a title you point at: a 1px orange mark */
  background-image: linear-gradient(var(--sbstk), var(--sbstk));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--h-t) var(--h-ease-out), background-size var(--h-t-content) var(--h-ease);
}
.sbstk-panel.h-substack .sbstk-panel__post time {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(11, 15, 46, 0.6);
}

/* the go mark: a ring with the arrow, closed; Substack orange, open */
.sbstk-panel.h-substack .sbstk-panel__post > span:nth-child(3) {
  grid-area: go;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  color: rgba(11, 15, 46, 0.55);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(11, 15, 46, 0.14);
  opacity: 1;
  transform: none;
  transition:
    background-color var(--h-t) var(--h-ease-out),
    box-shadow var(--h-t) var(--h-ease-out),
    color var(--h-t) var(--h-ease-out),
    translate var(--h-spring-dur) var(--h-spring);
}

/* ── THE OPEN ENTRY: a title page ───────────────────────────────────────── */
.sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] {
  grid-template-areas: "no go" "text text";
  row-gap: 0.95rem;
  padding: 1.9rem 0 2.05rem;
}
.sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] > span:first-child {
  font-size: 3.6rem;
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] strong {
  font-size: clamp(1.7rem, 2.35vw, 2.15rem);
  line-height: 1.12;
  color: var(--ink);
}
.sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] time { margin-top: 0.8rem; }
.sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] > span:nth-child(3) {
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
  color: var(--sbstk-ink);
  background: var(--sbstk);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -10px rgba(11, 15, 46, 0.45);
}

/* ── RESPONSE ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .sbstk-panel.h-substack .sbstk-panel__post:hover strong { color: var(--ink); background-size: 100% 1px; }
  .sbstk-panel.h-substack .sbstk-panel__post:hover > span:first-child { color: var(--ink); }
  .sbstk-panel.h-substack .sbstk-panel__post:hover > span:nth-child(3) { translate: 3px 0; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 15, 46, 0.4); }
  .sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open]:hover > span:nth-child(3) {
    background: var(--sbstk-deep);
    color: var(--sbstk-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 22px -10px rgba(11, 15, 46, 0.5);
  }
}
.sbstk-panel.h-substack .sbstk-panel__post:focus-visible strong { color: var(--ink); background-size: 100% 1px; }
.sbstk-panel.h-substack .sbstk-panel__post:focus-visible {
  outline: 2px solid var(--h-focus);
  outline-offset: 5px;
  border-radius: var(--h-r-ctl);
}
.sbstk-panel.h-substack .sbstk-panel__post:active {
  scale: 0.985;
  transition-duration: var(--h-t-press);
  transition-timing-function: var(--h-ease-out);
}

/* The fading copy of a title during a swap (substack.js). It is the row's
   last child for a quarter second, so it undoes every global rule written
   for span:last-child, and it never shows an underline. */
.sbstk-panel.h-substack .sbstk-panel__post > .h-substack-ghost {
  position: absolute;
  display: block;
  margin: 0;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.sbstk-panel.h-substack .sbstk-panel__post > .h-substack-ghost strong { background-size: 0 1px; }

/* ── ARRIVAL ───────────────────────────────────────────────────────────────
   The pile settles with the base arrival; the essays are laid on it a beat
   later, newest first. */
@keyframes h-substack-entry { from { opacity: 0; translate: 0 12px; filter: blur(4px); } }
.h-arrive .h-substack .h-substack-stack.h-in .sbstk-panel__post {
  animation: h-substack-entry var(--h-t-arrive) var(--h-ease) backwards;
  animation-delay: calc(var(--h-delay, 0ms) + 240ms + var(--h-substack-i, 0) * 110ms);
}

/* ── ONE COLUMN AND PHONE ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sbstk-panel.h-substack .h-substack-stack { margin: 0 0 2.6rem; }
}
@media (max-width: 560px) {
  /* a narrower pile: the pages must stay inside the 20px gutter */
  .sbstk-panel.h-substack .h-substack-stack {
    --h-substack-a: translate(7px, 9px) rotate(1deg);
    --h-substack-b: translate(-3px, 6px) rotate(-0.8deg);
    margin: 0 0 2.2rem;
  }
  .sbstk-panel.h-substack.h-substack:has(.sbstk-panel__cta:is(:hover, :focus-visible, :active)) .h-substack-stack {
    --h-substack-a: translate(10px, 13px) rotate(1.8deg);
    --h-substack-b: translate(-6px, 10px) rotate(-1.4deg);
  }
  .h-substack .h-substack-stack::before,
  .h-substack .h-substack-stack::after,
  .sbstk-panel.h-substack .sbstk-panel__posts.sbstk-panel__posts { border-radius: 16px; }
  .sbstk-panel.h-substack .sbstk-panel__posts.sbstk-panel__posts { padding: 0.2rem 1.25rem; }
  .sbstk-panel.h-substack .sbstk-panel__post {
    column-gap: 1rem;
    padding: 1.15rem 0 1.25rem;
  }
  .sbstk-panel.h-substack .sbstk-panel__post > span:first-child { font-size: 1.15rem; }
  .sbstk-panel.h-substack .sbstk-panel__post strong { font-size: 1.2rem; }
  .sbstk-panel.h-substack .sbstk-panel__post time { font-size: 0.74rem; margin-top: 0.35rem; }
  .sbstk-panel.h-substack .sbstk-panel__post > span:nth-child(3) { display: flex; width: 32px; height: 32px; font-size: 0.85rem; }
  .sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] { padding: 1.4rem 0 1.5rem; row-gap: 0.8rem; }
  .sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] > span:first-child { font-size: 2.7rem; }
  .sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] strong { font-size: 1.5rem; }
  .sbstk-panel.h-substack .sbstk-panel__post[data-h-substack-open] > span:nth-child(3) { width: 46px; height: 46px; font-size: 1.05rem; }
}

/* ── REDUCED MOTION: every state is there at once ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .h-substack .sbstk-panel__post,
  .h-substack .sbstk-panel__post > span,
  .h-substack .sbstk-panel__post strong,
  .h-substack .sbstk-panel__cta,
  .h-substack .sbstk-panel__mark { transition-duration: 0.01ms !important; }
  .h-substack .h-substack-stack::before,
  .h-substack .h-substack-stack::after { transition-duration: 0.01ms !important; }
  .h-arrive .h-substack .h-substack-stack .sbstk-panel__post { animation: none; }
  .sbstk-panel.h-substack .sbstk-panel__post:active { scale: none; }
}