/* Motion+ page — black horse, driven by the viewer's hand. Frames are normalised to a white ground and multiplied onto the paper. */
.mx{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1000px;border-bottom:1px solid var(--line)}
.mx-stage{position:relative;height:100%;overflow:hidden;background:var(--paper);--p:0}
.mx-word{position:absolute;left:0;right:0;top:calc(var(--navh) + 5vh);text-align:left;pointer-events:none;font:800 clamp(46px,6.6vw,124px)/.8 var(--f-ui);letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink);-webkit-text-stroke:0;transform:none}
.mx-word span{display:inline-block;transform:translateY(112%);animation:mxrise 1.3s var(--out) .2s forwards}
.mx-word span:nth-child(2){animation-delay:.28s}.mx-word span:nth-child(3){animation-delay:.36s}.mx-word span:nth-child(4){animation-delay:.44s}.mx-word span:nth-child(5){animation-delay:.52s}.mx-word span:nth-child(6){animation-delay:.6s}.mx-word span:nth-child(7){animation-delay:.68s}
.mx-wordwrap{overflow:hidden;position:absolute;z-index:4;left:var(--gut);right:0;top:calc(var(--navh) + clamp(14px,3vh,34px));height:.95em;font-size:clamp(46px,6.6vw,124px);pointer-events:none}
.mx-wordwrap .mx-word{top:0;font-size:inherit}
@keyframes mxrise{to{transform:none}}
.mx-cv{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;display:block}
.mx-lab{position:absolute;left:var(--gut);top:calc(var(--navh) + 2vh);display:flex;gap:1.4em;z-index:3}
.mx-beat{position:absolute;left:var(--gut);bottom:clamp(40px,9vh,110px);max-width:min(38em,calc(100vw - 2*var(--gut)));z-index:3;opacity:0;transform:translateY(14px);transition:opacity .7s var(--out),transform .7s var(--out);pointer-events:none}
.mx-beat.on{opacity:1;transform:none;pointer-events:auto}
.mx-beat .ja{white-space:nowrap;font:500 clamp(20px,2.4vw,38px)/1.7 var(--f-ja);letter-spacing:.08em;margin:0}
.mx-beat .sub{margin:1em 0 0;color:var(--mute);font-size:clamp(13px,1vw,15px);line-height:1.95}
.mx-beat a.lnk{display:inline-block;margin-top:1.2em}
.mx-meter{position:absolute;right:var(--gut);bottom:clamp(40px,9vh,110px);z-index:3;display:flex;align-items:flex-end;gap:14px;font:500 11px/1.6 var(--f-ui);letter-spacing:.22em;text-align:right}
.mx-meter b{display:block;font:300 clamp(32px,3.6vw,56px)/1 var(--f-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mx-meter i{display:block;width:1px;height:clamp(90px,16vh,160px);background:rgba(18,16,14,.2);position:relative}
.mx-meter i:after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--ink);transform:scaleY(var(--p));transform-origin:top}
.mx-cue{display:none;position:absolute;left:50%;bottom:clamp(18px,3vh,34px);z-index:3;transform:translateX(-50%);font:500 10.5px/1 var(--f-ui);letter-spacing:.28em;display:flex;align-items:center;gap:12px;transition:opacity .5s}
.mx-cue i{width:1px;height:26px;background:currentColor;transform-origin:top;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.mx-note{position:absolute;right:var(--gut);top:calc(var(--navh) + 2vh);z-index:3;font:500 10.5px/1.6 var(--f-ui);letter-spacing:.16em;color:var(--mute);text-align:right}
.mx-still{display:none}
@media(max-width:820px){.mx-meter{display:none}.mx-beat{bottom:clamp(60px,12vh,110px)}.mx-note{display:none}}
/* touch */
.mx-touch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--gut);align-items:center}
.mx-modes{display:grid;gap:0;border-top:1px solid var(--line);margin-top:clamp(24px,4vh,44px)}
.mx-modes button{display:grid;grid-template-columns:2.2em 1fr;gap:6px 14px;text-align:left;padding:20px 4px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;color:inherit;font:inherit;transition:padding .5s var(--out),opacity .4s;opacity:.82}
.mx-modes button .n{font:500 11px/2.4 var(--f-ui);letter-spacing:.2em}
.mx-modes button b{font:500 clamp(18px,1.7vw,26px)/1.6 var(--f-ja);letter-spacing:.1em}
.mx-modes button small{grid-column:2;color:var(--mute);font-size:13px;line-height:1.8;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--out),opacity .4s}
.mx-modes button[aria-selected=true]{opacity:1;padding-left:14px}
.mx-modes button[aria-selected=true] small{max-height:5em;opacity:1}
.mx-modes button:focus-visible{outline-offset:-3px}
.mx-box{position:relative;aspect-ratio:16/10;background:var(--paper2);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:6px}
.mx-box[data-mode=cursor]{cursor:crosshair}.mx-box[data-mode=hold]{cursor:pointer}.mx-box.drag{cursor:grabbing}
.mx-box .mx-cv{inset:0}
.mx-hint{position:absolute;left:18px;bottom:16px;z-index:2;font:500 10.5px/1.7 var(--f-ui);letter-spacing:.2em;display:flex;gap:12px;align-items:center;pointer-events:none;transition:opacity .5s}
.mx-hint i{display:block;width:28px;height:1px;background:currentColor}
.mx-box.used .mx-hint{opacity:.35}
.mx-bar{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:rgba(18,16,14,.14);z-index:2}.mx-bar i{display:block;height:100%;background:var(--ink);transform:scaleX(var(--t,0));transform-origin:left}
@media(max-width:820px){.mx-touch{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mx{height:auto}.mx-stage{position:relative;height:auto;min-height:100svh}.mx-word span{animation:none;transform:none}.mx-cue i{animation:none}.mx-beat{opacity:1;transform:none;position:relative;left:auto;bottom:auto;padding:0 var(--gut) 40px}.mx-beat:not(:first-of-type){display:none}.mx-meter,.mx-cue{display:none;display:none}}
@media(max-width:820px){.mx-beat .ja{white-space:normal}}

/* touch box: three dedicated scenes */
.mx-box{background:#030303;transition:background .5s ease}
.mx-box[data-mode=drag]{background:#e9e6dd}
.tc-s{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.mx-box[data-mode=drag] .tc-drag,.mx-box[data-mode=cursor] .tc-cur,.mx-box[data-mode=hold] .tc-hold{opacity:1}
.tc-s canvas,.tc-s img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.tc-cur img:first-child{filter:brightness(.55) contrast(1.05)}
.tc-lit{filter:brightness(2.5) contrast(1.12);-webkit-mask-image:radial-gradient(circle 30% at var(--lx,50%) var(--ly,46%),#000 0,rgba(0,0,0,.7) 40%,rgba(0,0,0,.15) 78%,transparent 100%);mask-image:radial-gradient(circle 30% at var(--lx,50%) var(--ly,46%),#000 0,rgba(0,0,0,.7) 40%,rgba(0,0,0,.15) 78%,transparent 100%)}
.mx-box .mx-hint{color:#ece8df;mix-blend-mode:normal;z-index:3}
.mx-box[data-mode=drag] .mx-hint{color:var(--ink)}
.mx-box .mx-bar{z-index:3;background:rgba(236,232,223,.2)}.mx-box .mx-bar i{background:#ece8df}
.mx-box[data-mode=drag] .mx-bar{background:rgba(18,16,14,.14)}.mx-box[data-mode=drag] .mx-bar i{background:var(--ink)}
.mx-box[data-mode=cursor] .mx-bar,.mx-box[data-mode=drag] .mx-bar{opacity:0}

/* touch (museum): one black room, hairline UI only */
.mx-box{background:#020202!important;aspect-ratio:16/9}
.tc-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.mx-box .mx-hint{color:#ece8df!important;opacity:.85;left:22px;bottom:22px}
.mx-box .mx-hint i{background:#ece8df}
.mx-box .mx-bar{background:rgba(236,232,223,.18)!important;opacity:1!important;left:0;right:0;bottom:0}.mx-box .mx-bar i{background:#ece8df!important}
.tc-ring{position:absolute;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(236,232,223,.5);background:conic-gradient(rgba(236,232,223,.9) var(--a,0deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 19px,#000 20px);mask:radial-gradient(circle,transparent 19px,#000 20px);pointer-events:none}
.mx-box[data-mode=cursor] .tc-ring{opacity:.4}
.mx-box.used .mx-hint{opacity:.4}

/* touch: no dark room — the horse stands on the page's own paper */
.mx-box{background:var(--paper)!important;aspect-ratio:900/740;cursor:grab}
.mx-box[data-mode=cursor]{cursor:none}.mx-box[data-mode=hold]{cursor:pointer}
.mx-box .mx-hint{color:var(--ink)!important;left:0;bottom:6px}.mx-box .mx-hint i{background:var(--ink)}
.mx-box .mx-bar{background:rgba(18,16,14,.14)!important}.mx-box .mx-bar i{background:var(--ink)!important}
.mx-box[data-mode=hold] .mx-bar{opacity:1!important}
.tc-ring{border-color:rgba(18,16,14,.4);background:conic-gradient(var(--ink) var(--a,0deg),transparent 0);right:0;bottom:0}
.tc-cur{position:absolute;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid var(--ink);pointer-events:none;opacity:0;transition:opacity .3s}
.tc-cur:after{content:"";position:absolute;inset:19px;border-radius:50%;background:var(--ink)}
.mx-box[data-mode=cursor] .tc-cur{opacity:1}

/* ── Examples: film-strip carousel (idea A) ── */
.ex { position: relative; padding: clamp(70px, 12vh, 150px) 0 clamp(46px, 8vh, 100px); overflow: hidden; border-top: 1px solid var(--line); }
.ex-hd { position: relative; padding: 0 var(--gut); }
.ex-word { margin: 0; font: 800 clamp(56px, 13vw, 210px)/.86 var(--f-ui); letter-spacing: -.055em; text-transform: uppercase; }
.ex-sub { margin: .55em 0 0; font: 500 clamp(15px, 1.6vw, 26px)/1.8 var(--f-ja); letter-spacing: .14em; }
.ex-side { position: absolute; right: var(--gut); top: 8px; margin: 0; max-width: 20em; font: 500 13px/2 var(--f-ja); letter-spacing: .1em; color: var(--mute); text-align: right; }
.ex-stage { position: relative; height: clamp(280px, 40vw, 560px); margin-top: clamp(10px, 3vh, 36px); perspective: 1800px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ex-stage.drag { cursor: grabbing; }
.ex-stage:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.ex-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.ex-card { position: absolute; left: 50%; top: 50%; width: min(62vw, 940px); aspect-ratio: 16 / 10; display: block; overflow: hidden; background: #d9d4cc; box-shadow: 0 34px 60px -30px rgba(18, 16, 14, .6), 0 2px 0 rgba(18, 16, 14, .06); will-change: transform; -webkit-user-drag: none; backface-visibility: hidden; }
.ex-card img, .ex-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.ex-card video { opacity: 0; transition: opacity .6s; }
.ex-card.on video { opacity: 1; }
.ex-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ex-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 0 var(--gut); margin-top: clamp(14px, 3vh, 34px); }
.ex-l, .ex-r { margin: 0; display: flex; align-items: center; gap: 14px; font: 500 13px/1.8 var(--f-ja); letter-spacing: .08em; color: var(--mute); white-space: nowrap; }
.ex-l { justify-content: flex-end; flex-direction: row; } .ex-r { justify-content: flex-start; }
.ex-l::after, .ex-r::before { content: ""; flex: 1; height: 1px; background: rgba(18, 16, 14, .25); }
.ex-l:empty::after, .ex-r:empty::before { display: none; }
.ex-no { text-align: center; }
.ex-no b { display: inline-block; font: 400 clamp(64px, 10vw, 150px)/.85 var(--f-ui); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: tabular-nums; }
.ex-no span { margin-left: .3em; font: italic 400 clamp(20px, 2.6vw, 40px)/1 "Cormorant Garamond", "Times New Roman", serif; color: var(--mute); }
.ex-c { margin: 8px 0 0; font: 600 13px/1.7 var(--f-ja); letter-spacing: .14em; }
.ex-bar { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 0 var(--gut); margin-top: clamp(16px, 3vh, 30px); }
.ex-ticks { position: relative; flex: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: flex-start; height: 40px; }
.ex-ticks::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(18, 16, 14, .25); }
.ex-fill { position: absolute; left: 0; top: 7px; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.ex-ticks li { position: relative; }
.ex-tick { position: relative; border: 0; background: none; padding: 22px 6px 0; cursor: pointer; color: var(--mute); font: 600 11px/1 var(--f-ui); letter-spacing: .12em; }
.ex-tick::before { content: ""; position: absolute; left: 50%; top: 4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(18, 16, 14, .45); }
.ex-tick[aria-current="true"] { color: var(--ink); } .ex-tick[aria-current="true"]::before { background: var(--ink); border-color: var(--ink); }
.ex-tick:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ex-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.ex-prev, .ex-next { width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; font: 500 16px/1 var(--f-ui); transition: background .3s, color .3s; }
.ex-prev:hover, .ex-next:hover, .ex-prev:focus-visible, .ex-next:focus-visible { background: var(--ink); color: var(--paper); }
.ex-drag { margin-left: 8px; letter-spacing: .24em; }
.ex-note { padding: 0 var(--gut); margin-top: 1.6em; font-size: 13px; }
@media (max-width: 760px) {
  .ex-side { position: static; text-align: left; margin-top: 12px; max-width: none; }
  .ex-card { width: 78vw; }
  .ex-stage { height: clamp(220px, 58vw, 420px); }
  .ex-l, .ex-r { display: none; }
  .ex-cap { grid-template-columns: 1fr; justify-items: center; }
  .ex-drag { display: none; }
  .ex-tick span { display: none; } .ex-tick { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ex-card video { display: none; } }

/* Included vs Motion+: one-line heading, copy below */
.cm .sh { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 34px); }
.cm .sh h2 { white-space: nowrap; font-size: clamp(26px, 7.3vw, 112px); }
.cm .sh h2 em { white-space: normal; margin-top: .9em; font-size: clamp(14px, 2.1vw, 30px); line-height: 1.7; }
.cm .sh .lead { max-width: 44em; }

/* Included vs Motion+: type hierarchy (heading, sub, lead, the two columns each get their own voice) */
.cm .sh h2 b { font-weight: 800; }
.cm .sh h2 .cm-a { color: var(--ink); }
.cm .sh h2 .cm-v { font: italic 400 .42em/1 "Cormorant Garamond", "Times New Roman", serif; letter-spacing: .02em; text-transform: lowercase; color: rgba(18, 16, 14, .5); margin: 0 .22em; vertical-align: .22em; }
.cm .sh h2 .cm-b { color: transparent; -webkit-text-stroke: clamp(1.2px, .16vw, 2.4px) var(--ink); }
.cm .sh h2 em { color: rgba(18, 16, 14, .6); font-weight: 500; letter-spacing: .16em; }
.cm .sh .lead { font-size: clamp(15px, 1.35vw, 21px); line-height: 2.1; letter-spacing: .07em; color: rgba(18, 16, 14, .82); }
.cm .cmp { gap: clamp(14px, 2vw, 28px); align-items: stretch; }
.cm .cmp > div { border-top: 0; padding: clamp(22px, 2.6vw, 40px); }
.cm .cmp-a { background: transparent; border: 1px solid rgba(18, 16, 14, .22); color: rgba(18, 16, 14, .78); }
.cm .cmp-b { background: var(--ink); color: var(--paper); }
.cm .cmp-k { margin: 0 0 1.2em; opacity: .6; font-size: 11px; }
.cm .cmp h3 { font: 800 clamp(20px, 2.1vw, 32px)/1.3 var(--f-ja); letter-spacing: .02em; margin-bottom: .8em; }
.cm .cmp-b h3 { font: 800 clamp(28px, 3.6vw, 56px)/1 var(--f-ui); letter-spacing: -.035em; }
.cm .cmp .ticks li { font-size: clamp(13px, 1.05vw, 16px); line-height: 1.9; border-top-color: rgba(18, 16, 14, .14); }
.cm .cmp-b .ticks li { border-top-color: rgba(239, 237, 232, .22); }
.cm .cmp-b .ticks li:first-child { font-weight: 700; }