/* conveyor.css (9 Nov 2026)
   The "Seven chapters, one habit" section. Every photo hangs from a chrome rail that turns to
   the chapter you are reading, and the chapters themselves deal like a deck of cards.
   Without JavaScript this stays a plain stacked list, which is the base state below. */

.cvx{position:relative}
.cvx_ghost{display:none}
.cvx_hint{display:none}

/* ---------------- base (no JavaScript, reduced motion, narrow) ---------------- */
.cvx_deck{display:flex;flex-direction:column;gap:1.25rem}
.cvx_card{background:#fff;border:1px solid var(--line,#DEDCD8);border-radius:4px;padding:1.5rem 1.75rem;
 display:grid;grid-template-columns:1fr 12.25rem;gap:1.5rem;align-items:start}
.cvx_words{min-width:0}
.cvx_tag{font-family:var(--font-mono,monospace);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--admiral-blue,#3360FF);margin:0 0 .4375rem}
.cvx_meta{font-family:var(--font-mono,monospace);font-size:.6875rem;color:#5A6782;display:flex;flex-wrap:wrap;
 gap:.75rem;margin:0 0 .4375rem}
.cvx_meta b{color:var(--admiral-blue,#3360FF);font-weight:500}
.cvx_card h3{font-family:var(--font-display,sans-serif);font-weight:800;font-size:clamp(1.1875rem,2.2vw,1.5625rem);
 line-height:1.18;letter-spacing:-.01em;margin:0 0 .5625rem}
.cvx_body{font-size:.875rem;line-height:1.55;color:#33415C;margin:0 0 .625rem}
.cvx_lesson{border-left:3px solid var(--admiral-blue,#3360FF);background:var(--hx-blush,#FFF1EE);
 padding:.625rem .8125rem;margin:0 0 .6875rem}
.cvx_lesson span{display:block;font-family:var(--font-mono,monospace);font-size:.6875rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--admiral-blue-deep,#0A00CC);margin-bottom:.25rem}
.cvx_lesson p{margin:0;font-family:var(--font-display,sans-serif);font-weight:700;font-size:.875rem;line-height:1.4}
.cvx_stamp{display:inline-block;font-family:var(--font-mono,monospace);font-size:.6875rem;letter-spacing:.06em;
 color:#fff;background:var(--admiral-navy,#142853);padding:.25rem .5625rem;border-radius:2px}
.cvx_shots{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem}
.cvx_shot{all:unset;display:block;cursor:zoom-in}
.cvx_shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px;
 border:1px solid var(--line,#DEDCD8);transition:transform .22s}
.cvx_shot:hover img{transform:translateY(-2px)}
.cvx_shot:focus-visible img{outline:2px solid var(--admiral-blue,#3360FF);outline-offset:2px}
.cvx_shot.is-wide{grid-column:span 2}
/* a chapter with no photo runs full width instead of leaving an empty column */
.cvx_card.is-words{grid-template-columns:1fr}
.cvx.is-live .cvx_card.is-words{grid-template-columns:1fr}
@media (max-width:56.25rem){
  .cvx_card{grid-template-columns:1fr;gap:.875rem;padding:1rem 1.125rem}
  .cvx_shots{grid-template-columns:repeat(5,1fr);gap:.3125rem}
}

/* ---------------- live: the rail turns and the chapters deal ---------------- */
.cvx.is-live .cvx_pin{height:100vh;min-height:36.25rem;max-height:61.25rem;display:flex;flex-direction:column;
 justify-content:center;overflow:hidden}
.cvx.is-live .cvx_ghost{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);
 text-align:center;font-family:var(--font-display,sans-serif);font-weight:800;
 font-size:clamp(3.625rem,11.5vw,9.5rem);line-height:.92;letter-spacing:-.045em;color:#E9E7E3;
 z-index:0;pointer-events:none;user-select:none;white-space:nowrap}
.cvx.is-live .cvx_hint{display:block;position:relative;z-index:4;text-align:center;
 font-family:var(--font-mono,monospace);font-size:.6875rem;color:#9AA3B5;padding:.4375rem 0 0;margin:0}

/* the rail */
.cvx.is-live .cvx_rail{position:relative;height:13.25rem;flex:none;z-index:2;cursor:grab;touch-action:pan-y}
.cvx.is-live .cvx_rail.is-drag{cursor:grabbing}
.cvx_tube{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none;overflow:visible}
.cvx_tube.is-far{z-index:20}
.cvx_tube.is-near{z-index:108}
.cvx_hang{position:absolute;left:50%;top:0;width:6.625rem;margin-left:-3.3125rem;transform-origin:50% 4%;
 will-change:transform,opacity}
.cvx_wire{display:block;width:78%;height:auto;margin:0 auto -1px}
.cvx_plate{display:block;position:relative;background:#fff;border:1px solid #D7D4CF;border-radius:3px;
 padding:.375rem .375rem .4375rem;transition:border-color .3s,box-shadow .3s;
 box-shadow:0 2px 3px rgba(20,40,83,.09),0 10px 20px -6px rgba(20,40,83,.20)}
.cvx_plate:after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;mix-blend-mode:screen;
 background:linear-gradient(118deg,rgba(255,255,255,.62) 0 15%,rgba(255,255,255,.12) 31%,
 rgba(255,255,255,0) 46%,rgba(255,255,255,0) 72%,rgba(255,255,255,.26) 92%)}
.cvx_plate img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.cvx_hang button{all:unset;display:block;cursor:pointer;width:100%}
.cvx_hang button:focus-visible .cvx_plate{outline:2px solid var(--admiral-blue,#3360FF);outline-offset:3px}
.cvx_hang.is-chapter .cvx_plate{border-color:#9FB6FF;
 box-shadow:0 2px 3px rgba(51,96,255,.16),0 16px 30px -8px rgba(51,96,255,.40)}
.cvx_hang.is-front .cvx_plate{box-shadow:0 3px 4px rgba(20,40,83,.12),0 22px 40px -10px rgba(20,40,83,.34)}
.cvx_hang.is-chapter.is-front .cvx_plate{border-color:var(--admiral-blue,#3360FF)}
.cvx_pip{position:absolute;left:50%;margin-left:-3px;bottom:-.75rem;width:6px;height:6px;border-radius:50%;
 background:var(--admiral-blue,#3360FF);opacity:0;transition:opacity .3s}
.cvx_hang.is-front .cvx_pip{opacity:1}

/* the deck */
.cvx.is-live .cvx_deck{display:block;position:relative;z-index:3;flex:none;height:23.75rem;max-width:51.25rem;
 width:100%;margin:.625rem auto 0;padding:1rem 1.875rem 2.75rem;overflow:hidden}
.cvx.is-live .cvx_card{position:absolute;left:1.875rem;right:1.875rem;top:1rem;height:20rem;overflow:hidden;
 border-radius:4px;box-shadow:0 18px 44px rgba(20,40,83,.13);transform-origin:50% 0;
 will-change:transform,opacity;grid-template-columns:1fr 12.25rem}

/* the chapter bar */
.cvx_bar{position:relative;z-index:4;flex:none;display:flex;justify-content:center;align-items:center;
 gap:.4375rem;padding:.625rem 0 0}
.cvx_bar button{all:unset;cursor:pointer;padding:.3125rem .5625rem;border-radius:2px;
 font-family:var(--font-mono,monospace);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
 color:#8B93A4;transition:color .25s,background .25s}
.cvx_bar button[aria-current="true"]{color:#fff;background:var(--admiral-navy,#142853)}
.cvx_bar .cvx_bn{display:none}

@media (max-width:56.25rem){
  .cvx.is-live .cvx_pin{min-height:40rem}
  .cvx.is-live .cvx_rail{height:11rem}
  .cvx_hang{width:4.875rem;margin-left:-2.4375rem}
  .cvx.is-live .cvx_deck{height:30.75rem;padding:.875rem 1.125rem 2.5rem;max-width:none}
  .cvx.is-live .cvx_card{left:1.125rem;right:1.125rem;top:.875rem;height:26.875rem;grid-template-columns:1fr}
  .cvx.is-live .cvx_body{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .cvx.is-live .cvx_meta{display:none}
  .cvx_bar{gap:.1875rem;padding:.5rem 0 0}
  .cvx_bar .cvx_bl{display:none}
  .cvx_bar .cvx_bn{display:inline}
  .cvx_bar button{font-size:.6875rem;padding:.375rem .5625rem;letter-spacing:.04em}
  .cvx.is-live .cvx_hint{font-size:.625rem;padding:.375rem 1rem 0}
  /* the chapter numbers line up with the card's left edge, clear of the visitor tab docked bottom right */
  .cvx.is-live .cvx_bar{justify-content:flex-start;padding-left:1.125rem;padding-right:9rem}
  .cvx.is-live .cvx_bar button{min-width:1.75rem;height:2rem;padding:0;text-align:center;box-sizing:border-box}
  .cvx.is-live .cvx_hint{text-align:left;padding-left:1.125rem;padding-right:9rem}
}

/* ---------------- phones and tablets: held with sticky, lighter paint ---------------- */
.cvx.is-touch .cvx_pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;max-height:none;box-sizing:border-box}
.cvx.is-touch .cvx_plate:after{display:none}
.cvx.is-touch .cvx_plate{box-shadow:0 6px 12px -4px rgba(20,40,83,.22)}
.cvx.is-touch .cvx_card{box-shadow:0 10px 24px rgba(20,40,83,.12)}
@media (max-width:56.25rem){
  /* on a phone the card stretches to whatever height the screen leaves, so nothing is cut off */
  .cvx.is-touch .cvx_pin{justify-content:center;padding-top:4.25rem;padding-bottom:.75rem}
  .cvx.is-touch .cvx_rail{height:9.25rem}
  .cvx.is-touch .cvx_deck{flex:1 1 0;min-height:0;height:auto;max-height:30rem;margin-top:0}
  .cvx.is-touch .cvx_card{height:auto;bottom:2.5rem}
  .cvx.is-touch .cvx_hint{display:block;padding-top:.25rem}
  .cvx.is-touch .cvx_shots{display:none}
  .cvx.is-touch .cvx_hang{width:4.5rem;margin-left:-2.25rem}
}
@media (max-width:56.25rem) and (max-height:43rem){
  .cvx.is-touch .cvx_hint{display:none}
  .cvx.is-touch .cvx_card{bottom:2rem}
  .cvx.is-touch .cvx_lesson{padding:.5rem .75rem;margin-bottom:.5rem}
  .cvx.is-touch .cvx_body{-webkit-line-clamp:4}
  .cvx.is-touch .cvx_rail{height:8.5rem}
}
@media (max-width:56.25rem) and (max-height:38rem){
  .cvx.is-touch .cvx_body{-webkit-line-clamp:5}
  .cvx.is-touch .cvx_lesson{display:none}
}
@media (max-width:22.5rem){
  .cvx.is-live .cvx_bar{gap:0;padding-left:.875rem}
  .cvx.is-live .cvx_bar button{min-width:1.5rem}
}

/* lightbox */
.cvx_lb{position:fixed;inset:0;background:rgba(20,40,83,.94);z-index:9000;display:none;align-items:center;
 justify-content:center;padding:1.5rem}
.cvx_lb[data-open]{display:flex}
.cvx_lb figure{margin:0;max-width:37.5rem;width:100%;text-align:center}
.cvx_lb img{margin:0 auto;max-height:70vh;width:auto;border-radius:3px}
.cvx_lb figcaption{color:#D8E0F2;font-family:var(--font-mono,monospace);font-size:.8125rem;margin-top:.75rem}
.cvx_lb button{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
 font:500 1.125rem/1 var(--font-body,sans-serif);width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer}
.cvx_lbx{top:1.125rem;right:1.125rem}
.cvx_lbp{left:.875rem;top:50%;margin-top:-1.25rem}
.cvx_lbn{right:.875rem;top:50%;margin-top:-1.25rem}