/* Hallmark · custom, locked by DESIGN.md (Kodros glory: white cloud, marble, gold hairlines) · shape: scroll story, morning to night · signature: marble plates that lift into view and come alive as films · posture: restrained gold */
/* critique: one headline, one action per screen; captions sit under the plates instead of labels above the heads; no eyebrows, no card grids. */
/* waive 28b: each film's poster is the <picture> under it (lazy, with alt text); a poster attribute would fetch a second copy. */
/* waive 6a: the hero keeps min-height in svh with a 680px floor; no element is sized in plain vh. */
/* Kodros home, story edition (owner order 2026-11-03). The page reads as one morning to night arc:
   first light over the clouds (hero), the prologue, the machine on the shelf, the ask, the team and its connectors,
   ownership (the laurel), the night watch, then what Kodros does today with Talk to us and Download.
   Media slots: each plate is a [data-slot] figure. A <video data-film> placed inside .st-plate__frame or .kd-hero__media
   loads lazily through home.js and fades in over the still; reduced motion and Save-Data keep the still.
   Every animation sits inside prefers-reduced-motion: no-preference and moves opacity, transform or clip-path only. */

:root{
  --st-hero-bg:#F8F1E4;
  --st-ink:#17130D;
  --st-ink-2:#4A4439;
  --st-muted:var(--mk-muted);
  --st-rule:var(--mk-line);
  --st-gold:var(--mk-gold);
  --st-gold-ink:var(--mk-gold-ink);
  --st-gold-soft:var(--mk-gold-soft);
  --st-gold-hi:#DDBB6E;
  --st-gold-lo:#C79F50;
  --st-on-gold:#21180A;
  --st-paper:var(--mk-paper);
  --st-cloud:var(--mk-paper-2);
  --st-card:#FFFEFB;
  --st-mask:#000;
  --st-mask-half:rgba(0,0,0,.4);
  --st-night:#15110B;
  --st-on-night:#F4EEDF;
  --st-on-night-2:#CFC5AF;
  --st-veil:rgba(253,252,249,.78);
  --st-dusk:rgba(10,12,28,.62);
  --st-dove-shade:rgba(100,78,36,.4);
  --st-dove-shade-2:rgba(120,95,50,.16);
  --st-gold-cast:rgba(140,100,30,.6);
  --st-gold-cast-2:rgba(140,100,30,.65);
  --st-gold-gloss:rgba(255,255,255,.45);
  --st-paper-0:rgba(253,252,249,0);
  --st-ease:var(--mk-ease);
  --st-pad:clamp(104px,12vw,200px);
  --st-gap:clamp(24px,3.2vw,56px);
}

.home-body main{display:block}
.kd-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Hero: first light over a sea of cloud, the marble guard at the edge, a few doves ---------- */
.mk-hero{position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;min-height:max(680px,100svh);padding:calc(var(--nav-h) + clamp(72px,11svh,128px)) 0 clamp(120px,18svh,200px);overflow:hidden;background:var(--st-hero-bg);text-align:center}
.home-body .mk-hero{margin-top:calc(-1 * var(--nav-h))}
.kd-hero__media{position:absolute;inset:0;z-index:-1}
.kd-hero__sky,.kd-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.kd-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* The foot of the hero melts into the page paper, so the prologue starts on white. */
.mk-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(24svh,200px);z-index:-1;background:linear-gradient(180deg,var(--st-paper-0),var(--st-paper) 92%)}
.kd-hero__general{position:absolute;left:max(2.5vw,calc(50% - 700px));bottom:clamp(26px,5vh,64px);width:clamp(140px,12vw,206px);aspect-ratio:1066/2438;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,var(--st-mask) 70%,var(--st-mask-half) 82%,transparent 93%);mask-image:linear-gradient(180deg,var(--st-mask) 70%,var(--st-mask-half) 82%,transparent 93%);filter:saturate(.92) brightness(1.02)}
.kd-hero__general img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.kd-hero__doves{position:absolute;inset:0;pointer-events:none}
.kd-dove{position:absolute;display:block;aspect-ratio:80/78;background:url(/assets/kodros/img/dove-160.webp) center/contain no-repeat;filter:drop-shadow(0 1px 1px var(--st-dove-shade)) drop-shadow(0 3px 5px var(--st-dove-shade-2))}
.kd-dove--1{top:13%;left:21%;width:40px}
.kd-dove--2{--o:.9;top:8.5%;left:27.5%;width:27px;opacity:.9}
.kd-dove--3{top:17%;right:22%;width:34px;transform:scaleX(-1)}
.kd-dove--4{--o:.85;top:10.5%;right:17.5%;width:20px;opacity:.85;transform:scaleX(-1)}

.mk-hero__in{display:flex;flex-direction:column;align-items:center;width:100%}
.mk-hero__title{max-width:12.5em;min-width:0;margin:0;font:500 clamp(2.9rem,1.6rem + 4.6vw,5.6rem)/.98 var(--mk-serif);letter-spacing:-.022em;color:var(--st-ink);text-wrap:balance;overflow-wrap:break-word}
.mk-hero__lede{max-width:30rem;margin:clamp(20px,3svh,32px) 0 0;font:400 clamp(1.0625rem,1rem + .3vw,1.1875rem)/1.6 var(--font-ui);color:var(--st-ink-2);text-wrap:balance}
.mk-hero__cta{margin:clamp(32px,4.4svh,44px) 0 0}
.mk-hero__terms{margin:16px 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--st-ink-2)}

/* One primary control style for the page: the gold pill. The secondary is white on a hairline. */
.home-body main .btn--cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border-radius:999px;font-weight:600;letter-spacing:.005em;transition:transform 500ms var(--st-ease),box-shadow 500ms var(--st-ease),filter 500ms var(--st-ease),border-color 300ms var(--st-ease)}
.home-body main .btn--cta:not(.btn--white){border:0;background:linear-gradient(180deg,var(--st-gold-hi) 0%,var(--st-gold-lo) 100%);color:var(--st-on-gold);box-shadow:inset 0 1px 0 var(--st-gold-gloss),0 10px 24px -12px var(--st-gold-cast)}
.home-body main .btn--cta:not(.btn--white):hover{transform:translateY(-1px);filter:brightness(1.04);color:var(--st-on-gold);box-shadow:inset 0 1px 0 var(--st-gold-gloss),0 14px 30px -12px var(--st-gold-cast-2)}
.home-body main .btn--cta.btn--white{border:1px solid var(--mk-line-strong);background:var(--st-card);color:var(--st-ink)}
.home-body main .btn--cta.btn--white:hover{border-color:var(--st-gold);color:var(--st-ink)}
.home-body main .btn--cta:active{transform:translateY(0) scale(.98)}
.home-body main .btn--cta:focus-visible{outline:2px solid var(--st-ink);outline-offset:3px}

.kd-link{color:var(--st-ink);text-decoration:none;background:linear-gradient(var(--st-gold),var(--st-gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px;font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);transition:color 300ms var(--st-ease)}
.kd-link::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.5em;border-top:1.2px solid currentColor;border-right:1.2px solid currentColor;rotate:45deg;translate:0 -.08em;transition:transform 500ms var(--st-ease)}
.kd-link:hover{color:var(--st-gold-ink)}
.kd-link:hover::after{transform:translate(2px,-2px)}
.kd-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}

/* The diadem: a gold hairline with small leaves meeting at a rosette. */
.kd-laurel{display:block;width:240px;max-width:100%;height:24px;margin:0 0 var(--s-8);overflow:visible}
.kd-laurel__band,.kd-laurel__leaf,.kd-laurel__rose{fill:none;stroke:var(--st-gold);stroke-width:1;vector-effect:non-scaling-stroke}
.kd-laurel__leaf{fill:var(--st-gold-soft)}
.kd-laurel__dot{fill:var(--st-gold)}

/* ---------- Prologue: one long sentence, then its turn, set off to the right ---------- */
.st-prologue{position:relative;isolation:isolate;padding:clamp(72px,9vw,140px) 0 var(--st-pad);overflow:hidden}
.st-prologue__sky{position:absolute;inset:auto 0 0;height:70%;z-index:-1;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,var(--st-mask) 60%,transparent);mask-image:linear-gradient(180deg,transparent,var(--st-mask) 60%,transparent)}
.st-prologue__sky picture,.st-prologue__sky img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.st-prologue__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap)}
.st-prologue__in > *{grid-column:1 / span 10}
.st-prologue__line{max-width:22ch;min-width:0;margin:0;font:400 clamp(2.1rem,1.2rem + 3.2vw,4rem)/1.08 var(--mk-serif);letter-spacing:-.02em;color:var(--st-ink);text-wrap:balance;overflow-wrap:break-word}
.st-prologue__in .st-prologue__turn{grid-column:5 / span 8;max-width:24ch;margin:clamp(28px,4vw,56px) 0 0;font:italic 400 clamp(1.5rem,1.1rem + 1.4vw,2.375rem)/1.2 var(--mk-serif);letter-spacing:-.01em;color:var(--st-gold-ink);text-wrap:balance}

/* ---------- Chapters: a marble plate beside a short text column, alternating sides ---------- */
.st-ch{position:relative;padding:var(--st-pad) 0}
.st-ch + .st-ch{padding-top:calc(var(--st-pad) * .6)}
.st-ch__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);align-items:center}
.st-plate{grid-column:1 / span 7;margin:0 0 0 calc(-1 * var(--gutter));min-width:0}
.st-ch__text{grid-column:9 / span 4;min-width:0}
.st-ch--rev .st-plate{grid-column:7 / span 6;grid-row:1;margin:0 calc(-1 * var(--gutter)) 0 0}
.st-ch--rev .st-ch__text{grid-column:1 / span 5;grid-row:1}
.st-plate__frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--st-cloud)}
.st-plate--tall .st-plate__frame{aspect-ratio:4/5}
.st-plate__frame picture{display:block;width:100%;height:100%}
.st-plate__frame img{display:block;width:100%;height:100%;object-fit:cover}
.st-plate__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-plate figcaption{margin:16px 0 0;padding-left:var(--gutter);font:400 var(--t-sm)/1.5 var(--font-ui);color:var(--st-muted)}
.st-ch--rev .st-plate figcaption{padding:0 var(--gutter) 0 0;text-align:right}
.st-ch__text h2,.st-team__text h2{max-width:11ch;min-width:0;margin:0 0 28px;font:500 clamp(2.5rem,1.5rem + 3vw,4.5rem)/1 var(--mk-serif);letter-spacing:-.022em;color:var(--st-ink);text-wrap:balance;overflow-wrap:break-word}
.st-ch__text p,.st-team__text p{max-width:30em;margin:0 0 20px;font:400 1.0625rem/1.7 var(--font-ui);color:var(--st-ink-2);text-wrap:pretty}
.st-ch__text p:last-child{margin-bottom:0}
.st-ch__aside{margin-top:28px!important;padding-top:20px;border-top:1px solid var(--st-gold-soft);font-size:var(--t-sm)!important;line-height:1.6!important;color:var(--st-muted)!important}
.st-ch__lead{font:italic 400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--mk-serif)!important;letter-spacing:-.01em;color:var(--st-ink)!important}

/* The ask: three sample requests, set as spoken lines. */
.st-asks{margin:0 0 28px;padding:0;list-style:none;quotes:"\201C" "\201D"}
.st-asks li{padding:16px 0;border-top:1px solid var(--st-rule);font:italic 400 clamp(1.375rem,1.15rem + .8vw,1.75rem)/1.3 var(--mk-serif);color:var(--st-ink);text-wrap:balance}
.st-asks li:last-child{border-bottom:1px solid var(--st-rule)}
.st-asks li::before{content:open-quote;color:var(--st-gold)}
.st-asks li::after{content:close-quote;color:var(--st-gold)}

/* ---------- The team: the connector map under its clouds ---------- */
.st-ch--team{isolation:isolate;overflow:hidden;background:var(--st-cloud)}
.st-team__sky{position:absolute;inset:0 0 auto;height:min(620px,75%);z-index:-1;opacity:.6;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,var(--st-mask) 30%,transparent);mask-image:linear-gradient(180deg,var(--st-mask) 30%,transparent)}
.st-team__sky picture,.st-team__sky img{display:block;width:100%;height:100%;object-fit:cover}
.st-team{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap)}
.st-team__text{grid-column:1 / span 6}
.st-team__text h2{max-width:13ch}
.st-team .kd-map-wrap{grid-column:1 / -1;max-width:1040px;width:100%;margin:clamp(24px,3vw,48px) auto 0}
.st-team__rule{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin:clamp(32px,4vw,56px) 0 0;padding-top:20px;border-top:1px solid var(--st-gold-soft);font:400 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.3 var(--mk-serif);color:var(--st-ink)}

.kd-map{display:block;width:100%;height:auto;overflow:visible}
.kd-map--tall{display:none;max-width:420px;margin:0 auto}
@media (max-width:719px){.kd-map--wide{display:none}.kd-map--tall{display:block}}
.kd-frame{stroke-dasharray:2 5;opacity:.8}
.kd-wire{fill:none;stroke:var(--st-gold);stroke-opacity:.42;stroke-width:1.25}
.kd-flow{visibility:hidden;fill:none;stroke:var(--st-gold);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:0;opacity:.95}
.kd-node rect{fill:var(--st-card);stroke:var(--mk-line-strong);stroke-width:1}
.kd-node text{font:500 14px var(--font-ui);fill:var(--st-ink)}
.kd-node__dot{fill:none;stroke:var(--st-gold);stroke-width:1.2}
.kd-node--person .kd-node__dot{fill:var(--st-gold)}
.kd-core__glow{fill:url(#kd-glow)}
.kd-core__disc{fill:var(--st-card);stroke:var(--st-gold);stroke-width:1.2}
.kd-core__ring{fill:none;stroke:var(--st-gold-soft);stroke-width:1}
.kd-core__orbit{fill:none;stroke:var(--st-gold);stroke-width:.8;stroke-dasharray:1 7;opacity:.7;transform-box:fill-box;transform-origin:center}
.kd-core__name{font:600 32px var(--mk-serif);fill:var(--st-ink);text-anchor:middle;letter-spacing:-.01em}
.kd-core__sub{font:500 11px var(--font-ui);fill:var(--st-gold-ink);text-anchor:middle}
.kd-map--tall .kd-node text{font-size:13px}
.kd-map--tall .kd-core__name{font-size:24px}

/* ---------- Vista: the whole frame, edge to edge at its own 21:9, words in the open sky to the left of the building ---------- */
.st-vista{position:relative;isolation:isolate;display:flex;align-items:flex-start;aspect-ratio:2400/1033;min-height:520px;padding:clamp(48px,6vw,104px) 0;overflow:hidden;background:var(--st-hero-bg)}
.st-vista__media,.st-night__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.st-vista__media > *,.st-night__media > *{position:absolute;inset:0;display:block;width:100%;height:100%}
.st-vista__media img,.st-vista__media video{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.st-vista::before{content:"";position:absolute;inset:0 auto 0 0;width:52%;z-index:-1;background:linear-gradient(90deg,var(--st-veil),var(--st-paper-0))}
.st-vista__text{position:relative}
.st-vista__text h2{max-width:9ch;min-width:0;margin:0;font:500 clamp(2.5rem,1.2rem + 3vw,4.5rem)/.98 var(--mk-serif);letter-spacing:-.024em;color:var(--st-ink);text-wrap:balance;overflow-wrap:break-word}
.st-vista__text p{max-width:18em;margin:24px 0 0;font:400 1.0625rem/1.7 var(--font-ui);color:var(--st-ink-2)}

/* ---------- Night: the one dark chapter. Stars over moonlit cloud, the machine glowing on its plinth. ---------- */
.st-night{position:relative;isolation:isolate;display:flex;align-items:flex-start;aspect-ratio:16/9;min-height:600px;max-height:1080px;padding:clamp(56px,6vw,104px) 0;overflow:hidden;background:var(--st-night);color:var(--st-on-night)}
.st-night__media img,.st-night__media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.st-night::before{content:"";position:absolute;inset:0 0 auto;height:72%;z-index:-1;background:linear-gradient(180deg,var(--st-dusk) 40%,transparent)}
.st-night__text{position:relative}
.st-night__text h2{max-width:12ch;min-width:0;margin:0 0 28px;font:500 clamp(2.5rem,1.5rem + 3vw,4.5rem)/1 var(--mk-serif);letter-spacing:-.022em;color:var(--st-on-night);text-wrap:balance;overflow-wrap:break-word}
.st-night__text p{max-width:28em;margin:0;font:400 1.0625rem/1.7 var(--font-ui);color:var(--st-on-night-2);text-wrap:pretty}

/* ---------- Close: what Kodros does today, then the two ways forward ---------- */
.mk-close{position:relative;padding:var(--st-pad) 0;background:var(--st-paper);color:var(--st-ink)}
.mk-close__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.st-crown{width:min(100%,560px);margin:0 0 clamp(40px,5vw,64px)}
.st-crown__frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--st-cloud)}
.st-crown__frame picture,.st-crown__frame img{display:block;width:100%;height:100%;object-fit:cover}
.st-crown__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-close h2{max-width:14em;min-width:0;margin:0;font:500 clamp(2.5rem,1.4rem + 3.6vw,4.4rem)/1 var(--mk-serif);letter-spacing:-.02em;color:var(--st-ink);text-wrap:balance;overflow-wrap:break-word}
.st-today{width:100%;max-width:40rem;margin:clamp(36px,4vw,56px) 0 0;padding:0;list-style:none;text-align:left;border-bottom:1px solid var(--st-rule)}
.st-today li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--st-rule);font:400 var(--t-md)/1.6 var(--font-ui);color:var(--st-ink-2)}
.st-today li::before{content:"";width:18px;height:1px;margin-top:.8em;background:var(--st-gold)}
.st-close__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(36px,4vw,52px) 0 0}
.kd-close__alt{margin:24px 0 0}
.home-body .mv-foot{margin-top:0;border-top:1px solid var(--st-rule)}

/* ---------- Tablet and phone: one column, plates edge to edge, text under its picture ---------- */
@media (max-width:1100px){.kd-hero__general{width:clamp(120px,13vw,150px);left:1.5vw}}
@media (max-width:899px){
  .st-ch__grid,.st-team,.st-prologue__in{grid-template-columns:minmax(0,1fr)}
  .st-prologue__in > *,.st-prologue__in .st-prologue__turn{grid-column:1}
  .st-plate,.st-ch--rev .st-plate{grid-column:1;grid-row:auto;margin:0 calc(-1 * var(--gutter))}
  .st-ch__text,.st-ch--rev .st-ch__text{grid-column:1;grid-row:auto;margin-top:clamp(32px,7vw,48px)}
  .st-plate figcaption,.st-ch--rev .st-plate figcaption{padding:0 var(--gutter);text-align:left}
  .st-plate--tall .st-plate__frame{aspect-ratio:4/5}
  .st-team__text,.st-team .kd-map-wrap,.st-team__rule{grid-column:1}
  .st-vista{display:block;aspect-ratio:auto;min-height:0;padding:0 0 clamp(56px,12vw,88px);background:var(--st-paper)}
  .st-vista::before{display:none}
  .st-vista__media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
  .st-vista__media img,.st-vista__media video{object-position:50% 70%}
  .st-vista__text{margin-top:clamp(32px,8vw,48px)}
  .st-night{aspect-ratio:auto;min-height:min(780px,96svh);max-height:none}
  .st-night__media img,.st-night__media video{object-position:50% 80%}
}
@media (max-width:799px){
  .mk-hero{min-height:100svh;padding:calc(var(--nav-h) + 56px) 0 clamp(152px,26svh,220px)}
  .mk-hero__title{font-size:clamp(2.6rem,10.4vw,3.4rem);line-height:1}
  .mk-hero__lede{max-width:22rem}
  .kd-hero__general{left:auto;right:5vw;bottom:10px;width:clamp(96px,28vw,128px)}
  .kd-dove--1{top:9.5%;left:5%;width:26px}
  .kd-dove--2{top:9%;left:20%;width:20px}
  .kd-dove--3{top:8.5%;right:9%;width:22px}
  .kd-dove--4{display:none}
  .st-team__rule{font-size:1.25rem}
}

/* ---------- Motion: hero settle, doves, one reveal per chapter, plates lifting, a slow parallax, the map's current ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes mk-rise{from{opacity:0;transform:translateY(var(--mk-rise))}to{opacity:1;transform:none}}
  @keyframes kd-settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
  @keyframes kd-stand{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes kd-glide{0%{opacity:0;translate:0 0}12%{opacity:var(--o,1)}50%{translate:calc(var(--dx,90px) * .5) -9px}88%{opacity:var(--o,1)}100%{opacity:0;translate:var(--dx,90px) 0}}
  @keyframes kd-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  @keyframes kd-orbit{to{transform:rotate(360deg)}}
  .kd-hero__sky{animation:kd-settle 2400ms var(--st-ease) both}
  .kd-hero__general{animation:kd-stand 1800ms var(--st-ease) .5s both}
  .kd-dove{animation:kd-glide 38s linear 1s infinite both}
  .kd-dove--2{animation-duration:47s;animation-delay:-14s}
  .kd-dove--3{--dx:-84px;animation-duration:42s;animation-delay:-6s}
  .kd-dove--4{--dx:-70px;animation-duration:53s;animation-delay:-27s}
  .mk-hero__in > *{animation:mk-rise 1100ms var(--st-ease) .2s both}
  .mk-hero__in > :nth-child(2){animation-delay:.3s}
  .mk-hero__in > :nth-child(3){animation-delay:.42s}
  .mk-hero__in > :nth-child(4){animation-delay:.52s}

  /* Reveal once (site.js adds .is-in). Hidden only under html.js, so the page is whole without script. */
  .js [data-reveal]:not(.is-in) :is(.st-prologue__in > *,.st-ch__text > *,.st-team__text > *,.st-team__rule,.st-vista__text > *,.st-night__text > *,.mk-close__in > *,figcaption){opacity:0;transform:translateY(22px)}
  .js [data-reveal] :is(.st-prologue__in > *,.st-ch__text > *,.st-team__text > *,.st-team__rule,.st-vista__text > *,.st-night__text > *,.mk-close__in > *,figcaption){transition:opacity 1100ms var(--st-ease),transform 1100ms var(--st-ease)}
  .js [data-reveal] :is(.st-prologue__in,.st-ch__text,.st-team__text,.st-vista__text,.st-night__text,.mk-close__in) > :nth-child(2){transition-delay:.12s}
  .js [data-reveal] :is(.st-prologue__in,.st-ch__text,.st-team__text,.st-vista__text,.st-night__text,.mk-close__in) > :nth-child(3){transition-delay:.22s}
  .js [data-reveal] :is(.st-ch__text,.mk-close__in) > :nth-child(n+4){transition-delay:.3s}
  .js [data-reveal] figcaption{transition-delay:.5s}
  /* The plates lift into view like a curtain rising, from an already-visible sliver. */
  .js [data-reveal]:not(.is-in) :is(.st-plate__frame,.st-crown__frame){clip-path:inset(14% 0 0 0)}
  .js [data-reveal] :is(.st-plate__frame,.st-crown__frame){transition:clip-path 1600ms var(--st-ease)}
  .js [data-reveal]:not(.is-in) .kd-map-wrap{opacity:0;transform:translateY(28px)}
  .js [data-reveal] .kd-map-wrap{transition:opacity 1200ms var(--st-ease) .15s,transform 1200ms var(--st-ease) .15s}
  .js [data-reveal]:not(.is-in) .kd-laurel__band{stroke-dasharray:212;stroke-dashoffset:212}
  .js [data-reveal] .kd-laurel__band{transition:stroke-dashoffset 1600ms var(--st-ease) .2s}

  /* Parallax: home.js writes --st-y on [data-parallax] while it is on screen; the picture drifts inside its frame. */
  .st-par [data-parallax] > :is(picture,video){transform:translate3d(0,var(--st-y,0px),0) scale(1.1);transform-origin:50% 50%}

  /* Films fade in over their still once they are actually playing. */
  [data-film]{opacity:0;transition:opacity 1400ms var(--st-ease)}
  [data-film].is-live{opacity:1}

  .st-ch--team.is-in .kd-flow{visibility:visible;animation:kd-flow 4.8s linear infinite}
  .st-ch--team.is-in .kd-flow:nth-child(2n){animation-duration:5.6s;animation-delay:-1.4s}
  .st-ch--team.is-in .kd-flow:nth-child(3n){animation-duration:6.4s;animation-delay:-2.6s}
  .kd-core__orbit{animation:kd-orbit 90s linear infinite}
  .kd-node rect{transition:stroke 400ms var(--st-ease)}
  .kd-node:hover rect{stroke:var(--st-gold)}
}
/* Reduced motion: films never load (home.js), so the still is the picture. */
@media (prefers-reduced-motion:reduce){[data-film]{display:none}}