/* ---------- article pages in motion (single-articulo.php + archive-articulo.php, behaviour in article.js) ---------- */
.ar{display:flex;flex-direction:column;gap:72px;padding-bottom:56px;overflow-x:clip}
.ar section{padding-block:0}
.ar .wrap{width:100%} /* auto margins in a flex column would otherwise shrink-wrap the content */
.ar h2{font-size:clamp(24px,2.8vw,34px);font-weight:900;line-height:1.35}

/* reading progress */
.ar-progress{position:fixed;inset:0 0 auto;height:3px;z-index:20;pointer-events:none}
.ar-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--fire));transform-origin:right;transform:scaleX(var(--p,0))}

/* hero: the title builds itself over drifting Spanish phrases */
.ar-hero{position:relative;min-height:min(78vh,720px);display:grid;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 70% 60% at 30% 40%,color-mix(in srgb,var(--fire) 14%,transparent),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 80%,color-mix(in srgb,var(--teal) 16%,transparent),transparent 70%)}
.ar-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding-block:48px}
.ar-kicker{color:var(--fire-text)}
.ar-title{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;font-size:clamp(46px,8.4vw,120px);line-height:.95;letter-spacing:-.01em;direction:ltr;text-align:right;overflow-wrap:anywhere}
.ar-title em{font-style:normal;color:var(--fire-text);position:relative;display:inline-block}
.ar-title em::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:.08em;background:var(--fire);transform-origin:left;animation:ar-line .9s 1.1s both cubic-bezier(.2,.8,.2,1)}
.ar-title .w{display:inline-block;white-space:nowrap}
.ar-title .ch{display:inline-block;animation:ar-rise .7s both cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--c) * 28ms)}
.ar-fa{font-size:clamp(20px,2.2vw,28px);font-weight:800}
.ar-sub{color:var(--muted);max-width:56ch;font-size:16.5px}
.ar-scroll{display:inline-flex;align-items:center;gap:10px;margin-top:10px}
.ar-scroll i{width:1px;height:34px;background:linear-gradient(var(--fire),transparent);animation:ar-drip 1.8s ease-in-out infinite}
@keyframes ar-rise{from{opacity:0;transform:translateY(.6em) rotate(6deg)}}
@keyframes ar-line{from{transform:scaleX(0)}}
@keyframes ar-drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ar-float{position:absolute;inset:0;pointer-events:none}
.ar-float span{position:absolute;font-family:var(--f-es);font-weight:800;white-space:nowrap;color:var(--ink);opacity:.09;font-size:calc(18px + var(--i) * 3px);
  top:calc(8% + var(--i) * 11%);left:var(--x);
  transform:translate3d(var(--mx,0),calc(var(--sy,0) * (1 + var(--i) * .25)),0);animation:ar-bob 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes ar-bob{50%{translate:0 -10px}}

/* the facts as a scroll story: a sticky stage shows the Spanish of the fact in view */
.ar-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.ar-stage{position:sticky;top:96px;aspect-ratio:1;max-height:min(70vh,520px);width:100%;display:grid;place-items:center;border-radius:28px;background:var(--poster);color:var(--poster-fg);overflow:hidden;box-shadow:var(--shadow)}
.ar-stage::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from var(--rot,0deg),transparent,color-mix(in srgb,var(--fire) 35%,transparent),transparent 40%);animation:ar-spin 14s linear infinite;opacity:.6}
@keyframes ar-spin{to{transform:rotate(1turn)}}
.ar-ring{position:absolute;inset:8%;width:84%;height:84%;transform:rotate(-90deg)}
.ar-ring circle{fill:none;stroke:color-mix(in srgb,var(--poster-fg) 14%,transparent);stroke-width:2}
.ar-ring circle.on{stroke:var(--fire);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--sp,0) * 100);transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.ar-count{position:absolute;top:22px;inset-inline-start:24px;color:var(--poster-fg)}
.ar-count b{color:var(--fire);font-size:16px}
.ar-words{position:relative;width:76%;height:40%;display:grid}
.ar-words span{grid-area:1/1;place-self:center;text-align:center;font-family:var(--f-es);font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.1;opacity:0;transform:translateY(30px) scale(.92);filter:blur(6px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s}
.ar-words span.on{opacity:1;transform:none;filter:none}
.ar-words span.was{transform:translateY(-30px) scale(.92)}
.ar-facts{list-style:none;margin:0;padding:12vh 0;display:flex;flex-direction:column;gap:22vh}
.ar-facts li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;opacity:.28;transform:translateX(-14px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.ar-facts li.on{opacity:1;transform:none}
.ar-facts .n{font-size:22px;color:var(--fire-text);letter-spacing:0}
.ar-facts p{font-size:clamp(18px,1.7vw,22px);line-height:1.9}
.ar-facts p [lang="es"]{font-weight:800;color:var(--teal);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--fire) 28%,transparent) 0) no-repeat;background-size:0 100%;transition:background-size .8s .2s}
.ar-facts li.on p [lang="es"]{background-size:100% 100%}

.ar-glance{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}

/* the lesson video (Aparat's player is 16:9 and letterboxes vertical videos itself) */
.ar-video{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center}
.ar-video-frame{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;background:var(--poster);box-shadow:var(--shadow);border:6px solid var(--card)}
.ar-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ar-video-text{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ar-video-text p{color:var(--muted);max-width:44ch}

/* full explanation: sections reveal as you read, the sticky contents list follows along */
.ar-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.ar-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.ar-toc ol{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line);display:flex;flex-direction:column}
.ar-toc a{display:block;padding:8px 14px;margin-inline-start:-2px;border-inline-start:2px solid transparent;text-decoration:none;color:var(--muted);font-size:14px;line-height:1.6;transition:color .3s,border-color .3s,background .3s}
.ar-toc a:hover{color:var(--ink)}
.ar-toc a.on{color:var(--ink);font-weight:700;border-color:var(--fire);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fire) 10%,transparent))}
.ar-toc [lang="es"]{font-weight:700}
.ar-secs{display:flex;flex-direction:column;gap:44px;max-width:72ch}
.ar-body-head{display:flex;flex-direction:column;gap:6px}
.ar-sec{display:flex;flex-direction:column;gap:14px;scroll-margin-top:90px}
.ar-sec .n{font-size:13px;color:var(--fire-text)}
.ar-sec h3{font-size:clamp(21px,2.2vw,27px);font-weight:900;line-height:1.45}
.ar-sec p{font-size:17px;line-height:2.05}
.ar-sec p a{color:var(--fire-text);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ar-sec p a:hover{text-decoration-thickness:2px}
.ar-sec p [lang="es"],.ar-sec h3 [lang="es"]{font-weight:800;color:var(--teal)}
/* Spanish inside Persian lines keeps its own left-to-right order: «-ar», «¿Qué tal?» */
.ar p [lang="es"],.ar h3 [lang="es"],.ar-toc [lang="es"],.ar-sec-ex b{unicode-bidi:plaintext}
.ar-sec-ex{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ar-sec-ex li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:var(--paper-2);border-inline-start:3px solid var(--fire);transition:transform .3s}
.ar-sec-ex li:hover{transform:translateX(-6px)}
.ar-sec-ex b{font-family:var(--f-es);font-size:19px}
.ar-sec-ex span{color:var(--muted);font-size:14.5px}

/* the article's own interactive block */
.ar-mx{display:flex;flex-direction:column;gap:26px}
.ar-mx-head{display:flex;flex-direction:column;gap:8px}
.ar-mx-head .hint{color:var(--muted)}

/* flip cards */
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;perspective:1100px}
.fl{all:unset;cursor:pointer;display:block;aspect-ratio:4/3;opacity:0;transform:translateY(30px);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 80ms)}
.ar-mx.in .fl{opacity:1;transform:none}
.fl:focus-visible{outline:2px solid var(--fire);outline-offset:4px;border-radius:20px}
.fl-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--tx,0deg)) rotateY(calc(var(--ty,0deg) + var(--flip,0deg)))}
.fl[aria-pressed="true"] .fl-in{--flip:180deg}
.fl-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:20px;backface-visibility:hidden;border:1px solid var(--line)}
.fl-es{background:var(--card);box-shadow:var(--shadow)}
.fl-es b{font-family:var(--f-es);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.1;align-self:flex-end}
.fl-fa{background:var(--fire);color:var(--on-fire);transform:rotateY(180deg);border-color:transparent}
.fl-fa b{font-size:22px;font-weight:900}
.fl-fa .mono{color:inherit;opacity:.8}

/* morph: one sentence that changes as you scroll */
.mo-track{height:calc(var(--n) * 70vh)}
.mo-sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.mo-stage{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:40px 24px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.mo-es{font-family:var(--f-es);font-weight:800;font-size:clamp(34px,5.6vw,76px);line-height:1.1;min-height:1.2em}
.mo-es .wd{display:inline-block;transition:color .4s}
.mo-es .wd.new{color:var(--fire-text);animation:mo-pop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes mo-pop{from{opacity:0;transform:translateY(.5em) scale(.8);filter:blur(4px)}}
.mo-fa{font-size:clamp(18px,2vw,24px);font-weight:700}
.mo-note{font-size:13.5px;border-radius:999px;padding:5px 14px;background:var(--paper-2);color:var(--muted);direction:rtl}
.mo-dots{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:8px}
.mo-dots li{width:28px;height:4px;border-radius:9px;background:var(--line);transition:background .3s,width .3s}
.mo-dots li.on{background:var(--fire);width:44px}
.mo-steps{display:none}

/* contrast: España ↔ Latinoamérica */
.cx{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.cx-switch{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.cx-switch button{position:relative;z-index:1;border:0;background:none;padding:10px 22px;font-family:var(--f-es);font-weight:800;font-size:16px;color:var(--muted);transition:color .3s}
.cx-switch button{border-radius:999px;transition:color .3s,background .35s}
.cx-switch button[aria-pressed="true"]{color:var(--on-fire);background:var(--fire)}
.cx-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;width:100%;perspective:900px}
.cx-rows li{display:grid;border-radius:18px;background:var(--card);border:1px solid var(--line);padding:18px 22px;overflow:hidden}
.cx-side{grid-area:1/1;display:flex;flex-direction:column;gap:4px;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s;transition-delay:calc(var(--i) * 70ms);backface-visibility:hidden}
.cx-side b{font-family:var(--f-es);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.15}
.cx-side small{color:var(--muted);font-size:14px}
.cx-side b .df{color:var(--fire-text)}
.cx-r{opacity:0;transform:rotateX(-90deg)}
.cx[data-side="1"] .cx-l{opacity:0;transform:rotateX(90deg)}
.cx[data-side="1"] .cx-r{opacity:1;transform:none}

/* timeline: the day slides sideways as you scroll down */
.tl-track{height:calc(var(--n) * 55vh + 40vh)}
.tl-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:hidden}
.tl-rail{position:relative;padding-block:30px;min-width:0;overflow:visible}
.tl-line{position:absolute;inset-inline:0;top:50%;height:2px;background:var(--line)}
.tl-line i{display:block;height:100%;background:var(--fire);transform-origin:right;transform:scaleX(var(--tp,0))}
.tl-items{list-style:none;margin:0;padding:0 max(16px,calc(50vw - 160px));display:flex;gap:48px;width:max-content;transform:translateX(var(--tx,0px));will-change:transform}
.tl-items li{position:relative;width:min(300px,72vw);display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);opacity:.35;transform:scale(.92);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.tl-items li:nth-child(odd){margin-bottom:150px}
.tl-items li:nth-child(even){margin-top:150px}
.tl-items li.on{opacity:1;transform:none}
.tl-time{font-family:var(--f-cond);font-size:54px;line-height:1;color:var(--fire-text);direction:ltr;text-align:right}
.tl-es{font-family:var(--f-es);font-weight:800;font-size:22px}
.tl-items small{color:var(--muted);font-size:14px}

/* examples */
.ar-ex{display:flex;flex-direction:column;gap:10px}
.ar-ex-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.ar-exc{cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.ar-exc q{font-family:var(--f-es);font-weight:700;font-size:clamp(20px,2.2vw,28px);quotes:none}
.ar-exc .ar-tr{grid-column:2;color:var(--muted);filter:blur(5px);opacity:.6;transition:filter .4s,opacity .4s;cursor:pointer}
.ar-exc:hover .ar-tr,.ar-exc.open .ar-tr,.ar-exc:focus-within .ar-tr{filter:none;opacity:1}
.ar-play{grid-row:1/3;position:relative;width:56px;height:56px;border-radius:50%;border:0;background:var(--fire);color:var(--on-fire);display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 0 0 0 color-mix(in srgb,var(--fire) 40%,transparent)}
.ar-play svg{width:22px;height:22px}
.ar-play i{display:none;width:3px;border-radius:3px;background:currentColor;height:30%}
.ar-play.playing svg{display:none}
.ar-play.playing i{display:block;animation:ar-eq .8s ease-in-out infinite alternate}
.ar-play.playing i:nth-child(2){animation-delay:-.2s}
.ar-play.playing i:nth-child(3){animation-delay:-.45s}
.ar-play.playing i:nth-child(4){animation-delay:-.65s}
.ar-play.playing{animation:ar-ping 1.2s ease-out infinite}
@keyframes ar-eq{to{height:70%}}
@keyframes ar-ping{to{box-shadow:0 0 0 16px transparent}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* poster that tilts under the pointer */
.ar-poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:340px;padding:28px;border-radius:28px;background:var(--poster);color:var(--poster-fg);text-decoration:none;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow)}
.ar-poster .mono{color:var(--fire)}
.ar-poster .big{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;font-size:clamp(48px,8vw,110px);line-height:.95;direction:ltr;text-align:left}
.ar-poster .big em{font-style:normal;color:var(--fire)}
.ar-poster .bot{display:flex;justify-content:space-between;align-items:center;gap:14px}
.ar-poster .play{width:58px;height:58px;border-radius:50%;background:var(--fire);color:var(--on-fire);display:grid;place-items:center;flex:none;transition:transform .3s}
.ar-poster:hover .play{transform:scale(1.12)}
.ar-poster .play svg{width:22px;height:22px}
.ar-poster .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .3s}
.ar-poster:hover .shine{opacity:1}

/* previous article */
.ar-next{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding-block:28px;border-block:1px solid var(--line)}
.ar-next b{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5vw,64px);line-height:1;direction:ltr;text-align:right;transition:letter-spacing .5s,color .3s}
.ar-next b em{font-style:normal;color:var(--fire-text)}
.ar-next:hover b{letter-spacing:.02em}
.ar-next > span:last-child{color:var(--muted)}

/* articles archive: cards rise in and lean toward the pointer */
.art-list.motion a{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.art-list.motion a:hover{transform:translateX(-8px);border-color:var(--fire);box-shadow:var(--shadow)}
.art-list.motion b{transition:letter-spacing .5s}
.art-list.motion a:hover b{letter-spacing:.02em}

/* clock: an hour dial, the sentence, a minute dial; numbers and hands scale with the dial (container units) */
.ck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:8px 48px}
.ck-dial{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
/* the page reads right to left: minutes first in order put the hour dial on the left */
.ck-dial-m{order:1}.ck-read{order:2}.ck-dial-h{order:3}
.ck-cap{color:var(--fire-text)}
.ck-dial-m .ck-cap{color:var(--teal)}
.ck-face{position:relative;container-type:inline-size;width:min(100%,270px);aspect-ratio:1;border-radius:50%;background:var(--card);border:10px solid var(--fire);box-shadow:var(--shadow),inset 0 0 0 2px var(--line)}
.ck-dial-m .ck-face{border-color:var(--teal)}
.ck-n{position:absolute;left:50%;top:50%;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:700 6cqw/1 var(--f-mono,monospace);cursor:pointer;transform:rotate(var(--a)) translateY(-37cqw) rotate(calc(-1 * var(--a)));transition:background .2s,color .2s,transform .25s}
.ck-n:hover,.ck-n:focus-visible{transform:rotate(var(--a)) translateY(-37cqw) rotate(calc(-1 * var(--a))) scale(1.15)}
.ck-dial-h .ck-n.on{background:var(--fire);border-color:var(--fire);color:var(--on-fire)}
.ck-dial-m .ck-n.on{background:var(--teal);border-color:var(--teal);color:#fff}
.ck-hand{position:absolute;left:50%;bottom:50%;width:3cqw;margin-left:-1.5cqw;height:24cqw;border-radius:3cqw;background:var(--fire);transform-origin:50% 100%;transform:rotate(var(--deg,0deg));transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.ck-dial-m .ck-hand{height:30cqw;width:2cqw;margin-left:-1cqw;background:var(--teal)}
.ck-pin{position:absolute;left:50%;top:50%;width:7cqw;height:7cqw;margin:-3.5cqw 0 0 -3.5cqw;border-radius:50%;background:var(--ink)}
.ck-piece{font-family:var(--f-es);font-weight:800;font-size:20px;min-height:1.5em;direction:ltr;text-align:center}
.ck-read{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--poster);color:var(--poster-fg);border-radius:24px;padding:26px 18px;box-shadow:var(--shadow)}
.ck-digital{font-size:clamp(40px,5vw,60px);letter-spacing:.04em;direction:ltr;line-height:1}
.ck-es{font-family:var(--f-es);font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.3;direction:ltr}
.ck-fa{font-size:17px;color:color-mix(in srgb,var(--poster-fg) 80%,transparent)}
.ck-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.ck-btns button{font:inherit;font-weight:700;border-radius:999px;padding:9px 18px;cursor:pointer;border:2px solid var(--poster-fg);background:transparent;color:var(--poster-fg)}
.ck-btns .ck-play{background:var(--fire);border-color:var(--fire);color:var(--on-fire)}
@media (max-width:860px){
  .ck{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .ck-read{grid-column:1/-1;order:-1}
  .ck-face{border-width:7px}
  .ck-piece{font-size:16px}
}
@media (max-width:480px){
  .ck-n{width:19cqw;height:19cqw;margin:-9.5cqw 0 0 -9.5cqw;font-size:7cqw;transform:rotate(var(--a)) translateY(-35cqw) rotate(calc(-1 * var(--a)))}
  .ck-n:hover,.ck-n:focus-visible{transform:rotate(var(--a)) translateY(-35cqw) rotate(calc(-1 * var(--a))) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){.ck-hand,.ck-n{transition:none}}

@media (max-width:860px){
  .ar{gap:56px}
  .ar-story{grid-template-columns:minmax(0,1fr);gap:0}
  .ar-glance{margin-bottom:16px}
  .ar-video{grid-template-columns:minmax(0,1fr);gap:20px}
  .ar-body{grid-template-columns:minmax(0,1fr);gap:0}
  .ar-toc{display:none}
  .ar-sec p{font-size:16px}
  .ar-stage{top:64px;z-index:2;aspect-ratio:auto;height:120px;max-height:none;border-radius:20px}
  .ar-ring{display:none}
  .ar-words{width:90%;height:100%}
  .ar-words span{font-size:28px}
  .ar-facts{padding:8vh 0 4vh;gap:14vh}
  .ar-facts li{grid-template-columns:40px minmax(0,1fr)}
  .tl-items li:nth-child(odd){margin-bottom:90px}
  .tl-items li:nth-child(even){margin-top:90px}
  .tl-time{font-size:42px}
  .ar-poster{min-height:260px}
}

/* no motion wanted: everything readable in place */
@media (prefers-reduced-motion:reduce){
  .ar-facts li,.rv,.fl{opacity:1;transform:none}
  .ar-facts{gap:28px;padding:0}
  .ar-stage{display:none}
  .ar-story{grid-template-columns:minmax(0,1fr)}
  .mo-track{display:none}
  .mo-steps{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
  .mo-steps li{display:flex;flex-direction:column;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
  .mo-steps b{font-family:var(--f-es);font-size:26px}
  .tl-track{height:auto}
  .tl-sticky{position:static;height:auto}
  .tl-items{flex-wrap:wrap;width:auto;padding:0 16px;transform:none}
  .tl-items li{opacity:1;transform:none;margin:0!important}
  .tl-line{display:none}
  .ar-exc .ar-tr{filter:none;opacity:1}
}