.feat-cri-vaneyck { background: var(--bg); container-type: size; touch-action: pan-y;
  /* type = the copy the page prints under the other boxes (.feature-title / .feature-sub in site/css/features.css). The dev
     build multiplies the site CSS by Owen's text-size step --ts but copies feature CSS untouched, so the same multiplier is
     written here by hand (prod never sets --ts: falls back to 1). */
  --t-head: calc((clamp(26px, 2.6vw, 38px)) * var(--ts, 1)); --t-sub: calc((clamp(15px, 1.05vw, 18px)) * var(--ts, 1)); }
.feat-cri-vaneyck .lay { position: absolute; inset: 0; display: grid; grid-template-columns: 47% 1fr; align-items: center; }
.feat-cri-vaneyck:not(.is-visible) * { animation-play-state: paused; }
/* the words */
.feat-cri-vaneyck .words { padding: 0 clamp(12px, 4cqw, 56px) 0 clamp(16px, 5.5cqw, 80px); display: grid; gap: var(--s3); align-content: center; min-width: 0; }
.feat-cri-vaneyck .head { margin: 0; font-family: var(--font-display); font-weight: 360; font-size: var(--t-head); line-height: 1.12; letter-spacing: -.008em; color: var(--fg); text-wrap: balance; }
.feat-cri-vaneyck .lead { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--t-sub); line-height: 1.5; letter-spacing: .01em; color: var(--fg-dim); max-width: 36ch; text-wrap: pretty; }
.feat-cri-vaneyck .choose { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: var(--s1); font-family: var(--font-ui); font-weight: 400; font-size: var(--t-sub); line-height: 1.5; letter-spacing: .01em; color: var(--fg-dim); }
.feat-cri-vaneyck .sep { opacity: .4; }
.feat-cri-vaneyck .pic { margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--fg-dim); cursor: pointer;
  white-space: nowrap; transition: color 400ms var(--ease); -webkit-tap-highlight-color: transparent; }
.feat-cri-vaneyck .pic:hover { color: var(--fg); }
.feat-cri-vaneyck .pic.is-on { color: var(--fg); }
.feat-cri-vaneyck .pic::after { content: ''; display: block; height: 1px; margin-top: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.feat-cri-vaneyck .pic.is-on::after { transform: scaleX(1); }
/* the painting column: the art box is sized by script to the painting's own proportions (contain), credit under it */
.feat-cri-vaneyck .col { align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 5cqh 4cqw; min-height: 0; }
.feat-cri-vaneyck .art { position: relative; width: 100px; height: 138px; cursor: ew-resize; }
.feat-cri-vaneyck .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feat-cri-vaneyck .stage { position: absolute; inset: 0; z-index: 1; }
.feat-cri-vaneyck .side { position: absolute; top: 10px; padding: 5px 8px; background: rgba(8,6,4,.6); color: var(--fg); font: 500 clamp(15px, 1.9cqw, 26px)/1 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; padding: 7px 11px; }
.feat-cri-vaneyck .side-l { left: 10px; } .feat-cri-vaneyck .side-r { right: 10px; }
.feat-cri-vaneyck .side b { font-weight: 500; color: var(--accent); }
@container (max-width: 520px) { .feat-cri-vaneyck .side .num { display: none; } }
.feat-cri-vaneyck .handle { position: absolute; top: 0; bottom: 0; width: 0; left: 50%; }
.feat-cri-vaneyck .handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: rgba(243,235,223,.85); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.feat-cri-vaneyck .knob { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(243,235,223,.9);
  background: rgba(10,9,7,.6); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.feat-cri-vaneyck .knob::before, .feat-cri-vaneyck .knob::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; border-top: 1px solid rgba(243,235,223,.9); border-left: 1px solid rgba(243,235,223,.9); }
.feat-cri-vaneyck .knob::before { left: 8px; transform: translateY(-50%) rotate(-45deg); } .feat-cri-vaneyck .knob::after { right: 8px; transform: translateY(-50%) rotate(135deg); }
.feat-cri-vaneyck .credit { margin: 0; font: 400 clamp(9px, .8cqw, 11px)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); opacity: .6; text-align: center; }
/* phones: words above, painting below */
@container (max-aspect-ratio: 1/1) {
  .feat-cri-vaneyck .lay { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .feat-cri-vaneyck .words { padding: var(--s5) var(--gutter) 0; gap: var(--s2); }
  .feat-cri-vaneyck .lead { max-width: none; }
  .feat-cri-vaneyck .choose { margin-top: var(--s1); }
  .feat-cri-vaneyck .col { padding: var(--s4) var(--gutter) var(--s5); gap: 8px; }
  .feat-cri-vaneyck .side { font-size: clamp(14px, 4.4cqw, 19px); top: 8px; } .feat-cri-vaneyck .side-l { left: 8px; } .feat-cri-vaneyck .side-r { right: 8px; }
  .feat-cri-vaneyck .knob { width: 26px; height: 26px; }
  .feat-cri-vaneyck .credit { font-size: clamp(8px, 2.3cqw, 10px); }
}