/* El precio del aguacate. Palette lifted from the key art: lime, hillside dark, crate kraft, sign red.
   This resting CSS is the whole design: it holds without JS and with reduced motion.
   html.wk-js adds the turntable; html.wk-motion adds the flight, the spin and the drive. */
/* Ver film lands with the deck flush at the top: this file only loads on this page. */
html{scroll-padding-top:0}
body[data-project=wiz-khalifa]{--lime:#e4f56a;--ink:#141a0b;--night:#0f150a;--kraft:#d8b98b;--kraft-ink:#231808;--red:#d92a1c;--cream:#f6f2dd;--g:clamp(1rem,3.6vw,3.25rem);--top:76px;background:var(--night)}
@media(max-width:850px){body[data-project=wiz-khalifa]{--top:70px}}
body[data-project=wiz-khalifa] .site-header{background:var(--lime);color:var(--ink);position:relative;z-index:6}
body[data-project=wiz-khalifa] .language-switch a{color:#141a0b99}
body[data-project=wiz-khalifa] .language-switch a[aria-current=page]{color:var(--ink);border-color:var(--ink)}
body[data-project=wiz-khalifa] .wordmark span{color:var(--ink)}
.wk{--case-paper:var(--night);--case-ink:var(--cream);--case-accent:var(--lime);--case-line:#ffffff2b;--case-muted:#cfcfb9;--case-gutter:var(--g);position:relative;padding:0!important;max-width:none!important;margin:0!important;overflow:clip;background:var(--night);color:var(--cream)}
.wk a:focus-visible,.wk button:focus-visible,.wk [role=slider]:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.wk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- opening: a lime poster, an avocado cut like a record ---------- */
/* The title is sized by the window's width, and also by its height when the window is short, so the poster always fits.
   --lb is where title line 2 ends. The record hangs from it, so its dark label can never run under the dark letters. */
.wk .wk-open{--H:calc(100svh - var(--top));--rest:24.5rem;--pt:clamp(1rem,3.4vh,2rem);--t:max(3rem,min((100vw - 2*var(--g))/var(--em),(var(--H) - var(--rest))/2.1));--rec:min(78vw,var(--H)*1.36);--lb:calc(2rem + var(--pt) + var(--t)*1.97);position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--top));padding:0 var(--g)!important;margin:0!important;max-width:none!important;background:var(--lime);color:var(--ink)}
.wk .wk-open .case-topline{position:relative;z-index:3;display:flex;gap:1.5rem;justify-content:space-between;margin:0;padding:.6rem 0 0;border:0;color:var(--ink);font-size:.9rem}
.wk .wk-open .case-topline a,.wk .wk-open .case-topline span{color:var(--ink)}
.wk .wk-open .case-heading{position:relative;z-index:3;display:flex;flex-direction:column;align-items:stretch;flex:1;justify-content:space-between;gap:clamp(1.5rem,4vh,3rem);margin:0;padding:var(--pt) 0 clamp(1rem,3vh,2rem)}
.wk .wk-title{display:block;margin:0;max-width:none;font-size:var(--t);line-height:1;color:var(--ink)}
.wk-lines{display:block;width:min(100%,var(--em)*1em)}
.wk-line{display:flex;align-items:flex-end;gap:.13em;flex-wrap:nowrap}
.wk-line-2{margin-top:-.03em}
.wk-word{display:block;height:1em;width:auto;aspect-ratio:var(--r);overflow:visible;fill:var(--ink);transform:rotate(-2.2deg);transform-origin:0 100%}
.wk-swash{display:block;width:62%;height:.15em;margin:-.015em 0 0 .3em;fill:var(--red);overflow:visible;transform:rotate(-1.6deg)}
.wk .wk-open .case-introduction{display:grid;grid-template-columns:auto;gap:.65rem;align-self:flex-start;max-width:max(18rem,min(27rem,74vw - var(--rec)*.38 - var(--g) - 1rem));margin:0;padding:0}
.wk .wk-open .case-category{color:var(--ink);font-weight:700;font-size:.9rem}
.wk .wk-open .case-introduction p{margin:0;color:var(--ink);font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.34;letter-spacing:-.012em;font-weight:500}
.wk .wk-open .case-watch{justify-self:start;display:inline-flex;align-items:center;gap:.8rem;min-height:48px;margin-top:.45rem;padding:.65rem 1.25rem;border:0;border-radius:99px;background:var(--ink);color:var(--lime);font-weight:700}
.wk .wk-open .case-watch span{color:inherit;margin:0}
.wk .wk-open .case-watch:hover{background:var(--red);color:#fff}
/* a solid strip: the record sets behind it, so the small print never lands on the dark label */
.wk .wk-open .case-caption-line{position:relative;z-index:3;display:flex;justify-content:space-between;margin:0 calc(-1*var(--g));padding:.7rem var(--g) clamp(.7rem,1.6vw,1.2rem);border-top:2px solid var(--ink);background:var(--lime);color:var(--ink);font-size:.9rem}
.wk .wk-open .case-caption-line span{color:var(--ink)}

/* the record: a box twice the size it lands at, so it stays crisp on the way down. Without flight it belongs to the poster. */
html:not(.wk-motion) .wk .wk-open{overflow:clip}
.wk-record{position:absolute;z-index:2;right:calc(26vw - var(--rec)/2);top:calc(max(var(--H)*.74,var(--lb) + var(--rec)*.205 + 1rem) - var(--rec)/2);width:var(--rec);aspect-ratio:1;pointer-events:none;transform-origin:50% 50%}
.wk-record-spin{position:absolute;inset:0;transform-origin:50% 50%}
.wk-record svg{display:block;width:100%;height:100%;overflow:visible}
.wk-skin{fill:#2a3b1c}
.wk-grooves circle{fill:none;stroke:#3f4a0d;stroke-opacity:.2;stroke-width:.55}
.wk-grooves circle.t{stroke-opacity:.42;stroke-width:1.5}
.wk-label{fill:var(--lime);font:700 11.5px 'DM Sans',Arial,sans-serif}

/* ---------- deck ---------- */
.wk .wk-deck{--disc:clamp(17rem,min(33vw,56svh),46rem);--pad:clamp(1rem,2.6vw,2.4rem);min-height:100svh;border-bottom:2px solid #e4f56a40;position:relative;overflow:clip;width:100%!important;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--disc));grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,3vw,3rem);margin:0;padding:var(--pad) var(--g) clamp(1.5rem,2.6vw,2.4rem);background:var(--night);max-width:none}
.wk .wk-deck .original-film{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:3;width:100%;max-width:none;margin:0!important;padding:0;scroll-margin-top:var(--pad)}
.wk .wk-deck .original-film iframe{display:block;width:100%;background:#000}
.wk .wk-deck figcaption{display:flex;gap:.5rem 1.5rem;justify-content:space-between;flex-wrap:wrap;padding:.8rem 0 0;border:0;color:var(--cream)}
.wk .wk-deck figcaption span{color:var(--cream)}
.wk .wk-deck figcaption a{color:var(--lime);border-color:var(--lime)}
.wk-console{display:none}
html.wk-js .wk-console{display:contents}
.wk-turntable{position:relative;grid-column:2;grid-row:1/3;align-self:end;justify-self:end;width:100%;aspect-ratio:1}
.wk-platter{position:absolute;inset:0;z-index:1;border-radius:50%;background:radial-gradient(circle,#10150a 0 72%,#1c2312 72.4% 95.5%,#0a0d06 96%);box-shadow:0 0 0 2px #e4f56a4d;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.wk-platter::before{content:'';position:absolute;inset:1.6%;border-radius:50%;background:repeating-conic-gradient(#e4f56a99 0 1.2deg,transparent 1.2deg 5deg);-webkit-mask:radial-gradient(closest-side,transparent 0 96%,#000 96.5%);mask:radial-gradient(closest-side,transparent 0 96%,#000 96.5%)}
.wk-platter:active{cursor:grabbing}
.wk .wk-platter:focus-visible{outline:3px solid var(--lime);outline-offset:6px}
.wk-arm{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.wk-hint{grid-column:2;grid-row:1/3;align-self:end;justify-self:start;position:relative;z-index:4;margin:0 0 calc(var(--disc) + .9rem);color:var(--lime);font-weight:700;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.01em;display:flex;align-items:center;gap:.45em}
.wk-hint svg{width:1.15em;height:1.15em;flex:none}
.is-scrubbing .wk-time b{color:var(--cream)}
html:not(.wk-js) .wk .wk-deck{grid-template-columns:minmax(0,1fr);min-height:0}
.wk-transport{grid-column:1;grid-row:2;align-self:end;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;position:relative;z-index:3;margin-top:1.2rem}
.wk-play{display:inline-flex;align-items:center;gap:.7rem;min-width:9.4rem;min-height:48px;padding:.65rem 1.25rem .65rem 1rem;border:0;border-radius:99px;background:var(--lime);color:var(--ink);font-weight:700;cursor:pointer}
.wk-play i{width:0;height:0;border-left:12px solid currentColor;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent}
.wk-play[aria-busy=true]{opacity:.62}
.wk-play[aria-pressed=true] i{width:11px;height:14px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor}
.wk-time{margin:0;line-height:.86;color:var(--cream);white-space:nowrap}
.wk-time b{font-size:clamp(3.5rem,min(11vw,21svh),10.5rem);font-weight:700;color:var(--lime)}
/* every character sits in a fixed cell: this font's figures have different widths and ignore tabular-nums */
.wk-time b i{display:inline-flex;justify-content:center;width:.64em;font-style:normal}
.wk-time b i:nth-child(3){width:.27em}
.wk-time>span{font-size:clamp(1rem,1.6vw,1.4rem);letter-spacing:-.01em;margin-left:.3rem}
.wk-time [data-dur]{display:inline-block;min-width:2.9em}
/* the sign really is the one from the key art: it climbs the deck as the film runs */
.no-player .wk-hint,.no-player .wk-transport{display:none}
.no-player .wk-platter{cursor:default;touch-action:auto}
.wk-sign{position:absolute;z-index:0;right:0;top:clamp(1rem,3vw,2.5rem);width:clamp(5.5rem,15vw,14rem);transform:translateY(calc((1 - var(--sign,0))*var(--climb,22vh)));pointer-events:none}
.wk-sign-face{position:relative;width:100%;aspect-ratio:164/258;overflow:hidden;clip-path:polygon(4% 22%,100% 0,100% 80%,6% 100%)}
.wk-sign-face img{position:absolute;max-width:none;width:1097.6%;height:auto;left:-997.6%;top:-37.5%}
.wk-sign i{position:absolute;left:44%;top:88%;width:11%;height:120vh;background:#6a4a2a}

/* ---------- the one image, shot four ways ---------- */
.wk .wk-drive{width:100%!important;margin:0;padding:0;max-width:none;background:var(--night)}
.wk-stage{position:relative}
.wk-cam{position:relative}
.wk-shot{display:block;width:100%;height:auto;max-width:none}
.wk-note{margin:0;padding:clamp(1.5rem,4vw,3.5rem) var(--g) 0;max-width:62rem;color:var(--cream);font-size:clamp(1.4rem,3.1vw,3rem);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.wk-note-2{color:var(--lime);padding-bottom:clamp(1.5rem,4vw,3.5rem)}
.wk-crops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.4rem,1vw,.9rem);padding:0 var(--g) clamp(1.5rem,4vw,3.5rem)}
.wk-crops img{width:100%;height:clamp(11rem,34vw,31rem);object-fit:cover}
.wk-crops img:nth-child(1){object-position:12% 50%}
.wk-crops img:nth-child(2){object-position:100% 50%}

/* ---------- liner notes: stencilled on the crate, with the picture screen-printed beside them ---------- */
.wk .wk-facts{position:relative;isolation:isolate;overflow:clip;width:100%!important;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,3vw,3rem);row-gap:clamp(2rem,6vh,4.5rem);min-height:min(100svh,56rem);margin:0;max-width:none;padding:clamp(1.25rem,2.6vw,2.4rem) var(--g) clamp(1.5rem,3vw,2.6rem);background:var(--kraft) repeating-linear-gradient(90deg,#0000 0 7px,#6d4b1c14 7px 8px);color:var(--kraft-ink);border:0}
.wk .wk-facts>div{grid-column:1;border-top:3px solid var(--kraft-ink);padding-top:.7rem}
.wk .wk-facts>div:nth-of-type(2){align-self:end}
.wk .wk-facts h2{margin:0 0 clamp(.8rem,2.4vh,1.6rem);color:var(--kraft-ink);font-size:.95rem;font-weight:700;letter-spacing:0}
.wk .wk-facts p{margin:0;color:var(--kraft-ink);font-size:clamp(3rem,min(7.6vw,14.5svh),8.4rem);line-height:.9;letter-spacing:-.05em;font-weight:700}
.wk .wk-facts>div:nth-of-type(2) p{color:#a81a0e}
.wk .wk-facts p.original-context{opacity:1;color:var(--kraft-ink);margin-top:clamp(.9rem,2.4vh,1.5rem);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.3;letter-spacing:-.005em;font-weight:500}
.wk-print{grid-column:2;grid-row:1/3;align-self:stretch;width:calc(100% + var(--g));height:calc(100% + clamp(1.25rem,2.6vw,2.4rem) + clamp(1.5rem,3vw,2.6rem));min-height:0;margin:calc(-1*clamp(1.25rem,2.6vw,2.4rem)) 0 0;max-width:none;object-fit:cover;object-position:14% 50%;filter:grayscale(1) contrast(1.32) brightness(1.2);mix-blend-mode:multiply}

/* ---------- next ---------- */
.wk .wk-next{background:var(--night);color:var(--cream);margin:0;border:0;max-width:none;padding:clamp(1.5rem,4vw,3.5rem) var(--g)}
.wk .wk-next span{color:var(--lime)}
.wk .wk-next strong{color:var(--cream);font-size:clamp(2.6rem,7.4vw,7rem);line-height:.95;letter-spacing:-.05em;font-weight:700}
.wk .wk-next .case-next-arrow{color:var(--lime)}

/* ---------- with JS and motion: the flight, the track, the camera ---------- */
html.wk-motion .wk-record{will-change:transform}
/* while the record is in the air, the hint waits and the caption stays on solid ground */
html.wk-motion .wk-hint{transition:opacity .25s}
html.wk-motion .wk:not(.is-landed) .wk-hint{opacity:0}
html.wk-motion .wk .wk-deck figcaption{background:var(--night)}
html.wk-motion .wk-record-spin{will-change:transform}
html.wk-motion .wk-word path{animation:wk-paint .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*38ms + var(--d,0ms))}
html.wk-motion .wk-line-2 .wk-word path{--d:190ms}
html.wk-motion .wk:not(.has-spun) .wk-hint svg{animation:wk-nudge 2.4s ease-in-out infinite}
@keyframes wk-nudge{50%{transform:rotate(70deg)}}
html.wk-motion .wk-swash path{animation:wk-swash .7s .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes wk-paint{from{opacity:0;transform:translateY(.09em) scale(.96)}to{opacity:1;transform:none}}
@keyframes wk-swash{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-20% -2% -20% 0)}}
html.wk-motion .wk-track{height:380svh}
html.wk-motion .wk-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--night)}
html.wk-motion .wk-stage.is-lit{background:var(--lime)}
html.wk-motion .wk-cam{position:absolute;left:0;top:0;width:1800px;height:604px;transform-origin:0 0;will-change:transform}
html.wk-motion .wk-shot{width:1800px;height:604px}
html.wk-motion .wk-crops{display:none}
html.wk-motion .wk-note{position:absolute;z-index:4;padding:0;margin:0;left:var(--g);right:var(--g);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*1.4rem));pointer-events:none}
html.wk-motion .wk-note-1{bottom:clamp(2.5rem,7vh,4.5rem);max-width:46rem;font-size:clamp(1.25rem,2.15vw,2.1rem);line-height:1.14;text-shadow:0 1px 18px #000b}
html.wk-motion .wk-note-2{bottom:auto;top:var(--note-top,auto);max-width:none;padding:0;color:var(--ink);font-size:clamp(1.5rem,min(4vw,7.4svh),4.5rem);line-height:1.04;letter-spacing:-.035em;font-weight:700}
html.wk-motion .wk-stage::after{content:'';position:absolute;z-index:3;inset:auto 0 0;height:46%;background:linear-gradient(transparent,#0a0f06c9);opacity:var(--scrim,0);pointer-events:none}
/* a fine print grain: the single supplied image is enlarged here, and grain sits better than softness */
html.wk-motion .wk-stage::before{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
html.wk-motion .wk-cam{z-index:1}
html.wk-motion .wk-price{position:absolute;z-index:4;left:var(--g);bottom:var(--price-bottom,clamp(1.5rem,6vh,3.5rem));margin:0;color:var(--lime);line-height:.86;white-space:nowrap;opacity:var(--o,0);pointer-events:none}
.wk-price b{display:block;font-size:clamp(3.5rem,min(11vw,21svh),10.5rem);font-weight:700}
.wk-price b i{display:inline-flex;justify-content:center;width:.64em;font-style:normal}
.wk-price b i:nth-child(3){width:.27em}
.wk .wk-price .wk-swash{width:100%;height:clamp(.6rem,1.3vw,1.3rem);margin:.5rem 0 0;fill:var(--red);clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.2,.8,.2,1)}
.wk-price .wk-swash path{animation:none!important}
.wk .wk-price.is-set .wk-swash{clip-path:inset(-20% -2% -20% 0)}
.wk-fx{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.wk-rim{fill:none;stroke:var(--lime);stroke-width:5}
.wk-row{position:absolute;inset:0;z-index:0;visibility:hidden;pointer-events:none;will-change:transform}
.wk-row img{position:absolute;left:0;top:0;width:1800px;height:604px;max-width:none;transform-origin:0 0}
@media(max-aspect-ratio:87/100){
 html.wk-motion .wk-note-2{font-size:clamp(1.5rem,7.6vw,3rem)}
 /* upright screens: the coast is bright here, so the price is a solid tag on the edge of the picture */
 html.wk-motion .wk-price{left:0;padding:.55rem var(--g) .6rem;background:var(--lime);color:var(--ink)}
 html.wk-motion .wk-price b{font-size:clamp(2.6rem,13vw,6rem)}
 html.wk-motion .wk-price .wk-swash{margin-top:.3rem;height:.55rem}
}

/* ---------- short windows: the intro goes wide and low, so the title keeps more of the height ---------- */
@media(min-width:761px) and (max-height:820px){
 .wk .wk-open{--rest:21.5rem}
 .wk .wk-open .case-introduction{max-width:max(18rem,min(38rem,74vw - var(--rec)*.38 - var(--g) - 1rem))}
}
/* ---------- landscape phones: the button sits beside the intro ---------- */
@media(min-width:761px) and (max-height:480px){
 .wk .wk-open{--rest:14.25rem}
 .wk .wk-open .case-heading{gap:.6rem}
 .wk .wk-open .case-introduction{grid-template-columns:minmax(0,20rem) auto;align-items:end;column-gap:1rem;max-width:none;gap:.2rem 1rem}
 .wk .wk-open .case-category{grid-column:1/3}
 .wk .wk-open .case-introduction p{font-size:.95rem}
 .wk .wk-open .case-watch{margin:0}
}

/* ---------- narrow two-column deck: the button gives its width to the clock ---------- */
@media(max-width:1000px){
 .wk-play{min-width:0;width:56px;height:56px;padding:0;justify-content:center;flex:none}
 .wk-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ---------- upright tablets: the film takes the full width, the deck sits under it ---------- */
@media(min-width:761px) and (max-aspect-ratio:1/1){
 .wk .wk-deck{--disc:min(58vw,52svh);grid-template-rows:auto 1fr}
 .wk .wk-deck .original-film{grid-column:1/3}
 .wk-turntable{grid-column:2;grid-row:2;align-self:end;margin-top:1.5rem}
 .wk-hint{grid-column:1;grid-row:2;align-self:end;margin:0 0 calc(10vw + 56px + 2.2rem)}
 .wk-transport{grid-column:1;grid-row:2;align-self:end;flex-direction:column;align-items:flex-start}
 .wk-time b{font-size:10vw}
 .wk-time>span{display:block;margin:.5rem 0 0}
 .wk-sign{top:58vw;--climb:7vh}
 .wk .wk-facts{min-height:0;row-gap:clamp(3rem,8vw,5rem);padding-bottom:clamp(2rem,5vw,3rem)}
 .wk-print{object-position:17% 50%}
}

/* ---------- phones ---------- */
@media(max-width:760px){
 .wk .wk-title{font-size:calc((100vw - 2*var(--g))/var(--e))}
 .wk-lines{width:100%}
 .wk-line{flex-wrap:wrap;gap:.02em .1em}
 .wk-line-1 .wk-word{height:calc(1em*var(--e)/(var(--a) + var(--b) + .1))}
 .wk-line-2{margin-top:0}
 .wk-line-2 .wk-small{height:.6em}
 .wk-line-2 .wk-big{height:1em}
 .wk-swash{width:80%;margin-left:.1em}
 .wk-record{width:128vw;right:-44vw;top:calc((100svh - var(--top))*.86 - 64vw)}
 .wk .wk-open .case-heading{justify-content:flex-start;gap:1.1rem}
 .wk .wk-open .case-introduction{max-width:none;position:relative;z-index:4}
 .wk .wk-open .case-watch{margin-top:.2rem}
 .wk .wk-open .case-introduction p{font-size:1rem}
 .wk .wk-open .case-caption-line{padding:.65rem var(--g)}
 .wk .wk-deck{--pad:0px;display:flex;flex-direction:column;padding:0;border-bottom:0}
 html.wk-js .wk .wk-deck .original-film{flex:none}
 .wk .wk-deck figcaption{padding:.7rem var(--g) 0}
 html.wk-js .wk-console{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto auto;position:relative;padding:1.2rem var(--g) 0}
 .wk-turntable{grid-column:1;grid-row:1;width:min(76vw,40svh);justify-self:start;align-self:center}
 .wk-hint{grid-column:1;grid-row:2;align-self:start;justify-self:start;margin:.8rem 0 0}
 /* the sign post is planted behind this strip, so it never runs through the numbers */
 .wk-transport{grid-column:1;grid-row:3;margin:.9rem calc(-1*var(--g)) 0;padding:.9rem var(--g) 1.5rem;background:var(--night);border-top:2px solid #e4f56a40}
 .wk-time b{font-size:clamp(3rem,19vw,5rem)}
 .wk-sign{right:0;top:1rem;width:25vw;--climb:15vh}
 html.wk-motion .wk-note-1{bottom:2.6rem}
 .wk .wk-facts{grid-template-columns:minmax(0,1fr);grid-template-rows:none;min-height:0;padding-bottom:0}
 .wk .wk-facts>div:nth-of-type(2){align-self:auto}
 .wk .wk-facts p{font-size:clamp(3rem,15.5vw,6rem)}
 .wk-print{grid-column:1;grid-row:auto;width:calc(100% + 2*var(--g));height:auto;aspect-ratio:1/1;margin:0 calc(-1*var(--g));object-position:9% 50%}
 .wk-crops{grid-template-columns:1fr}
 .wk-crops img{height:62vw}
}
@media(max-width:340px){.wk-time b{font-size:15vw}}
/* ---------- landscape phones: the poster keeps its one-line-per-row title and hangs the record from it, as on a short laptop ---------- */
@media(max-width:760px) and (max-height:480px){
 .wk .wk-title{font-size:var(--t)}
 .wk-lines{width:min(100%,var(--em)*1em)}
 .wk-line{flex-wrap:nowrap;gap:.13em}
 .wk-line-1 .wk-word,.wk-line-2 .wk-small,.wk-line-2 .wk-big{height:1em}
 .wk-line-2{margin-top:-.03em}
 .wk-swash{width:62%;margin:-.015em 0 0 .3em}
 .wk-record{width:var(--rec);right:calc(26vw - var(--rec)/2);top:calc(max(var(--H)*.74,var(--lb) + var(--rec)*.205 + 1rem) - var(--rec)/2)}
 .wk .wk-open .case-heading{justify-content:space-between;gap:.6rem}
 .wk .wk-open{--rest:14.25rem}
 .wk .wk-open .case-introduction{grid-template-columns:minmax(0,20rem) auto;align-items:end;column-gap:1rem;max-width:none;gap:.2rem 1rem}
 .wk .wk-open .case-category{grid-column:1/3}
 .wk .wk-open .case-introduction p{font-size:.95rem}
 .wk .wk-open .case-watch{margin:0}
}

/* ---------- the lyrics: right of the film, over the disc. Where there is no right, under the deck ---------- */
.wk .wk-deck .wk-lyrics{grid-column:1/-1;grid-row:3;position:relative;z-index:4;padding:clamp(1.25rem,3vw,2rem) 0 0;color:var(--cream)}
.wk-lyrics-h{margin:0 0 .5rem;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lime)}
.wk-lyrics p{margin:0}
.wk-ln{display:block}
.wk-verse{font-size:clamp(.875rem,1.9svh,1.0625rem);line-height:1.26;letter-spacing:-.01em;font-weight:500}
.wk-chorus{margin-top:.55em!important;color:var(--lime);font-family:'Manrope',Arial,sans-serif;font-size:clamp(.9375rem,2.05svh,1.1875rem);line-height:1.14;letter-spacing:-.02em}
.wk-chorus .wk-ln{display:inline}
.wk-big-ln{font-weight:800;text-transform:uppercase}
.wk-echo{color:var(--cream);font-weight:500;font-style:italic}
.wk-echo::after{content:"\A";white-space:pre}
@media(min-width:761px) and (min-aspect-ratio:1001/1000) and (min-height:600px){
 html.wk-js .wk .wk-deck .wk-lyrics{grid-column:2;grid-row:1;align-self:start;padding:0}
}
@media(max-width:760px){
 .wk .wk-deck .wk-lyrics{order:2;padding:1.5rem var(--g);border-top:2px solid #e4f56a40}
 .wk-verse{font-size:1rem}
 .wk-chorus{font-size:1.0625rem}
}