/* Direction B — "Cream & Red Thread": calm, editorial cream page.
   The rust-red strand (sampled from the red yarn ball, #b9513b) is the only decoration;
   every other colour comes from the card art itself. */
:root[data-direction="b"] {
  --bg: #fdfbf0;
  --surface: #ffffff;
  --ink: #2a1d17;
  --ink-soft: #5a4a41;
  --heading: #2a1d17;
  --accent: #a8432f;            /* rust, darkened a touch for 5.6:1 on cream */
  --accent-ink: #fffaf2;
  --accent-2: transparent;
  --accent-2-ink: #2a1d17;
  --line: rgba(42, 29, 23, .16);
  --focus: #a8432f;
  --header-bg: #fdfbf0;          /* opaque: the thread must never show through the sticky header */
  --prop-layout: scatter;        /* js/site.js places the box props in the margins, clear of the thread */
  --font-head: "Young Serif", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --head-weight: 400;
  --radius: 6px;
  --card-radius: 9px;
  --card-shadow: 0 1px 2px rgba(42, 29, 23, .12), 0 14px 30px -10px rgba(42, 29, 23, .35);

  --thread-main: #b9513b;
  --thread-outline: #4a1d14;     /* the ball's dark ink outline */
  --thread-ply: rgba(90, 22, 10, .4);
  --thread-sheen: rgba(255, 214, 196, .7);
  --thread-w: 6px;
  --thread-ow: 1.5px;
}
@media (min-width: 1100px) { :root[data-direction="b"] { --section-pad: 112px; } }
@media (max-width: 699px) { :root[data-direction="b"] { --thread-w: 3.6px; --thread-ow: 1px; } }

[data-direction="b"] body { background: #fdfbf0; }
[data-direction="b"] h1 { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; }
[data-direction="b"] h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); letter-spacing: -.005em; }
[data-direction="b"] .site-nav ul a { font-weight: 500; }
[data-direction="b"] .btn { font-weight: 600; border-radius: 999px; }
[data-direction="b"] .btn-secondary { border-width: 1.5px; }
[data-direction="b"] .eyebrow { color: #a8432f; letter-spacing: .16em; }
[data-direction="b"] .points li::before { background: transparent; color: #a8432f; border: 1.5px solid #a8432f; font-weight: 700; }
[data-direction="b"] .step-n { background: transparent; color: #a8432f; border: 1.5px solid #a8432f; font-weight: 400; }
[data-direction="b"] .facts { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; }
[data-direction="b"] .table-shot figcaption { font-style: normal; font-size: .85rem; letter-spacing: .02em; }
/* what it is: the live 3D setup spans the full content width under the copy (heading left,
   points right). The slot's aspect ratio is fixed in CSS, so the canvas never shifts layout. */
[data-direction="b"] .what-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
[data-direction="b"] .what-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
[data-direction="b"] .what-copy > .eyebrow, [data-direction="b"] .what-copy > h2 { grid-column: 1; }
[data-direction="b"] .what-copy > h2 { margin-bottom: 0; }
[data-direction="b"] .what-copy > .points { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
[data-direction="b"] .table-render { display: none; }
[data-direction="b"] .table-live { display: block; position: relative; aspect-ratio: 16 / 9; }
[data-direction="b"] .table-shot .table-live img.table-still { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; transition: opacity .6s ease; }
[data-direction="b"] .table-live.is-live img.table-still { opacity: 0; }
[data-direction="b"] .table-live canvas { position: relative; z-index: 1; }
[data-direction="b"] .table-shot figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 2px; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  [data-direction="b"] .table-shot.is-interactive .table-hint { display: inline; font-size: .78rem; color: var(--ink-soft); opacity: .7; }
}
@media (max-width: 899px) {
  [data-direction="b"] .what-copy { grid-template-columns: minmax(0, 1fr); }
  [data-direction="b"] .what-copy > .points { grid-column: 1; grid-row: auto; margin-top: 1.2em; }
}
@media (max-width: 699px) { [data-direction="b"] .table-live { aspect-ratio: 4 / 3; } }

/* hero: the box as a real 3D object standing on the cream "table" (faces sliced from
   Box.png at the dieline folds), the red yarn ball on the floor beside it. */
[data-direction="b"] .hero-wordmark { width: min(300px, 70%); }
/* --s is the box's front-face width: about 540px at 1440, so the box reads ~560px wide on screen.
   The yarn ball is sized so its painted strands come close to the drawn thread's thickness. */
[data-direction="b"] .hero { padding-block: 8px 16px; }
[data-direction="b"] .hero-inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 32px; }
[data-direction="b"] .hero-art { --s: min(540px, 37.5vw, calc((100svh - var(--header-h) - 40px) / 1.2)); width: calc(var(--s) * 1.12); max-width: 100%; margin-inline: auto; }
[data-direction="b"] .box3d-stage { display: block; position: relative; width: calc(var(--s) * 1.12); height: calc(var(--s) * 1.2); perspective: calc(var(--s) * 5); perspective-origin: 40% 20%; }
[data-direction="b"] .box3d { left: calc(var(--s) * .02); top: calc(var(--s) * .1); }
[data-direction="b"] .yarn-red { display: block; width: calc(var(--s) * .58); right: calc(var(--s) * -.17); bottom: calc(var(--s) * -.05); z-index: 3; filter: drop-shadow(0 8px 6px rgba(42, 29, 23, .22)); }
@media (max-width: 899px) {
  [data-direction="b"] .hero-inner { grid-template-columns: 1fr; }
  [data-direction="b"] .hero-art { --s: min(420px, 76vw); }
  [data-direction="b"] .yarn-red { width: calc(var(--s) * .5); right: calc(var(--s) * -.04); }
}

/* cardboard: matte faces, a darker side, thin edge lines — no gloss */
[data-direction="b"] .box3d-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
[data-direction="b"] .box3d-front::after { box-shadow: inset 0 0 0 1px rgba(60, 38, 26, .28); background: linear-gradient(90deg, rgba(40, 24, 14, 0) 82%, rgba(40, 24, 14, .10)); }
[data-direction="b"] .box3d-right::after { box-shadow: inset 0 0 0 1px rgba(50, 30, 18, .32); background: linear-gradient(90deg, rgba(36, 22, 12, .34), rgba(36, 22, 12, .22) 45%, rgba(36, 22, 12, .30)); }
[data-direction="b"] .box3d-top::after { box-shadow: inset 0 0 0 1px rgba(60, 38, 26, .22); background: linear-gradient(180deg, rgba(255, 248, 232, .14), rgba(36, 22, 12, .06)); }

/* how it plays: one quiet room tile */
[data-direction="b"] .how-iso { display: block; width: 80%; margin-inline: auto; filter: drop-shadow(0 18px 24px rgba(42, 29, 23, .22)); }

[data-direction="b"] .people { gap: 36px; }
[data-direction="b"] .person img { border-radius: 4px; }
[data-direction="b"] .creators-copy { font-size: 1.02rem; }
[data-direction="b"] .contact { border-top: 1.5px solid #2a1d17; padding-top: 20px; }
[data-direction="b"] .fields input { border-radius: 8px; }

/* box props tossed on the floor around the page (positions set by js/site.js) */
[data-direction="b"] .prop.is-placed { display: block; z-index: 0; transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 1.5px rgba(42, 29, 23, .20)) drop-shadow(0 9px 10px rgba(42, 29, 23, .10)); }

/* MEOWples hop out under a lifted cat card */
[data-direction="b"] .fan { height: calc(var(--card-w) * 1.4 + 240px); }
[data-direction="b"] .fan-card { bottom: 160px; }   /* reserves the landing band for the MEOWple */
[data-direction="b"] .meowple { display: block; position: absolute; left: 50%; bottom: 0; width: 36%; height: auto; z-index: -1; opacity: 0; pointer-events: none;
  transform-origin: 50% 100%; transform: translate(-50%, -40%);
  transition: opacity .18s ease, transform .25s ease;
  filter: drop-shadow(0 6px 3px rgba(42, 29, 23, .30)); }
[data-direction="b"] .fan-card.is-selected .meowple,
[data-direction="b"] .fan-card:focus-visible .meowple { z-index: 2; opacity: 1; transform: translate(-50%, 80%); animation: meowple-hop .62s cubic-bezier(.3, .7, .35, 1) both; }
@media (hover: hover) {
  [data-direction="b"] .fan-card:hover .meowple { z-index: 2; opacity: 1; transform: translate(-50%, 80%); animation: meowple-hop .62s cubic-bezier(.3, .7, .35, 1) both; }
}
@keyframes meowple-hop {
  0%   { z-index: -1; opacity: 1; transform: translate(-50%, -40%) scale(1, 1); }
  46%  { z-index: -1; transform: translate(-50%, 72%) scale(.98, 1.03); }
  48%  { z-index: 2; }
  68%  { z-index: 2; transform: translate(-50%, 52%) scale(1, 1.02); }
  86%  { z-index: 2; transform: translate(-50%, 82%) scale(1.06, .93); }
  100% { z-index: 2; opacity: 1; transform: translate(-50%, 80%) scale(1, 1); }
}
/* Legend: five slots the 3D MEOWples rest in (js/meowples3d.js). The 2D sprites are the no-WebGL fallback. */
[data-direction="b"] .meowple-legend { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: .85rem; color: var(--ink-soft); }
[data-direction="b"] .meowple-legend ul { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
[data-direction="b"] .meowple-slot { width: 80px; height: 100px; display: flex; align-items: flex-end; justify-content: center; }
[data-direction="b"] .meowple-slot img { width: 66px; height: auto; filter: drop-shadow(0 3px 2px rgba(42, 29, 23, .25)); }
[data-direction="b"] .meowple-legend p { margin: 0 0 10px; }
.meowple-canvas { display: none; }
[data-direction="b"].has-mp3d .meowple-canvas { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
[data-direction="b"].has-mp3d .meowple-slot img,
[data-direction="b"].has-mp3d .fan-card .meowple { visibility: hidden; }
@media (max-width: 699px) {
  [data-direction="b"] .fan { height: calc(var(--card-w) * 1.4 + 168px); }
  [data-direction="b"] .fan-card { bottom: 108px; }
  [data-direction="b"] .meowple-slot { width: 54px; height: 70px; }
  [data-direction="b"] .meowple-slot img { width: 44px; }
  [data-direction="b"] .meowple-legend ul { gap: 8px; }
}

/* Office: room tiles turned 30deg so a point faces down; the spread office is a pointy-top
   hex tessellation, 3 rows (floors) of 3, middle row offset by half a hex, rows 3/4 hex apart. */
[data-direction="b"] .room-pile { --tw: 200px; width: calc(var(--tw) * 3.03); height: calc(var(--tw) * 2.5); }
[data-direction="b"] .room {
  transform: translate(calc(var(--tw) * 1.015 + var(--sx)), calc(var(--tw) * 1.25 - var(--th) / 2 + var(--sy))) rotate(calc(30deg + var(--rot)));
  transition-delay: calc((2 - var(--hr)) * 70ms + var(--hc) * 40ms); }
[data-direction="b"] .room-pile.is-spread .room {
  transform: translate(calc((var(--hc) + .5 + var(--ho, 0)) * var(--tw) * .866 - var(--tw) / 2), calc(var(--tw) * .5 + var(--hr) * var(--tw) * .75 - var(--th) / 2)) rotate(30deg);
  transition-delay: calc(var(--hr) * 60ms + var(--hc) * 40ms); }
@media (max-width: 699px) { [data-direction="b"] .room-pile { --tw: 104px; } }

/* How it plays: week tracker with a walking MEOWple. */
.tracker { display: none; }
[data-direction="b"] .how-art { display: none; }
[data-direction="b"] .tracker { display: block; }
.tracker-stage { position: relative; padding-bottom: 9.5%; }   /* strip below the board where the walker parks on Weekend */
.tracker-board { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; }
.tracker-art { display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 2px 3px rgba(42, 29, 23, .16), 0 20px 32px -18px rgba(42, 29, 23, .5); }
/* day cells measured on the art (fractions of 1725 x 1125): y 875-1061 */
.tracker-day { position: absolute; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); top: 77.78%; height: 16.53%; border-radius: 8%/12%; transition: box-shadow .3s ease; }
.tracker-day.is-today { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9); }
.tracker-canvas { display: none; }
.has-tracker3d .tracker-canvas { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.tracker-sprite { position: absolute; top: 76%; left: 0; width: 64px; height: auto; pointer-events: none; transform: translateX(-50%); transition: left .45s cubic-bezier(.3, .7, .3, 1);
  filter: drop-shadow(0 4px 3px rgba(42, 29, 23, .3)); }
.has-tracker3d .tracker-sprite { visibility: hidden; }
.tracker-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.tracker-next { width: 9.5em; }
.tracker-note { flex: 1 1 100%; height: 3em; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.tracker-note span { display: block; }
@media (max-width: 599px) { .tracker-note { flex-basis: 100%; height: 5.8em; } }
/* 3D tracker (js/meowples3d.js): the canvas draws the card; the transparent board button stays
   on top of the whole stage so a click anywhere advances the week. */
[data-direction="b"].has-tracker3d .tracker-stage { aspect-ratio: 16 / 8.6; padding-bottom: 0; }
[data-direction="b"].has-tracker3d .tracker-board { position: absolute; inset: 0; height: 100%; z-index: 3; }
[data-direction="b"].has-tracker3d .tracker-art,
[data-direction="b"].has-tracker3d .tracker-day { display: none; }
@media (max-width: 599px) { .tracker-sprite { width: 40px; top: 79%; } }
@media (min-width: 900px) { [data-direction="b"] .how-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
[data-direction="b"] .how { padding-bottom: calc(var(--section-pad) * .5); }

/* The peeking cat from the box art looks over the top of Katrina's photo; its cut-off
   bottom edge stays hidden behind the photo. */
.peek-cat { display: none; }
[data-direction="b"] .prop-peek { display: none !important; }
[data-direction="b"] .person { position: relative; }
[data-direction="b"] .person img:not(.peek-cat) { position: relative; z-index: 1; }
[data-direction="b"] .peek-cat { display: block; position: absolute; z-index: 0; width: 46%; right: 4%; top: -24%; pointer-events: none; transform: rotate(6deg);
  filter: drop-shadow(0 4px 4px rgba(42, 29, 23, .18)); }
@media (max-width: 699px) {
  [data-direction="b"] .peek-cat { width: 80px; left: 34px; right: auto; top: -46px; transform: rotate(-4deg); }
  [data-direction="b"] .person:has(.peek-cat) { margin-top: 30px; }
}
[data-direction="b"] .person img.peek-cat { aspect-ratio: 600 / 634; height: auto; object-fit: contain; border-radius: 0; margin: 0; box-shadow: none; }
@media (min-width: 700px) { [data-direction="b"] .peek-cat { top: -92px; } }   /* stays inside the section, clear of the thread */