/* the menu, as on lpterapi.dk: no burger. A bar at the foot of the screen holds the destinations,
   and its last column raises the full table of contents, a lapis endpaper, from behind the bar. */
.sheet{position:fixed;inset:0 0 calc(var(--dock) + env(safe-area-inset-bottom,0px)) 0;z-index:50;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background-color:var(--lapis);color:var(--on-lapis);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23F6EFE0' stroke-opacity='.075' stroke-width='1'><rect x='14' y='14' width='28' height='28'/><rect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/></g></svg>");
  visibility:hidden;clip-path:inset(100% 0 0 0);
  transition:clip-path .34s cubic-bezier(.5,0,.75,.2),visibility 0s .34s}
.sheet.is-open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .62s var(--ease),visibility 0s 0s}
html:not(.js) .sheet:target{visibility:visible;clip-path:none}
.sheet .bar{border-bottom:1px solid rgba(246,239,224,.35)}
.sheet .wordmark i{color:var(--saffron)}
.sheet :focus-visible{outline-color:var(--saffron)}
.sheet__nav{padding-top:clamp(16px,3vh,28px)}
.sheet__label{color:var(--saffron-text);margin-bottom:6px}
.toc{list-style:none;margin:0;padding:0}
/* The sheet lists what the bar cannot: the works one by one, then the catalogue's groups. */
.toc>li>a{display:flex;align-items:center;gap:12px;min-height:clamp(50px,7.2vh,68px);color:inherit;text-decoration:none;border-bottom:1px solid rgba(246,239,224,.22)}
.toc>li>a svg{flex:none;width:clamp(34px,5vh,44px);height:clamp(34px,5vh,44px);padding:2px;background:var(--sheet)}
.toc__name{font-family:var(--serif);font-size:clamp(1.3rem,3.1vh,1.7rem);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.toc__dots{flex:1;min-width:12px;align-self:flex-end;margin-bottom:clamp(17px,2.6vh,25px);border-bottom:2px dotted rgba(246,239,224,.45)}
.toc__note{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--on-lapis-2);text-align:right;white-space:nowrap}
.toc a:hover .toc__name,.toc__groups a:hover{color:var(--saffron-text)}
.toc__cat{padding:clamp(14px,2.4vh,22px) 0 0}
.toc__cat .sc{display:block;color:var(--saffron-text)}
.toc__groups{display:flex;flex-wrap:wrap;gap:0 13px;font-family:var(--serif);font-size:1rem}
.toc__groups a{display:inline-flex;align-items:center;min-height:48px;color:var(--on-lapis);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(246,239,224,.45)}
@media (max-width:359px){.toc__note,.toc__dots{display:none}}
.sheet .menu-toggle:hover{color:var(--saffron-text)}
.sheet__foot{margin-top:auto;padding-top:clamp(14px,3vh,28px);padding-bottom:clamp(14px,3vh,28px);display:grid;gap:clamp(10px,2vh,18px)}
.sheet__foot .btn{width:100%;min-height:56px;font-size:1.125rem}
.toc li,.sheet__foot>*{opacity:0;transform:translateY(14px);transition:opacity .2s,transform .2s}
.sheet.is-open .toc li,.sheet.is-open .sheet__foot>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.16s + var(--i,0)*.055s)}
html:not(.js) .toc li,html:not(.js) .sheet__foot>*{opacity:1;transform:none}
.sheet.no-motion,.sheet.no-motion *,.sheet.no-motion *::before,.sheet.no-motion *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet *,.sheet *::before,.sheet *::after,.btn,.dock__bar *{transition:none!important}
}

/* the bar: a running foot that mirrors the running head, double rule and all */
.dock__bar{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--paper);color:var(--ink);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.dock__bar::before{content:"";display:block;height:5px;border-top:1px solid var(--ink);border-bottom:2px solid var(--ink)}
.dock__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:560px;margin-inline:auto}
.dock__col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  height:67px;padding:0 2px 8px;color:var(--ink-2);text-decoration:none;cursor:pointer;
  font-family:var(--sc);font-weight:560;font-size:.8125rem;letter-spacing:.07em;line-height:1.1;-webkit-tap-highlight-color:transparent}
.dock__col:hover{color:var(--ink)}
.dock__col:active{background:rgba(29,33,48,.07)}
.dock__col:focus-visible{outline-offset:-4px}
/* the emblems are drawn like the plates: a flat saffron shape, and an ink outline printed slightly off */
.dock__col svg{width:30px;height:30px;flex:none;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dock__col .f{fill:var(--saffron);stroke:none}
/* you are here: a lapis bookmark ribbon hangs from the rule */
.dock__col::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;background:var(--lapis);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 68%,0 100%);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--ease)}
.dock__col[aria-current="true"]{color:var(--lapis)}
.dock__col[aria-current="true"]::before,.dock__col[aria-expanded="true"]::before{transform:none}
.dock__col[aria-expanded="true"]{color:var(--lapis)}
/* one ribbon at a time: while the sheet is up, it belongs to "Indhold" */
.dock__cols:has([aria-expanded="true"]) [aria-current="true"]{color:var(--ink-2)}
.dock__cols:has([aria-expanded="true"]) [aria-current="true"]::before{transform:scaleY(0)}
.dock__chev{transform-origin:14px 14px;transition:transform .45s var(--ease)}
/* open: the chevron points back down at the bar the sheet will return to */
.dock__col[aria-expanded="true"] .dock__chev{transform:rotate(180deg)}
html:not(.js) .sheet:target ~ .dock__bar .dock__chev{transform:rotate(180deg)}