/* The archive. One sheet of paper from top to bottom, and every section on it is
   an object you could pick up: a sleeve, a stack of cards, a print, a dial. */
:root { --night:#080808; --black:#141210; --ink:#17140f; --white:#f6efdf; --mute:#6a665e; --red:#d21f1c; --cream:#f6efdf; --sheet:#f9f4e8; --rule:rgba(23,20,15,.28); --ease:cubic-bezier(.2,.8,.2,1); --pad:clamp(16px,2.2vw,36px); --serif:'Instrument Serif',serif; --text:'Newsreader',Georgia,serif; --bn:'Anek Bangla',sans-serif; --ui:'Inter Tight',system-ui,sans-serif; --dots:radial-gradient(circle at 50% 50%,rgba(210,31,28,.92) 0 38%,transparent 42%) 0 0/3px 3px,linear-gradient(rgba(210,31,28,.3),rgba(210,31,28,.3)); --worn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .32' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .17 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); color-scheme:light; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.4;overflow-x:clip}
body[data-gate='true']{overflow:hidden;height:100svh}
[lang=as],[lang=bn]{font-family:var(--bn)}
a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none} img,video,canvas{display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:clip}
.grain{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.6;mix-blend-mode:multiply;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tag-line{font:600 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.fig{display:flex;gap:.9em;font:600 10.5px/1.45 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fig b{font-weight:600;color:var(--red);flex:none}

/* the seal: ruled from the codex's own construction, then opened from the centre */
.seal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;color:#241a0f;background:radial-gradient(90% 90% at 50% 46%,#f6edda,#e9dcc0 58%,#b9a578)}
.seal::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--worn)}
.seal__study{position:absolute;right:-7vw;bottom:-5vh;width:clamp(24rem,46vw,52rem);height:min(104vh,70rem);background:url('img/study.webp') no-repeat right bottom/contain;opacity:.17;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 34%);mask-image:linear-gradient(90deg,transparent 2%,#000 34%)}
.seal__inner{--Z:min(100svh,100vw);position:relative;z-index:1;width:var(--Z);height:var(--Z);transform-origin:50% 47%}
.sealmark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sealmark__construction{fill:none;stroke-width:.8}
.sealmark__construction .frame{stroke:rgba(36,26,15,.2)}
.sealmark__construction .diagonal{stroke:rgba(36,26,15,.2);stroke-dasharray:4 7}
.sealmark__construction .phi{stroke:rgba(148,100,30,.55);stroke-dasharray:2 7}
.sealmark__spiral{fill:none;stroke:rgba(148,55,28,.42);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:spiral-draws 3.4s cubic-bezier(.5,0,.2,1) .2s forwards}
.seal-tick{stroke:rgba(36,26,15,.22);stroke-width:1.1;transition:stroke .35s}
.seal-tick[data-on='true']{stroke:#94371c}
.seal-tick--long{stroke-width:1.8}
.sealmark__ring{fill:none;stroke:rgba(148,55,28,.75);stroke-width:1.4}
.sealmark__ring--fine{stroke:rgba(36,26,15,.4);stroke-width:.9}
.sealmark__hand line{stroke:#94371c;stroke-width:1.2}.sealmark__hand circle{fill:#94371c}
.sealmark__fill,.sealmark__stroke{font-family:'Noto Serif Bengali',serif;font-size:236px;font-weight:400}
.sealmark__stroke{fill:none;stroke:#94371c;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;animation:pen-writes 3.2s cubic-bezier(.45,.02,.3,1) .45s forwards}
.sealmark__fill{fill:#241a0f;opacity:0;animation:ink-floods 2s ease 2.4s forwards}
.sealmark__roman{fill:#94371c;font-family:'Cormorant Garamond',serif;font-size:44px;font-style:italic;letter-spacing:.42em;opacity:0;animation:rule-up 1.4s ease 3s forwards}
.seal__key{position:absolute;left:50%;top:75%;width:clamp(92px,13.5%,128px);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);border-radius:50%;color:#f6edda;background:radial-gradient(circle at 38% 32%,#b3492a,#8a2f16 62%,#6c2410);box-shadow:0 0 0 1px #6c2410,0 0 0 5px rgba(148,55,28,.2),0 16px 28px -10px rgba(50,20,8,.7),inset 0 2px 3px rgba(255,220,190,.35),inset 0 -4px 7px rgba(50,15,5,.5);font:italic 500 clamp(21px,2.9vh,27px)/1 'Cormorant Garamond',serif;letter-spacing:.06em;transition:transform .7s cubic-bezier(.2,1.5,.4,1),filter .3s}
.seal__key::before{content:'';position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(246,237,218,.5);transition:transform 1.2s var(--ease)}
.seal__key[data-ready='true']{transform:translate(-50%,-50%) scale(1)}
.seal__key[data-ready='true']:hover{filter:brightness(1.14)}.seal__key:hover::before{transform:rotate(90deg)}
.seal__key:disabled{cursor:progress}
.seal__foot{position:absolute;left:50%;top:91.2%;width:min(92vw,42rem);transform:translateX(-50%);display:grid;justify-items:center;text-align:center;opacity:0;animation:rule-up 1.4s ease 3.4s forwards}
.seal__body{font:italic 400 clamp(15px,2vh,18px)/1.35 'Cormorant Garamond',serif;color:rgba(36,26,15,.8)}
.seal__quiet{min-height:32px;padding:0 10px;font:italic 400 clamp(14px,1.9vh,17px)/1 'Cormorant Garamond',serif;color:rgba(36,26,15,.6);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(36,26,15,.25)}
.seal__quiet:hover{color:#94371c}
@keyframes rule-up{from{opacity:0}to{opacity:1}}
@keyframes ink-floods{from{opacity:0}to{opacity:.94}}
@keyframes pen-writes{to{stroke-dashoffset:0}}
@keyframes spiral-draws{to{stroke-dashoffset:0}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:6px var(--pad);color:var(--ink);transition:color .25s}
.nav::before{content:'';position:absolute;z-index:-1;inset:0 0 -22px;background:linear-gradient(var(--cream) 50%,rgba(246,239,223,0));transition:opacity .25s}
.nav.on-dark{color:var(--cream)}.nav.on-dark::before{opacity:0}
.nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav__mark{font-size:21px;font-weight:500}
.nav nav{display:flex;gap:clamp(14px,2.2vw,34px);font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}

/* the press: one way to play anything */
.press{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;text-align:left;width:fit-content;max-width:100%;min-height:52px;padding:6px 0;color:var(--ink)}
.press i{grid-row:span 2;width:44px;height:44px;border:1px solid var(--red);border-radius:50%;background:transparent;position:relative;transition:background .3s,transform .35s var(--ease)}
.press i::after{content:'';position:absolute;left:17px;top:14px;border-left:12px solid var(--red);border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;transition:border-color .3s}
.press:hover i{background:var(--red);transform:scale(1.1)}.press:hover i::after{border-left-color:var(--cream)}
.press span{font-weight:600;font-size:clamp(17px,1.3vw,20px);line-height:1.2}
.press span[lang]{font-weight:500}
.press small{font-size:13px;color:var(--mute);line-height:1.25}
.press[data-on='true'] i{background:var(--red)}.press[data-on='true'] i::after{border-left-color:var(--cream)}

/* photographs on the GPU: the liquid effect */
.film,.film-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-fallback{filter:grayscale(1)}

/* hero */
.hero{position:relative;height:100svh;overflow:hidden;background:var(--night);color:var(--white)}
.hero .film-fallback{object-position:78% 28%}
/* the photo is high-key where the title lands: top band for the nav, a pool behind the title's left side, a floor for the rest, so his face stays clear */
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.66),rgba(8,8,8,.58) 11%,rgba(8,8,8,0) 30%),radial-gradient(ellipse 66% 52% at 20% 70%,rgba(8,8,8,.62),rgba(8,8,8,.52) 55%,rgba(8,8,8,0)),linear-gradient(180deg,rgba(8,8,8,0) 46%,rgba(8,8,8,.5) 68%,rgba(8,8,8,.86));pointer-events:none}
.hero__as{position:absolute;left:var(--pad);top:62px;font-weight:300;font-size:clamp(18px,1.8vw,28px)}
.hero__title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(58px,8vh,84px);font-family:var(--serif);font-weight:400;font-size:clamp(72px,16.6vw,330px);line-height:.84;letter-spacing:-.035em;pointer-events:none}
.hero__title>span{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__l2{font-style:italic;padding-left:.9em}
.hero__title i{display:inline-block;font-style:inherit}
.hero__facts{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;display:flex;justify-content:space-between;gap:18px;font-size:clamp(13px,1.05vw,16px);font-weight:500}
.ask{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:clamp(46px,9vw,170px);line-height:.95;letter-spacing:-.025em;text-align:center;color:var(--white);pointer-events:none}
.ask em{color:var(--red)}
.ask .w{display:inline-block;opacity:0}

/* years: the numeral on black */
.years{position:relative;height:100svh;overflow:hidden;background:var(--night);color:var(--white);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;padding:60px var(--pad) 74px;gap:var(--pad)}
.years__num{font-family:var(--serif);font-size:clamp(150px,29.5vw,560px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.years__stack{position:relative;height:100%;min-height:0}
.ch{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2vh,24px);visibility:hidden}
.ch h2{font-weight:500;font-family:var(--serif);font-size:clamp(42px,5.4vw,96px);line-height:1.02;letter-spacing:-.015em}
.ch h2[lang=as]{font-family:var(--bn);font-weight:800;letter-spacing:-.01em;font-size:clamp(38px,4.8vw,84px)}
.ch h2 small{display:block;font:400 clamp(14px,1.1vw,17px) var(--ui);letter-spacing:0;color:#918f89;margin-top:.5em}
.ch p{font-size:clamp(17px,1.45vw,23px);line-height:1.34;max-width:30em}
.years .press{color:var(--white)}
.years .press i{background:var(--red);border-color:var(--red)}.years .press i::after{border-left-color:#fff}
.years .press:hover i{background:var(--red)}
.years .press small{color:#918f89}
.years .press[data-on='true'] i{background:var(--white);border-color:var(--white)}.years .press[data-on='true'] i::after{border-left-color:var(--night)}

/* the player must never sit on the ruler or the hero's last line */
body[data-has-track='true'] .hero__facts{bottom:68px}
body[data-has-track='true'] .hero__title{bottom:clamp(106px,13vh,136px)}
.hero__facts,.hero__title{transition:bottom .5s var(--ease)}

/* crowd: a small print that grows to fill the room */
.crowd{position:relative;height:100svh;overflow:hidden;background:var(--night)}
.crowd__label{position:absolute;left:var(--pad);top:62px;color:#918f89}
.crowd__print{position:absolute;inset:0;background:#000;clip-path:inset(24% 30% round 2px)}
.crowd__print::before{content:'';position:absolute;z-index:1;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.28) 0 34%,transparent 38%) 0 0/3px 3px,linear-gradient(rgba(8,8,8,.62),rgba(8,8,8,.08) 18%,rgba(8,8,8,.12) 42%,rgba(8,8,8,.9) 92%)}
.crowd__line{position:absolute;z-index:2;left:var(--pad);bottom:22%;font-family:var(--serif);font-size:clamp(62px,12vw,230px);line-height:.88;letter-spacing:-.03em;color:var(--cream);pointer-events:none}
.crowd__note{position:absolute;z-index:2;left:var(--pad);bottom:clamp(34px,8%,90px);width:min(34em,calc(100% - 2*var(--pad)));font:400 clamp(16px,1.2vw,19px)/1.4 var(--text);color:var(--cream);pointer-events:none}

/* poster: pulled from the screen, with its crop marks still on */
.poster{position:relative;height:100svh;min-height:600px;padding:62px clamp(28px,3.6vw,56px) clamp(28px,3.6vw,56px);background:var(--cream)}
.poster__sheet{position:relative;height:100%;overflow:hidden;background:var(--red) var(--worn);color:var(--cream);display:grid;grid-template-rows:repeat(3,minmax(0,1fr));padding:var(--pad);box-shadow:0 30px 60px -36px rgba(20,16,10,.65)}
.poster::before,.poster::after{content:'';position:absolute;pointer-events:none;width:calc(100% - 2*clamp(14px,1.9vw,30px));height:calc(100% - 42px - clamp(14px,1.9vw,30px));left:clamp(14px,1.9vw,30px);top:48px;background:linear-gradient(var(--ink),var(--ink)) 0 0/12px 1px,linear-gradient(var(--ink),var(--ink)) 0 0/1px 12px,linear-gradient(var(--ink),var(--ink)) 100% 0/12px 1px,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 12px,linear-gradient(var(--ink),var(--ink)) 0 100%/12px 1px,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 12px,linear-gradient(var(--ink),var(--ink)) 100% 100%/12px 1px,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 12px;background-repeat:no-repeat}
.poster::after{display:none}
.poster__row{display:flex;align-items:center;min-height:0;font-weight:800;line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.r2{justify-content:flex-end}
.poster__man{position:absolute;right:0;bottom:0;height:92%;aspect-ratio:800/1158;z-index:2;pointer-events:none;isolation:isolate;background:#d21f1c;-webkit-mask:url('img/cut-bw.png') center/100% 100% no-repeat;mask:url('img/cut-bw.png') center/100% 100% no-repeat}
.poster__man img{display:block;width:100%;height:100%;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply}
.poster__press{position:absolute;z-index:3;left:46%;bottom:var(--pad);color:var(--cream)}
.poster__press i{border-color:var(--cream)}.poster__press i::after{border-left-color:var(--cream)}
.poster__press:hover i{background:var(--cream)}.poster__press:hover i::after{border-left-color:var(--red)}
.poster__press small{color:inherit;opacity:.85}

/* rivers: one long engraved chart, panned across */
.rivers{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--cream)}
.rivers__kicker{position:absolute;z-index:3;left:var(--pad);top:62px;font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.rivers__track{position:relative;z-index:2;display:flex;height:100%;width:300%;will-change:transform}
.rivers__chart{position:absolute;z-index:0;left:0;top:30%;width:100%;height:44%;overflow:visible;pointer-events:none}
.rivers__chart path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.42;vector-effect:non-scaling-stroke}
.rivers__chart path.is-red{stroke:var(--red);stroke-width:1.6;opacity:1}
.riv{position:relative;z-index:1;width:calc(100%/3);height:100%;padding:92px var(--pad) 36px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.riv__no{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.riv__name{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(80px,15vw,270px);line-height:.92;letter-spacing:-.035em;white-space:nowrap}
.riv__body{display:grid;grid-template-columns:minmax(0,clamp(220px,25vw,420px)) minmax(0,34rem);gap:clamp(18px,3vw,48px);align-items:end;padding:clamp(14px,1.4vw,22px);background:#f8f2e4 var(--worn);width:fit-content;max-width:100%;box-shadow:0 26px 50px -32px rgba(20,16,10,.6)}
.riv__plate{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.riv__plate video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(1.55)}
.riv__plate::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.34) 0 34%,transparent 38%) 0 0/3px 3px}
.riv__text{display:grid;gap:12px}
.riv__text p{font:400 clamp(16px,1.25vw,19px)/1.42 var(--text)}
.riv__pair{display:flex;flex-wrap:wrap;gap:4px 28px}

/* songs */
.songs{--H:min(42svh,33vw);position:relative;isolation:isolate;overflow:hidden;min-height:max(100svh,760px);display:flex;flex-direction:column;background:var(--cream);color:var(--ink);padding:62px var(--pad) 72px}
.songs::after{content:'';position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.6;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.songs__head{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.songs__name{display:flex;align-items:baseline;gap:14px;flex:none}
.songs h2{font:400 clamp(46px,5.4vw,84px)/.95 var(--serif);letter-spacing:-.03em}
.songs__name p{font-weight:500;font-size:14px;white-space:nowrap}
.songs h2{pointer-events:none}
.songs__tools{position:relative;z-index:1;display:flex;gap:18px;align-items:center;min-width:0;flex:1;justify-content:flex-end}
.songs input{background:none;border:0;color:var(--ink);font:500 16px var(--ui);min-height:44px;width:clamp(120px,14vw,220px);flex:0 1 auto;outline-offset:0}
.songs input::placeholder{color:#6f6b62}
.songs select{flex:none;min-height:44px;max-width:100%;background:none;border:0;color:var(--ink);font:500 15px var(--ui);cursor:pointer}
.tags{display:flex;gap:4px 16px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tags::-webkit-scrollbar{display:none}
.tag{flex:none;min-height:44px;font-weight:500;font-size:15px;color:#6a665e;border-bottom:2px solid transparent}
.tag:hover{color:var(--ink)}.tag[aria-pressed=true]{color:var(--red);border-color:var(--red)}
.songs__meta{display:flex;align-items:center;gap:14px}
.views{display:flex;gap:10px}
.songs[data-view='shelf'] .songs__list{display:none}
.songs[data-view='list'] .shelf-zone,.songs[data-view='list'] .halftone,.songs[data-view='list']::after{display:none}
/* the list view */
.songs[data-view='list']{display:block;min-height:0;padding:clamp(70px,12vh,130px) var(--pad) 90px}
.songs[data-view='list'] .songs__head{display:block;border:0;padding:0}
.songs[data-view='list'] .songs__name{justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.songs[data-view='list'] h2{font-size:clamp(90px,21vw,400px);line-height:.8;letter-spacing:-.04em}
.songs[data-view='list'] .songs__meta{flex-direction:column;align-items:flex-end;gap:2px}
.songs[data-view='list'] .songs__meta p{font-size:16px}
.songs[data-view='list'] .songs__tools{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto auto;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:6px 0}
.songs[data-view='list'] input{width:100%;font-size:clamp(18px,1.6vw,24px);min-height:48px}
.songs[data-view='list'] .tags{max-width:60vw}
.row{display:grid;width:100%;grid-template-columns:3.2em minmax(0,1fr) auto auto;gap:16px;align-items:baseline;padding:.1em 0 .14em;text-align:left;border-bottom:1px solid rgba(17,17,17,.3);color:var(--ink);position:relative;isolation:isolate}
.row::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:-1}
.row:hover,.row[data-on='true']{color:var(--cream)}.row:hover::before,.row[data-on='true']::before{transform:scaleY(1)}
.row__n,.row__m,.row__d{font-size:clamp(13px,1vw,15px);font-weight:500}
.row__n{padding-left:6px}.row__d{padding-right:6px;font-variant-numeric:tabular-nums;min-width:3em;text-align:right}
.row__t{font-size:clamp(34px,6.4vw,118px);line-height:1.06;letter-spacing:-.02em;font-weight:600}
.row__t[lang]{font-weight:800}
.empty{padding:40px 0;font-size:20px}
.songs__more{margin-top:26px;min-height:52px;font-size:clamp(20px,2vw,30px);font-weight:600;border-bottom:2px solid var(--ink);color:var(--ink)}
.songs__more:hover{color:var(--red);border-color:var(--red)}
.peek{position:fixed;left:0;top:0;width:clamp(220px,20vw,320px);aspect-ratio:16/9;object-fit:cover;z-index:30;pointer-events:none;opacity:0;transform:translate(-50%,-50%);filter:grayscale(1) contrast(1.1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lbl{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.lbl[lang],.lbl [lang]{letter-spacing:.04em}
.box{display:inline-flex;align-items:center;height:21px;padding:0 8px;border:1px solid currentColor;font-style:normal}

.halftone{position:absolute;z-index:1;top:clamp(150px,17vh,190px);writing-mode:vertical-rl;font:800 min(19vh,12.5vw)/1.02 var(--bn);letter-spacing:.02em;color:transparent;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(210,31,28,.6) 0 36%,transparent 40%) 0 0/3px 3px,linear-gradient(rgba(210,31,28,.14),rgba(210,31,28,.14));-webkit-background-clip:text;background-clip:text}
.halftone--l{left:2.4vw}.halftone--r{right:2.4vw}

.shelf-zone{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;min-height:0}
.shelf{position:relative;flex:1;min-height:calc(var(--H) + 48px);margin:0 calc(-1*var(--pad));perspective:1400px;perspective-origin:50% 50%;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-6px}
.shelf__probe{position:absolute;width:0;height:var(--H);visibility:hidden}
.shelf__floor{position:absolute;left:50%;top:calc(50% + var(--H)*.47);width:min(96vw,calc(var(--H)*3.6));height:calc(var(--H)*.26);transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 40%,rgba(40,32,20,.3),rgba(40,32,20,.1) 55%,transparent 72%);pointer-events:none}
.shelf__stage{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;z-index:1}
.tape{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;visibility:hidden;will-change:transform}
.tape[data-tone='0']{--bg:#e8dfca;--fg:#17140f;--pic:multiply}.tape[data-tone='1']{--bg:#c9bea6;--fg:#17140f;--pic:multiply}.tape[data-tone='2']{--bg:#1a1815;--fg:#efe7d6;--pic:screen}
.tape[data-tone='3']{--bg:#c0211d;--fg:#f6efdf;--pic:multiply}.tape[data-tone='4']{--bg:#f1eadb;--fg:#a81a17;--pic:multiply}.tape[data-tone='5']{--bg:#8f897a;--fg:#14120e;--pic:multiply}
.face{position:absolute;top:calc(var(--H)/-2);height:var(--H);display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;color:var(--fg);background-color:var(--bg);background-image:linear-gradient(90deg,rgba(0,0,0,.2),transparent 12%,transparent 86%,rgba(0,0,0,.24)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .32' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .34 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");cursor:pointer}
.face::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none}
.sp{left:calc(var(--ws)/-2);width:var(--ws);transform:translateZ(calc(var(--d)/2));align-items:center;padding:calc(var(--H)*.016) 0;gap:calc(var(--H)*.014)}
.sp__pic{flex:none;width:76%;aspect-ratio:1;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.15);mix-blend-mode:var(--pic)}
.sp__t{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:flex-start;writing-mode:vertical-rl;font:400 1em/1 var(--serif);white-space:nowrap;overflow:hidden;padding:calc(var(--H)*.01) 0}
.sp__t[lang=as],.sp__t[lang=bn]{font-family:var(--bn);font-weight:500}
.tape[data-long='true'] .sp__t{white-space:normal;align-items:flex-start;justify-content:center;line-height:1.05}
.sp__foot{flex:none;display:grid;justify-items:center;gap:3px;font:600 calc(var(--H)*.024)/1 var(--ui);letter-spacing:.08em}
.sp__foot em{font-style:normal;border:1px solid currentColor;padding:2px 3px 1px}
.tape[data-on='true'] .sp::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:calc(var(--H)*.012);background:var(--red)}
.tape[data-on='true'][data-tone='3'] .sp::before{background:var(--cream)}
.cv{left:calc(var(--d)/-2);width:var(--d);transform:rotateY(90deg) translateZ(calc(var(--ws)/2));box-shadow:0 34px 60px -30px rgba(20,16,10,.6);padding:calc(var(--H)*.028);gap:calc(var(--H)*.016)}
.cv__by{flex:none;font-size:calc(var(--H)*.022)}
.cv__t{flex:1;min-height:0;display:flex;align-items:flex-end;font:400 1em/.98 var(--serif);letter-spacing:-.015em;overflow:hidden;padding-bottom:.08em}
.cv__t[lang=as],.cv__t[lang=bn]{font-family:var(--bn);font-weight:800;line-height:1.14;letter-spacing:-.01em}
.cv__pic{flex:none;position:relative;height:46%;margin:0 calc(var(--H)*-.028);background-size:cover;background-position:center;filter:grayscale(1) contrast(1.15);mix-blend-mode:var(--pic)}
.cv__pic::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0 34%,transparent 38%) 0 0/3px 3px}
.cv__foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:6px}
.cv__foot .lbl{font-size:calc(var(--H)*.022);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv__foot .box{height:auto;padding:2px 5px;font:600 calc(var(--H)*.024)/1.1 var(--ui);font-variant-numeric:tabular-nums}
.bk{left:calc(var(--d)/-2);width:var(--d);transform:rotateY(-90deg) translateZ(calc(var(--ws)/2));background-color:#14120f;background-image:none;--shade:.35}
.shelf__ring{position:absolute;z-index:5;width:44px;height:44px;border:1px solid var(--red);border-radius:50%;background:rgba(246,239,223,.86);display:grid;place-items:center;visibility:hidden}
.shelf__ring i{width:0;height:0;margin-left:3px;border-left:12px solid var(--red);border-top:7px solid transparent;border-bottom:7px solid transparent}
body[data-playing='true'] .shelf__ring i{margin:0;width:11px;height:13px;border:0;border-left:4px solid var(--red);border-right:4px solid var(--red)}

/* caption: every line sits in its own mask */
.m{overflow:hidden;display:grid;justify-items:center}
.m>*{grid-area:1/1;display:block}
.m[hidden]{display:none}
.cap{position:relative;z-index:12;display:grid;justify-items:center;gap:6px;text-align:center;padding-top:4px;color:var(--red)}
.cap .m{width:min(66vw,860px);white-space:nowrap}
.cap__t>span{font:600 clamp(28px,3.4vw,46px)/1.22 var(--ui);letter-spacing:-.015em;max-width:none}
.cap__t>span[lang=as],.cap__t>span[lang=bn]{font-family:var(--bn);font-weight:800;letter-spacing:-.01em;line-height:1.28}
.cap__s>span{font:600 11px/1.6 var(--ui);letter-spacing:.2em;text-transform:uppercase}
.cap__s>span[lang=as]{font-family:var(--bn);font-weight:500;font-size:13px;letter-spacing:.06em}
.cap__rule{width:18px;height:1px;background:var(--red)}
.cap__y{color:var(--ink)}
.cap__y>span{font:500 12px/1.5 var(--ui);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.cap__arrow{position:absolute;top:10px;width:44px;height:44px;display:grid;place-items:center;color:var(--red);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cap__arrow svg{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2}
.cap__arrow--l{left:calc(50% - min(38vw,480px) - 22px)}.cap__arrow--r{left:calc(50% + min(38vw,480px) - 22px)}
.cap__arrow--l:hover{transform:translateX(-5px)}.cap__arrow--r:hover{transform:translateX(5px)}

/* ruler: the station's day, first light to night */
.ruler{position:relative;height:42px;margin-top:16px;color:var(--red);cursor:pointer}
.ruler__line{position:absolute;left:0;right:0;top:12px;height:1px;background:currentColor;opacity:.75}
.tick{position:absolute;top:9px;width:1px;height:7px;background:currentColor;opacity:.4}
.tick--major{top:6px;height:13px;opacity:.8}
.mark{position:absolute;top:24px;font:500 11px/1 var(--ui);white-space:nowrap}
.mark[data-end]{transform:translateX(-100%)}
.ruler__dot{position:absolute;top:8px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:currentColor}

/* a cursor for the shelf only */
.shelf-cursor{position:fixed;left:0;top:0;z-index:58;width:0;height:0;pointer-events:none;color:var(--ink)}
.shelf-cursor[hidden]{display:none}
.shelf-cursor__ring{position:absolute;left:-29px;top:-29px;width:58px;height:58px;border:1.5px solid var(--ink);border-radius:50%;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,border-color .4s}
.shelf-cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink);transition:transform .4s}
.shelf-cursor__word{position:absolute;left:-40px;top:-14px;width:80px;text-align:center;font:600 10px/1.3 var(--ui);letter-spacing:.08em;color:#fff;transform:scale(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.is-open .shelf-cursor__ring{transform:scale(1.75);background:var(--red);border-color:var(--red)}
.is-open .shelf-cursor__dot{transform:scale(0)}.is-open .shelf-cursor__word{transform:none}
.is-spine .shelf-cursor__ring{transform:scale(.72)}
.is-btn .shelf-cursor__ring{transform:scale(.55)}.is-btn .shelf-cursor__dot{transform:scale(0)}
@media (pointer:fine){.shelf-zone,.shelf-zone button,.shelf .face,.ruler{cursor:none}}

/* the sheet: a now-playing page grown out of the cover */
.sheet{position:fixed;inset:0;z-index:55;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4vw;align-items:center;padding:96px 5vw 84px 7vw;background:#f7f2e7;color:var(--ink);overflow:auto}
.sheet[hidden]{display:none}
.sheet__close{position:absolute;left:var(--pad);top:22px;min-height:44px;height:44px;padding:0 14px;color:var(--ink)}
.sheet__close{gap:.45em}.sheet__close span{font:500 13px/1 var(--bn);letter-spacing:0}
.sheet__close:hover{color:var(--red)}
.sheet__brand{position:absolute;right:var(--pad);top:30px;font-size:21px;font-weight:500;color:var(--red)}
.sheet__copy{display:grid;gap:16px;max-width:560px}
.sheet__copy .m{justify-items:start}
.sheet__s{color:var(--red)}
.sheet__s span{font:500 14px/1.4 var(--bn);letter-spacing:.02em;text-transform:none}
.sheet__t{color:var(--red);font:600 clamp(40px,5vw,78px)/1.08 var(--ui);letter-spacing:-.03em}
.sheet__t [lang=as],.sheet__t [lang=bn]{font-family:var(--bn);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.sheet__r{font:italic 400 clamp(22px,2vw,30px)/1.2 var(--serif)}
.sheet__meta{color:#5f5c55;font-weight:500;font-size:15px}
.sheet__credit{font:italic 400 clamp(19px,1.5vw,23px)/1.3 var(--serif);max-width:32em}
.sheet__keys{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.sheet__key{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--red);color:var(--red);text-decoration:none;transition:background .25s,color .25s}
.sheet__key:hover{background:var(--red);color:var(--cream)}
.sheet__poster{display:block;width:100%;max-height:78vh}
body[data-sheet='true']{overflow:hidden}


.songs::after{display:none}

/* on air: the day as one revolution */
.air{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:center;min-height:100svh;padding:72px var(--pad) 40px;background:var(--cream);border-top:1px solid var(--rule)}
.dial{min-width:0}
.dial svg{display:block;width:100%;max-width:min(78svh,100%);height:auto;margin:0 auto;overflow:visible}
.dial .fig{max-width:30em;margin:12px auto 0}
.d-arc{fill:none;stroke:var(--ink);stroke-width:30;opacity:.1;transition:opacity .6s,stroke .6s}
.d-arc[data-now='true']{stroke:var(--red);opacity:1}
.d-name{font:500 21px var(--bn);fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.d-name[data-now='true']{fill:var(--cream);font-weight:800}
.d-tick{stroke:var(--ink);stroke-width:.8;opacity:.55}.d-tick--long{stroke-width:1.3;opacity:1}
.d-num{font:500 13px var(--ui);fill:var(--ink);text-anchor:middle;dominant-baseline:middle;font-variant-numeric:tabular-nums}
.d-ring{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.55}
.d-hand line{stroke:var(--red);stroke-width:1.6}.d-hand circle{fill:var(--red)}
.d-disc{fill:url(#grooves)}.d-label{fill:var(--red)}.d-hole{fill:var(--cream)}
.air__label{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.air__label span{color:var(--red);margin-left:8px;font-variant-numeric:tabular-nums}
.air__prog{margin:.15em 0 .1em;font-weight:800;font-size:clamp(64px,9.4vw,170px);line-height:1.2;letter-spacing:-.02em;color:var(--red)}
.air__foot{display:grid;gap:14px;border-top:1px solid var(--rule);padding-top:16px}
.air__foot p{font:400 clamp(18px,1.5vw,23px)/1.35 var(--text);max-width:30em}

/* story: a set page */
.story{background:var(--cream);color:var(--ink);padding:clamp(70px,11vh,120px) var(--pad);border-top:1px solid var(--rule)}
.story__title{font:400 clamp(60px,10.5vw,190px)/.92 var(--serif);letter-spacing:-.03em;margin-bottom:clamp(36px,6vh,70px)}
.story__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pad)}
.story__pic{grid-column:1/5;position:sticky;top:70px;align-self:start;background:var(--cream)}
.story__pic img{width:100%;max-height:calc(100svh - 130px);object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply}
figcaption{font:600 10.5px/1.45 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.story__text{grid-column:6/-1;font:400 clamp(18px,1.4vw,21px)/1.5 var(--text);max-width:40rem}
.story__text>p+p{margin-top:1em}
.lead{font-family:var(--serif);font-size:clamp(30px,3.1vw,50px);line-height:1.1;letter-spacing:-.012em}
.lead [lang]{font-size:.84em}
blockquote{margin:1.2em 0;font-family:var(--serif);font-style:italic;font-size:clamp(36px,4.2vw,70px);line-height:1;letter-spacing:-.02em;color:var(--red)}
cite{display:block;font:600 10.5px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:16px}
.story__wide{margin:1.8em 0;background:var(--cream)}.story__wide img{width:100%;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}
.honours{margin-top:clamp(50px,8vh,90px);border-top:2px solid var(--ink)}
.honours li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pad);align-items:baseline;border-bottom:1px solid var(--rule);padding:.5em 0}
.honours b{grid-column:1/5;font:400 clamp(30px,3.4vw,56px)/1 var(--serif);letter-spacing:-.02em;color:var(--red)}
.honours span{grid-column:6/-1;font:400 clamp(18px,1.4vw,21px)/1.3 var(--text)}

/* foot */
.foot{background:var(--cream);color:var(--ink);padding:clamp(50px,8vh,90px) var(--pad) 90px;overflow:hidden;border-top:1px solid var(--rule)}
.foot__end{font-weight:800;line-height:1.14;white-space:nowrap;margin-bottom:clamp(36px,6vh,70px)}
.foot__end span{color:transparent;background:var(--dots);-webkit-background-clip:text;background-clip:text}
.foot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad);font:400 15px/1.5 var(--text)}
.foot h3{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}.foot li{margin-bottom:6px}

/* dock */
.dock{position:fixed;z-index:60;left:0;right:0;bottom:0;background:var(--black);color:var(--white);transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.2,1);border-top:1px solid rgba(239,238,233,.2)}
body[data-has-track='true'] .dock{transform:none}
.dock__video{position:fixed;left:-9999px;bottom:0;width:356px;height:200px}
.dock[data-open='true'] .dock__video{position:relative;left:0;width:100%;height:auto;aspect-ratio:16/9;min-height:200px;max-height:40vh}
.dock[data-open='true'] .dock__video{max-width:440px;margin-left:auto}
.dock__video iframe{display:block;width:100%;height:100%}
.dock__row{display:flex;align-items:center;gap:4px;min-height:54px;padding:3px var(--pad);padding-bottom:calc(3px + env(safe-area-inset-bottom))}
.dock__meta{flex:1;min-width:0;padding:0 8px}
.dock__title{display:block;font-weight:500;font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__sub,.dock__status{display:block;font-size:12.5px;color:var(--mute);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__status{color:var(--red)}.dock__sub:empty,.dock__status:empty{display:none}
.dock__time{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;padding:0 10px;white-space:nowrap}
.dk{flex:none;width:44px;height:44px;display:grid;place-items:center}
.dk svg{width:21px;height:21px;fill:currentColor}.dk:hover{color:var(--red)}
.dk--play{background:var(--red);border-radius:50%;color:#fff}.dk--play:hover{color:#fff;background:#b01815}
.dk--video{width:auto;padding:0 8px;font-size:13px;font-weight:500}.dock__yt{display:grid;place-items:center;width:36px;height:44px;text-decoration:none}
.dock__track{height:2px;background:rgba(239,238,233,.16);position:absolute;left:0;right:0;bottom:0}
#dockFill{height:100%;width:0;background:var(--red);transition:width 1s linear}
.dock::after{content:'';position:absolute;left:0;right:0;top:100%;height:60vh;background:var(--black)}
.dk--size .shrink,.dock[data-size='big'] .dk--size .grow{display:none}
.dock[data-size='big'] .dk--size .shrink{display:block}
/* the bigger player: same frame, more room */
.dock[data-size='big']{display:grid;grid-template-columns:auto minmax(0,1fr)}
.dock[data-size='big'] .dock__video{position:relative;left:0;bottom:auto;width:auto;max-width:none;min-height:0;max-height:none;margin:0;height:min(24.75vw,292px,44svh);aspect-ratio:16/9}
.dock[data-size='big'] .dock__row{flex-wrap:wrap;align-content:center;gap:8px 6px;padding:14px clamp(16px,3vw,48px);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.dock[data-size='big'] .dock__meta{order:-2;flex:0 0 100%;padding:0 0 6px}
.dock[data-size='big'] .dock__title{font-size:clamp(24px,2.8vw,42px);line-height:1.2;white-space:normal}
.dock[data-size='big'] .dock__title[lang]{font-weight:800}
.dock[data-size='big'] .dock__sub,.dock[data-size='big'] .dock__status{font-size:14px;line-height:1.35;margin-top:2px}
.dock[data-size='big'] #prevKey{order:-1;display:grid}
.dock[data-size='big'] #nextKey{order:1}
.dock[data-size='big'] .dk--play{width:56px;height:56px}
.dock[data-size='big'] .dk--play svg{width:26px;height:26px}
.dock[data-size='big'] .dock__time{order:2;display:inline;margin-left:auto;font-size:14px}
.dock[data-size='big'] .dk--video{display:none}
.dock[data-size='big'] .dock__yt{order:3;display:grid}
.dock[data-size='big'] .dk--size{order:4}
.dock[data-size='big'] .dock__track{height:4px}


/* the dock, printed on the same paper */
.dock{background:#f1e9d8;color:var(--ink);border-top:1px solid var(--ink)}
.dock__sub,.dock__time{color:var(--mute)}
.dk--play{background:var(--red);color:#fff}.dk--play:hover{background:#b01815;color:#fff}
.dock__track{background:var(--rule)}
.dock::after{background:#f1e9d8}

@media (max-width:760px){
  .nav nav{gap:12px;font-size:9.5px;letter-spacing:.1em}
  .hero .film-fallback{object-position:80% 30%}
  .hero__title{font-size:23vw}.hero__l2{padding-left:.5em}
  .hero__facts span:last-child{text-align:right}
  .years{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;padding:66px var(--pad) 66px;gap:10px}
  .years__num{font-size:46vw}
  .ch{justify-content:flex-end;gap:12px}
  .ch h2,.ch h2[lang=as]{font-size:40px}
  .ch p{font-size:17px}
  .seal__inner{--Z:min(100svh,100vw)}
  .seal__study{width:80vw;right:-16vw;opacity:.09}
  .seal__foot{top:101%}
  .seal__key{top:81%;width:76px;font-size:19px}
  .sealmark__roman{font-size:50px;letter-spacing:.3em}
  .crowd__line{font-size:18vw}
  .poster{padding:58px 18px 18px}
  .poster__man{height:58%}
  .poster__press{left:var(--pad);bottom:auto;top:var(--pad)}
  .poster__sheet{padding-top:74px}
  /* the panel is exactly one screen; the plate gives up height so the words and buttons always fit */
  .rivers{min-height:0}
  .riv{padding:84px var(--pad) 22px;transition:padding-bottom .5s cubic-bezier(.2,.8,.2,1)}
  body[data-has-track='true'] .riv{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .riv>header,.riv__text{flex:none}
  .riv__name{font-size:21vw}
  .riv__body{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;width:100%}
  .riv__plate{flex:0 1 auto;min-height:0;width:100%;aspect-ratio:21/9}
  .riv__plate video{position:absolute;inset:0}
  .air{grid-template-columns:1fr;padding-top:64px}
  .story__pic{grid-column:1/-1;position:static}.story__pic img{max-height:70svh}.story__text{grid-column:1/-1}
  .honours b{grid-column:1/-1}.honours span{grid-column:1/-1}
  .foot__grid{grid-template-columns:1fr}
  .dock__time,.dock__yt,#prevKey{display:none}
  .dock[data-open='true'] .dock__video{max-width:none}
  .songs{--H:min(68vw,40svh);padding-top:56px;min-height:max(100svh,700px)}
  .songs__head{display:grid;gap:0;align-items:stretch}
  .songs__tools{display:grid;gap:0;justify-content:stretch}.songs input{width:100%}
  .halftone{font-size:22vw;opacity:.8;top:190px}
  .songs[data-view='list'] .songs__tools{grid-template-columns:1fr}.songs[data-view='list'] .tags{max-width:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}.row__n{display:none}.row__t{grid-column:1/-1;font-size:40px}.row__m{padding-left:6px}
  .dock[data-size='big']{grid-template-columns:1fr}
  .dock[data-size='big'] .dock__video{width:100%;height:auto;max-height:32svh}
  .cap .m{width:86vw}
  .cap__t>span{font-size:27px}
  .cap__arrow{top:auto;bottom:-6px}
  .cap__arrow--l{left:-10px}.cap__arrow--r{left:auto;right:-10px}
  .mark[data-alt]{display:none}
  .sheet{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px;padding:76px var(--pad) 90px}
  .sheet__poster{flex:none;height:auto;max-height:none;order:-1}
  .sheet__t{font-size:42px}
}

/* the smallest phones: with the dock up there is no room left for the plate */
@media (max-width:760px) and (max-height:600px){
  body[data-has-track='true'] .riv__plate{display:none}
}

/* a phone on its side: name and plate on the left, the words on the right */
@media (max-height:500px) and (orientation:landscape){
  .rivers{min-height:0}
  .rivers__kicker{top:58px;left:max(var(--pad),env(safe-area-inset-left))}
  .riv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);gap:10px 18px;padding:58px max(var(--pad),env(safe-area-inset-right)) 12px max(var(--pad),env(safe-area-inset-left))}
  body[data-has-track='true'] .riv{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .riv>header{grid-column:1;grid-row:1;padding-top:18px}
  .riv__name{margin-top:6px;font-size:min(17svh,10vw)}
  .riv__body{display:contents}
  .riv__plate,body[data-has-track='true'] .riv__plate{display:block;grid-column:1;grid-row:2;width:100%;height:100%;min-height:0;aspect-ratio:auto}
  .riv__plate video{position:absolute;inset:0}
  .riv__text{grid-column:2;grid-row:1/-1;align-self:end;max-height:100%;overflow-y:auto;gap:8px;padding:12px;background:#f8f2e4 var(--worn);box-shadow:0 26px 50px -32px rgba(20,16,10,.6)}
  .riv__text p{font-size:15px;line-height:1.35}
  .riv__text .press{min-height:46px;padding:1px 0}
  .riv__pair{gap:0 20px}
}

/* with reduced motion, nothing is pinned and everything is simply there */
html.calm .sealmark__fill,html.calm .sealmark__roman,html.calm .seal__foot{opacity:1;animation:none}
html.calm .sealmark__fill{opacity:.94}
html.calm .sealmark__stroke,html.calm .sealmark__spiral{stroke-dashoffset:0;animation:none}
html.calm .hero{height:auto;padding-top:100svh}
html.calm .hero .film,html.calm .hero .film-fallback,html.calm .hero__shade{height:100svh;bottom:auto}
html.calm .hero__title{bottom:auto;top:calc(100svh - clamp(72px,16.6vw,330px)*1.68 - clamp(58px,8vh,84px))}
html.calm .hero__facts{bottom:auto;top:calc(100svh - 36px)}
html.calm .ask{position:relative;left:auto;right:auto;top:auto;transform:none;padding:12svh var(--pad)}
html.calm .ask .w{opacity:1}
html.calm .ch{position:static;visibility:visible;padding:30px 0}
html.calm .years{height:auto;grid-template-columns:1fr}html.calm .years__stack{height:auto}html.calm .years__num{display:none}
html.calm .crowd__print{clip-path:none}
html.calm .rivers{height:auto}html.calm .rivers__track{flex-direction:column;width:100%}html.calm .riv{width:100%;height:auto;min-height:70svh}html.calm .rivers__chart{display:none}