/* ============================================================
   Human School — Journal (/blog and every field note under it)
   Loads after style.css and only adds to it. Same rules as the
   rest of the site: monochrome, square, inversion on hover.
   ============================================================ */

/* One shared focus ring for the journal pages. The main sheet leaves
   focus to the browser default, which is low contrast on black. */
.journal-page a:focus-visible,
.journal-page button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Headline word rise ----------
   Words are wrapped in the markup, so with JS off the headline still
   animates, and with reduced motion the clamp in style.css snaps it to
   the end state. The padding keeps descenders out of the clip. */

.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.split .w > span {
  display: inline-block;
  transform: translateY(108%);
  animation: word-up 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.06s);
}
@keyframes word-up { to { transform: translateY(0); } }

.load-in {
  opacity: 0;
  animation: rise 0.8s ease forwards;
  animation-delay: var(--d, 0.5s);
}

/* ============================================================
   JOURNAL INDEX (/blog)
   ============================================================ */

.j-hero {
  position: relative;
  padding: 120px 0 0;
  overflow: hidden;
}

.j-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 72px;
  align-items: end;
}
.j-hero-copy { min-width: 0; }

.j-hero h1 {
  font-size: clamp(2.8rem, 7.4vw, 6.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.j-hero h1 em { font-style: normal; color: var(--gray); }
.j-hero .lead { max-width: 30em; }

/* print marginalia down the right of the hero */
.j-hero-meta {
  min-width: 0;
  border-top: 1px solid var(--line-dark);
}
.j-hero-meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.j-hero-meta dt { color: var(--gray-dark); }
.j-hero-meta dd { color: var(--white); text-align: right; }

/* The outlined JOURNAL wordmark draws itself in, stroke first, then
   holds as a hairline. Same device, same hover as the footer word. */
.j-word {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 88px;
  overflow: visible;
  user-select: none;
}
.j-word text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 170px;
  fill: transparent;
  stroke: rgba(242, 242, 242, 0.22);
  stroke-width: 1.4;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 2.6s cubic-bezier(0.55, 0.1, 0.25, 1) 0.4s forwards;
  transition: fill 0.5s ease, stroke 0.5s ease;
}
.j-word:hover text { fill: var(--white); stroke: var(--white); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Featured field note ---------- */

.j-featured { padding: 110px 0; }

.j-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
}
.j-head .eyebrow { margin-bottom: 0; }
.j-head .bar { margin-bottom: 22px; }
.j-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.sec--dark .j-count { color: var(--gray); }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--black);
  text-decoration: none;
  color: var(--black);
  background: var(--paper);
  /* opacity is listed so the .reveal fade survives this override */
  transition: opacity 0.7s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(10, 10, 10, 0.14);
}

/* the cover: a typographic scorecard, since the journal carries no images */
.feature-cover {
  position: relative;
  min-width: 0;
  background: var(--black);
  color: var(--white);
  padding: 30px 32px;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fc-toprow,
.fc-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
}
.fc-toprow { padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); }

/* labels sit on the same 30 column grid as the rail, under their day */
.fc-foot {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
  line-height: 1.6;
}
.fc-foot span { white-space: nowrap; }
.fc-foot span:nth-child(1) { grid-column: 1 / 9; }
.fc-foot span:nth-child(2) { grid-column: 10 / 20; }
.fc-foot span:nth-child(3) { grid-column: 21 / 31; text-align: right; }
/* one label per cell group, for covers that mark five even stages */
.fc-foot--even { grid-template-columns: repeat(5, 1fr); }
.fc-foot--even span:nth-child(n) { grid-column: auto; text-align: left; }
.feature.is-visible .fc-rail i.lit { background: var(--white); }

.fc-num {
  position: absolute;
  right: -0.06em;
  bottom: -0.2em;
  font-size: clamp(14rem, 26vw, 22rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px #2c2c2c;
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.4s ease, transform 0.6s ease;
}
.fc-num--word { font-size: clamp(9rem, 16vw, 14rem); right: -0.04em; bottom: -0.16em; }
.feature:hover .fc-num { -webkit-text-stroke-color: #4a4a4a; transform: translateY(-10px); }

.fc-day {
  position: relative;
  z-index: 1;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.fc-day small {
  display: block;
  margin-top: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
}

/* 30 day blocks that fill in sequence when the card scrolls in */
.fc-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cells, 30), 1fr);
  gap: 3px;
  margin: 26px 0 16px;
}
.fc-rail i {
  display: block;
  height: 22px;
  background: var(--line-dark);
  transition: background 0.25s ease;
  transition-delay: calc(var(--i, 0) * var(--step, 38ms));
}
/* baseline, build, recheck: the three moments the note measures */
.fc-rail i.mark { height: 34px; margin-top: -12px; }
.feature.is-visible .fc-rail i { background: var(--white); }
.feature.is-visible .fc-rail i:not(.mark) { background: #6b6b6b; }

/* the body: inverts to black when the card is hovered */
.feature-body {
  min-width: 0;
  padding: 44px 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  isolation: isolate;
  transition: color 0.35s ease;
}
.feature-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--black);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.feature:hover .feature-body { color: var(--white); }
.feature:hover .feature-body::before { transform: scaleY(1); }

.meta-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dark);
  transition: color 0.35s ease;
}
.meta-line i { font-style: normal; font-size: 0.55rem; opacity: 0.6; margin: 0 8px; vertical-align: 1px; }
.feature:hover .meta-line { color: var(--gray); }

.feature-body h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 18px 0 20px;
}
.feature-body p { color: #454545; max-width: 30em; transition: color 0.35s ease; }
.feature:hover .feature-body p { color: #b9b9b9; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  border: 1px solid currentColor;
  padding: 5px 12px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chips + .read-link { margin-top: 26px; }
.read-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.95rem;
}
.read-link .arrow {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.feature:hover .read-link .arrow {
  transform: translateX(6px);
  background: var(--white);
  color: var(--black);
}

/* ---------- The index of every note ---------- */

.j-index { padding: 110px 0; }
.j-index .section-head { margin-bottom: 56px; }

.note-list { list-style: none; border-top: 1px solid var(--line-dark); }

.note-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr 170px 120px 44px;
  align-items: center;
  gap: 24px;
  padding: 30px 12px;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  color: var(--white);
  isolation: isolate;
  transition: color 0.3s ease, padding 0.35s ease;
}
/* white wipes up from the baseline: the row inverts */
.note-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.note-row:hover { color: var(--black); padding-left: 24px; padding-right: 24px; }
.note-row:hover::before { transform: scaleY(1); }

.nr-num, .nr-topic, .nr-date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.3s ease;
}
.note-row:hover .nr-num,
.note-row:hover .nr-topic,
.note-row:hover .nr-date { color: var(--gray-dark); }

.nr-title {
  min-width: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.nr-date { text-align: right; font-variant-numeric: tabular-nums; }

.nr-arrow {
  justify-self: end;
  font-size: 1.3rem;
  transition: transform 0.35s ease;
}
.note-row:hover .nr-arrow { transform: rotate(45deg); }

.j-index-foot {
  margin-top: 26px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

/* ============================================================
   FIELD NOTE (article)
   ============================================================ */

/* reading progress: a hairline across the very top of the window */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.read-progress span {
  display: block;
  height: 100%;
  background: var(--white);
  mix-blend-mode: difference;
  transform: scaleX(0);
  transform-origin: left;
}

.a-hero {
  position: relative;
  padding: 88px 0 110px;
  overflow: hidden;
}

/* the giant outlined 30, same treatment as the method numerals,
   drifting slower than the page as it scrolls */
.a-num {
  position: absolute;
  right: -0.05em;
  bottom: -0.24em;
  font-size: clamp(16rem, 44vw, 38rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px #1f1f1f;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.a-num--word { font-size: clamp(10rem, 30vw, 27rem); letter-spacing: -0.05em; }

.a-hero .container { position: relative; }

.a-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 64px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray);
  transition: color 0.2s ease;
}
.a-back span { display: inline-block; transition: transform 0.25s ease; }
.a-back:hover { color: var(--white); }
.a-back:hover span { transform: translateX(-6px); }

.a-hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 5.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14em;
}
.a-hero h1 em { font-style: normal; color: var(--gray); }
.a-hero .lead { font-size: 1.22rem; max-width: 34em; margin-top: 30px; }

.a-meta {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
  max-width: 820px;
}
.a-meta > div { padding: 18px 40px 0 0; }
.a-meta dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 4px;
}
.a-meta dd { font-weight: 600; font-size: 0.95rem; }
.a-meta .a-share { justify-self: end; padding-right: 0; align-self: end; }

.copy-link {
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line-dark);
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.copy-link:hover,
.copy-link.is-done { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------- Body: paper ground, contents rail on the left ---------- */

.a-body { padding: 110px 0 120px; }

.a-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.a-toc {
  position: sticky;
  top: 112px;
  min-width: 0;
}
.toc-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-dark);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-light);
}
.toc-head output { color: var(--black); font-variant-numeric: tabular-nums; }

.toc-list { list-style: none; position: relative; }
/* the marker is a block, like a filled rail cell, and slides to the
   section in view */
.toc-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--black);
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1), height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}
.toc-list a {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 9px 0 9px 16px;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  color: var(--gray-dark);
  transition: color 0.2s ease, transform 0.2s ease;
}
.toc-list a span {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-top: 2px;
}
.toc-list a:hover { color: var(--black); transform: translateX(3px); }
.toc-list a.is-active { color: var(--black); font-weight: 700; }

.toc-cta {
  display: block;
  margin-top: 28px;
  padding: 16px 16px 18px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  border: 2px solid var(--black);
  transition: background 0.18s ease, color 0.18s ease;
}
.toc-cta small {
  display: block;
  margin-bottom: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.toc-cta:hover { background: transparent; color: var(--black); }

/* ---------- Prose ---------- */

.prose {
  max-width: 700px;
  color: #454545;
  font-size: 1.08rem;
  line-height: 1.8;
}
.prose p, .prose li { margin: 0 0 20px; }
.prose strong { color: var(--black); }
.prose a {
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.25s ease, color 0.25s ease;
}
.prose a:hover { background-size: 100% 100%; color: var(--paper); }

.prose .dropcap { margin-bottom: 64px; }
.prose .dropcap::first-letter {
  float: left;
  font-size: 4.6em;
  font-weight: 800;
  line-height: 0.82;
  margin: 0.06em 0.12em 0 0;
  color: var(--black);
}

.prose section { scroll-margin-top: 100px; }
.prose section + section { margin-top: 72px; }

.prose h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 20px;
  color: var(--black);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  padding-top: 26px;
  margin-bottom: 26px;
  border-top: 1px solid var(--black);
}
/* numbers that fill from outline to solid as the heading arrives */
.h-num {
  font-size: 0.7em;
  line-height: 1.25;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--black);
  transition: color 0.6s ease 0.25s;
}
.prose h2.is-visible .h-num { color: var(--black); }

/* ---------- Scorecard ---------- */

.scorecard {
  margin: 40px 0 44px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scorecard table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
}
.scorecard caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.scorecard th, .scorecard td {
  padding: 16px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line-light);
}
.scorecard thead th {
  background: var(--black);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: none;
}
.scorecard tbody th { color: var(--black); font-weight: 700; width: 22%; }
.scorecard tbody tr { transition: background 0.2s ease, color 0.2s ease; }
.scorecard tbody tr:hover { background: var(--black); color: var(--white); }
.scorecard tbody tr:hover th { color: var(--white); }

/* rows slide in one after another */
.scorecard tbody tr {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.2s ease, color 0.2s ease;
}
.scorecard.is-visible tbody tr { opacity: 1; transform: none; }
.scorecard.is-visible tbody tr:nth-child(2) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
.scorecard.is-visible tbody tr:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
.scorecard.is-visible tbody tr:nth-child(4) { transition-delay: 0.3s, 0.3s, 0s, 0s; }

/* ---------- Formula ---------- */

.formula {
  margin: 40px 0;
  background: var(--black);
  color: var(--white);
  padding: 34px 34px 30px;
}
.formula-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 22px;
}
.formula-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 24px;
}
.formula-eq .t {
  border: 1px solid #3a3a3a;
  padding: 8px 12px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.formula-eq .t:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.formula-eq .op { color: var(--gray); font-weight: 800; font-size: 1.1rem; }
.formula-eq .paren { color: var(--gray-dark); font-size: 1.6rem; font-weight: 300; }
.formula .formula-note { color: #b9b9b9; font-size: 0.95rem; margin: 0; }

/* ---------- Worked example: three numbers that count up ---------- */

.worked {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--black);
  margin: 40px 0 28px;
}
.worked > div {
  padding: 26px 24px 24px;
  min-width: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.worked > div + div { border-left: 1px solid var(--black); }
.worked > div:hover { background: var(--black); color: var(--white); }
.worked > div:last-child { background: var(--black); color: var(--white); }
.worked > div:last-child:hover { background: var(--paper); color: var(--black); }

.w-num {
  display: block;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.w-num small { font-size: 0.4em; letter-spacing: 0; margin-left: 4px; font-weight: 700; }
.w-label {
  display: block;
  margin-top: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.7;
}

/* ---------- Questions to ask: a checklist that ticks itself ---------- */

.asklist {
  list-style: none;
  margin: 32px 0 36px;
  border-top: 1px solid var(--black);
  counter-reset: ask;
}
.prose .asklist li {
  counter-increment: ask;
  display: grid;
  grid-template-columns: 26px 44px 1fr;
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 20px 12px;
  border-bottom: 1px solid var(--line-light);
  color: var(--black);
  font-weight: 600;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}
.asklist li::after {
  content: "Q" counter(ask, decimal-leading-zero);
  grid-column: 2;
  grid-row: 1;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gray-dark);
  padding-top: 5px;
}
.asklist li > span { grid-column: 3; grid-row: 1; }
.asklist li::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 1.5px solid var(--black);
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--paper);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.asklist.is-visible li::before { background: var(--black); }
.asklist.is-visible li:nth-child(2)::before { transition-delay: 0.25s; }
.asklist.is-visible li:nth-child(3)::before { transition-delay: 0.5s; }
.asklist.is-visible li:nth-child(4)::before { transition-delay: 0.75s; }
.asklist.is-visible li:nth-child(5)::before { transition-delay: 1s; }
.asklist.is-visible li:nth-child(6)::before { transition-delay: 1.25s; }
.prose .asklist li:hover { background: var(--black); color: var(--white); }
.asklist li:hover::before { border-color: var(--white); background: var(--white); box-shadow: inset 0 0 0 3px var(--black); }
.asklist li:hover::after { color: var(--gray); }

.sources {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--gray-dark);
}
.sources .eyebrow { margin-bottom: 10px; font-size: 0.66rem; }

/* ---------- Up next: back into the index ---------- */

.a-next { padding: 0; }
.a-next a {
  display: block;
  position: relative;
  padding: 72px 0;
  text-decoration: none;
  color: var(--white);
  isolation: isolate;
  border-top: 1px solid var(--line-dark);
  transition: color 0.35s ease;
}
.a-next a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.a-next a:hover { color: var(--black); }
.a-next a:hover::before { transform: scaleY(1); }
.a-next .eyebrow { color: var(--gray); transition: color 0.35s ease; }
.a-next a:hover .eyebrow { color: var(--gray-dark); }
.a-next-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.a-next-title span:last-child { transition: transform 0.4s ease; }
.a-next a:hover .a-next-title span:last-child { transform: translateX(12px); }

/* ============================================================
   Reduced motion: end states, no movement
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none; animation: none; }
  .load-in { opacity: 1; animation: none; }
  .j-word text { stroke-dashoffset: 0; animation: none; }
  .scorecard tbody tr { opacity: 1; transform: none; }
  .a-num { will-change: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .j-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .feature { grid-template-columns: 1fr; }
  .feature-cover { min-height: 340px; }
  .note-row { grid-template-columns: 56px 1fr 110px 36px; }
  .nr-topic { display: none; }

  .a-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .a-toc { position: relative; top: 0; }
  .toc-cta { display: none; }
  .prose { max-width: none; }
}

@media (max-width: 640px) {
  .j-hero { padding-top: 64px; }
  .j-word { margin-top: 56px; }
  .j-featured, .j-index { padding: 72px 0; }
  .j-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .feature-cover { padding: 24px 22px; min-height: 300px; }
  .fc-rail, .fc-foot { gap: 2px; }
  .fc-foot { font-size: 0.56rem; letter-spacing: 0.16em; }
  .fc-rail i { height: 16px; }
  .fc-rail i.mark { height: 26px; margin-top: -10px; }
  .feature-body { padding: 30px 22px 28px; }

  .note-row {
    grid-template-columns: 1fr 28px;
    gap: 10px 16px;
    padding: 24px 4px;
  }
  .note-row:hover { padding-left: 14px; padding-right: 14px; }
  .nr-num { grid-column: 1; grid-row: 1; }
  .nr-title { grid-column: 1 / -1; grid-row: 2; }
  .nr-date { grid-column: 1; grid-row: 3; text-align: left; }
  .nr-arrow { grid-column: 2; grid-row: 1; }

  .a-hero { padding: 56px 0 72px; }
  .a-back { margin-bottom: 40px; }
  .a-hero .lead { font-size: 1.08rem; }
  .a-meta { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .a-meta > div { padding: 16px 16px 0 0; }
  .a-meta .a-share { grid-column: 1 / -1; justify-self: start; padding-top: 24px; }

  .a-body { padding: 72px 0 84px; }
  .prose { font-size: 1rem; }
  .prose h2 { gap: 14px; }
  .formula { padding: 26px 20px 24px; margin-left: -4px; margin-right: -4px; }
  .worked { grid-template-columns: 1fr; }
  .worked > div + div { border-left: none; border-top: 1px solid var(--black); }
  .prose .asklist li { grid-template-columns: 22px 1fr; gap: 6px 14px; padding: 18px 6px; }
  .asklist li::after { grid-column: 2; grid-row: 1; padding-top: 2px; }
  .asklist li > span { grid-column: 2; grid-row: 2; }
  .a-next a { padding: 52px 0; }
}


/* ============================================================
   Scenes: canvas "videos" driven by scroll (js/blog-scenes.js)
   The figure holds a tall track; the black scene pins inside it and
   plays as the reader scrolls through. No buttons. With JS off the
   stage never appears and the figure reads as its transcript.
   ============================================================ */

.scene { margin: 48px 0; }
.prose .scene p { margin: 0; }

/* the track only grows tall once JS has sized it, and never under
   reduced motion, so nothing pins without a scene to drive */
.scene.is-scroll .scene-track { position: relative; }
.scene-sticky {
  background: var(--black);
  color: var(--white);
}
.scene.is-scroll .scene-sticky {
  position: sticky;
  top: calc(72px + 3svh);
}

.scene-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.scene-head span:first-child { color: var(--white); }
.scene-head span:last-child { flex: none; white-space: nowrap; }

.scene-stage { position: relative; }
.scene:not(.is-live) .scene-sticky { display: none; }
.scene-stage canvas { display: block; width: 100%; height: 100%; }

/* "scroll" cue, gone the moment the scene starts moving */
.scene.is-scroll .scene-stage::after {
  content: "Scroll \2193";
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  animation: nudge 1.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.scene.is-started .scene-stage::after { opacity: 0; animation: none; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.prose .scene-caption {
  min-height: 3.6em;
  padding: 16px 18px 12px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--white);
}
.scene-caption.is-new { animation: caption-in 0.5s ease both; }
@keyframes caption-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* the timeline, read-only: a hairline that fills as you scroll */
.scene-progress { height: 3px; background: var(--line-dark); }
.scene-progress span {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
}

/* the transcript: always present, and the only content with JS off */
.scene figcaption {
  padding: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gray-dark);
}
.scene figcaption strong { color: var(--black); }

/* ============================================================
   Stat grid: the headline numbers with their sources
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
  margin: 40px 0;
}
.stat {
  min-width: 0;
  padding: 26px 24px 22px;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  /* opacity and transform keep the .reveal fade working */
  transition: opacity 0.7s ease, transform 0.7s ease, background 0.2s ease, color 0.2s ease;
}
.stat:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.stat:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
.stat:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.stat:hover { background: var(--black); color: var(--white); }
.stat { color: var(--black); }
.stat-num {
  display: block;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.prose .stat p { margin: 12px 0 10px; font-size: 0.92rem; line-height: 1.5; color: inherit; }
.stat cite {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.stat:hover cite { color: var(--gray); }

/* ============================================================
   ROI calculator
   ============================================================ */

.calc {
  margin: 44px 0;
  border: 1px solid var(--black);
  background: var(--paper);
}
.calc:not(.is-live) { display: none; }

.calc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--black);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.calc-head button {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid #3a3a3a;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.calc-head button:hover { background: var(--white); color: var(--black); }

.calc-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.calc-inputs { padding: 12px 20px 20px; }
.calc-field { padding: 12px 0; border-bottom: 1px solid var(--line-light); }
.calc-field:last-child { border-bottom: none; }
.calc-field label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
}
.calc-field output {
  flex: none;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.calc-field input[type="range"] {
  width: 100%;
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--black); }
.calc-field input[type="range"]::-moz-range-track { height: 2px; background: var(--black); }
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  background: var(--black);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--black);
}
.calc-field input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--black); border: 2px solid var(--paper); border-radius: 0; }
.calc-field input[type="range"]:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.calc-field small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--gray-dark); line-height: 1.4; }

.calc-results {
  display: grid;
  grid-template-rows: repeat(5, auto);
  border-left: 1px solid var(--black);
}
.calc-results div {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-light);
  transition: background 0.3s ease, color 0.3s ease;
}
.calc-results div:last-child { border-bottom: none; }
.calc-results dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.calc-results dd {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.calc-results .calc-net { background: var(--black); }
.calc-results .calc-net dt { color: var(--gray); }
.calc-results .calc-net dd { color: var(--white); }
/* a negative result inverts the headline tile back to paper and
   strikes a rule through it, so a loss never reads as a win */
.calc.is-negative .calc-net { background: var(--paper); }
.calc.is-negative .calc-net dd { color: var(--black); text-decoration: line-through 2px; }
.calc.is-negative .calc-net dt { color: var(--gray-dark); }

.calc-waterfall { border-top: 1px solid var(--black); background: var(--black); }
.calc-waterfall canvas { display: block; width: 100%; height: 260px; }
.prose .calc-note {
  margin: 0;
  padding: 14px 20px 16px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--gray-dark);
  border-top: 1px solid var(--line-light);
}

/* ---------- stacked indicators (leading → lagging) ---------- */

.ladder { list-style: none; margin: 36px 0; counter-reset: rung; }
.prose .ladder li {
  counter-increment: rung;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 18px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line-light);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.prose .ladder li:last-child { border-bottom: 1px solid var(--line-light); }
.ladder.is-visible li { opacity: 1; transform: none; }
.ladder.is-visible li:nth-child(2) { transition-delay: 0.1s; }
.ladder.is-visible li:nth-child(3) { transition-delay: 0.2s; }
.ladder.is-visible li:nth-child(4) { transition-delay: 0.3s; }
.ladder.is-visible li:nth-child(5) { transition-delay: 0.4s; }
.ladder li::before {
  content: "L" counter(rung);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--black);
}
.ladder li:last-child::before { color: var(--black); }
.ladder strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.ladder p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.ladder em { font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-dark); }

/* numbered source list. Not a grid: each item mixes a link with bare
   text, and a grid makes every bare text node its own item, which drops
   it into the narrow number column one word per line. The number is
   positioned instead, so the text wraps as ordinary prose. */
.source-list { list-style: none; counter-reset: src; padding: 0; }
.prose .source-list li {
  counter-increment: src;
  position: relative;
  margin: 0;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--line-light);
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.source-list li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
}
/* inline padding widens the tap area without moving the line */
.prose sup a { font-size: 0.68em; font-weight: 700; padding: 6px 3px; }

@media (prefers-reduced-motion: reduce) {
  .ladder li { opacity: 1; transform: none; }
  .scene-caption.is-new { animation: none; }
}

@media (max-width: 760px) {
  .calc-body { grid-template-columns: minmax(0, 1fr); }
  .calc-results { border-left: none; border-top: 1px solid var(--black); grid-template-columns: 1fr 1fr; }
  .calc-results div { border-right: 1px solid var(--line-light); }
  .calc-results .calc-net { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .scene { margin-left: -18px; margin-right: -18px; }
  .scene-head, .prose .scene-caption { padding-left: 16px; padding-right: 16px; }
  .scene figcaption { padding-left: 18px; padding-right: 18px; }
  .prose .scene-caption { font-size: 0.9rem; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-waterfall canvas { height: 230px; }
  .prose .ladder li { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .ladder li::before { font-size: 1.4rem; }
}

/* ============================================================
   Phones: every component checked at 390, 360 and 320 wide.
   ============================================================ */
@media (max-width: 640px) {
  /* the formula stacks into a column you read top to bottom */
  .formula-eq { flex-direction: column; align-items: stretch; gap: 6px; }
  .formula-eq .paren { display: none; }
  .formula-eq .op { align-self: flex-start; padding-left: 12px; line-height: 1; }
  .formula-label { gap: 12px; }

  /* the scorecard becomes one card per layer instead of a table that
     scrolls sideways out of sight */
  .scorecard { overflow: visible; }
  .scorecard table { min-width: 0; }
  .scorecard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .scorecard table, .scorecard tbody, .scorecard tr, .scorecard th, .scorecard td { display: block; width: 100%; }
  .scorecard tbody tr { border: 1px solid var(--black); margin-bottom: 12px; }
  .scorecard tbody th {
    width: 100%;
    background: var(--black);
    color: var(--white);
    padding: 12px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: none;
  }
  .scorecard td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 14px; }
  .scorecard td::before {
    content: attr(data-label);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-dark);
    padding-top: 3px;
  }
  .scorecard tbody tr:last-child td:last-child { border-bottom: none; }
  .scorecard td:last-child { border-bottom: none; }
  .scorecard tbody tr:hover { background: transparent; color: inherit; }
  .scorecard tbody tr:hover th { color: var(--white); }

  /* calculator sliders get a finger-sized hit area */
  .calc-field input[type="range"] { height: 32px; margin-top: 4px; }
  .calc-field input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  .calc-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }

  /* featured cover: five labels fit five cells */
  .fc-foot--even { font-size: 0.5rem; letter-spacing: 0.06em; gap: 2px; }

  .scene-head { font-size: 0.56rem; letter-spacing: 0.16em; }
}

/* ============================================================
   Journal tools (js/blog-tools.js): prompt cards, story bank,
   policy table. Mobile rules at the end of this block.
   ============================================================ */

/* ---------- prompt cards ---------- */
.prompt-card {
  margin: 28px 0;
  border: 1px solid var(--black);
  background: var(--paper);
}
.prompt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--black);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.prompt-head button,
.sb-actions button,
.sb-form button[type="submit"] {
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.prompt-head button {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
}
.prompt-head button:hover,
.prompt-head button.is-done { background: transparent; color: var(--white); }
.prose .prompt-card pre {
  margin: 0;
  padding: 18px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--black);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prompt-card figcaption {
  padding: 0 16px 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-dark);
}

/* ---------- story bank ---------- */
.story-bank {
  margin: 40px 0;
  border: 1px solid var(--black);
}
.story-bank:not(.is-live) .sb-live { display: none; }
.sb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--black);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sb-count { color: var(--gray); }
.sb-form { padding: 18px 16px 8px; display: grid; gap: 14px; }
.sb-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.sb-form label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 6px;
}
.sb-form input,
.sb-form select,
.sb-form textarea {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 16px; /* 16px stops iOS zooming into the field */
  line-height: 1.5;
  color: var(--black);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-bottom-color: var(--black);
  border-radius: 0;
  padding: 10px 12px;
  -webkit-appearance: none;
  appearance: none;
}
.sb-form textarea { min-height: 76px; resize: vertical; }
.sb-form input:focus,
.sb-form select:focus,
.sb-form textarea:focus { outline: 2px solid var(--black); outline-offset: 0; }
.sb-form button[type="submit"] {
  justify-self: start;
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--black);
}
.sb-form button[type="submit"]:hover { background: transparent; color: var(--black); }

.sb-list { list-style: none; margin: 0; padding: 0 16px; }
.prose .sb-item {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line-light);
}
.sb-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.sb-item-head strong { color: var(--black); font-size: 1rem; }
.sb-item-head span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 3px 8px;
}
.sb-item dl { margin: 10px 0 6px; }
.sb-item dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.sb-item dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-dark); padding-top: 4px; }
.sb-item dd { font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.sb-remove {
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.sb-remove:hover { color: var(--black); }
.prose .sb-empty { margin: 0; padding: 4px 16px 16px; font-size: 0.88rem; color: var(--gray-dark); }
.sb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--black);
}
.sb-actions button { background: var(--paper); color: var(--black); border: 1px solid var(--black); }
.sb-actions button:hover:not(:disabled),
.sb-actions button.is-done { background: var(--black); color: var(--white); }
.sb-actions button:disabled { opacity: 0.4; cursor: default; }
.prose .sb-note { margin: 0; padding: 0 16px 16px; font-size: 0.76rem; line-height: 1.5; color: var(--gray-dark); }

/* ---------- policy table ---------- */
.policy { margin: 36px 0; }
.policy table { width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.5; text-align: left; }
.policy caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.policy th, .policy td { padding: 14px; vertical-align: top; border-bottom: 1px solid var(--line-light); }
.policy thead th {
  background: var(--black);
  color: var(--white);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: none;
}
.policy tbody th { color: var(--black); width: 18%; }
.policy tbody tr { transition: background 0.2s ease, color 0.2s ease; }
.policy tbody tr:hover { background: var(--black); color: var(--white); }
.policy tbody tr:hover th { color: var(--white); }

/* week plan uses the ladder with W numbers */
.ladder--weeks li::before { content: "W" counter(rung); }

/* four-label cover foot */
.fc-foot--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
  .sb-row { grid-template-columns: minmax(0, 1fr); }
  .sb-item dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sb-actions button { flex: 1 1 140px; }

  .policy thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .policy table, .policy tbody, .policy tr, .policy th, .policy td { display: block; width: 100%; }
  .policy tbody tr { border: 1px solid var(--black); margin-bottom: 12px; }
  .policy tbody th {
    width: 100%;
    background: var(--black);
    color: var(--white);
    padding: 12px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: none;
  }
  .policy td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 14px; }
  .policy td::before {
    content: attr(data-label);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-dark);
    padding-top: 3px;
  }
  .policy td:last-child { border-bottom: none; }
  .policy tbody tr:hover { background: transparent; color: inherit; }
  .policy tbody tr:hover th { color: var(--white); }
  .prompt-head { padding-left: 14px; }
}

@media (max-width: 960px) {
  /* the contents list becomes a tap list once it stops being a rail */
  .toc-list a { min-height: 44px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
}

/* ============================================================
   Play: quiz, interview drill, search-group invite
   (js/blog-tools.js). Hidden until JS makes them live.
   ============================================================ */

.quiz, .drill, .invite { margin: 40px 0; border: 1px solid var(--black); }
.quiz:not(.is-live), .drill:not(.is-live), .invite:not(.is-live) { display: none; }

.quiz-head, .drill-head, .invite-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--black);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.quiz-head span:last-child, .drill-head span:last-child, .invite-head span:last-child { color: var(--gray); white-space: nowrap; }
.quiz-score { color: var(--white) !important; font-variant-numeric: tabular-nums; }

.quiz button, .drill button, .invite button, .invite-actions a {
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px;
  cursor: pointer;
  border: 2px solid var(--black);
  background: var(--paper);
  color: var(--black);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.quiz button:hover:not(:disabled), .drill button:hover:not(:disabled),
.invite button:hover, .invite-actions a:hover { background: var(--black); color: var(--white); }
.quiz button:disabled, .drill button:disabled { cursor: default; opacity: 0.45; }

/* ---------- quiz ---------- */
.quiz-stage { padding: 18px 16px 20px; }
.quiz-dots { display: flex; gap: 4px; margin-bottom: 16px; }
.quiz-dots i { flex: 1; height: 4px; background: var(--line-light); transition: background 0.3s ease; }
.quiz-dots i.done { background: var(--gray-dark); }
.quiz-dots i.now { background: var(--black); }

.quiz-card {
  padding: 22px 20px 20px;
  border: 1px solid var(--black);
  transform-origin: 50% 0;
  transition: background 0.35s ease, color 0.35s ease;
}
.quiz-card.is-entering { animation: quiz-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.quiz-card.is-flipping { animation: quiz-flip 0.5s ease both; }
@keyframes quiz-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes quiz-flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(14deg) scale(0.985); } 100% { transform: none; } }

.prose .quiz-count { margin: 0 0 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-dark); }
.prose .quiz-q { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; line-height: 1.45; color: inherit; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-choice { width: 100%; }

.quiz-card.is-right { background: var(--black); color: var(--white); }
.quiz-card.is-right .quiz-count { color: var(--gray); }
.quiz-card.is-right .quiz-choice { background: transparent; color: var(--white); border-color: #3a3a3a; }
.quiz-card.is-wrong .quiz-mark { text-decoration: line-through 2px; text-decoration-skip-ink: none; }

.quiz-verdict { margin-top: 18px; padding-top: 16px; border-top: 1px solid currentColor; }
.prose .quiz-mark { margin: 0 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.prose .quiz-why { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.6; color: inherit; }
.quiz-card.is-right .quiz-why a { color: var(--white); }
.quiz-next { background: var(--black) !important; color: var(--white) !important; }
.quiz-card.is-right .quiz-next { background: var(--white) !important; color: var(--black) !important; border-color: var(--white); }
.quiz-next:hover { transform: translateX(4px); }
.prose .quiz-big { margin: 4px 0 10px; font-size: clamp(3rem, 8vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }

/* ---------- drill ---------- */
.drill-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 20px;
  align-items: center;
  padding: 22px 18px;
  background: var(--black);
  color: var(--white);
}
.drill-card { min-height: 96px; display: flex; align-items: center; }
.drill-card.is-dealt { animation: deal 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-14px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.prose .drill-q { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; color: var(--white); }

.drill-timer { position: relative; width: 150px; height: 150px; }
.drill-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.drill-ring circle { fill: none; stroke-width: 6; }
.drill-ring .bg { stroke: #2a2a2a; }
.drill-ring .fg { stroke: var(--white); transition: stroke-dashoffset 1s linear; }
.drill-time {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.drill.is-low .drill-time { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.drill-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 0; }
.drill-actions button { flex: 1 1 160px; }
.drill [data-drill-deal] { background: var(--black); color: var(--white); }
.drill [data-drill-deal]:hover { background: var(--paper); color: var(--black); }
.drill.is-running [data-drill-go] { background: var(--black); color: var(--white); }

.drill-checks { border: none; margin: 0; padding: 16px 18px 6px; }
.drill-checks legend { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-dark); padding: 0; margin-bottom: 6px; }
.drill-checks label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
  border-bottom: 1px solid var(--line-light);
}
.drill-checks label:last-child { border-bottom: none; }
.drill-checks input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--black);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.drill-checks input:checked { background: var(--black); box-shadow: inset 0 0 0 3px var(--paper); }
.drill-checks input:disabled { opacity: 0.35; cursor: default; }
.drill-checks input:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.prose .drill-note { margin: 0; padding: 8px 18px 16px; font-size: 0.76rem; color: var(--gray-dark); }

/* ---------- invite ---------- */
.invite-form { display: grid; grid-template-columns: 1.2fr 1fr 0.9fr 1.2fr; gap: 12px; padding: 18px 16px 6px; }
.invite-form label { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-dark); margin-bottom: 6px; }
.invite-form input, .invite-form select {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--black);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-bottom-color: var(--black);
  border-radius: 0;
  padding: 8px 10px;
  -webkit-appearance: none;
  appearance: none;
}
.invite-form input:focus, .invite-form select:focus { outline: 2px solid var(--black); outline-offset: 0; }
.prose .invite-text {
  margin: 12px 16px 0;
  padding: 16px 18px;
  background: var(--black);
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px 6px; }
.invite-actions > * { flex: 1 1 150px; }
.invite-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--black); color: var(--white); }
.invite-actions a:hover { background: var(--paper); color: var(--black); }
.prose .invite-note { margin: 0; padding: 6px 16px 16px; font-size: 0.76rem; color: var(--gray-dark); }

@media (prefers-reduced-motion: reduce) {
  .drill.is-low .drill-time { animation: none; }
}

@media (max-width: 760px) {
  .invite-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .quiz-stage { padding: 14px 12px 16px; }
  .quiz-card { padding: 18px 14px 16px; }
  .prose .quiz-q { font-size: 1.02rem; }
  .drill-body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; }
  .drill-card { min-height: 0; }
  .drill-timer { width: 132px; height: 132px; }
  .drill-actions, .drill-checks { padding-left: 14px; padding-right: 14px; }
  .invite-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .quiz-choices { grid-template-columns: minmax(0, 1fr); }
}

/* play: polish after the phone pass */
.quiz-card { color: var(--black); }
.quiz-card.is-right { color: var(--white); }
.drill-checks { padding-top: 22px; }
.quiz-head, .drill-head, .invite-head { flex-wrap: wrap; row-gap: 4px; }
.drill-checks { margin-top: 14px; padding-top: 6px; }
.drill-checks label { line-height: 1.4; padding: 8px 0; }