/* Theme copy of the approved pages/home-b.css (10 Oct 2026). Changed: the wall has one column per month (--hb-months,
   set by parts/home-b.php; 24 in the approved page). */
/* home-b.html "The Stack" - page-only styles on top of shared/ratc.css.
   The finished, still page is the default. Every move sits inside the
   motion guard at the end of this file. Prefix: hb- */

/* ---------- 1. Front: the title card and the stack ---------------------- */
.hb-front { padding-top: clamp(1.75rem, 4.5vh, 3.25rem); padding-bottom: 4.5rem; }
.hb-front__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 31%);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}
.hb-card { display: grid; gap: clamp(16px, 2.4vh, 26px); align-content: end; min-width: 0; }
.hb-kicker { margin: 0; padding-top: 14px; border-top: 6px solid var(--bone); justify-self: start; letter-spacing: .12em; }
.hb-title {
  font-size: max(3.5rem, min(var(--fs-mega), 13.2vh));
  line-height: .9;
  letter-spacing: .002em;
  max-width: 13.5em;
}
.hb-title a { text-decoration: none; color: inherit; }
.hb-title a:hover { text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: .08em; text-decoration-color: var(--mustard); }
.hb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.hb-card__actions { gap: 14px; }

.hb-stackcol { display: grid; justify-items: center; gap: 18px; min-width: 0; }
.hb-stack {
  --lamp-x: 54%; --lamp-y: 4%; --window-x: 80%; --window-y: 30%;
  --grain-opacity: .16;
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%;
  height: clamp(380px, calc(100svh - var(--header-h) - 240px), 640px);
  padding: 26px 6px 0;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
/* light and grain fall softly on the stack, never as a hard box */
.hb-stack::before, .hb-stack::after {
  -webkit-mask-image: radial-gradient(ellipse 40% 62% at 50% 54%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 62% at 50% 54%, #000 60%, transparent 100%);
}
.hb-stack svg { flex: none; width: auto; height: 100%; max-width: 100%; overflow: visible; }
.hb-stack .hb-stack__h { display: none; }
.hb-stack .p0 { fill: var(--cream); }
.hb-stack .p1 { fill: var(--bone); }
.hb-stack .p2 { fill: var(--mustard); }
.hb-stack svg { filter: brightness(var(--art-bright)); }
.hb-sheet { transform-box: fill-box; transform-origin: 50% 50%; }
.hb-tabshape { fill: var(--mustard); stroke: var(--ink-plum); stroke-width: 1.5; }
.hb-tabtext { font: 600 26px/1 var(--font-mono); letter-spacing: 1.5px; fill: var(--ink-plum); }
.hb-tabtext--h { font-size: 31px; }
.hb-count { margin: 0; text-align: center; max-width: 30ch; line-height: 1.5; }

/* ledger: the six newest, tight and dated */
.hb-ledger-wrap { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.hb-ledger__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; padding-bottom: 14px; border-bottom: 2px solid var(--bone); }
.hb-ledger { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.hb-ledger li { border-bottom: 2px solid var(--rule); }
.hb-ledger a {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 6px 18px; align-items: baseline;
  padding: 16px 6px; color: var(--text); text-decoration: none; height: 100%;
}
.hb-ledger a:hover { background: var(--night-plum); }
.hb-ledger a:hover .hb-ledger__title { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.hb-ledger a:focus-visible { outline-offset: -2px; }
.hb-ledger__date { padding-top: .2em; }
.hb-ledger__title { font: 700 1.1875rem/1.3 var(--font-body); text-wrap: pretty; }
/* Polish 9 Oct: the word-count slivers that sat at the end of each row are gone (no key, and the stack beside it already shows length) */
.hb-ledger .new-tab { grid-column: 2; justify-self: start; margin-top: 2px; }

/* ---------- 2. Shows ---------------------------------------------------- */
.hb-show { padding-block: clamp(4rem, 8vw, 6rem); }
.hb-gdy__grid, .hb-tdg__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.hb-gdy__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hb-gdy__grid > .hb-show__text { align-self: center; }
.hb-gdy__cases { grid-column: 1 / -1; display: grid; gap: 18px; }
.hb-tdg__grid { grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); }
.hb-show__text { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hb-show__text > * { margin: 0; }
.hb-show__name { line-height: .92; }
.hb-show__sub { margin-top: -4px; }
.hb-show__line { max-width: 46ch; }
.hb-show__stamp { margin: 4px 0; }
.hb-show__screen { display: grid; gap: 14px; min-width: 0; }
.hb-screen { border: 2px solid var(--bone); }
.hb-screen__now { margin: 0; min-height: 2.6em; color: var(--label); }
.hb-back { justify-self: start; }

/* Go Doubt Yourself: four case folders in a sorter, staggered tabs */
.hb-cases { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 34px 0 6px; }
.hb-cases li { display: flex; }
.hb-case {
  position: relative; display: grid; grid-template-rows: 1fr auto; gap: 8px; width: 100%;
  padding: 16px 18px 14px; text-align: left; align-content: start;
  background: var(--mustard); color: var(--ink-plum); border: 0; border-radius: 0 3px 3px 3px;
  text-decoration: none; --focus: var(--bone);
}
.hb-case__tab {
  position: absolute; bottom: 100%; left: calc(var(--tab-x, 0) * 1%);
  padding: 6px 16px 4px; background: var(--mustard);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  font: 600 .875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.hb-cases li:nth-child(1) .hb-case { --tab-x: 0; }
.hb-cases li:nth-child(2) .hb-case { --tab-x: 16; }
.hb-cases li:nth-child(3) .hb-case { --tab-x: 32; }
.hb-cases li:nth-child(4) .hb-case { --tab-x: 48; }
.hb-case__title { font: 700 1.1875rem/1.25 var(--font-body); text-wrap: balance; }
.hb-case__date { font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hb-case:hover, .hb-case.is-current { background: var(--bone); }
.hb-case:hover .hb-case__tab, .hb-case.is-current .hb-case__tab { background: var(--bone); }

/* The Daily Grift: tapes on a shelf in the detective's office (tdg-06) */
.hb-office { container-type: inline-size; view-transition-name: tdg-art; --spine-max: 15cqw; }
/* Her ruling 10 Oct 2026 (session 5): every video box is 16:9 and shows the episode's own thumbnail whole, so the
   tapes stand on a shelf under the screen at every width (they used to stand inside it, over the office art). */
.hb-office { overflow: visible; aspect-ratio: auto; border: 0; background: transparent; }
.hb-office .player__poster { position: relative; display: block; aspect-ratio: 16 / 9; height: auto; border: 2px solid var(--bone); border-radius: var(--radius-img); }
.hb-office::after, .hb-office__lamp, .hb-office .player__stage { inset: 0 0 auto 0; aspect-ratio: 16 / 9; height: auto; }
.hb-office--thumb .hb-office__lamp { display: none; }   /* the lamp glow was for the office art; never tint her thumbnail */
.hb-office__lamp {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.hb-office__lamp::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 34% 30% at 50% 8%, rgb(247 216 165 / .26), rgb(247 216 165 / 0) 70%);
  mix-blend-mode: screen;
}
.hb-office__rain { display: none; }
.hb-shelf { position: relative; z-index: 2; margin-top: 14px; padding: 0 1cqw; }
.hb-shelf::before { /* the shadowed lower wall behind the tapes, so they read */
  display: none;   /* not needed now the tapes stand under the screen */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--spine-max) + 9cqw);
  background: linear-gradient(to top, rgb(14 8 13 / .92) 0, rgb(14 8 13 / .7) 45%, rgb(14 8 13 / 0) 100%);
  pointer-events: none;
}
.hb-shelf__row { list-style: none; position: relative; display: flex; align-items: flex-end; gap: .7cqw; }
.hb-shelf__row li { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; }
.hb-shelf__plank {
  position: relative; display: block; height: 2.4cqw; min-height: 10px; margin: 0 -1cqw;
  background: var(--ink-plum); border-top: 2px solid var(--bone);
}
.hb-spine {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  width: 100%; height: calc(var(--rt) * var(--spine-max));
  padding: 7px 0 18px; border: 2px solid var(--bone); border-bottom: 0; border-radius: 3px 3px 0 0;
  background: var(--spine-bg, var(--wine)); color: var(--cream); text-decoration: none; cursor: pointer;
  font: inherit;
}
.hb-spine--wine { --spine-bg: var(--wine); }
.hb-spine--teal { --spine-bg: var(--slate-teal); }
.hb-spine--night { --spine-bg: var(--night-plum); }
.hb-spine--mulberry { --spine-bg: var(--mulberry); }
.hb-spine--violet { --spine-bg: var(--dusk-violet); }
.hb-spine::after { /* tape window near the foot */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 5px; background: rgb(14 8 13 / .6); border-radius: 2px;
}
.hb-spine__play { flex: none; width: 0; height: 0; border-left: 9px solid var(--bone); border-block: 6px solid transparent; margin-left: 3px; }
.hb-spine__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; flex-direction: column; gap: 1px; padding: 5px 1px; background: var(--cream); color: var(--ink-plum);
  font: 600 .875rem/1.05 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.hb-spine.is-out { translate: 0 -16%; rotate: 5deg; transform-origin: 0 100%; z-index: 1; --spine-bg: var(--mulberry); }
.hb-spine.is-out .hb-spine__label { background: var(--mustard); }
.hb-spine:hover .hb-spine__label, .hb-spine:focus-visible .hb-spine__label, .hb-spine.is-current .hb-spine__label { background: var(--bone); }
.hb-spine:focus-visible { outline-offset: 2px; }

/* ---------- 3. The whole stack: the wall of months --------------------- */
.hb-deal { padding-top: 5rem; padding-bottom: 5rem; }
.hb-stage {
  --k: clamp(1.6px, calc((100svh - var(--header-h) - 320px) / 126), 4.6px);
  --wall-h: calc(126 * var(--k) + 6px);
  --tray-w: clamp(110px, 11vw, 160px);
  position: relative; display: grid; gap: 22px; padding-block: 16px 14px;
}
.hb-stage__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 56px); align-items: end; }
.hb-stage__head > * { margin: 0; }
.hb-stage__intro { max-width: 54ch; }
.hb-stage__body {
  display: grid;
  grid-template-columns: var(--tray-w) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 52px); row-gap: 10px;
}
.hb-tray { grid-column: 1; grid-row: 1; position: relative; height: var(--wall-h); margin-bottom: 30px; align-self: end; }
.hb-tray__floor { /* an empty in-tray: low walls and a floor */
  position: absolute; left: -10px; right: -10px; bottom: -6px; height: 26px;
  border: 2px solid var(--bone); border-top: 0; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgb(232 195 146 / .22) 9px 11px);
}
.hb-wall {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(var(--hb-months, 24), minmax(0, 36px)); justify-content: space-between; align-items: end;
}
.hb-col {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center;
}
button.hb-col { cursor: pointer; }
.hb-col__marks { display: flex; flex-direction: column-reverse; justify-content: flex-start; height: var(--wall-h); }
.hb-mark {
  display: block; flex: none; height: calc(var(--t) * var(--k));
  border-top: 1px solid var(--night-plum);
  background: var(--paper, var(--cream));
}
.hb-mark.p0 { --paper: var(--cream); }
.hb-mark.p1 { --paper: var(--bone); }
.hb-mark.p2 { --paper: var(--mustard); }
.hb-mark.is-match { --paper: var(--bone); }
.hb-mark.is-dim { --paper: var(--dusk-violet); }
.hb-col__label {
  display: block; padding: 4px 0 3px;
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--label);
  white-space: nowrap;
}
.hb-col__yr { display: none; }
button.hb-col:hover .hb-col__label, button.hb-col[aria-expanded="true"] .hb-col__label, .hb-col.is-landing .hb-col__label {
  background: var(--mustard); color: var(--ink-plum);
}
button.hb-col:hover .hb-mark:not(.is-dim) { filter: brightness(1.06); }
button.hb-col:focus-visible { outline-offset: 4px; }
.hb-col--empty .hb-col__lot { display: block; height: 18px; border: 2px dashed var(--dusk-violet); border-bottom-color: var(--bone); }
.hb-col--empty .hb-col__label { color: var(--label); opacity: 1; }
@media (min-width: 900px) { .hb-stage { padding-bottom: 72px; } }
.hb-years {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: repeat(var(--hb-months, 24), minmax(0, 36px)); justify-content: space-between;
}
.hb-years span {
  padding-top: 6px; border-top: 2px solid var(--bone);
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .08em; color: var(--label);
}
.hb-years span + span { margin-left: 0; }
.hb-tip {
  position: absolute; z-index: 30; left: 0; top: 0; max-width: 320px; pointer-events: none;
  display: grid; gap: 4px; padding: 10px 12px;
  background: var(--ink-plum); border: 2px solid var(--bone); color: var(--cream);
}
.hb-tip__date { font: 600 .875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
.hb-tip__title { font: 700 1rem/1.3 var(--font-body); }

/* controls under the wall */
.hb-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-top: 30px; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-find { display: grid; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.hb-find input {
  width: 100%; min-height: 44px; padding: 8px 18px;
  border: 2px solid var(--bone); border-radius: var(--radius-pill); background: var(--ink-plum); color: var(--cream);
  font: 400 1.0625rem/1.2 var(--font-body);
}
.hb-find input::placeholder { color: rgb(247 216 165 / .72); }
.hb-status { flex-basis: 100%; margin: 0; min-height: 1.4em; }

/* the month folder (opens from a column) */
.hb-month {
  --text: var(--ink-plum); --label: var(--ink-plum); --focus: var(--ink-plum); --ground: var(--cream);
  position: relative; margin-top: 28px; padding: 22px clamp(18px, 3vw, 32px) 26px;
  background: var(--cream); color: var(--ink-plum); border-top: 10px solid var(--mustard);
}
.hb-month__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.hb-month__head h3 { color: var(--ink-plum); }
.hb-month__head h3:focus { outline: none; }
.hb-month__head h3:focus-visible { outline: 2px solid var(--ink-plum); }
.hb-month .icon-btn { color: var(--ink-plum); border-color: var(--ink-plum); }
.hb-month__list { list-style: none; columns: 2 380px; column-gap: 40px; }
.hb-month__list li { break-inside: avoid; border-bottom: 1px solid rgb(27 15 25 / .25); }
.hb-month__list a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 14px; padding: 9px 2px; color: var(--ink-plum); text-decoration: none; }
.hb-month__list a:hover span:last-child { text-decoration: underline; }
.hb-month__list a:focus-visible { outline-offset: 0; }
.hb-month__list .label { padding-top: .25em; color: var(--ink-plum); }
.hb-month__list li.is-hit { background: rgb(217 140 66 / .35); }
.hb-month__list li.is-dim a { color: rgb(27 15 25 / .62); }

/* list view */
.hb-list { margin-top: 26px; }
.hb-list > summary { list-style: none; cursor: pointer; }
.hb-list > summary::-webkit-details-marker { display: none; }
.hb-list[open] > summary { background: var(--bone); color: var(--ink-plum); }
.hb-list__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 40px; margin-top: 28px; }
.hb-list__month h3 { padding-bottom: 8px; border-bottom: 2px solid var(--bone); margin-bottom: 4px; }
.hb-list__month ol { list-style: none; }
.hb-list__month a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; font-size: 1.0625rem; line-height: 1.35; }
.hb-list__month a:hover .hb-list__t { text-decoration: underline; text-decoration-color: var(--mustard); }
.hb-list__month .label { padding-top: .2em; }
.hb-list__empty { margin: 8px 0 0; }
.hb-list__fallback { margin: 18px 0 0; }

/* ---------- 4. The rooms ------------------------------------------------ */
.hb-room { padding-block: clamp(4rem, 8vw, 6rem); }
.hb-room .t-display { line-height: .92; }

/* GriftMatrix: her line inside the blank sheet on the corkboard */
.hb-gm__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.hb-gm__board { position: relative; container-type: inline-size; min-width: 0; }
.hb-gm__art { border: 2px solid var(--bone); }
.hb-gm__sheet {
  position: absolute; z-index: 3; left: 46.6%; top: 10.4%; width: 40%; height: 31.5%; margin: 0;
  display: flex; align-items: center;
  font: 700 clamp(14px, 2.3cqi, 21px)/1.32 var(--font-body); color: var(--ink-plum);
  background: #FCEDC9; /* the blank sheet's own paper colour, so the contrast never depends on the image */
  text-wrap: pretty;
}
.hb-gm__text { display: grid; gap: 18px; min-width: 0; }
.hb-gm__text > * { margin: 0; }
.hb-two {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px);
  padding: 22px 6px 110px; color: inherit; text-decoration: none;
}
.hb-two:focus-visible { outline-offset: 6px; }
.hb-pin {
  position: relative; z-index: 1; display: block; padding: 22px 16px 14px;
  background: var(--cream); color: var(--ink-plum);
  font: 400 clamp(1.375rem, 1rem + 1.1vw, 1.875rem)/1 var(--font-display); text-transform: uppercase;
  rotate: -2deg;
  box-shadow: 5px 7px 0 rgb(14 8 13 / .42); /* pinned evidence: the one place a shadow is allowed */
}
.hb-pin::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--heart-red); border: 2px solid var(--bone);
}
.hb-pin--b { rotate: 2.5deg; margin-top: 14px; }
.hb-two .string-label { color: var(--cream); }
.hb-two__line { max-width: 44ch; font-size: 1.125rem; }
.hb-two__line a { color: var(--cream); font-weight: 700; }
.hb-doors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

/* The Receipts: envelopes in two fanned rows */
.hb-rc__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(28px, 4vw, 60px); align-items: end; }
.hb-rc__head p { margin: 0; }
.hb-rc__lines { display: grid; gap: 14px; }
.hb-rc__stack { color: var(--display); gap: .08em; }
.hb-fan {
  list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 46px 0;
  margin: 3rem 0 2.5rem; padding: 18px 10px 0;
}
.hb-env { --rot: calc((var(--c, 0) - 2.5) * 1.6deg); --dy: 0px; rotate: var(--rot); translate: 0 var(--dy); margin-inline: -6px; position: relative; z-index: 0; }
.hb-env:nth-child(6n+1) { --c: 0; --dy: 14px; }
.hb-env:nth-child(6n+2) { --c: 1; --dy: 5px; }
.hb-env:nth-child(6n+3) { --c: 2; --dy: 0px; }
.hb-env:nth-child(6n+4) { --c: 3; --dy: 0px; }
.hb-env:nth-child(6n+5) { --c: 4; --dy: 5px; }
.hb-env:nth-child(6n+6) { --c: 5; --dy: 14px; }
.hb-env:hover, .hb-env:focus-within { z-index: 2; }
.hb-env__card {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 168px;
  padding: 44px 16px 16px; background: var(--mustard); color: var(--ink-plum); text-decoration: none;
  border: 2px solid var(--ink-plum); border-radius: 3px;
}
.hb-env__flap {
  position: absolute; left: -2px; right: -2px; top: -2px; height: 46px; z-index: 0;
  background: #C27A36; border: 2px solid var(--ink-plum);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transform: perspective(500px) rotateX(0deg);
}
.hb-env__act { position: relative; font: 400 1.75rem/1 var(--font-display); text-transform: uppercase; }
.hb-env__years { color: var(--ink-plum); }
.hb-env__line { font: 700 1rem/1.3 var(--font-body); }
.hb-env__card:focus-visible { outline-color: var(--bone); outline-offset: 4px; }
.hb-env--missing .hb-env__card { background: transparent; border: 2px dashed var(--cream); color: var(--cream); padding-top: 22px; }
.hb-env--missing .hb-env__act, .hb-env--missing .hb-env__line { color: var(--cream); }

/* The Epstein Files: hanging folders in a drawer */
.hb-ep__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.hb-ep__text { display: grid; gap: 16px; min-width: 0; }
.hb-ep__text > * { margin: 0; }
.hb-ep__line { max-width: 44ch; }
.hb-ep__art { border: 2px solid var(--bone); }
.hb-drawer { position: relative; margin-top: 18px; }
.hb-drawer__tabs { list-style: none; position: relative; display: grid; }
.hb-drawer__tabs li { position: relative; height: 46px; z-index: var(--z, 0); }
.hb-drawer__tabs li::before { /* the folder body behind its tab */
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 64px;
  background: #E3A65F; border-top: 2px solid var(--ink-plum);
}
.hb-drawer__tabs li:nth-child(even)::before { background: var(--cream); }
.hb-drawer__tabs li:nth-child(1) { --z: 1; --x: 2%; }
.hb-drawer__tabs li:nth-child(2) { --z: 2; --x: 20%; }
.hb-drawer__tabs li:nth-child(3) { --z: 3; --x: 44%; }
.hb-drawer__tabs li:nth-child(4) { --z: 4; --x: 12%; }
.hb-drawer__tabs li:nth-child(5) { --z: 5; --x: 36%; }
.hb-drawer__tabs .folder-tab { position: absolute; top: 0; left: var(--x); }
.hb-drawer__front {
  position: relative; z-index: 6; display: block; height: 70px; margin-top: 0;
  background: var(--ink-plum); border: 2px solid var(--bone); border-radius: 3px;
}
.hb-drawer__pull { position: absolute; left: 50%; top: 22px; width: 84px; height: 22px; margin-left: -42px; border: 3px solid var(--bone); border-radius: 4px; }

/* The xAI Files and The AI Files: plain doors */
.hb-xai__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-door {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px;
  border: 2px solid var(--bone); color: var(--text); text-decoration: none; min-width: 0;
}
.hb-door:hover { background: var(--night-plum); }
.hb-door .t-h3 { color: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.hb-door__line { font-size: 1.0625rem; line-height: 1.5; }
.hb-door__go { margin-top: auto; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.hb-door.needs-call { outline-offset: 6px; }

/* Critical Thinking: a card catalogue */
.hb-ct__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.hb-ct__text { display: grid; gap: 16px; }
.hb-ct__text > * { margin: 0; }
.hb-cat {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  padding: 14px; background: var(--wine); border: 2px solid var(--bone); border-radius: 3px;
}
.hb-drawer8 {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; height: 100%;
  padding: 14px 10px 14px; background: var(--night-plum); border: 2px solid var(--dusk-violet);
  color: var(--cream); text-decoration: none;
}
.hb-drawer8__holder {
  display: grid; gap: 4px; width: 100%; padding: 8px 10px; text-align: center;
  background: var(--cream); color: var(--ink-plum); border: 3px solid var(--mustard);
}
.hb-drawer8__holder .label { color: var(--ink-plum); }
.hb-drawer8__name { font: 700 1rem/1.25 var(--font-body); text-wrap: balance; }
.hb-drawer8__pull { width: 44px; height: 14px; border: 3px solid var(--mustard); border-top: 0; border-radius: 0 0 14px 14px; }
.hb-drawer8:hover { border-color: var(--bone); background: var(--ink-plum); }

/* ---------- 5. Just in Case: the file box -------------------------------- */
.hb-jic { --mp-desk-h: 7rem; }
.hb-jic__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 60px); align-items: end; }
.hb-jic__text { display: grid; gap: 16px; justify-items: start; }
.hb-jic__text > * { margin: 0; }
.hb-jic__text .t-h1 { line-height: 1.02; }
.hb-jic__zip { margin-top: 14px !important; margin-bottom: 76px !important; }
.hb-box { position: relative; padding: 34px 16px 0; border: 2px solid var(--bone); border-bottom: 0; border-radius: 4px 4px 0 0; background: rgb(14 8 13 / .28); }
.hb-box__folders { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 10px; padding-bottom: 46px; }
.hb-fold { position: relative; }
.hb-fold a {
  position: relative; display: grid; gap: 4px; align-content: start; height: 100%; min-height: 92px;
  padding: 12px 12px 12px; background: var(--paper); color: var(--ink-plum); text-decoration: none; border-radius: 0 3px 3px 3px;
}
.hb-fold--cream { --paper: var(--cream); }
.hb-fold--bone { --paper: var(--bone); }
.hb-fold--mustard { --paper: var(--mustard); }
.hb-fold__tab {
  position: absolute; bottom: 100%; left: calc(var(--tab) * 18%);
  padding: 5px 12px 3px; background: var(--paper);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  font: 600 .875rem/1.2 var(--font-mono); letter-spacing: .08em;
}
.hb-fold__name { font: 700 1.0625rem/1.2 var(--font-body); }
.hb-fold__meta { display: grid; color: var(--ink-plum); font-size: .875rem; letter-spacing: .04em; text-transform: none; }
.hb-fold a:hover { filter: brightness(1.05); }
.hb-fold a:hover .hb-fold__name { text-decoration: underline; }
.hb-fold a:focus-visible { outline-color: var(--cream); }
.hb-box__front { position: absolute; left: -2px; right: -2px; bottom: 0; height: 58px; background: var(--ink-plum); border: 2px solid var(--bone); border-radius: 0 0 4px 4px; z-index: 2; }
.hb-box__front::after { content: ""; position: absolute; left: 50%; top: 14px; width: 110px; height: 22px; margin-left: -55px; border: 3px solid var(--bone); border-radius: 12px; }

/* ---------- 6. Subscribe -------------------------------------------------- */
.hb-sub__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.hb-sub__text { display: grid; gap: 18px; justify-items: start; }
.hb-sub__text > * { margin: 0; }
.hb-sub__text p { max-width: 48ch; }
.hb-sub__art { max-width: 460px; justify-self: end; }

/* ---------- 7. Footer: the bottom of the stack --------------------------- */
.hb-bottom { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--rule); }
.hb-bottom a { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); font: 600 .875rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hb-bottom__sheet { display: inline-block; width: 36px; height: 6px; background: var(--cream); border-top: 2px solid var(--mustard); }

/* ---------- Mid widths --------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 900px) {
  /* Polish 9 Oct: The Daily Grift stays side by side here (it used to go full width, which pushed the shelf
     under the first view). The screen gets a taller crop (sides of the art trimmed, never the top) so the
     tapes keep their height and readable labels; tapes stand a little closer together. */
  .hb-tdg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 3vw, 36px); }
  .hb-office { --spine-max: min(22cqw, 150px); }
  .hb-office .hb-shelf { padding: 0 1cqw; }
  .hb-office .hb-shelf__row { gap: .25cqw; }
  .hb-office .hb-shelf__plank { margin: 0 -1cqw; }
  .hb-office .hb-spine__label { line-height: 1; padding: 5px 0; }
  .hb-col__label { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 2px; margin-inline: auto; }
  .hb-xai__grid { grid-template-columns: 1fr 1fr; }
  .hb-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-ct__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Phone: recomposed, not shrunk ------------------------------- */
@media (max-width: 899px) {
  .hb-front { padding-top: 1.5rem; padding-bottom: 3.25rem; }
  .hb-front__grid { grid-template-columns: 1fr; gap: 26px; }
  .hb-card { gap: 16px; }
  .hb-kicker { padding-top: 10px; border-top-width: 5px; }
  .hb-title { font-size: clamp(2.875rem, 11.5vw, 3.75rem); line-height: .96; }
  .hb-meta .stamp { line-height: 1.45; }
  .hb-stackcol { gap: 14px; }
  .hb-stack { height: auto; padding: 0; }
  .hb-stack .hb-stack__v { display: none; }
  .hb-stack .hb-stack__h { display: block; width: 100%; height: auto; }
  .hb-count { max-width: none; }
  .hb-ledger { grid-template-columns: 1fr; }
  .hb-ledger a { grid-template-columns: minmax(0, 1fr); padding: 14px 2px; }
  .hb-ledger__date { grid-column: 1 / -1; }
  .hb-ledger__title { grid-column: 1; }
  .hb-ledger .new-tab { grid-column: 1; }

  .hb-gdy__grid, .hb-tdg__grid { grid-template-columns: 1fr; gap: 26px; }
  .hb-gdy .hb-show__screen { order: -1; }
  .hb-cases { grid-template-columns: 1fr; gap: 34px; margin-top: 30px; }
  .hb-cases li:nth-child(4) .hb-case { --tab-x: 48; }
  .hb-tdg .hb-show__screen { order: 0; }
  /* the shelf leaves the art and becomes a sideways row with native scroll */
  .hb-office { overflow: visible; aspect-ratio: auto; border: 0; background: transparent; }
  .hb-office .player__poster { position: relative; aspect-ratio: 16 / 9; height: auto; border: 2px solid var(--bone); border-radius: var(--radius-img); }
  .hb-office::after { inset: 0 0 auto 0; aspect-ratio: 16 / 9; }
  .hb-office__lamp { inset: 0 0 auto 0; aspect-ratio: 16 / 9; height: auto; }
  .hb-office .player__stage { inset: 0 0 auto 0; aspect-ratio: 16 / 9; height: auto; }
  .hb-shelf { position: relative; margin-top: 14px; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; --spine-max: 190px; }
  .hb-shelf::before { display: none; }
  .hb-shelf__row { gap: 8px; width: max-content; padding: 20px 12px 0 4px; }
  .hb-shelf__row li { flex: 0 0 46px; scroll-snap-align: end; }
  .hb-shelf__plank { margin: 0; width: max-content; min-width: 100%; height: 12px; }
  .hb-spine.is-out { translate: 0 -10px; rotate: 0deg; }

  .hb-stage__head { grid-template-columns: 1fr; }
  .hb-stage__body { grid-template-columns: 1fr; }
  .hb-tray, .hb-years { display: none; }
  .hb-wall {
    grid-column: 1; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 4px;
    --kp: calc((100vw - 2 * var(--gutter) - 6.25rem - 10px) / 126);
  }
  .hb-col { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; text-align: left; }
  .hb-col__label { grid-column: 1; grid-row: 1; writing-mode: horizontal-tb; transform: none; padding: 6px 6px 5px; }
  .hb-col__yr { display: inline; }
  .hb-col__marks { grid-column: 2; grid-row: 1; flex-direction: row; height: 22px; }
  .hb-mark { height: 100%; width: calc(var(--t) * var(--kp)); border-top: 0; border-left: 1px solid var(--night-plum); }
  .hb-col--empty .hb-col__lot { width: 26px; height: 100%; }
  .hb-rc .link-arrow { margin-top: 64px; }
  .hb-tools { gap: 16px; }
  .hb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scrollbar-width: none; width: 100vw; }
  .hb-chips .toggle { flex: none; }
  .hb-find { max-width: none; }
  .hb-month__list a, .hb-list__month a { grid-template-columns: 1fr; }

  .hb-gm__grid, .hb-rc__head, .hb-ep__grid, .hb-ct__grid, .hb-jic__grid, .hb-sub__grid { grid-template-columns: 1fr; }
  .hb-ep__art { order: -1; }
  .hb-two { padding-bottom: 104px; gap: 28px; }
  .hb-fan { grid-template-columns: 1fr; gap: 14px; margin: 2rem 0; padding: 0; }
  .hb-env { rotate: calc((var(--c, 0) - 2.5) * .5deg); translate: none; margin: 0; }
  .hb-env__card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; min-height: 0; padding: 18px 16px 16px 18px; }
  .hb-env__flap { display: none; }
  .hb-env__act { grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; }
  .hb-env--missing .hb-env__card { padding-top: 18px; }
  .hb-xai__grid { grid-template-columns: 1fr; }
  .hb-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; }
  .hb-box { padding: 32px 10px 0; }
  .hb-box__folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 8px; }
  .hb-fold__tab { left: calc(var(--tab) % 2 * 30%); }
  .hb-sub__art { justify-self: start; max-width: 100%; }
}
/* the corkboard sheet is too small for her line on narrow boards: set it under the art */
@container (max-width: 560px) {
  .hb-gm__sheet {
    position: static; width: auto; height: auto; margin-top: 14px; padding: 16px 18px;
    background: var(--cream); font-size: 1.125rem; line-height: 1.45;
  }
}

/* ==========================================================================
   MOTION. Only when the device allows it and Still is off. Removing this
   block leaves the complete, finished page. Text never moves on its own.
   ========================================================================== */
@property --hb-pool { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@media (prefers-reduced-motion: no-preference) {
  /* The October files start askew on top and square up, one at a time (180ms each, 90ms apart) */
  :root:not([data-motion="still"])[data-returning="off"] .hb-stack.go .hb-sheet.oct {
    animation: hb-square 180ms cubic-bezier(.25, .46, .45, .94) both;
    animation-delay: calc(420ms + var(--ko) * 90ms);
  }
  :root:not([data-motion="still"])[data-returning="on"] .hb-stack.go .hb-sheet.nsv {
    animation: hb-square 180ms cubic-bezier(.25, .46, .45, .94) both;
    animation-delay: calc(420ms + var(--kn) * 90ms);
  }
  /* The lamp pool warms across the stack once the files settle, then stillness */
  :root:not([data-motion="still"]) .hb-stack.go {
    animation: hb-lamp 800ms cubic-bezier(.2, .8, .2, 1) 1500ms both;
  }

  /* Tapes and case folders lift 12px on hover or focus */
  :root:not([data-motion="still"]) .hb-spine,
  :root:not([data-motion="still"]) .hb-case { transition: transform 180ms cubic-bezier(.25, .46, .45, .94), background-color 160ms ease; }
  :root:not([data-motion="still"]) .hb-spine:hover, :root:not([data-motion="still"]) .hb-spine:focus-visible,
  :root:not([data-motion="still"]) .hb-case:hover, :root:not([data-motion="still"]) .hb-case:focus-visible { transform: translateY(-12px); }

  /* Office lamp breathes very gently (art layer only, stopped by Still, needs scripts) */
  :root.ratc-ready:not([data-motion="still"]) .hb-office__lamp::before { animation: hb-breathe 8s ease-in-out infinite; }

  /* Wall: files relight */
  :root:not([data-motion="still"]) .hb-mark { transition: background-color 250ms ease; }

  /* Envelopes: lift and the flap opens (decorative layer) */
  :root:not([data-motion="still"]) .hb-env__card { transition: transform 250ms cubic-bezier(.2, .7, .2, 1); }
  :root:not([data-motion="still"]) .hb-env__flap { transition: transform 250ms cubic-bezier(.2, .7, .2, 1); }
  :root:not([data-motion="still"]) .hb-env__card:is(a):hover,
  :root:not([data-motion="still"]) .hb-env__card:is(a):focus-visible { transform: translateY(-16px); }
  :root:not([data-motion="still"]) .hb-env__card:is(a):hover .hb-env__flap,
  :root:not([data-motion="still"]) .hb-env__card:is(a):focus-visible .hb-env__flap { transform: perspective(500px) rotateX(-160deg); }

  /* Drawer tabs rise when the drawer comes into view (300ms, staggered) */
  :root.ratc-ready:not([data-motion="still"]) .hb-drawer .folder-tab { transition: translate 300ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--z) * 60ms); }
  :root.ratc-ready:not([data-motion="still"]) .hb-drawer:not(.is-in) .folder-tab { translate: 0 22px; }

  /* Card catalogue drawers slide out a little */
  :root:not([data-motion="still"]) .hb-drawer8 { transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
  :root:not([data-motion="still"]) .hb-drawer8:hover, :root:not([data-motion="still"]) .hb-drawer8:focus-visible { transform: translateY(6px) scale(1.03); }

  /* Just in Case: folder tabs rise in a wave on entry (300ms, 30ms apart) */
  :root.ratc-ready:not([data-motion="still"]) .hb-fold__tab { transition: translate 300ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--n) * 30ms); }
  :root.ratc-ready:not([data-motion="still"]) .hb-box:not(.is-in) .hb-fold__tab { translate: 0 18px; }
}
@keyframes hb-square { from { transform: translate(var(--dx), 0) rotate(var(--r)); } to { transform: none; } }
@keyframes hb-lamp { from { --lamp: 0%; --lamp-a: 0; --slat-a: 0; --edge-a: 0; --wash-a: 0; } }
@keyframes hb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* phone band sheets move along the other axis */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"])[data-returning="off"] .hb-stack.go .hb-stack__h .hb-sheet.oct,
  :root:not([data-motion="still"])[data-returning="on"] .hb-stack.go .hb-stack__h .hb-sheet.nsv { animation-name: hb-square-h; }
}
@keyframes hb-square-h { from { transform: translate(0, var(--dx)) rotate(var(--r)); } to { transform: none; } }

/* front stack: the newest sheet's top face, like a printed page seen from above */
.hb-topface { fill: #FBE4BC; stroke: var(--ink-plum); stroke-width: 1; }
.hb-toplines path { stroke: var(--ink-plum); stroke-opacity: .35; stroke-width: 1.4; }
.hb-gdy__cases .link-arrow { justify-self: start; }
.hb-jic__h { line-height: 1.02; max-width: 16ch; }
.hb-floor { stroke: var(--bone); stroke-width: 3; }
/* the hour light prints onto the paper like an extra ink plate (multiply), not onto the wall;
   daylight's blind slats are light, so they lift the paper (overlay) */
.hb-stack::before { mix-blend-mode: multiply; }
:root[data-hour="daylight"] .hb-stack::before { mix-blend-mode: overlay; }
/* the lamp's pool on the wall behind the stack (hour tokens; decoration only) */
.hb-stack__pool {
  position: absolute; inset: -8% -14% 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 35%, transparent 100%);
  background:
    radial-gradient(ellipse 60% 55% at 54% 4%, rgb(217 140 66 / calc(var(--lamp-a) * .9)) 0, rgb(217 140 66 / 0) var(--lamp)),
    radial-gradient(ellipse 70% 60% at 86% 20%, rgb(127 168 173 / calc(var(--wash-a) * 1.6)) 0, rgb(127 168 173 / 0) 70%),
    linear-gradient(to left, rgb(127 168 173 / calc(var(--edge-a) * .35)) 0, rgb(127 168 173 / 0) 30%);
}
.hb-stack .hb-stack__v, .hb-stack .hb-stack__h { position: relative; z-index: 0; }

/* ==========================================================================
   Review pass, 9 Oct 2026 (independent reviewer). Each rule names its cause.
   ========================================================================== */
/* Numbers stay with their units and dates stay whole: the stamp broke "7:44 / p.m."
   and the count line broke "November / 4th" on phone, and began a line with "·" on desktop. */
.hb-nw { white-space: nowrap; }
.hb-count__a { display: block; }

/* Go Doubt Yourself: the shared player centres its play button, which sat on Rachel's
   face and sunglasses (on her chin at 1024px). Move it to the empty Memphis wall at left. */
.hb-gdy .player__play { align-items: flex-start; padding-left: clamp(18px, 7%, 64px); }

/* The NEEDS YOUR CALL tag on The AI Files sits above the card. When the doors stack
   (2 columns at mid widths, 1 on phone) it covered "Start reading" on the card above. */
@media (max-width: 1199px) { .hb-door.needs-call { margin-top: 48px; } }

/* Phone: keyboard focus landed behind the fixed bottom bar (tapes, envelopes, folders).
   The browser keeps a focused element above this padding. (Shared bug, reported.) */
:root { scroll-padding-bottom: calc(var(--bar-h) + 76px); }

/* The lamp over the front stack was too faint to read as a lamp. Stronger pool, same hour tokens. */
.hb-stack__pool {
  background:
    radial-gradient(ellipse 62% 58% at 54% 4%, rgb(217 140 66 / calc(var(--lamp-a) * 1.7)) 0, rgb(217 140 66 / 0) var(--lamp)),
    radial-gradient(ellipse 70% 60% at 86% 20%, rgb(127 168 173 / calc(var(--wash-a) * 2.2)) 0, rgb(127 168 173 / 0) 70%),
    linear-gradient(to left, rgb(127 168 173 / calc(var(--edge-a) * .5)) 0, rgb(127 168 173 / 0) 30%);
}

/* The "OCT 8" tab measured 12.6px at 1280x720 and 13.5px on a 360px phone (the SVG scales down).
   Larger label in a wider tab (build script), so it stays 14px or more. */
.hb-tabtext { font-size: 32px; letter-spacing: 1px; }
.hb-tabtext--h { font-size: 34px; }

/* A screen in full screen leaves the page flow. Hold its place (height kept by home-b.js) so nothing
   under it jumps when full screen ends without a key press (YouTube's own button). Two rules on purpose:
   an unknown selector in one list would drop the whole rule. */
.hb-show__screen:has(> .player:fullscreen)::before { content: ""; display: block; height: var(--hb-fs-h, 0px); }
.hb-show__screen:has(> .player:-webkit-full-screen)::before { content: ""; display: block; height: var(--hb-fs-h, 0px); }

/* The light and grain layers on the front stack ended in a visible straight edge above the top sheet
   (their soft mask was still about a third opaque at the figure's top). Fade them out fully at the top. */
.hb-stack::before, .hb-stack::after {
  -webkit-mask-image: radial-gradient(ellipse 40% 54% at 50% 54%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 54% at 50% 54%, #000 58%, transparent 100%);
}
.hb-stack__pool {
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 100%);
}

/* ==========================================================================
   POLISH (9 Oct). Added after the review; see notes/home-b.md "Polish (9 Oct)".
   ========================================================================== */
/* The Daily Grift stamp is always two lines in its narrow column: date, then runtime. The dot between
   them used to hang at the end of the first line; it is now read aloud only. */
.hb-show__stamp .hb-nw { display: block; }
/* Short tapes: the label ran into the dark tape window at the foot and lost the bottom of its letters.
   The label now sits over the window. */
.hb-spine__label { position: relative; z-index: 1; }

/* The whole stack: while the deal runs, every month shows the faint outline of its finished column,
   so the first frame already reads as a chart and the files land into their outlines.
   Height comes from home-b.js (--ghost-h); the class is only there while a deal exists (desktop, motion on).
   The finished files are opaque and cover the outline exactly, so the finished wall looks as before. */
.hb-stage.has-ghosts .hb-col__marks { position: relative; isolation: isolate; }
.hb-stage.has-ghosts button.hb-col .hb-col__marks::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--ghost-h, 0px);
  border: 1.5px solid rgb(232 195 146 / .34); border-bottom: 0;
  background: repeating-linear-gradient(0deg, rgb(232 195 146 / .07) 0 2px, transparent 2px 9px);
  pointer-events: none;
}

/* The pointer label on the wall: placed by home-b.js above the column, or beside it at the edges, so it
   never covers a month label or the heading. */
.hb-tip { max-width: 300px; }

/* ==========================================================================
   Rulings applied, 9 Oct 2026
   ========================================================================== */
/* The alternating-homepage line in the Review panel (prototype only). */
.hb-visit .hb-visit__line { margin: 0; }
/* Epstein Files front door: "Start with The Blank Check" sits under the line, above the drawer. */
.hb-ep__start { justify-self: start; }
/* Phone: the Go Doubt Yourself screen comes first in its section, so its review tag poked 8px up
   into the section above. Room for the tag only while "Show my calls" is on (the class goes when off). */
@media (max-width: 899px) { .hb-gdy .hb-show__screen.needs-call { margin-top: 64px; } }