/* /ubi/dna — narrated presentation. Abstract gold/white motion only; no images of people. */
:root{--forest:#13261f;--forest2:#1d342c;--gold:#d6aa64;--gold2:#f0d9a8;--ivory:#fffdf8;--mute:#c9d1c5;--line:rgba(255,253,248,.14);--serif:"Iowan Old Style",Palatino,Georgia,serif;--sans:"Avenir Next","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body.dna{background:var(--forest);color:var(--ivory);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip-link{position:absolute;left:12px;top:-200px;z-index:50;background:var(--ivory);color:var(--forest);padding:10px 16px;border-radius:8px}
.skip-link:focus{top:12px}
.d-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
.d-brand{font:500 20px var(--serif);color:var(--ivory);text-decoration:none;letter-spacing:-.02em}
.d-back{font-size:14px;color:var(--mute);text-decoration:none}
.d-back:hover{color:var(--gold2)}
.d-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.d-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}
.d-bg i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,rgba(214,170,100,.55),transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.d-bg i:nth-child(2){width:50vmax;height:50vmax;right:-18vmax;bottom:-20vmax;background:radial-gradient(circle,rgba(255,253,248,.28),transparent 65%);animation:drift2 32s ease-in-out infinite alternate}
.d-bg i:nth-child(3){width:120vmax;height:1px;left:-10vmax;top:62%;filter:none;border-radius:0;opacity:.5;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sweep 14s linear infinite}
@keyframes drift1{to{transform:translate(12vmax,10vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-10vmax,-8vmax) scale(1.15)}}
@keyframes sweep{from{transform:translateX(-30%) rotate(-4deg)}to{transform:translateX(30%) rotate(-4deg)}}
.deck{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.slide{padding:clamp(36px,7vw,80px) 0;border-bottom:1px solid var(--line)}
.d-inner{max-width:820px}
.d-kicker{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;display:flex;gap:12px;align-items:center}
.d-kicker span{display:inline-block;border:1px solid var(--gold);padding:5px 8px;border-radius:999px;letter-spacing:.08em}
.d-title{font:500 clamp(32px,6vw,68px)/1.06 var(--serif);letter-spacing:-.03em;margin:0 0 22px;color:var(--ivory);overflow-wrap:break-word}
.d-quote{margin:0 0 18px;padding:0 0 0 clamp(14px,2vw,24px);border-left:3px solid var(--gold)}
.d-quote p{font:400 clamp(19px,2.4vw,26px)/1.45 var(--serif);color:var(--gold2);margin:0 0 8px}
.d-quote footer{font-size:14px;color:var(--mute)}
.d-inner>p{font-size:clamp(17px,2vw,20px);color:var(--ivory);margin:0 0 12px}
.d-note{font-size:14px!important;color:var(--mute)!important;font-style:italic}
.d-src{font-size:13px!important;color:var(--mute)!important;margin-top:18px!important}
.d-links{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 4px}
.d-btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--gold);color:var(--ivory);text-decoration:none;font-weight:600}
.d-btn.gold{background:var(--gold);color:var(--forest)}
.d-cap-static{display:none}
.d-controls{position:sticky;bottom:0;z-index:4;background:rgba(19,38,31,.94);border-top:1px solid var(--line);padding:10px clamp(16px,4vw,40px) calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.d-caption{max-width:1100px;margin:0 auto 8px;min-height:2.9em;font-size:15px;line-height:1.45;color:var(--ivory)}
.d-bar{max-width:1100px;margin:0 auto 8px;height:3px;background:var(--line)}
.d-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.d-row{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.d-ctl{font:600 15px var(--sans);color:var(--ivory);background:transparent;border:1px solid var(--line);border-radius:999px;min-width:44px;min-height:44px;padding:0 14px;cursor:pointer}
.d-ctl:hover{border-color:var(--gold)}
.d-play{background:var(--gold);color:var(--forest);border-color:var(--gold);min-width:110px}
.d-count{font-size:14px;color:var(--mute);margin-left:auto}
.d-foot{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 40px;font-size:13px;color:var(--mute)}
.d-foot p{margin:0 0 8px}
/* JS mode: one slide at a time, cinematic */
html.js .deck{min-height:calc(100vh - 230px);display:grid;align-items:center}
html.js .slide{display:none;border:0;grid-area:1/1}
html.js .slide.on{display:block;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
html.js .slide.on .d-title{animation:rise .8s .08s cubic-bezier(.2,.7,.2,1) both}
html.js .slide.on .d-quote,html.js .slide.on .d-inner>p,html.js .slide.on .d-links{animation:fade .9s .25s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:600px){.d-row{gap:8px;flex-wrap:nowrap}.d-ctl{padding:0 12px}.d-play{min-width:96px}.d-count{margin-left:auto}.d-caption{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .d-bg i{animation:none!important}
  html.js .slide.on,html.js .slide.on *{animation:none!important}
  .d-bar i{transition:none}
}