/* 0.8.72: one menu for every page of linr, in branches; the long row of links under the page is gone. On a phone in full screen: an orange reminder that the story of the song waits below, and Auto, where the song and its story take turns */
.fsm{position:relative;display:inline-flex;align-items:center;margin-right:auto}
.menub{position:relative;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 10px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:10px;letter-spacing:.24em;cursor:pointer;transition:color .3s ease,background .3s ease}
.menub:hover,.menub:focus-visible,.fsm.on .menub{color:var(--fg);outline:none}
.menub:focus-visible{background:var(--card)}
.mbars{position:relative;flex:none;width:20px;height:12px}
.mbars b{position:absolute;left:0;height:2px;border-radius:2px;background:currentColor;transition:top .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),background-color .35s ease}
.mbars b:first-child{top:2px;width:20px}
.mbars b:last-child{top:8px;width:12px;background:var(--accent)}
.fsm.on .mbars b{top:5px;width:20px;background:var(--accent)}
.mdot{position:absolute;top:8px;left:26px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s ease}
.fsm:has(#chDot:not(.hidden)) .mdot{opacity:1;transform:none;animation:chping 2.2s ease-out infinite}
html.immersive .menub{opacity:.75}
html.immersive .menub:hover,html.immersive .fsm.on .menub{opacity:1}
.fsmenu{position:absolute;left:0;top:calc(100% + 8px);z-index:45;display:flex;flex-direction:column;width:min(470px,calc(100vw - 40px));max-height:calc(100svh - 80px);overflow:hidden;border:1px solid var(--line2);border-radius:16px;background:color-mix(in srgb,var(--bg) 96%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 60px -24px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
.fsm.on .fsmenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.macct{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 18px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.mwho{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--fg)}
.mwho::before{content:'';flex:none;width:14px;height:2px;border-radius:2px;background:var(--accent)}
.mwho #who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.macts{display:inline-flex;align-items:center;gap:16px;flex:none}
.macct .linkbtn{min-height:32px;font-size:11px}
body:has(#foot.hidden) .macct{display:none}
.mstage{position:relative;display:grid;grid-template-columns:152px minmax(0,1fr);min-height:0;overflow:auto}
.mbr{display:flex;flex-direction:column;gap:2px;padding:12px 0 14px;border-right:1px solid var(--line)}
.mbb{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;width:100%;min-height:42px;padding:0 16px 0 34px;border:0;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:color .25s ease}
.mbb::before{content:'';position:absolute;left:14px;top:50%;width:13px;height:2px;margin-top:-1px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mbb.on::before{transform:none}
.mbb:hover,.mbb.on,.mbb:focus-visible{color:var(--fg);outline:none}
.mbn{font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:1.05;letter-spacing:0}
.mbc{font-size:10px;letter-spacing:.1em;color:var(--muted);opacity:.8}
.mbp{display:none}
.fsm:has(#chDot:not(.hidden)) .mbb[data-br=together] .mbc{color:var(--accent);opacity:1}
.fsm:has(#chDot:not(.hidden)) .mbb[data-br=together] .mbc::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}
.mls{position:relative;min-width:0;padding:12px 18px 14px 20px}
.ml{display:none;flex-direction:column;align-items:flex-start}
.ml.on{display:flex}
.mback{display:none}
.ml .linkbtn{display:flex;align-items:center;width:100%;min-height:33px;padding:0;font-size:12px;letter-spacing:.04em;text-align:left;text-decoration:none;color:var(--muted);white-space:nowrap;animation:mlin .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 32ms)}
.ml .linkbtn:hover,.ml .linkbtn:focus-visible{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;outline:none}
@keyframes mlin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.mfoot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;min-height:42px;padding:0 18px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.mfoot .linkbtn{display:inline-flex;align-items:center;min-height:34px;font-size:10.5px;text-decoration:none}
.mfoot .linkbtn:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.mver{margin-left:auto;opacity:.75}
#menuAwake{display:none}
#foot{display:none!important}
/* the page foot keeps only the notice and the address line */
.legal{margin-top:6px;padding-top:12px;gap:8px;font-size:10px;line-height:1.65}
.legal p{max-width:none;text-wrap:balance}
.legal .base{font-size:10.5px}
/* phones: the menu opens as a panel under the header; a branch slides in its pages */
@media (max-width:640px){
  .menub{width:44px;height:44px;padding:0;justify-content:center}
  .mlab{display:none}
  .mdot{top:11px;left:auto;right:7px}
  .fsmenu{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:var(--mtop,64px);width:auto;max-height:calc(100svh - var(--mtop,64px) - 12px - env(safe-area-inset-bottom))}
  .macct{padding:0 16px}
  .mstage{display:flex;overflow:hidden;align-items:flex-start;transition:height .4s cubic-bezier(.2,.7,.2,1)}
  .mbr,.mls{flex:0 0 100%;min-width:0;max-height:calc(100svh - var(--mtop,64px) - 110px - env(safe-area-inset-bottom));overflow:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
  .mbr{padding:6px 0;border-right:0}
  .mls{padding:4px 16px 8px;opacity:0}
  .fsmenu.deep .mbr,.fsmenu.deep .mls{transform:translateX(-100%)}
  .fsmenu.deep .mbr{opacity:0}
  .fsmenu.deep .mls{opacity:1}
  .mbb{grid-template-columns:minmax(0,1fr) auto;min-height:62px;padding:8px 40px 8px 36px;border-bottom:1px solid var(--line)}
  .mbr .mbb:last-child{border-bottom:0}
  .mbb::after{content:'';position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg)}
  .mbb::before{left:14px}
  .mbb.on::before{transform:scaleX(0)}
  .mbn{font-size:24px}
  .mbp{display:block;grid-column:1 / -1;font-size:10.5px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbc{grid-row:1;grid-column:2;font-size:0}
  .mback{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin-bottom:2px;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-family:'Instrument Serif',Georgia,serif;font-size:24px;letter-spacing:0;text-align:left;cursor:pointer}
  .mback::before{content:'';width:7px;height:7px;margin:0 6px 0 4px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent);transform:rotate(45deg)}
  .ml .linkbtn{min-height:46px;font-size:13px;border-bottom:1px solid var(--line)}
  .ml .linkbtn:last-child{border-bottom:0}
  .mfoot{gap:0 18px;padding:4px 16px 6px}
  .mver{flex-basis:100%;margin:-4px 0 0;text-align:right;font-size:9.5px}
}
@media (max-width:480px){
  header{gap:8px}
  html:not(.immersive) #awake{display:none!important}
  body:has(#awake:not(.hidden)) #menuAwake{display:inline-flex}
}
@media (max-width:374px){.ico{width:40px}}
/* full screen on a phone or a small tablet: the music alone, the orange reminder below it, and Auto */
.fsauto,.fsmore,.fsmini,.fssweep{display:none}
@media (max-width:820px),(max-height:500px){
  html.immersive .fsauto{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:10.5px;letter-spacing:.16em;cursor:pointer;overflow:hidden;transition:border-color .3s ease,color .3s ease}
  .fsauto::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;box-sizing:border-box;border:1.5px solid currentColor;transition:background .3s ease,border-color .3s ease}
  html.fs-auto .fsauto{border-color:var(--accent);color:var(--fg)}
  html.fs-auto .fsauto::before{border-color:var(--accent);background:var(--accent);animation:blink 2.4s ease-in-out infinite}
  .fsauto .fap{position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(0);transform-origin:0 50%}
  html.fs-auto .fsauto .fap{opacity:.9}
  /* still: the line waits below, out of sight, so the cover and the title get the room */
  html.immersive .wrap{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  html.immersive:not(.fs-line) #lineWrap{position:fixed;left:0;right:0;top:100%;visibility:hidden;pointer-events:none}
  html.immersive .fsmore.ready{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:10px;height:36px;max-width:calc(100vw - 32px);padding:0 14px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);font:inherit;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transform:translateX(-50%);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);animation:fsmorein .7s cubic-bezier(.2,.7,.2,1) both;-webkit-tap-highlight-color:transparent}
  body:has(#mPill.on) .fsmore.ready{bottom:calc(60px + env(safe-area-inset-bottom))}
  .fsmore .fmt{position:relative;flex:none;width:34px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--fg) 22%,transparent);overflow:hidden}
  .fsmore .fmt i{position:absolute;top:0;left:0;width:14px;height:2px;border-radius:2px;background:var(--accent);animation:fmglide 2.6s cubic-bezier(.6,0,.3,1) infinite alternate}
  .fsmore .fml{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;transition:max-width .6s cubic-bezier(.2,.7,.2,1),opacity .4s ease,margin .6s ease}
  .fsmore svg{flex:none;width:12px;height:8px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:fmnudge 2.2s ease-in-out infinite}
  .fsmore.mini{padding:0 12px}
  .fsmore.mini .fml{max-width:0;opacity:0;margin-right:-10px}
  .fsmore:active{transform:translateX(-50%) scale(.97)}
  @keyframes fsmorein{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
  @keyframes fmglide{from{transform:translateX(0)}to{transform:translateX(20px)}}
  @keyframes fmnudge{0%,60%,100%{transform:none}30%{transform:translateY(2px)}}
  html.fs-line .fsmore{display:none!important}
  /* the story: a small strip of the song on top, the line of cards in large print below it */
  html.immersive.fs-line #player{display:none!important}
  html.immersive.fs-line .fsmini{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:3px;align-items:center;padding:4px 2px 0;cursor:pointer;animation:fsin .7s cubic-bezier(.2,.7,.2,1) both}
  .fsmini img,.fsmini .fmph{grid-row:1 / 4;width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--card);border:1px solid var(--line)}
  .fsmini b{min-width:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:23px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fsmini span{min-width:0;font-size:11.5px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fsmini .fmp{display:block;height:2px;border-radius:2px;background:var(--line2);overflow:hidden;margin-top:4px}
  .fsmini .fmp i{display:block;height:100%;width:0;background:var(--accent);transition:width .9s linear}
  html.immersive.fs-line .wrap{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  html.immersive.fs-line #lineWrap:not(.hidden){display:block!important;margin:14px 0 0;animation:fsin .8s cubic-bezier(.2,.7,.2,1) .08s both}
  html.immersive.fs-line .rail{margin-bottom:16px}
  html.immersive.fs-line .card,html.immersive.fs-line .card.wide,html.immersive.fs-line .card.xwide{flex-basis:84vw;height:clamp(260px,calc(100svh - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),560px);padding:22px 22px 18px;gap:12px}
  html.immersive.fs-line .card .lab{font-size:11px}
  html.immersive.fs-line .card .big{font-size:96px}
  html.immersive.fs-line .card .val{font-size:36px;-webkit-line-clamp:3}
  html.immersive.fs-line .card .val.val3{font-size:30px}
  html.immersive.fs-line .card .txt{font-size:14.5px;line-height:1.6;-webkit-line-clamp:11}
  html.immersive.fs-line .card .sub{font-size:11.5px}
  html.immersive.fs-line .card.cho .chlines{font-size:25px;gap:6px}
  html.immersive.fs-line .card .wx svg{flex-basis:120px;width:120px;height:90px}
  html.immersive.fs-line .card .wx .wt{font-size:42px}
  html.immersive.fs-line .card .tl .tt{font-size:17px}
  html.immersive.fs-line .card .sim{gap:10px 16px}
  html.immersive.fs-line .card .sr{font-size:13px}
  html.immersive.fs-line .card.lbl .val{font-size:34px}
  html.immersive.fs-line .card.lbl .links,html.immersive.fs-line .card.lbl .sub{display:flex}
  html.immersive.fs-line .card.lbl .sub{display:-webkit-box}
  html.immersive.fs-line .card .bk .bt{font-size:21px}
  html.immersive.fs-line .card .links a{min-height:40px;font-size:12.5px}
  html.immersive.fs-line .cards{-webkit-mask-image:none;mask-image:none}
  html.immersive.fs-line .card:not(.lbl)>:is(.val,.big,.chlines,.wx,.txt,.sim,.cred,.tl,.books,.ol){margin-block:auto}
  html.immersive.fs-line .card:not(.lbl)>.sub{margin-top:0}
  html.immersive.fs-line .card.cho .chlines{flex:0 1 auto}
  @keyframes fsin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  html.fs-swap #player,html.fs-swap #lineWrap,html.fs-swap .fsmini{opacity:0;transition:opacity .3s ease}
  html.immersive .fssweep{position:fixed;left:0;right:0;top:50%;z-index:31;display:block;height:3px;border-radius:3px;background:var(--accent);pointer-events:none;transform:scaleX(0);transform-origin:0 50%;opacity:0}
  html.immersive .fssweep.go{animation:fssweep 1s cubic-bezier(.6,0,.3,1) both}
  @keyframes fssweep{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1;transform-origin:0 50%}56%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%;opacity:1}}
}
/* portrait full screen: the cover takes the room the line used to have */
@media (max-width:820px) and (orientation:portrait){
  html.immersive .artwrap,html.immersive .artcol:has(.arrive>.plal):has(.arrive>#teamLine:not(.hidden)) .artwrap{width:min(100%,var(--fsart,40svh))}
}
/* phones held sideways, the story: the strip and two cards side by side */
@media (max-height:500px) and (orientation:landscape){
  html.immersive.fs-line .fsmini{grid-template-columns:40px minmax(0,1fr);padding-top:0}
  html.immersive.fs-line .fsmini img,html.immersive.fs-line .fsmini .fmph{width:40px;height:40px}
  html.immersive.fs-line .fsmini b{font-size:19px}
  html.immersive.fs-line .card,html.immersive.fs-line .card.wide,html.immersive.fs-line .card.xwide{flex-basis:min(48vw,460px);height:calc(100svh - 160px - env(safe-area-inset-bottom));padding:16px 18px;gap:8px}
  html.immersive.fs-line .card .big{font-size:64px}
  html.immersive.fs-line .card .val{font-size:28px;-webkit-line-clamp:2}
  html.immersive.fs-line .card .txt{font-size:13px;-webkit-line-clamp:6}
  html.immersive.fs-line .card.cho .chlines{font-size:19px;gap:2px}
  html.immersive .artwrap{width:auto}
  html.immersive:not(.fs-line) .wrap{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  html.immersive .fsmore.ready{left:auto;right:max(20px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));height:32px;transform:none;animation-name:fsmoreinr}
  html.immersive .fsmore.ready:active{transform:scale(.97)}
  @keyframes fsmoreinr{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
/* the reminder took you here: the line shows itself */
.linewrap.lwflash .rail i{animation:lwglow 1.3s ease-in-out 2}
.linewrap.lwflash .cards{animation:lwnudge 1.4s cubic-bezier(.2,.7,.2,1) .3s}
@keyframes lwglow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent),0 0 18px 2px color-mix(in srgb,var(--accent) 55%,transparent)}}
@keyframes lwnudge{0%,100%{transform:none}40%{transform:translateX(-26px)}}
@media (prefers-reduced-motion:reduce){.fsmore .fmt i,.fsmore svg,.ml .linkbtn,html.immersive .fssweep.go{animation:none!important}}
/* 0.8.74: If you like this. Every name is shown whole: the card is a little wider, the font follows the card's width, a long name takes a second line, and the match line runs under the name instead of beside it. menu.js steps the font down when eight names still do not fit */
.card:has(.sim){flex-basis:clamp(360px,36vw,540px);gap:6px;container-type:inline-size}
.card .sim{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 20px;align-content:start}
.card .sr{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;column-gap:10px;row-gap:3px;font-size:var(--simfs,clamp(10px,2.55cqw,12px));line-height:1.15}
.card .sr .sn{grid-column:1;grid-row:1;white-space:normal;overflow:hidden;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
.card .sr .sp{grid-column:2;grid-row:1;font-size:.86em;line-height:1.15}
.card .sr .sb{grid-column:1 / -1;grid-row:2;height:1.5px;background:color-mix(in srgb,var(--line2) 70%,transparent)}
@media (max-width:820px){.card:has(.sim){flex-basis:82vw}.card .sim{gap:5px 14px}.card .sr{font-size:var(--simfs,clamp(10px,3.3cqw,11.5px))}}
@media (max-width:820px),(max-height:500px){html.immersive.fs-line .card .sr{font-size:var(--simfs,clamp(12px,4.4cqw,15px))}html.immersive.fs-line .card .sim{gap:14px 18px}}
/* 0.8.74 the note that says whether the screen stays on */
.wknote{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top));z-index:70;max-width:min(440px,calc(100vw - 32px));padding:9px 16px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);font-size:11.5px;line-height:1.5;letter-spacing:.03em;text-align:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-6px);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.wknote.on{opacity:1;transform:translate(-50%,0)}