/* src/styles/bullydee.css */
/* Bully Dee — global styles (migrated from Framer)
 *
 * Responsive model = the site's 4 viewport contexts (same on every page, values measured on the original):
 *   Mobile  (<810)      @media (max-width:809.98px)
 *   Tablet  (810-1199)  @media (max-width:1199.98px)  (+ mobile overrides after it)
 *   Laptop  (1200-1599) base (desktop-first)
 *   Desktop (>=1600)    @media (min-width:1600px)
 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* the pointer stays an arrow over text (the text caret is only for form fields); links and buttons keep their own cursors */
input,textarea{cursor:text}
/* buttons and links: the text on them cannot be selected or dragged, there is no tap flash, and no outline after a mouse click (keyboard focus still shows one) */
a,button,[role="button"],[data-open],.bd-pop{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none}
html,body{cursor:default;margin:0;padding:0;background:var(--back,#0a0a0a);color:var(--super-white,#fff);font-family:var(--font-silkscreen),monospace;-webkit-font-smoothing:none;-moz-osx-font-smoothing:auto}
@media (max-width:809.98px){html:has(.home),html:has(.dd){height:100vh;height:100lvh;background:#000 linear-gradient(180deg,rgb(34,0,255) 0%,rgb(0,0,0) 100%) no-repeat;background-size:100% 100vh;background-size:100% 100dvh}html:has(.home)::before,html:has(.dd)::before{content:"";position:fixed;top:0;left:0;right:0;height:16px;z-index:0;pointer-events:none;background:rgb(34,0,255)}html:has(.dd[data-back="golden grad"])::before{background:rgb(242,175,58)}html:has(.dd){background-image:linear-gradient(180deg,var(--blue-grad,#2200ff) -29%,#000 77%)}html:has(.dd[data-back="golden grad"]){background-image:linear-gradient(180deg,rgb(242,175,58) -7%,#000 60%)}html:has(.home) body,html:has(.dd) body{background:transparent!important}.home,.dd,.dd[data-back="golden grad"]{background:none}html:has(.home)::after,html:has(.dd)::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;background:var(--back,#0a0a0a);opacity:0;transition:opacity .3s ease;animation:bd-bgout .45s ease backwards}@keyframes bd-bgout{from{opacity:1}to{opacity:0}}@keyframes bd-barin{from{background-color:var(--back,#0a0a0a)}}html:has(.home),html:has(.dd){transition:background-color .3s ease;animation:bd-barin .45s ease backwards}html.bd-leave:has(.home),html.bd-leave:has(.dd){background-color:var(--back,#0a0a0a)}html:has(.home)::before,html:has(.dd)::before{animation:bd-in .45s ease backwards}html.bd-leave:has(.home)::after,html.bd-leave:has(.dd)::after{opacity:1}html.bd-leave:has(.home)::before,html.bd-leave:has(.dd)::before{opacity:0;transition:opacity .3s ease}}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.4s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
body{min-height:100vh;overflow-x:hidden;animation:bd-page-in .8s cubic-bezier(.27,0,.51,1) .1s both}
::selection{background:var(--invisible-gray,#383838);color:#fff}
a{color:inherit;text-decoration:none}
img,iframe,video{max-width:100%}
/* pictures can't be selected, highlighted or dragged away (also covers the media viewer and its double-click zoom) */
img,.mv,.card,.thumb,.dio__item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-drag:none}
img::selection{background:transparent}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.bd-hide{display:none!important}

@keyframes bd-page-in{from{opacity:0}to{opacity:1}}
@keyframes bd-appear{from{opacity:0}to{opacity:1}}

/* hover 1.05 / tap .95 */
.bd-pop{transition:transform .45s cubic-bezier(.34,1.56,.64,1);display:inline-block}
.bd-pop:hover{transform:scale(1.04)}
.bd-pop:active{transform:scale(.936)}

/* ---------- overlays (about / chapter info): ONE shared template ----------
   Content blocks are authored as .ovc (h2 + p's [+ p data-foot]); bullydee.js wraps each into the same .ov shell. */
.ovc{display:none}
.ov{position:fixed;inset:-100px 0;z-index:100;display:flex;align-items:center;justify-content:center;padding:124px 24px;background:rgba(var(--bd-bg-rgb),.96);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .35s ease;will-change:opacity;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* overlays are kept painted on their own layer while closed (no visibility:hidden): a big fixed layer that first appears from hidden is rasterised in pieces on iOS (the middle came first, the top and bottom margins later); closed ones are made inert in JS instead */
.ov.is-open{opacity:1;pointer-events:auto}
.ov__box{position:relative;max-width:640px;width:100%;margin:auto;padding:8px 0}
.ov__title{font-size:16px;line-height:1.2;color:#fff;font-weight:400;margin-bottom:22px;padding-right:32px}
.ov__body p,.ov__foot{font-size:12px;line-height:1.4;color:var(--grayy,#a3a3a3)}
.ov__body p{margin-bottom:1.1em}
.ov__x{position:absolute;right:0;top:0;font-size:20px;line-height:1;color:#fff;padding:4px 8px}
.ov__foot{margin:0}
@media (min-width:810px) and (max-width:1199.98px){.ov__title{font-size:18px}.ov__body p,.ov__foot{font-size:14px}}
@media (min-width:1200px){.ov__title{font-size:16px}.ov__body p,.ov__foot{font-size:14px}}
@media (min-width:1600px){.ov__title{font-size:22px}.ov__body p,.ov__foot{font-size:18px}}

/* age gate */
.age{position:fixed;inset:-100px 0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(var(--bd-bg-rgb),.9);opacity:0;pointer-events:none;transition:opacity .35s ease;will-change:opacity;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.age.is-open{opacity:1;pointer-events:auto;transition:opacity .4s ease .4s}
.age__box{background:rgb(36,36,36);padding:20px 22px;display:flex;flex-direction:column;align-items:center;gap:17px;min-width:241px}
.age__q{font-size:18px;line-height:1.2;color:#fff;text-align:center}
.age__row{display:flex;gap:33px;justify-content:center;font-size:12px;line-height:1.4;color:#fff;text-align:center}
.age__row a,.age__row button{color:#fff;font-family:inherit;font-size:12px;line-height:1.4}
.age__row a:hover,.age__row button:hover{text-decoration:underline}

/* =====================================================================
   HOME  (phone <810 · tablet 810-1199 · desktop 1200-1599 · big >=1600)
   ===================================================================== */
.home{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:linear-gradient(180deg,rgb(34,0,255) 0%,rgb(0,0,0) 100%);user-select:none;-webkit-user-select:none}
.home__spline{position:absolute;left:50%;top:50%;width:132.33%;height:100%;transform:translate(-50%,-50%);border:0;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .8s both}
.home__menu{position:absolute;left:50%;top:41.75%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;max-height:100%;z-index:2;animation:bd-appear .75s cubic-bezier(.44,0,.56,1) 1.1s both}
.home__logo{display:block;width:326px;height:89px;max-width:none;flex-shrink:0;pointer-events:none;object-fit:cover;object-position:center}
.home__list{display:flex;flex-direction:column;align-items:center;gap:12px}
.home__link{font-family:var(--font-silkscreen),monospace;font-weight:700;font-size:20px;line-height:1.2;text-align:center;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.6);text-transform:uppercase}
.home__socials{display:flex;gap:15px;align-items:center;justify-content:center;height:34px;padding-top:8px}
.home__socials a{display:block;width:26px;height:26px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.home__socials a:hover{transform:scale(1.12)}
.home__socials a:active{transform:scale(.92)}
.home__socials img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,0,0,.6))}
.home__foot{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 15px 10px;z-index:4;font-size:18px;line-height:1.6;color:#666;animation:bd-appear .75s cubic-bezier(.44,0,.56,1) 1.1s both}
.home__foot button{font-family:inherit;font-size:18px;line-height:1.6;color:#666;text-transform:lowercase}
@media (max-width:1199.98px){.home__spline{width:161.48%}.home__menu{gap:12px}}
@media (max-width:809.98px){
  .home__spline{width:278.7%;height:102.4%;top:0.8%;transform:translateX(-50%)}
  .home__menu{top:43%;gap:1px}
  .home__logo{width:281px;height:76px}
  .home__link{font-size:18px}
  .home__foot button{font-size:16px}
}
@media (min-width:1600px){
  .home__menu{top:42%;gap:12px}
  .home__logo{width:480px;height:130px}
  .home__list{gap:14px}
  .home__link{font-size:24px}
  .home__socials{height:40px;gap:20px}
  .home__socials a{width:32px;height:32px}
  .home__foot,.home__foot button{font-size:22px}
}

/* =====================================================================
   shared page header / footer
   ===================================================================== */
.pg{width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;align-items:stretch}
.pg__head{position:relative;display:flex;align-items:flex-end;min-height:90px;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s both}
.pg__title{font-weight:700;line-height:1.4;color:#fff}
/* back arrow: a 45px frame beside the title; the 17px pixel icon sits at a fixed offset inside it (values measured on the original) */
.pg__back{position:absolute;display:block;left:-50px;bottom:0;width:45px;height:45px}
/* same hover / tap behaviour as the home-page menu items (.bd-pop): 1.05 on hover, 0.92 on tap, same spring easing; the icon scales around its own centre */
.pg__back svg,.dd__back svg{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pg__back.bd-pop:hover,.pg__back.bd-pop:active,.dd__back.bd-pop:hover,.dd__back.bd-pop:active{transform:none}
.pg__back:hover svg,.dd__back:hover svg{transform:scale(1.28)}
.pg__back:active svg,.dd__back:active svg{transform:scale(.92)}
/* page transition: fade in on load, fade out on leaving */
@keyframes bd-in{from{opacity:0}to{opacity:1}}
body{animation:bd-in .45s ease backwards}
html.bd-leave body{opacity:0;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){body{animation:none}}
/* the arrow is drawn as an inline SVG on a 5x5 pixel grid (4 columns used, strokes 2 units thick), same approach as the <i> glyph */
.pg__back{color:#fff}
.pg__back svg{position:absolute;left:25px;top:19px;width:17px;height:17px;display:block;shape-rendering:crispEdges}
.pg__foot{text-align:center;line-height:1.2;color:var(--invisible-gray,#383838)}

/* =====================================================================
   MAIN STORY  (phone <600 · tablet 600-999 · desktop 1000-1599 · big >=1600)
   ===================================================================== */
.ms .pg{width:756px;max-width:100%}
.ms .pg__title{font-size:28px}
.chap{margin-top:12px;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .6s both}
.chap__head{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;column-gap:10px;height:50px;margin-bottom:10px;overflow:visible}
.chap__wip{flex-basis:100%;font-size:12px;line-height:1.2;color:var(--invisible-gray,#383838)}
.chap__title{font-size:20px;font-weight:400;line-height:1.2;color:var(--grayy,#a3a3a3)}
/* <i> hint: Silkscreen has no lowercase i, so the "i" is drawn as a 1x6 pixel glyph (dot + stem, the stem runs one pixel below the baseline; translateY keeps the top aligned with the capitals) on Silkscreen's own 8-unit grid */
.chap__info{position:absolute;right:0;top:0;display:flex;align-items:center;gap:.125em;color:#666;font-size:18px;line-height:1.4;padding:0;font-family:inherit;cursor:pointer}
.chap__i{display:block;flex:none;width:.125em;height:.75em;transform:translateY(.0625em)}
/* same hover / tap as the other small icons on the site (the home-page social icons 1.15 / .9, the back arrow 1.35 / .9): the <i> hint is only ~29px wide, so 1.05 grew it by 1.5px, which looked like no hover at all; 1.25 / .9 gives it the same ~7px of growth the other buttons have, same spring, scaling around its own centre */
.chap__info{transition:transform .45s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}
.chap__info:hover{transform:scale(1.2)}
.chap__info:active{transform:scale(.92)}
.chap__grid{display:block;padding-bottom:20px}
.chap__loop{display:grid;grid-template-columns:repeat(auto-fill,90px);column-gap:36px;row-gap:15px;align-items:start;justify-content:start}
.card{position:relative;display:block;width:116px;transition:transform .2s cubic-bezier(.21,.56,.56,1),opacity .2s}
.card:hover{transform:scale(1.07)}
.card:active{transform:scale(.9);opacity:.5}
.thumb{position:relative;width:116px;height:206px;overflow:hidden;background:transparent}
/* any aspect ratio: the preview is fitted to the card width (contain), leftover space above/below stays transparent */
.thumb img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.thumb__gif{position:absolute;inset:0;opacity:0;transition:opacity .2s}
/* the information button <i> of the chapters is hidden for now (delete this rule to bring it back) */
.ms .chap__info,.dv__chap .chap__info{display:none!important}
/* the copyright line at the bottom of the story page is gone */
.ms .pg__foot{display:none}
/* the grid: every tile is a square (the picture fills it, cropped), so the tiles stand in a real grid */
.chap__loop .card .thumb{height:auto;aspect-ratio:3/4}/* (the tiles of the grid are 3:4 portrait; they were 1/1 squares: set aspect-ratio:1/1 and restore the old y values noted in thumb-focus.js to go back) */
.chap__loop .card .thumb>img{object-fit:cover}
/* phone: the tiles run from edge to edge, and the gap between them is the same as the gap to the edge of the screen (--gg); the tiles grow to fill the width */
@media (max-width:809.98px){
.ms{--gg:1px}
.ms .chap__grid{margin-left:calc(0px - var(--gxp,19px));margin-right:calc(0px - var(--gxp,19px))}
.ms .chap__loop{grid-template-columns:repeat(3,1fr);column-gap:var(--gg);row-gap:var(--gg)}
.ms .chap__loop .card,.ms .chap__loop .card .thumb{width:100%}
}
/* the grid is one grid: no chapter names, no division by chapters. The chapters' boxes dissolve (display: contents), so that all the tiles stand in the one grid of the page itself */
.ms .chap>.chap__head{display:none}
/* the bar at the bottom of the story page stands a little higher from the edge of the screen: 12px more under its words (the soft edge above it and the end of the scrolling box move up by the same amount) */
@media (min-width:810px){html:has(.ms, .dio, .ct) nav.list-nav{padding-bottom:26px}}
/* no black strips behind the title and the bar of the story page: the words and the icons stand over the page with a light shadow instead */
html:has(.ms, .dio, .ct) .list-nav{background:none!important;box-shadow:none!important}
/* the picture of the discs is opaque (the bloom needs a solid ground), so the title stands over it */
.ms.is-dv .pg__head{position:relative;z-index:7}
html:has(.ms, .dio, .ct) body::before,html:has(.ms, .dio, .ct) body::after{display:none!important}
/* the list of dioramas: no playlist tip, no arrow by the title (its bottom bar is the same as the story's) */
.dio .dio__tip,.dio .pg__back{display:none!important}
/* the list of dioramas does not scroll at all (the ring is paged, the page stays where it is) */
html:has(.dio),html:has(.dio) body{overflow:hidden!important;overscroll-behavior:none}
main.dio{overflow:hidden!important;overscroll-behavior:none;touch-action:none}
/* the contact page: no arrow by the title, no copyright, no scrolling, and the bar of the story at the bottom (in the column of the form) */
.ct__back,.ct__foot{display:none!important}
/* the head of the contact page is a canvas of its own (Dee's 3D head), not a Spline scene: the box does not clip it, the canvas stands in the middle of the box */
.ct__spline[data-head]{overflow:visible}
.ct__spline .ct__headcv{position:absolute;left:calc(50% - 22px);top:calc(50% + 12px);width:150px;height:150px;max-width:none;max-height:none;transform:translate(-50%,-50%);pointer-events:none;display:block}
/* on a phone the contact page is a box fixed to the screen (as the story and the dioramas are), so that the page itself has nothing to be pushed along by the keyboard */
@media (max-width:809.98px){html main.ct{position:fixed;left:0;right:0;top:0;bottom:0;min-height:0;height:auto;box-sizing:border-box;overflow:hidden}}
/* the window of the message */
html .ct__f textarea{height:104px;min-height:104px} /* (low enough to stay above the keyboard of a phone: the page is not pushed up when the field is touched) */
/* the titles of the story, the dioramas and the contacts stand at one height (the middle of the words of the story's title is the measure: 49.4px on a phone, 70.4px on a tablet, 70.6px on a computer) */
.dio .pg__title{position:relative;top:-2.8px}
html main.ct{padding-top:36.2px}
@media (min-width:810px){.dio .pg__title{top:-4px}html main.ct{padding-top:53.6px}}
@media (min-width:810px){.dio .pg__title{top:-2.2px}html main.ct{padding-top:53.8px}}
/* iPhone zooms the page into a field when it is touched if the text in it is smaller than 16px: the fields of the form are given 16px there, so the page stays where it is */
@supports (-webkit-touch-callout:none){.ct__f input,.ct__f textarea,.ct input,.ct textarea,.ct select{font-size:16px!important}}
html .ct__h{padding-left:0!important} /* (the title took a gap for the arrow on a phone) */
html:has(.ct),html:has(.ct) body,main.ct{overflow:hidden!important;overscroll-behavior:none}
html:has(.ct) nav.list-nav{padding-left:max(30px,calc((100% - 330px) / 2));padding-right:max(30px,calc((100% - 330px) / 2))}
@media (min-width:810px){html:has(.ct) nav.list-nav{padding-left:calc((100% - 420px) / 2);padding-right:calc((100% - 420px) / 2)}}
@media (min-width:1600px){html:has(.ct) nav.list-nav{padding-left:calc((100% - 450px) / 2);padding-right:calc((100% - 450px) / 2)}}
/* on a wide screen the bar stands in the column of the title (the page's column is 499px wide, 750px from 1200px up), not at the very edge of the screen */
@media (min-width:810px){html:has(.dio) nav.list-nav{padding-left:calc((100% - 499px) / 2);padding-right:calc((100% - 499px) / 2)}}
@media (min-width:1200px){html:has(.dio) nav.list-nav{padding-left:calc((100% - 750px) / 2);padding-right:calc((100% - 750px) / 2)}}
html:has(.ms) .ms .pg__head::before,html:has(.ms) .ms .pg__head::after{display:none!important}
html:has(.ms) .ms .pg__title,html:has(.ms, .dio, .ct) .list-nav a,html:has(.ms, .dio, .ct) .list-view{text-shadow:0 2px 28px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.6)}
html:has(.ms, .dio, .ct) .list-view svg{filter:drop-shadow(0 2px 14px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(0,0,0,.7))}
@media (min-width:810px){html:has(.ms) .ms{padding-bottom:52px}}
@media (max-width:809.98px){
.ms:not(.is-dv):not(.is-tl) .pg{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gg);row-gap:var(--gg);align-content:start;padding-bottom:32px}
.ms:not(.is-dv):not(.is-tl) .pg>.pg__head,.ms:not(.is-dv):not(.is-tl) .pg>.pg__foot{grid-column:1/-1}
.ms:not(.is-dv):not(.is-tl) .pg>.pg__head{margin-bottom:32px}
.ms:not(.is-dv):not(.is-tl) .pg>.chap,.ms:not(.is-dv):not(.is-tl) .chap__grid,.ms:not(.is-dv):not(.is-tl) .chap__loop{display:contents}
}
/* the same one grid on a computer: always three tiles in a row, the whole grid stands in the middle of the screen */
@media (min-width:810px){
.ms{--dgg:8px;--dgw:clamp(150px,19vw,280px)}
.ms:not(.is-dv):not(.is-tl) .pg{display:grid;grid-template-columns:repeat(3,var(--dgw));justify-content:center;column-gap:var(--dgg);row-gap:var(--dgg);align-content:start;width:100%;max-width:none;margin:0;padding:0 0 32px}
.ms:not(.is-dv):not(.is-tl) .pg>.pg__head,.ms:not(.is-dv):not(.is-tl) .pg>.pg__foot{grid-column:1/-1;padding-left:0;padding-right:0}
.ms:not(.is-dv):not(.is-tl) .pg>.pg__head{margin-bottom:32px}
.ms:not(.is-dv):not(.is-tl) .pg>.chap,.ms:not(.is-dv):not(.is-tl) .chap__grid,.ms:not(.is-dv):not(.is-tl) .chap__loop{display:contents}
.ms:not(.is-dv):not(.is-tl) .chap__loop .card,.ms:not(.is-dv):not(.is-tl) .chap__loop .card .thumb{width:100%}
/* on a computer the title, the name of the chapter and the bar at the bottom stand on the same middle column as the grid (its width is three tiles and two gaps), in the discs as well as in the grid */
html:has(.ms){--dgg:8px;--dgw:clamp(150px,19vw,280px);--dcol:calc(3 * var(--dgw) + 2 * var(--dgg))}
.ms{scrollbar-width:none}
.ms::-webkit-scrollbar{display:none}
html:has(.ms){scrollbar-width:none}
html:has(.ms)::-webkit-scrollbar{display:none}
html:has(.ms) nav.list-nav{padding-left:calc((100% - var(--dcol)) / 2);padding-right:calc((100% - var(--dcol)) / 2)}
.ms.is-dv .pg__head{padding-left:calc((100% - var(--dcol)) / 2);padding-right:calc((100% - var(--dcol)) / 2)}
}
.card:hover .thumb__gif.is-ready{opacity:1}
/* cross-fade: the animation fades in over the still picture; the still one goes away only once the animation is about half in (so the total brightness never dips), and it comes back at once when the pointer leaves, under the animation that is fading out. Only once the animation has loaded, so a card is never left empty. */
.thumb img{transition:opacity .05s linear}
.card:hover .thumb:has(.thumb__gif.is-ready)>img{opacity:0;transition:opacity .1s linear .1s}
.ms .pg__foot{font-size:14px;padding:50px 0 60px}
@media (max-width:1199.98px){
  .ms .pg{width:500px}
  .ms .pg__title{font-size:28px}
  .ms .pg__back svg{top:20px;width:16px;height:16px}
  .chap__title,.chap__info{font-size:18px}
  .ms .pg__foot{width:538px;max-width:100vw;align-self:center}
}
@media (max-width:809.98px){
  .ms .pg{width:340px}
  .ms .pg__head{min-height:65px}
  .ms .pg__title{font-size:22px}
  .ms .pg__back{left:-23px;height:50px}
  .ms .pg__back svg{left:25px;top:30px;width:13px;height:13px}
  .ms .pg__title{padding-left:20px}
  .chap__title,.chap__info{font-size:16px}
  .chap__loop{grid-template-columns:repeat(auto-fill,95px);column-gap:20px;row-gap:8px}
  .card,.thumb{width:109px}
  .thumb{height:194px}
  .ms .pg__foot{width:340px;font-size:12px;padding:30px 0 40px}
}
@media (min-width:1600px){
  .ms .pg{width:1000px}
  .ms .pg__title{font-size:28px}
  .chap__info{font-size:20px}
  .ms .pg__foot{width:756px;align-self:center}
}

/* =====================================================================
   DIORAMAS LIST  (phone <600 · tablet 600-1099 · desktop >=1100)
   ===================================================================== */
.dio{padding:0 0 100px}
.dio .pg{width:750px;max-width:100%}
.dio .pg__title{font-size:28px;line-height:1.2}
.dio .pg__head{padding-bottom:0}
.dio .pg__back{height:60px;bottom:-15px}
.dio .pg__back svg{left:24px;top:21.5px}
.dio__grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:62px;padding:50px 0 100px;width:924px;max-width:100%;margin:0 auto;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .6s both}
.dio__loop{display:contents}
/* copyright line: the same as on Main story (pg__foot), with room below it for the fixed playlist bar, and it appears together with the grid */
.dio__foot{font-size:14px;padding:30px 0 50px;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .6s both}
@media (max-width:809.98px){.dio__foot{font-size:12px;padding:20px 0 40px}}
/* sticky footer: the page is at least as tall as the window and the copyright line sits at its very bottom (also when the content is short); on Dioramas the playlist note is part of the flow, right above it, so it never covers anything */
.ms{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column}
.ms>.pg{flex:1 0 auto}
.ms .pg__foot{margin-top:auto}
.dio{min-height:100vh;min-height:100dvh;padding-bottom:0;box-sizing:border-box;display:flex;flex-direction:column}
.dio .dio__grid{flex:none;padding-bottom:40px}
.dio .dio__tip{position:static;order:1;margin-top:auto;padding:0 15px 10px;background:none}
.dio .dio__foot{order:2}
/* the page is drawn edge to edge (viewport-fit=cover, see viewport-cover.js): where the browser reports safe areas (notch / status bar, home indicator) the content keeps out of them; the gradient pages (home, diorama) and the overlays are full-bleed on purpose */
html:not(:has(.home)):not(:has(.dd)) body{padding-top:env(safe-area-inset-top,0px)}
.home__foot{padding-bottom:10px}
.ct__foot{bottom:35px}
@media (max-width:809.98px){
  .ct__foot{bottom:38px}
  .dd__text{padding-top:calc(25px + env(safe-area-inset-top,0px))}
  .dd__back{top:calc(8px + env(safe-area-inset-top,0px))}
}
/* touch screens: the lightbox is truly full screen. No arrows (swipe / dots to move on), no outer padding, the picture frame is the whole screen and the picture is fitted inside it (contain).
   Dots and the close button sit on top of the picture, inside the safe areas, and stay visible (there is no mouse movement to show them). */
/* phone: the post's navigation (back to story / prev / next) is pinned to the bottom of the screen; whatever scrolls under it fades out through a gradient above it (the buttons keep the same alignment as the text column; empty parts of the bar let touches through) */
@media (max-width:809.98px){
  html .post__nav{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px max(19px,calc(50% - 176px)) 14px;background:var(--back,#0a0a0a);pointer-events:none}
  /* the soft edge above the bar is a layer of the page itself (body), not of the navigation: the navigation belongs to a post, and in a step between posts the old post (a fading copy) and the new one each carry their own,
     which then added up, dropped out or came back with a jolt. One layer above both pages (and the old text under it), under the bar's buttons, so it never changes while the pages are swapped. */
  html body:has(.post, .list-nav)::after{content:"";position:fixed;left:0;right:0;bottom:40px;height:44px;z-index:19;background:linear-gradient(to top,var(--back,#0a0a0a),rgba(var(--bd-bg-rgb),0));pointer-events:none}
  html .post__nav::before{display:none}
  /* the strip under the bar: some phone browsers (a floating toolbar at the bottom) draw the page a little lower than the bottom edge the bar is fixed to, and the picture showed through there. A solid layer of the page's own colour reaches below that edge (under the sheet and the bar's buttons, over the picture), so there is nothing to show through. */
  html body:has(.post, .list-nav)::before{content:"";position:fixed;left:0;right:0;bottom:-100px;height:140px;z-index:2;background:var(--back,#0a0a0a);pointer-events:none}
  /* the soft edge has no entrance of its own: it is on screen from the first frame of the page (it is translucent, so a fade would let the text under it show through while it comes in) */
  html .post__nav a{pointer-events:auto;position:relative}
  /* the same big touch areas as on "Back to menu": 24px above the words, the whole bar below them; sideways each button reaches only to its neighbour ("Back to story" 40px to the right and to the screen edge on the left, the last button to the screen edge on the right, next / prev 5px towards each other) */
  html .post__nav a::after{content:"";position:absolute;top:-24px;bottom:-14px;left:-5px;right:-5px}
  html .post__nav a.bd-pop::after{left:-19px;right:-40px}
  html .post__nav a:last-of-type::after{right:-19px}
  /* phone post: the page itself does not scroll. The picture stays where it is; the text part is a sheet (position set by a finger in JS, initSheet) that is pulled up over the picture and back down.
     Inside the open sheet a long text scrolls by itself. The soft top edge is a shadow (a pseudo-element above the box would be clipped by the sheet's own scrolling). */
  html:has(.post){overflow:hidden;overscroll-behavior:none}
  html body:has(.post){overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none}
  html .post{position:relative;height:100vh;height:100dvh;min-height:0;overflow:hidden}
  /* the fading old page (ghost) must stay out of the layout, fixed over the new one: `html .post` above would otherwise make it relative, push the new page 100dvh down for the whole slide, and the new page would then jump up when the ghost is removed */
  html .post.bd-ghost{position:fixed}
  /* a post that has slid in keeps its parts as they are: when the slide classes go, they must not fall back to the plain entrance animation (opacity 0 -> 1 with a delay = a blink). Less specific than the way-out animations of a ghost, so those still play. */
  html main.bd-settled :is(.post__media,.post__title,.post__desc,.post__meta){animation:none}
  html .post__media{position:relative;top:auto;z-index:1}
  /* (the sheet is moved with `top`, not a transform: a transformed box would become the containing block of the fixed navigation inside it and carry it away) */
  html .post__text{position:absolute;left:0;right:0;top:calc(100vh - 290px);top:calc(100dvh - 290px);width:auto;height:auto;max-height:calc(100vh - 70px + var(--sheet-raise,0px));max-height:calc(100dvh - 70px + var(--sheet-raise,0px));min-height:0;box-sizing:border-box;overflow-y:auto;margin-top:calc(var(--sheet-raise,0px) * -1);overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:var(--sheet-raise,0px) max(19px,calc(50% - 176px)) 86px;background:none;z-index:3}
  /* the sheet's background is a layer of the page, like the soft edge above it (both follow the sheet, take no touches and are animated in exactly the same way: one property, one curve), so the bar and its edge can never get out of step */
  /* the fade of the sheet's background is ease-in-out (smoothstep 3t^2 - 2t^3, as stops of a gradient: CSS gradients are linear between stops) over --sheet-fade (the title's height, set in JS) */
  html .post{--sheet-mask:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.028) calc(var(--sheet-fade,60px) * .1),rgba(0,0,0,.104) calc(var(--sheet-fade,60px) * .2),rgba(0,0,0,.216) calc(var(--sheet-fade,60px) * .3),rgba(0,0,0,.352) calc(var(--sheet-fade,60px) * .4),rgba(0,0,0,.5) calc(var(--sheet-fade,60px) * .5),rgba(0,0,0,.648) calc(var(--sheet-fade,60px) * .6),rgba(0,0,0,.784) calc(var(--sheet-fade,60px) * .7),rgba(0,0,0,.896) calc(var(--sheet-fade,60px) * .8),rgba(0,0,0,.972) calc(var(--sheet-fade,60px) * .9),#000 var(--sheet-fade,60px))}
  html .post::after{content:"";position:absolute;left:0;right:0;top:calc(var(--sheet-y,100dvh) - var(--sheet-raise,0px) - 45px);bottom:0;z-index:2;pointer-events:none;background:rgba(var(--bd-bg-rgb),.86);-webkit-mask-image:var(--sheet-mask);mask-image:var(--sheet-mask);transition:top var(--sheet-t,0s) cubic-bezier(.22,.8,.3,1)}
  /* the soft edge above the sheet (from transparent into the sheet's colour, 86%) is a layer of its own that follows the sheet (--sheet-y is set by the script) and takes no touches:
     the whole picture, down to the sheet, stays the picture's (carousel, sideways swipe) */
  html .post__text::-webkit-scrollbar{display:none}
  /* the gap between the description and the info rows is a fixed one (the spacer used to stretch to push the rows to the bottom of the tall sheet) */
  html .post__spacer{flex:0 0 28px}
  /* phone: the frame is the 3:4 area of the reference post (or taller for a taller picture); a wider picture / video stands in the middle of that area */
  html .mv:not(.is-lightbox) .mv__slide{align-items:center}
  /* a vertical video stays on the lower layer, under the sheet and its own controls, but fills the whole width of the screen (no side margins) and stands in the middle of the screen */
  html .mv.is-vertical:not(.is-lightbox):has(.mv__slide.is-on[data-kind="mux"],.mv__slide.is-on[data-kind="video"]) .mv__frame{position:fixed;left:0;top:0;bottom:0;width:100%;height:auto;max-width:none;max-height:none;margin:0;aspect-ratio:auto}
  /* a vertical video fills the whole screen, so the bottom of its frame is under the sheet: its dots stand just above the sheet's soft edge and follow the sheet up and down */
  html .mv.is-vertical:not(.is-lightbox):has(.mv__slide.is-on[data-kind="mux"],.mv__slide.is-on[data-kind="video"]) .mv__dots{bottom:calc(100dvh - var(--sheet-y,100dvh) + var(--sheet-raise,0px) + 57px);transition:bottom var(--sheet-t,0s) cubic-bezier(.22,.8,.3,1)}
  /* a step from one post to the next keeps the navigation in place: the fading old page (ghost) lies on top of the new one, so its sheet and bar must not paint a background, otherwise they cover the new buttons and uncover them again while fading (a blink) */
  /* (only once the cross-fade has actually started, t-out: while the new page is still being waited for, the old one must look exactly as it did, with its sheet and bar) */
  html .bd-ghost.t-out .post__text{background:transparent;box-shadow:none}
  html .bd-ghost.t-out .post__nav{background:transparent}
  html .bd-ghost.t-out .post__nav::before{display:none}
  /* a step by swipe is a short slide: the picture, title, description and info rows of the old post drift a little way in the direction of the swipe while fading out, and the new ones
     fade in from a little way on the other side and settle into place; the navigation (and the sheet's background) stays where it is */
  /* the old and the new post move as mirror images of each other: same moment, same time, same distance, same curve. The old one slides away and fades out,
     the new one slides in from the same distance on the other side and fades in, so one flows into the other (movement and opacity are separate animations) */
  @keyframes bd-sl-from-r{from{transform:translateX(44px)}to{transform:none}}
  @keyframes bd-sl-from-l{from{transform:translateX(-44px)}to{transform:none}}
  @keyframes bd-sl-in{from{opacity:0}to{opacity:1}}
  html.bd-slide-l main:not(.bd-ghost) :is(.post__media,.post__title,.post__desc,.post__meta){animation:bd-sl-from-r .5s ease-in-out both,bd-sl-in .5s ease-in-out both}
  html.bd-slide-r main:not(.bd-ghost) :is(.post__media,.post__title,.post__desc,.post__meta){animation:bd-sl-from-l .5s ease-in-out both,bd-sl-in .5s ease-in-out both}
  /* the picture / video (the media layer) does not move in a step between posts, it only fades; the text and the interface slide as above */
  html.bd-slide-l main:not(.bd-ghost) .post__media,html.bd-slide-r main:not(.bd-ghost) .post__media{animation:bd-sl-in .5s ease-in-out both}
  /* the way out is an animation too (a transition would be overridden by the old entrance animation, which holds the opacity at 1) */
  @keyframes bd-sl-out-l{from{transform:none}to{transform:translateX(-44px)}}
  @keyframes bd-sl-out-r{from{transform:none}to{transform:translateX(44px)}}
  @keyframes bd-sl-gone{from{opacity:1}to{opacity:0}}
  /* a navigation button that only the old post has (the swipe leads to the first / last post, which has no neighbour on that side) fades out with the old content instead of vanishing when the copy is removed */
  /* in a slide the old sheet's background does not vanish at once either: it fades out like its text (same time, same curve), so what lay under it is not laid bare in a flash */
  html .bd-ghost[class*="s-out-"].post::after{animation:bd-sl-gone .5s ease-in-out both}
  html .bd-ghost.t-out.post::after{display:none}
  /* the old and the new sheet lie on top of each other during a slide, and two translucent layers add up (0.86 over 0.86 is 0.98): the bar of the sheet and its soft edge would be darker than at rest for a moment, with a seam between them.
     So the new sheet (background and soft edge) comes in exactly as much as the old one goes out: with the old at 0.86 x (1 - p) the new one has 1 - 0.14 / (0.14 + 0.86 p), and the total stays 0.86 the whole way.
     p follows the old one's ease-in-out, so the key times below are the times at which that curve reaches p = 0, 0.05 ... 1 (linear between them); while the new page is still waited for, the new sheet is not there at all */
  @keyframes bd-sl-edge-in{0%{opacity:0}15.75%{opacity:.2732}22.07%{opacity:.4425}26.89%{opacity:.5576}30.98%{opacity:.641}34.62%{opacity:.7042}37.97%{opacity:.7538}41.12%{opacity:.7937}44.15%{opacity:.8264}47.09%{opacity:.8539}50%{opacity:.8772}52.91%{opacity:.8972}55.85%{opacity:.9146}58.88%{opacity:.9299}62.03%{opacity:.9434}65.38%{opacity:.9554}69.02%{opacity:.9662}73.11%{opacity:.9759}77.93%{opacity:.9847}84.25%{opacity:.9927}100%{opacity:1}}
  html.bd-slide.bd-wait main.post:not(.bd-ghost)::after{opacity:0}
  html.bd-slide:not(.bd-wait) main.post:not(.bd-ghost)::after{animation:bd-sl-edge-in .5s linear both}
  html.bd-swipe .post__nav a{transform:none!important;transition:none!important}
  /* the mask (solid bar + soft edge) belongs to the navigation and does not take part in the animation at all: in a slide the old bar keeps it unchanged until the old copy is removed,
     and the new bar underneath has the identical one, so nothing changes at that moment */
  html .bd-ghost[class*="s-out-"] .post__nav{background:rgb(var(--bd-bg-rgb))}
  /* (no soft edge on the old bar: the new page's bar lies above the ghost and has its own, so a second one over the same strip would add up and make it darker until the old copy is removed) */
  html .bd-ghost[class*="s-out-"] .post__nav::before{display:none}
  html .bd-ghost.s-out-l :is(.post__media,.post__title,.post__desc,.post__meta){animation:bd-sl-out-l .5s ease-in-out both,bd-sl-gone .5s ease-in-out both}
  html .bd-ghost.s-out-r :is(.post__media,.post__title,.post__desc,.post__meta){animation:bd-sl-out-r .5s ease-in-out both,bd-sl-gone .5s ease-in-out both}
  html .bd-ghost.s-out-l .post__media,html .bd-ghost.s-out-r .post__media{animation:bd-sl-gone .5s ease-in-out both}
  /* a vertical video's frame is fixed to the screen, and a transformed .post__media would become its containing block (the video vanished / jumped in a slide): so for these posts the movement is on the frame itself and the media layer only fades */
  html.bd-slide-l:not(.bd-wait) main:not(.bd-ghost) .post__media:has(.mv.is-vertical){animation:bd-sl-in .5s ease-in-out both}
  html.bd-slide-r:not(.bd-wait) main:not(.bd-ghost) .post__media:has(.mv.is-vertical){animation:bd-sl-in .5s ease-in-out both}
  html.bd-slide-l:not(.bd-wait) main:not(.bd-ghost) .mv.is-vertical .mv__frame{animation:none}
  html.bd-slide-r:not(.bd-wait) main:not(.bd-ghost) .mv.is-vertical .mv__frame{animation:none}
  html .bd-ghost[class*="s-out-"] .post__media:has(.mv.is-vertical){animation:bd-sl-gone .5s ease-in-out both}
  html .bd-ghost.s-out-l .mv.is-vertical .mv__frame{animation:none}
  html .bd-ghost.s-out-r .mv.is-vertical .mv__frame{animation:none}
}
/* touch screens: only the dark backdrop fades in / out, the picture itself is there at once (fading the whole viewer made the picture vanish from the page for a moment, which looked like a jolt) */
@keyframes mv-bg-in{from{background-color:rgba(0,0,0,0)}to{background-color:#000}}
@keyframes mv-bg-out{from{background-color:#000}to{background-color:rgba(0,0,0,0)}}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  html .mv.is-lightbox{animation:mv-bg-in .3s ease both}
  html .mv.is-lightbox.is-closing{animation:mv-bg-out .3s ease forwards}
}
@media (hover:none){
  /* touch screens, the lightbox is just the picture: opaque background, no buttons or dots (a tap closes it, a swipe changes the picture, the browser's own pinch zoom works; the page behind is locked in JS) */
  /* touch-action stays auto on purpose: zooming (double tap, pinch) is the browser's own, the script does none of it */
  html .mv.is-lightbox{padding:0;touch-action:auto;background:#000}
  /* the carousel works in the phone lightbox too: a sideways swipe changes the picture (native scroll-snap, the same as on the page) */
  html .mv.is-lightbox .mv__track{overflow-x:auto}
  /* a video without sound plays by itself and has no controls: it does not take the touches (so the swipe-away works on it as on a picture, and nothing pauses it by accident) */
  html .mv.is-lightbox .mv__slide[data-nc]>video,html .mv.is-lightbox .mv__slide[data-nc]>mux-player{pointer-events:none}
  html .mv.is-lightbox .mv__dots,html .mv.is-lightbox .mv__close,html .mv.is-lightbox .mv__arrow{display:none!important}
  html .mv.is-lightbox .mv__frame{width:100%;height:100%;max-width:none;max-height:none}
}
/* a post opened by a real load: the picture is invisible until it has loaded, then fades in (otherwise it popped in over the already visible frame) */
html.bd-hard .mv__slide>img{transition:opacity .6s ease}
html.bd-hard .mv__slide>img:not(.is-loaded){opacity:0}
/* the same for the thumbnails on the list: hidden until they have loaded, then they fade in */
html.bd-hard .card .thumb>img:not(.is-loaded),html.bd-hard .dio__item>.dio__img:not(.is-loaded){opacity:0}
html.bd-hard .card .thumb>img.is-loaded,html.bd-hard .dio__item>.dio__img.is-loaded{animation:bd-appear .5s ease backwards}
.dio__item{display:flex;flex-direction:column;align-items:center;gap:1px;width:343px;height:228px;padding:0 0 15px;background:radial-gradient(50% 50% at 50% 50%,rgb(33,55,255) 0%,rgba(0,25,255,0) 100%);transition:transform .2s cubic-bezier(0,0,.56,1)}
.dio__item:hover{transform:scale(1.1)}
.dio__img{width:100%;height:194px;object-fit:contain;display:block;margin-top:3px}
.dio__name{width:100%;text-align:center;font-size:14px;line-height:1;color:var(--grayish,#cfcfcf);padding-top:1px}
.dio__tip{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding:30px 15px;background:var(--back,#0a0a0a);color:var(--grayish,#cfcfcf);text-align:center;font-size:13px;line-height:1.4;animation:bd-appear 2s ease 1.6s both}
.dio__tip>div,.dio__tip p{width:405px;max-width:100%}
.dio__tip a{text-decoration:underline;color:inherit}
@media (max-width:1199.98px){
  .dio .pg{width:499px}
  .dio .pg__title{font-size:26px}
  .dio .pg__back{left:-45px;height:45px;bottom:0}
  .dio .pg__back svg{left:22px;top:23px;width:16px;height:16px}
  .dio__grid{width:520px;gap:47px}
  .dio__item{width:236px;height:175px;padding:0 0 21px}
  .dio__img{height:124px;margin-top:11px}
}
@media (max-width:809.98px){
  .dio .pg{width:390px}
  .dio .pg__title{font-size:22px}
  .dio .pg__back{left:10px;height:34px;bottom:-3px}
  .dio .pg__back svg{left:25px;top:12px;width:14px;height:14px}
  .dio .pg__head{min-height:65px;align-items:flex-end;padding-left:55px}
  .dio__grid{width:390px;flex-direction:column;align-items:center;gap:42px;padding-bottom:140px}
  .dio__item{width:263px;height:179px;padding:0 0 15px}
  .dio__img{height:130px;margin-top:0}
  .dio__tip{padding:20px 15px 30px}
  .dio__tip>div,.dio__tip p{width:224px}
}

/* =====================================================================
   DIORAMA DETAIL  (phone <810 · tablet 810-1199 · desktop >=1200)
   ===================================================================== */
.dd{position:relative;height:100vh;height:100dvh;overflow:hidden;background:linear-gradient(180deg,var(--blue-grad,#2200ff) -29%,#000 77%)}
.dd[data-back="golden grad"]{background:linear-gradient(180deg,rgb(242,175,58) -7%,#000 60%)}
.dd[data-back="solid red"]{background:rgb(255,0,0)}
.dd[data-back="no back"]{background:var(--back,#0a0a0a)}
.dd__embed{position:absolute;left:50%;top:50%;width:137%;height:100%;transform:translate(-50%,-50%);z-index:1}
.dd__embed iframe{width:100%;height:100%;border:0}
.dd__text{position:absolute;left:75px;top:31px;z-index:2;display:flex;flex-direction:column;max-width:80%}
.dd__title{font-size:30px;font-weight:700;line-height:1.4;color:#fff}
.dd__desc{display:none;font-size:16px;line-height:1.2;color:var(--invisible-gray,#383838)}/* old unused comment under the title: hidden (kept in the CMS) */
.dd__back{position:absolute;left:29px;top:24px;z-index:3;display:block;width:45px;height:60px}
.dd__back{color:#fff;display:none}
.dd__text{left:29px}
@media (max-width:809.98px){html .dd__text{left:0;padding-left:max(19px,calc(50% - 176px));padding-right:max(19px,calc(50% - 176px))}}
html:has(.dd),html:has(.dd) body{overflow:hidden;overscroll-behavior:none}
html:has(.post){overscroll-behavior:none}
.dd__nav{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:12px 29px calc(14px + env(safe-area-inset-bottom,0px)) 29px;background:transparent;pointer-events:none}
.dd__nav a{pointer-events:auto;position:relative}
.dd__nav a::after{content:"";position:absolute;top:-24px;bottom:-14px;left:-5px;right:-5px}
.dd__nav a.bd-pop::after{left:-19px;right:-40px}
.dd__nav a:last-of-type::after{right:-19px}
@media (max-width:809.98px){
  .dd{--bar:#000}
  .dd[data-back="no back"]{--bar:var(--back,#0a0a0a)}
  .dd[data-back="solid red"]{--bar:rgb(255,0,0)}
  html .dd__nav.post__nav{background:var(--bar);padding-bottom:14px}
  .dd::after{content:"";position:absolute;left:0;right:0;bottom:40px;height:44px;z-index:4;background:linear-gradient(to top,var(--bar),transparent);pointer-events:none}
}
.dd__back svg{position:absolute;left:23px;top:21.5px;width:17px;height:17px;display:block;shape-rendering:crispEdges}
@media (max-width:1199.98px){
  .dd__embed{width:148.4%}
  .dd__back{top:23px;height:49px}
  .dd__back svg{left:22px;top:22px;width:18px;height:18px}
}
@media (max-width:809.98px){
  .dd__embed{width:211.8%}
  .dd__text{left:0;right:0;top:0;padding:25px 30px 15px;max-width:100%}
  .dd__title{font-size:22px}
  .dd__desc{font-size:13px}
  .dd__back{left:-12px;top:8px;height:43px}
  .dd__back svg{left:23px;top:26px;width:14px;height:14px}
}

/* =====================================================================
   CONTACTS  (phone <680 · tablet 680-1199 · desktop 1200-1599 · big >=1600)
   ===================================================================== */
.ct{position:relative;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:80px 18px 100px;overflow:hidden}
.ct__in{display:flex;flex-direction:column;gap:36px;align-items:stretch;animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s both;z-index:1;width:420px;max-width:100%}
.ct__head{position:relative;display:flex;flex-direction:column;gap:9px}
.ct__h{font-size:28px;font-weight:700;line-height:1.2;color:#fff}
.ct__p{font-size:14px;line-height:1.4;color:var(--grayy,#a3a3a3);max-width:338px;padding-left:2px}
.ct__back{position:absolute;left:-32px;top:0;font-size:28px;font-weight:700;line-height:1.2;width:21px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff}
.ct__spline{position:absolute;right:-29px;top:-13px;width:129px;height:95px;overflow:hidden;z-index:1}
.ct__spline spline-viewer,.ct__spline iframe{position:absolute;left:-64px;top:-57px;width:250px;height:232px;display:block}
.ct__form{display:flex;flex-direction:column;gap:20px;width:100%}
.ct__f{display:flex;flex-direction:column;gap:10px}
.ct__f label{font-size:14px;line-height:1.4;color:var(--grayy,#a3a3a3)}
.ct__f input,.ct__f textarea{font-family:inherit;font-size:14px;color:#999;background:rgba(133,133,133,.15);border:1px solid rgba(136,136,136,.1);padding:12px;outline:0;width:100%;height:40px;line-height:1.2;border-radius:10px}
.ct__f input,.ct__f textarea{color-scheme:dark}
.ct__f input::placeholder,.ct__f textarea::placeholder{color:var(--invisible-gray,#383838)}
.ct__f input:-webkit-autofill,.ct__f input:-webkit-autofill:hover,.ct__f input:-webkit-autofill:focus,.ct__f textarea:-webkit-autofill{-webkit-text-fill-color:#999;caret-color:#999;-webkit-box-shadow:0 0 0 1000px #1c1c1c inset;box-shadow:0 0 0 1000px #1c1c1c inset;border-radius:10px;font-family:inherit;font-size:14px;transition:background-color 99999s ease-out 0s}
.ct__f input:focus,.ct__f textarea:focus{border-color:#09f}
.ct__f textarea{height:auto;min-height:100px;resize:none}
.ct__btn{height:40px;line-height:1.2;border-radius:10px;border:0;background:#333;color:#fff;font-family:inherit;font-size:14px;transition:background .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.ct__btn:hover{background:rgba(51,51,51,.85);transform:scale(1.024)}
.ct__btn:active{transform:scale(.976)}
.ct__btn:disabled{opacity:.6}
.ct__msg{font-size:13px;color:var(--grayish,#cfcfcf);min-height:1em}
.ct__foot{position:fixed;left:0;right:0;bottom:35px;width:756px;max-width:100%;margin:0 auto;text-align:center;font-size:11px;line-height:1.2;color:var(--invisible-gray,#383838);padding:0;pointer-events:none}
@media (max-width:1199.98px){.ct{padding-top:65px}}
@media (max-width:809.98px){
  .ct{display:block;padding:44px 30px 100px}
  .ct__in{width:100%;max-width:330px;margin:0 auto;gap:44px}
  .ct__head{gap:8px}
  .ct__h{font-size:22px;padding-left:30px}
  .ct__p{font-size:12px;max-width:232px}
  .ct__back{left:0;top:0;font-size:21px;width:21px;height:26px}
  .ct__f label{font-size:12px;line-height:1.4}
  .ct__spline{right:-29px;top:-5px}
  .ct__foot{width:340px;font-size:9px;bottom:38px}
}
@media (min-width:1600px){
  .ct__in{width:450px}
  .ct__spline{right:-20px}
}

/* =====================================================================
   POST DETAIL  (phone <900 · tablet 900-1199 · desktop 1200-1599 · big >=1600)
   ===================================================================== */
.post{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0 18px}
/* the post fades in part by part, so its own navigation (back to story / next / prev) can stay put when you step between posts */
.post__media,.post__title,.post__desc,.post__meta,.post__nav>*{animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s both}
/* (the navigation's own box, with its solid background, has no entrance: only its buttons fade in) */
html.bd-from-post .post__nav>*{animation:none}
html.bd-leave-post .post__media,html.bd-leave-post .post__title,html.bd-leave-post .post__desc,html.bd-leave-post .post__meta{opacity:0;animation:none;transition:opacity .3s ease}
body:has(.post){animation:none}
/* the parts of a post are separate animated layers; while the lightbox is open the media layer must sit above the text / navigation layers that follow it */
.post__media:has(.mv.is-lightbox),.post__media:has(.mv.is-flying){z-index:150}
/* dark backdrop that fades out on its own while the picture flies back from the full screen to its place on the page (touch screens) */
.mv__backdrop{position:fixed;inset:-100px 0;z-index:149;background:rgb(var(--bd-bg-rgb));pointer-events:none}
/* cross-fade between pages (soft navigation): the old page is kept on top as a fixed "ghost" that fades out while the new page fades in */
/* the fading old page lies over the new page's picture, but under the new page's sheet (z-index 3), which holds the navigation: the new bar and buttons are on top of it from the first frame */
.bd-ghost{position:fixed;margin:0;z-index:2;pointer-events:none;transition:opacity .4s ease-in-out}
.bd-ghost.t-out{opacity:0}
/* a ghost keeps whatever its parts were doing (e.g. buttons in the middle of fading in), so a quick next step does not make them jump to full opacity */
/* the new page waits invisible (and without its entrance animations, which start the moment it is shown) until its first picture / video is ready */
html.bd-wait main:not(.bd-ghost){pointer-events:none}
html.bd-wait main:not(.bd-ghost) .post__media,html.bd-wait main:not(.bd-ghost) .post__title,html.bd-wait main:not(.bd-ghost) .post__desc,html.bd-wait main:not(.bd-ghost) .post__meta,html.bd-wait main:not(.bd-ghost) .pg__head,html.bd-wait main:not(.bd-ghost) .chap,html.bd-wait main:not(.bd-ghost) .pg__foot,html.bd-wait:not(.bd-from-post) main:not(.bd-ghost) .post__nav>*{opacity:0;animation:none}
html.bd-xfade .post__media,html.bd-xfade .post__title,html.bd-xfade .post__desc,html.bd-xfade .post__meta,html.bd-xfade .pg__head,html.bd-xfade .chap,html.bd-xfade .pg__foot{animation:bd-appear .4s ease-in-out both}
html.bd-xfade:not(.bd-from-post) .post__nav>*{animation:bd-appear .4s ease-in-out both}
/* an info row that stays in place from one post to the next (see initSoftNav) does not fade in */
html.bd-xfade .post__meta.bd-keep{animation:none}
html.bd-xfade .post__meta.bd-keep-label{animation:none}
html.bd-xfade .post__meta.bd-keep-label>:not(:first-child){animation:bd-appear .4s ease-in-out both}
.post__in{display:flex;flex-direction:row;align-items:stretch;gap:12px;width:950px;max-width:100%;height:586px}
.post__media{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.post__text{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;width:317px;padding-bottom:10px}
.post__title{font-size:30px;font-weight:700;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.post__desc{font-size:14px;line-height:16px;color:var(--grayy,#a3a3a3);white-space:pre-line;width:326px;max-width:100%}
.post__spacer{flex:1 1 auto}
.post__meta{display:flex;gap:10px;font-size:14px;line-height:14px;color:var(--grayy,#a3a3a3);align-items:center;flex-wrap:wrap}
.post__meta a{display:inline-flex;gap:4px;align-items:center}
.post__meta a:hover{color:#fff}
/* the link arrow is the original Framer icon (Little-link-arrow-500xp): a 10x10 pixel arrow, drawn as a mask so it takes the link colour (and its hover) */
.post__meta a::after{content:"";flex:0 0 auto;width:10px;height:10px;background:currentColor;transform:translateY(-1px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 3L0 4L4 4L4 6L2 6L2 8L0 8L0 10L2 10L2 8L4 8L4 6L6 6L6 10L8 10L8 2L0 2Z'/%3E%3C/svg%3E") center/10px 10px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 3L0 4L4 4L4 6L2 6L2 8L0 8L0 10L2 10L2 8L4 8L4 6L6 6L6 10L8 10L8 2L0 2Z'/%3E%3C/svg%3E") center/10px 10px no-repeat}
/* music line: a title that fits stands still; one that does not scrolls in a seamless loop (two copies, the track moves by exactly one copy; speed is set from the text width in JS). The edges fade only while it scrolls. */
.post__music{position:relative;overflow:hidden;white-space:nowrap;flex:1;min-width:0}
.post__music.is-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.post__music-v{white-space:nowrap}
.post__music-i{display:inline-block;white-space:nowrap}
.post__music-tr{display:inline-flex;will-change:transform}
.post__music-tr .post__music-i{padding-right:48px}
.post__music-row{align-items:center}
.post__links{flex-wrap:wrap;gap:10px}
/* the "Token" row (zora / Foundation / Exchangeart / Instagram links) is switched off for now: to bring it back, delete this one rule */
.post__links{display:none!important}
.post__links a{color:var(--grayy,#a3a3a3)}
/* order of the text column, top to bottom: title, description, (free space), token, music, chapter, navigation */
.post__text>.post__title{order:1}
.post__text>.post__desc{order:2}
.post__text>.post__spacer{order:3}
.post__text>.post__links{order:4}
.post__text>.post__music-row{order:5}
.post__text>.post__meta:not(.post__links):not(.post__music-row){order:6}
.post__text>.post__nav{order:7}
.post__nav{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding-top:20px;font-size:14px;line-height:14px;color:var(--grayy,#a3a3a3)}
.post__nav a{color:#fff;font-weight:700}
/* next / prev keep their places: when there is no neighbouring post its button stays in the row, invisible and not clickable; the divider always stays */
.post__nav a.bd-hide{display:inline!important;visibility:hidden;pointer-events:none}
/* prev / next: same hover and tap as "back to story" (.bd-pop). Same font size, but the words are ~2.5x shorter (60px vs 147px), so the scale is raised to give the same growth in pixels */
.post__nav .nav-prev,.post__nav .nav-next{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.post__nav .nav-prev:hover,.post__nav .nav-next:hover{transform:scale(1.096)}
.post__nav .nav-prev:active,.post__nav .nav-next:active{transform:scale(.856)}
.post__nav a:hover{color:#fff}
.post__nav .sep{color:#fff;font-weight:700;margin:0 2px}
.post__nav .grow{flex:1}

/* media viewer: carousel (native scroll-snap). The frame takes the proportions of the first item (--mv-ar is measured in JS, the CMS ratio is only the start value);
   every slide fits its own picture / gif / video inside the frame (contain), spare space stays transparent. Dots sit below the frame. */
.mv{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}
/* stage: a 4:5 box (as in the original); vertical media fills its height, square / wide media fills its width */
.mv__frame{position:relative;height:100%;max-height:586px;aspect-ratio:4/5;max-width:100%}
.mv__track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline:0}
.mv__track::-webkit-scrollbar{display:none}
.mv__slide{position:relative;flex:0 0 100%;height:100%;min-width:0;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always}
.mv__slide[data-kind="image"],.mv__slide[data-nc]{cursor:pointer}
.mv__slide>img,.mv__slide>video{width:100%;height:100%;object-fit:contain;object-position:center;border:0;display:block;background:transparent}
.mv__slide>mux-player{--media-object-fit:contain;--media-object-position:center;--media-background-color:transparent;background:transparent}
.mv__dots{position:absolute;left:0;right:0;top:calc(100% + 14px);display:flex;gap:8px;justify-content:center;z-index:3}
/* the dots sit inside the picture area, near its bottom edge (in the lightbox they stay where they were) */
.mv:not(.is-lightbox) .mv__dots{top:auto;bottom:12px}
/* as in the original slideshow: 8px white dots, 10% opacity, the active one 30% */
.mv__dots i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.1;cursor:pointer;transition:opacity .25s;position:relative;-webkit-tap-highlight-color:transparent}
.mv__dots i::after{content:"";position:absolute;inset:-6px -3px}
.mv__dots i.is-on{opacity:.3}
/* the arrow is a tall 72px hit zone beside the frame; both arrows fade in and out together while the cursor is over the whole content container */
.mv__arrow{position:absolute;top:0;height:100%;width:72px;z-index:3;color:#545454;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease}
.mv:not(.is-lightbox):hover .mv__arrow,.mv__arrow:focus-visible{opacity:1}
@media (hover:none){.mv__arrow{display:none}}
.mv__arrow--l{left:-76px}.mv__arrow--r{right:-76px}
.mv__arrow svg{width:14px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
/* press: the chevron shrinks on tap and springs back on release (same spring as .bd-pop); the click zone itself stays put */
.mv__arrow:active svg{transform:scale(.84)}
.mv.is-lightbox{position:fixed;inset:0;z-index:150;overflow:hidden;background:rgba(0,0,0,.97);height:100%;padding:16px}
.mv.is-lightbox .mv__frame{height:calc(100% - 36px);width:min(calc(100% - 170px),1400px);aspect-ratio:auto;max-height:none;max-width:100%;margin:0}
.mv.is-lightbox .mv__slide{cursor:default}
/* lightbox: each arrow is a click zone beside the picture (--mv-pw = picture width, set by JS) */
.mv.is-lightbox .mv__arrow{--mv-zw:max(60px,min(max(60px,10.6vw),calc(50vw - var(--mv-pw,400px) / 2 - 8px)));position:fixed;top:0;bottom:0;height:auto;width:var(--mv-zw);cursor:pointer}
/* all in proportion to the window width, tuned on the biggest layout (a ~3200px window: chevron 188px = 5.9vw from the picture, zone 340px = 10.6vw): the zone is a strip next to the picture (it grows outwards, towards the screen edge; the chevron keeps its place) (full screen height), the chevron sits 180px from the zone's edge (never closer than 40px to its outer edge); everything beyond the strips, towards the screen edges, closes the lightbox */
.mv.is-lightbox .mv__arrow--l{left:auto;right:calc(50vw + var(--mv-pw,400px) / 2 + 8px);justify-content:flex-end;padding-right:min(5.6vw,calc(var(--mv-zw) - 30px))}
.mv.is-lightbox .mv__arrow--r{right:auto;left:calc(50vw + var(--mv-pw,400px) / 2 + 8px);justify-content:flex-start;padding-left:min(5.6vw,calc(var(--mv-zw) - 30px))}
/* lightbox: double click zooms the picture x2; JS moves it with the cursor (translate), a click zooms back out */
/* while a picture is zoomed the interface (dots, arrows, close) stays hidden, even when the mouse moves */
.mv.is-lightbox.is-zooming .mv__dots,.mv.is-lightbox.is-zooming .mv__arrow,.mv.is-lightbox.is-zooming .mv__close{opacity:0!important;pointer-events:none!important;transition:opacity .25s ease}
.mv__zoomer{position:absolute;inset:0;z-index:2;overflow:hidden;cursor:pointer;touch-action:none;user-select:none}
.mv__zoomer.is-out{pointer-events:none}
.mv__zoomer img{cursor:pointer;position:absolute;display:block;max-width:none;transform-origin:0 0;will-change:transform;transition:transform .25s cubic-bezier(.22,.8,.3,1)}
/* lightbox fades in and out */
@keyframes mv-in{from{opacity:0}to{opacity:1}}
@keyframes mv-out{from{opacity:1}to{opacity:0}}
.mv.is-lightbox{animation:mv-in .55s ease both}
.mv.is-lightbox.is-closing{animation:mv-out .3s ease forwards;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mv.is-lightbox,.mv.is-lightbox.is-closing{animation:none}}
/* lightbox: dots, arrows and the close button appear only while the mouse is moving (anywhere), then fade out */
.mv.is-lightbox .mv__dots,.mv.is-lightbox .mv__arrow,.mv.is-lightbox .mv__close{opacity:0;transition:opacity .6s ease}
.mv.is-lightbox.ui-on .mv__dots,.mv.is-lightbox.ui-on .mv__close,.mv.is-lightbox.ui-on .mv__arrow{opacity:1;transition:opacity .2s ease}
.mv__close{display:none;position:absolute;right:16px;top:12px;z-index:5;font-size:22px;color:#fff;padding:6px 10px}
.mv.is-lightbox .mv__close{display:block}
/* the player's own buttons for a vertical video (sound, full screen): top right of the picture, a column of two round buttons; videos without a sound track have none */
.mv__pc{display:none;position:absolute;top:calc(max(var(--pc-t,0px),env(safe-area-inset-top,0px)) + 8px);right:calc(var(--pc-r,0px) + 8px);z-index:4;flex-direction:column;gap:2px}
.mv.is-vertical .mv__slide:not([data-nc]) .mv__pc{display:flex}
.mv__pcb{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .2s}
.mv__pcb:active{transform:scale(.9)}
.mv__pcb + .mv__pcb{margin-top:0}
/* no background: a light shadow round the icon keeps it readable over a bright picture */
.mv__pcb svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.275)) drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.mv__slide:not(.is-muted) .i-mut,.mv__slide.is-muted .i-snd{display:none}
/* full screen: the full-screen button shows "leave" while the slide is full screen; the slide itself keeps the page's colour behind the picture */
.mv__pcb .i-fsx{display:none}
.mv__slide.is-fs .i-fs{display:none}
.mv__slide.is-fs .i-fsx{display:block}
.mv__slide:fullscreen{background:var(--back,#0a0a0a)}
.mv__slide:-webkit-full-screen{background:var(--back,#0a0a0a)}
/* in full screen the player's buttons and the play / pause mark are bigger (the buttons 56px with a 34px icon instead of 40 / 24, the mark 92px instead of 64) and stand 16px from the picture's edges */
.mv__slide.is-fs .mv__pc{top:calc(max(var(--pc-t,0px),env(safe-area-inset-top,0px)) + 16px);right:calc(var(--pc-r,0px) + 16px)}
@media (hover:hover){.mv__slide.is-fs .mv__pc{top:auto;bottom:calc(var(--pc-t,0px) + 16px)}}
.mv__slide.is-fs .mv__pcb{width:56px;height:56px}
.mv__slide.is-fs .mv__pcb svg{width:34px;height:34px}
.mv__slide.is-fs .mv__pp{width:92px;height:92px;margin:-46px 0 0 -46px}
.mv__slide.is-fs .mv__pp svg{width:86px;height:86px;left:3px;top:3px}
/* the mark of a paused vertical video (a tap on the video pauses / plays it): a round play button in the middle of the picture, it takes no touches */
.mv__pp{display:none;position:absolute;left:50%;top:calc(var(--pc-t,0px) + (100% - 2 * var(--pc-t,0px)) * .5);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:none;color:#fff;align-items:center;justify-content:center;pointer-events:none;z-index:4}
.mv__pp svg{position:absolute;left:2px;top:2px;width:60px;height:60px;display:block;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.275)) drop-shadow(0 1px 2px rgba(0,0,0,.15))}
/* the mark is always laid out (for these videos) and only fades in and out, instead of switching on and off */
.mv.is-vertical .mv__slide:not([data-nc]) .mv__pp{display:flex;opacity:0;transition:opacity .3s ease}
.mv.is-vertical .mv__slide.is-paused:not([data-nc]) .mv__pp{opacity:1}
/* the play and pause icons lie on top of each other and cross-fade */
.mv__pp .i-pause{opacity:0}
/* in the middle of the picture; on a phone a little above the middle (43.3% of the picture's height from its top) */
@media (max-width:809.98px){.mv__pp{top:calc(var(--pc-t,0px) + (100% - 2 * var(--pc-t,0px)) * .4333)}}
/* with a mouse (a computer): the buttons are in the bottom right corner of the picture, sound above, full screen below it, the same 8px from the edges (on a phone they stay at the top) */
@media (hover:hover){
  .mv__pc{top:auto;bottom:calc(var(--pc-t,0px) + 8px);flex-direction:column-reverse}
  .mv.is-lightbox .mv__pc{top:auto}
}
/* with a mouse: the player's buttons show only while the cursor is over the video, grow a little under the cursor (the same spring as the other buttons of the site) and shrink when pressed;
   the paused mark is a button too: the same cursor, the same grow / press */
@media (hover:hover){
  .mv__pc{opacity:0;transition:opacity .3s ease}
  .mv__slide:has(mux-player:hover,video:hover,.mv__pc:hover,.mv__pp:hover) .mv__pc{opacity:1}
  .mv__pcb:hover{transform:scale(1.12)}
  .mv__pp{cursor:pointer}
  .mv__slide.is-paused .mv__pp{pointer-events:auto}
  /* while the video plays, the same mark shows a pause icon, but only while the cursor is over the video (or over the mark / the buttons) */
  .mv__slide:not(.is-paused) .mv__pp .i-play{opacity:0}
  .mv__slide:not(.is-paused) .mv__pp .i-pause{opacity:1}
  .mv.is-vertical .mv__slide:not([data-nc]):not(.is-paused):has(mux-player:hover,video:hover,.mv__pp:hover,.mv__pc:hover) .mv__pp{opacity:1;pointer-events:auto}
  .mv__pp svg{transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
  .mv__pp:hover svg{transform:scale(1.12)}
  .mv__pp:active svg{transform:scale(.9)}
}

@media (max-width:1199.98px){
  .post__in{width:889px;height:496px;gap:10px}
  .post__media{flex:0 0 511px;overflow:visible}
  .mv__frame{height:670px;max-height:none;margin-left:50px;max-width:calc(100% - 50px)}
}
@media (max-width:809.98px){
  .post{align-items:flex-start;padding:10px 0 0}
  .post__in{flex-direction:column;width:363px;height:auto;gap:18px}
  .post__media{flex:0 0 auto;width:100%;overflow:visible}
  .mv{height:auto}
  /* phone: the picture frame is exactly as wide as the text column below it (the text has 5px of inner padding on each side) */
  .mv__frame{height:auto;width:calc(100% - 10px);max-width:none;max-height:none;margin:0 5px;aspect-ratio:var(--mv-far,.75)}
  .post__text{width:100%;padding:0 5px 50px}
  .post__title{font-size:30px}
}
@media (min-width:1600px){
  .post__in{width:1019px;height:730px;gap:233px}
  .post__media{flex:0 0 469px;overflow:visible}
  .mv__frame{max-height:730px;max-width:none}
}

/* =====================================================================
   404  (phone <810 · tablet 810-1199 · desktop >=1200)
   ===================================================================== */
.nf{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 0 100px;overflow:hidden}
.nf__code{font-size:524px;line-height:1;color:#fff;font-weight:400}
.nf__txt{font-size:26px;line-height:1.2;color:var(--grayish,#cfcfcf);width:410px;max-width:100%}
.nf__txt a{text-decoration:underline;color:var(--grayish,#cfcfcf)}
@media (max-width:1199.98px){.nf__code{font-size:311px}}
@media (max-width:809.98px){.nf__code{font-size:164px}.nf__txt{font-size:20px}}

/* the site's pixel font: the same two faces as the framework's, but with font-display:block (the text waits for the font, up to 3s, instead of showing in a fallback font first and then jumping); the files are also preloaded at the very start of the page (see viewport-cover.js) */
@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:block;src:url("/uploads/fonts/silkscreen/400-latin-0.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Silkscreen;font-style:normal;font-weight:700;font-display:block;src:url("/uploads/fonts/silkscreen/700-latin-0.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =====================================================================
   MAIN STORY / DIORAMAS on a phone: the arrow in the header is gone, a bottom bar "Back to menu" (the same bar as the posts' navigation) takes its place
   ===================================================================== */
.list-nav{display:none}
/* ---------- MAIN STORY TIMELINE: all the posts of all the chapters stand in one line (.tl__strip, scrolled by a finger / the slider); the chapter's heading rides with its posts and is pushed out by the next one's; under the slider is the text of the chapter in view ---------- */
html{--gx:29px}
/* touch screens (phones and tablets without a hovering pointer): no press / hover animation of a post tile and no animated preview; a narrow desktop window keeps both */
@media (hover:none){
  html .card,html .card:hover,html .card:active{transform:none;opacity:1;transition:none}
  html .card .thumb__gif,html .card:hover .thumb__gif.is-ready{display:none}
  html .card:hover .thumb:has(.thumb__gif.is-ready)>img{opacity:1}
}
.chap__wip{display:none}

.tl__et{display:none}
.tl__he{grid-column:1/-1;grid-row:2;margin-top:2px;font-size:20px;line-height:1.2;color:var(--grayy,#a3a3a3);font-weight:400;min-height:1.2em}
@media (max-width:1199.98px){.tl__he{font-size:18px}}
@media (max-width:809.98px){.tl__he{font-size:16px}}

/* nothing on the site can be selected (also while a slider or a tile is dragged); only the fields of the contact form keep their normal selection */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
::selection{background:transparent}
input::selection,textarea::selection{background:rgba(255,255,255,.28)}
@media (max-width:809.98px){html{--gx:max(19px,calc(50% - 176px))}}
.ms .pg__back{display:none}
html .ms .pg{width:100%;max-width:none}
html .ms .pg__head{padding:0 var(--gx)}
html .ms .chap{margin-left:var(--gx);margin-right:var(--gx);max-width:756px}
html .ms .pg__title{padding-left:0}
html .ms{padding-bottom:40px}
html .ms .pg__foot{width:auto;max-width:none;align-self:stretch}
.ms .chap__text{display:none}
/* a white (monochrome) glow comes out of every post's tile itself and breathes; the tiles breathe out of step, so the light seems to move along the line (the strip has room above and below for it) */
.tl{--th:clamp(200px,34dvh,420px);animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .6s both}
.tl__strip{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:16px var(--gx) 12px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tl__strip::-webkit-scrollbar{display:none}
.tl__strip::after{content:"";flex:none;width:var(--endpad,1px)}
@media (hover:hover){.tl__strip{cursor:grab}.tl__strip.is-drag,.tl__strip.is-drag .card{cursor:grabbing}}
/* a switch of the view: the page parts that are not tiles fade in at once (their usual entrance has a long delay), the tiles fly (script) */
.ms.is-morph .tl,.ms.is-morph .chap{animation:none}
.ms.is-morph .chap__head{animation:none}
.ms.is-morph .tl__bar,.ms.is-morph .tl__text{animation:bd-appear .4s ease-in-out both}
.ms.is-morph{overflow-x:clip}
.tl__grp{flex:none;display:flex;flex-direction:column}
.tl__grp+.tl__grp{margin-left:64px}
.tl__row{display:flex;gap:36px}
.tl__ep{display:flex;gap:8px;flex:none}
.tl__et{color:#fff;font-weight:700;margin-bottom:.6em}
.tl__notch.tl__notch--ep{height:8px;margin-top:-4px;background:#666}
html .tl .card{flex:none;width:auto}
html .tl .thumb{width:auto;height:var(--th)}
html .tl .thumb>img{width:auto;height:100%;max-width:none;object-fit:fill}
html .ms.is-tl .pg__foot{display:none}
html .tl__grp>.chap__head{position:sticky;left:0;z-index:1;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;width:max-content;height:auto;min-height:44px;margin-bottom:10px;column-gap:10px;white-space:nowrap}
.tl__grp .chap__title{grid-column:1;grid-row:1}
.tl__grp .chap__info{display:none}
html .tl__grp>.chap__head{left:var(--stl,0px)}
.tl__grp .tl__he{display:none}
.tl__hc,.tl>.tl__he,.tl__hdd{display:none!important}
html .tl__ep{display:flex;flex-direction:column;gap:0;flex:none;min-width:var(--labw,0px)}
html .tl__grp>.chap__head{left:var(--stl,0px)}
.tl__er{display:flex;gap:8px}
.tl__lab{position:sticky;left:var(--stl,0px);width:var(--labw,320px);margin-top:12px;font-size:20px;line-height:1.3;color:var(--grayy,#a3a3a3)}
.tl__ld{margin-top:6px}
@media (max-width:1199.98px){.tl__lab{font-size:18px}}
@media (max-width:809.98px){.tl__lab{font-size:16px}}
.ms.is-morph .tl__lab{animation:bd-appear .4s ease-in-out both}
.tl__hd{position:absolute;left:var(--gx);right:var(--gx);top:16px;height:0;margin:0;pointer-events:none}
.tl__hc{font-size:20px;line-height:1.2;color:var(--grayy,#a3a3a3)}
.tl__hc,.tl__hd .tl__he{display:flex;white-space:pre}

.tl>.tl__he{display:flex;white-space:pre;margin:12px var(--gx) 0}
.tl__hdd{display:flex;flex-direction:column;margin:6px var(--gx) 0;font-size:20px;line-height:1.3;color:var(--grayy,#a3a3a3);padding-right:calc(var(--gx) + 8px);max-width:560px}
@media (max-width:1199.98px){.tl__hdd{font-size:18px}}
@media (max-width:809.98px){.tl__hdd{font-size:16px}}

.tl__hdd .tl__sw>i{white-space:normal}
.tl__text{display:none}
.tl__hc,.tl>.tl__he,.tl__hdd{overflow:hidden}
.tl__sw{display:inline-grid}
.tl__hdd .tl__sw{display:grid}
.tl__sw>i{grid-area:1/1;font-style:normal;white-space:nowrap}
@media (max-width:1199.98px){.tl__hc{font-size:18px}}
@media (max-width:809.98px){.tl__hc{font-size:16px}}
.tl{position:relative}
.tl__info{position:absolute;right:0;top:0;z-index:3;pointer-events:auto;height:1.2em;line-height:1.2;align-items:center}
.tl__grp .chap__wip{grid-column:1/-1;grid-row:2}
.tl__bar{position:fixed;left:var(--gx);right:var(--gx);bottom:64px;height:56px;z-index:21;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.tl__bar{visibility:hidden;pointer-events:none}
.tl__bar::before{content:"";position:absolute;inset:0 -19px}
.tl__line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#3a3a3a}
.tl__notch{position:absolute;top:50%;width:2px;height:14px;margin:-7px 0 0 -1px;background:#a3a3a3}
.tl__thumb{position:absolute;left:0;top:50%;width:12px;height:24px;margin-top:-12px;background:#fff;cursor:grab;outline:0}
.tl__thumb:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tl__thumb::after{content:"";position:absolute;inset:-8px -14px}
.tl__text{position:relative;margin:14px var(--gx) 0;max-width:560px;font-size:14px;line-height:1.45;color:var(--grayy,#a3a3a3)}
.tl__t{display:none}
.tl__t.is-on{display:block;animation:bd-appear .4s ease-in-out both}
.tl__t p+p{margin-top:.8em}
html:has(.ms, .dio, .ct) .list-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px var(--gx) 14px;font-size:14px;line-height:14px;pointer-events:none}
html:has(.ms, .dio, .ct) .list-view{position:relative;margin-left:auto;padding:0;border:0;background:none;color:#fff;font:inherit;font-weight:700;letter-spacing:inherit;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
html:has(.ms, .dio, .ct) .list-view{display:inline-flex;align-items:center;justify-content:center;gap:7px}
@media (min-width:810px){html:has(.ms, .dio, .ct) .list-view{flex-direction:row-reverse}}
html:has(.ms, .dio, .ct) .list-view span{display:none}
/* Main Story, discs view expected: the grid is not shown while the discs are loading (class set by viewport-cover.js / bullydee.js) */
html:not(.bd-dd-off) main.dio:not(.is-dd):not(.bd-ghost) .dio__grid{visibility:hidden}
html.bd-pre-dv .ms:not(.is-dv) .chap,html.bd-pre-dv .ms:not(.is-dv) .pg__foot,html.bd-pre-dv .ms:not(.is-dv) .tl{visibility:hidden}
/* computer: the icon alone is ~10x narrower than "Back to menu", so its scale is raised to give about the same growth in pixels on hover and the same shrink on tap */
@media (min-width:810px){html:has(.ms, .dio, .ct) .list-view.bd-pop:hover{transform:scale(1.32)}html:has(.ms, .dio, .ct) .list-view.bd-pop:active{transform:scale(.72)}}
html:has(.ms, .dio, .ct) .list-view svg{display:block;flex:none;width:14px;height:14px;shape-rendering:crispEdges}
html:has(.ms, .dio, .ct) .list-view::after{content:"";position:absolute;left:-64px;right:-19px;top:-24px;bottom:-14px}
html:has(.ms, .dio, .ct) .list-nav a{position:relative;color:#fff;font-weight:700;pointer-events:auto}
html:has(.ms, .dio, .ct) .list-nav a::after{content:"";position:absolute;left:-19px;right:-64px;top:-24px;bottom:-14px}
@media (max-width:809.98px){
  .ms .pg__back,.dio .pg__back{display:none}
  .ms .pg__title{padding-left:0}
  .dio .pg__head{padding-left:max(19px,calc(50% - 176px))}
  .list-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px max(19px,calc(50% - 176px)) 14px;background:var(--back,#0a0a0a);font-size:14px;line-height:14px;pointer-events:none;
    /* the bar's own colour continues far below it (a shadow grown by 60px and moved 60px down: from the bar's top edge to 120px under its bottom edge), so whatever lies lower on the page, under a browser's floating toolbar, is covered */
    box-shadow:0 60px 0 60px var(--back,#0a0a0a)}
  .list-nav a{position:relative;color:#fff;font-weight:700;pointer-events:auto}
  /* a much bigger touch area than the words themselves: 24px above (12px over the bar's top edge), the whole bar below, 19px to the left (to the screen edge) and 64px to the right */
  .list-nav a::after{content:"";position:absolute;left:-19px;right:-64px;top:-24px;bottom:-14px}
  /* the page itself does not scroll (as on the posts): the list scrolls inside its own box, which ends at the bottom edge of the visible page, so nothing of it can show under a browser's floating bottom toolbar; the bar stands on top of that edge */
  html:has(.list-nav){overflow:hidden;overscroll-behavior:none}
  html body:has(.list-nav){height:100vh;height:100dvh;box-sizing:border-box;overflow:hidden;overscroll-behavior:none}
  /* the scrolling box is fixed to the same edges as the bar (not sized by the page's height): some phone browsers let the page run on under their floating toolbar, while everything that is fixed ends above it, and a box sized by the page would still show under the toolbar */
  .ms,.dio{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);bottom:0;width:auto;height:auto;min-height:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:40px}
  .ms::-webkit-scrollbar,.dio::-webkit-scrollbar{display:none}
}
/* the moving preview of a tile fills the square tile of the grid (like the still picture does) */
html .ms:not(.is-tl) .thumb__gif img{object-fit:cover!important}
/* hover on a computer in the grid: the tiles touch each other, so the tile itself does not grow; its picture grows inside the tile's frame instead */
@media (hover:hover){
  html .ms:not(.is-tl) .card:hover{transform:scale(1.035);z-index:2}
  html .ms:not(.is-tl) .card:active{transform:scale(.95)}
}
/* the picture of a grid tile is laid over the whole tile (not sized by a percentage of the tile's automatic height, which some browsers leave short for square pictures): it always fills it, the rest is cropped */
html .chap__loop .card .thumb{position:relative;overflow:hidden}
html .chap__loop .card .thumb>img{position:absolute;left:0;top:0;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover}
/* composition of a tile: the focus point and zoom come per post from thumb-focus.js */
html .ms:not(.is-tl) .thumb{overflow:hidden}
html .ms:not(.is-tl) .thumb>img{object-position:var(--fx,50%) var(--fy,50%);transform-origin:50% 50%;transform:translateX(var(--fdx,0px)) scale(var(--fs,1))}
/* page titles and chapter titles on a computer follow the post text: titles 38 px (47 from 1600), chapter titles 18 px (22 from 1600); the middle line of the three page titles stays at about 70.5 px from the top, as it was */
@media (min-width:810px){
  html .ms .pg__title,html .dio .pg__title,html .ct__h{font-size:38px}
  html .pg__head{min-height:77px}
  html .dio .pg__title{top:-3.8px}
  html main.ct{padding-top:27.7px}
  html .ms .pg__back svg{top:10px}
  html .chap__title,html .tl__hc{font-size:18px}
}
@media (min-width:1600px){
  html .ms .pg__title,html .dio .pg__title,html .ct__h{font-size:47px}
  html .pg__head{min-height:83px}
  html .dio .pg__title{top:-4.7px}
  html main.ct{padding-top:22.3px}
  html .ms .pg__back svg{top:4px}
  html .chap__title,html .tl__hc{font-size:22px}
  html .chap__info{font-size:22px}
}
/* post text on a computer: all text of the post scales with the bigger navigation (14 -> 18 px, 22 px from 1600) */
@media (min-width:810px){
  html .post__text{gap:13px}
  html .post__title{font-size:38px}
  html .post__desc{font-size:18px;line-height:21px;width:100%}
  html .post__meta{font-size:18px;line-height:18px;gap:13px}
  html .post__meta a::after{width:13px;height:13px}
}
@media (min-width:1600px){
  html .post__text{gap:16px}
  html .post__title{font-size:47px}
  html .post__desc{font-size:22px;line-height:25px}
  html .post__meta{font-size:22px;line-height:22px;gap:16px}
  html .post__meta a::after{width:16px;height:16px}
}
/* post description: the episode line comes first, the chapter line under it */
.post__text > .post__meta:not(.post__links):not(.post__music-row):not(.post__episode-row){order:7}
html .post__text > .post__nav{order:8}
/* home: a still picture instead of the 3D scene and the blue gradient (a placeholder until the animation comes) */
.home{background:#000!important}
/* the picture is its own layer: it fades in once it is loaded (.is-hero is set by the script), and fades out when the page is left */
.home::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hero-poster,url(/uploads/lQk38jnx7omSKrysKyAw--home-placeholder-compressed_2.webp)) 50% 50%/cover no-repeat;opacity:0;transition:opacity 1.2s ease}
.home.is-hero::before{opacity:1}
/* the background video of the home page: the intro plays once, then the loop; both are cut pictures of the render (see the script) */
.home__vid{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000;pointer-events:none}
.home.no-vid .home__vid{display:none}
.home__vid.is-fade{animation:bd-appear .6s ease both}
.home__vid video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:#000}
.home__vid video.is-off{opacity:0;transition:opacity .25s ease}
/* the phone picture (the version with the face to the right): a little bigger and a little further right */
.home__vid.is-side video{transform:translateY(-3%) translateX(2%) scale(1.26)}
/* laptop screens (1200-1599 px wide, landscape): the video is bigger than on the biggest screen (1600+), where it stays as it was */
@media (min-width:1200px) and (max-width:1599.98px) and (min-aspect-ratio:1/1){.home__vid video,.home::before{transform:scale(1.12);transform-origin:50% 50%}}
/* the menu and the buttons wait for the intro: they come when the girl has raised her head (the script sets .is-ui) */
html .home .home__menu,html .home .home__foot{animation:none;opacity:0;pointer-events:none;transition:opacity .6s ease}
html .home.is-ui .home__menu,html .home.is-ui .home__foot{opacity:1;pointer-events:auto}
/* THE BACKGROUND OF THE PAGES is pure black, as on the home page. The old colour (#0a0a0a) is kept here: to go back, set --back: var(--back-old) and --bd-bg-rgb: var(--bd-bg-rgb-old) (the 3D scene of the discs also paints its own black: DISCS_BG in discs.js, and the swipe-to-close backdrop of the viewer in bullydee.js) */
:root{--back-old:hsla(0,0%,3.92%,1);--bd-bg-rgb-old:10,10,10;--back:#000;--bd-bg-rgb:0,0,0}
/* smooth change of the page colour (only needed while some pages have another shade; it made the first paint blink on some browsers, so it is off): @property --back{syntax:"<color>";inherits:true;initial-value:#000} @property --bd-bg-rgb{syntax:"<number>#";inherits:true;initial-value:0,0,0} html{transition:--back .6s ease,--bd-bg-rgb .6s ease} */
/* old post colour (rollback): html:has(main.post){--back:var(--back-old);--bd-bg-rgb:var(--bd-bg-rgb-old)} */
.ms.is-dv .pg__title{transition:opacity .3s ease}
/* the home page does not scroll at all (also not the rubber-band pull on a phone): the page is pinned to the screen */
html:has(.home),html:has(.home) body{overflow:hidden;overscroll-behavior:none}
html:has(.home) body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%}
/* the version number lives inside the About window now: the "about" button stays at the right corner on its own */
html .home .home__foot button{margin-left:auto}
/* computer screens (1200 px and wider): the page's title and the bottom bar stand in the corners of the screen (Main Story, Dioramas), at --cx from the edges, not in a centred column */
@media (min-width:810px){
  html{--cx:clamp(25px,2.2vw,50px)}
  html:has(.ms) nav.list-nav,html:has(.dio) nav.list-nav{padding-left:var(--cx);padding-right:var(--cx)}
  html .ms.is-dv .pg__head{padding-left:var(--cx);padding-right:var(--cx)}
  html .dio .pg{width:100%;align-self:stretch;max-width:none;padding-left:var(--cx);padding-right:var(--cx);box-sizing:border-box}
  /* the bar (Back to menu, view button) moves from the bottom to the top right corner, on the line of the title's middle (about 50 px from the top) */
  html:has(.ms, .dio, .ct) nav.list-nav{top:0;bottom:auto;justify-content:flex-end;gap:44px;padding-top:calc(50px - .5em);padding-bottom:0;padding-left:var(--cx);padding-right:var(--cx)}
  /* order in the top right corner: the view button first, "Back to menu" last (at the very corner) */
  html:has(.ms, .dio, .ct) nav.list-nav>a:first-child{order:2;margin-left:44px;margin-right:0}
  html:has(.ms, .dio, .ct) nav.list-nav>.list-view{order:1;margin-left:auto;margin-right:0}
  html:has(.dio, .ct) nav.list-nav>a:first-child{margin-left:auto}
  /* computer: the view button stands closer to "Back to menu" (gap 44px -> 40px) */
  html:has(.ms) nav.list-nav>a:first-child{margin-left:-4px}
  html:has(.dio, .ct) nav.list-nav>a:first-child{margin-left:auto}
  html body:has(.list-nav)::before,html body:has(.list-nav)::after{display:none}
  html .ms:not(.is-dv):not(.is-tl) .pg>.pg__head{margin-left:calc(var(--cx) - (100vw - var(--dcol)) / 2);margin-right:calc(var(--cx) - (100vw - var(--dcol)) / 2);padding-left:0;padding-right:0}
}
/* the home logo stands a little lower (8 px) than its place in the menu; the menu itself does not move */
html .home .home__logo{position:relative;top:8px;width:300px;height:82px}
@media (max-width:809.98px){html .home .home__logo{width:259px;height:70px}html .home .home__list{position:relative;top:10px}}
@media (min-width:1600px){html .home .home__logo{width:442px;height:120px}}
.mv__slide>img{transition:opacity .6s ease}
.mv__slide>img:not(.is-in){opacity:0}
/* one timing for the interface of every page: 1 s, the site's easing, starting .2 s after the page's content is ready */
.list-nav{animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s backwards}
.ct__foot{animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s both}
html:has(main.dio:not(.bd-ghost)) :is(.pg__head,.list-nav){animation:bd-appear 1s cubic-bezier(.44,0,.56,1) var(--dio-ui-delay,3s) backwards}
html.bd-dio-ui:has(main.dio:not(.bd-ghost)) :is(.pg__head,.list-nav){animation:none;opacity:0}
main.dd .dd__embed{animation:bd-appear 1s cubic-bezier(.44,0,.56,1) .2s both}
main.dd .dd__text,main.dd .dd__back,main.dd .post__nav>*{animation:bd-appear 1s cubic-bezier(.44,0,.56,1) var(--dd-ui-delay,1.2s) both}
html.bd-dd-in main.dd:not(.bd-ghost) .dd__embed{animation:none;opacity:0}
html.bd-dd-ui main.dd:not(.bd-ghost) :is(.dd__text,.dd__back,.post__nav>*){animation:none;opacity:0}
html .post__nav a.is-off,html .post__nav a.is-off:hover,html .post__nav a.is-off:active{color:#555;transform:none;pointer-events:none;cursor:default;text-shadow:none}
html.bd-dv-reading .ms.is-dv .pg__title{opacity:.18}
/* the menu is kept readable by shadows of the buttons themselves (the same soft shadow as the bottom bars of the other pages), not by a darkening of the whole block */
html .home .home__link,html .home .home__foot,html .home .home__foot button{text-shadow:0 2px 28px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.6)}
html .home .home__socials img{filter:drop-shadow(0 0 6px rgba(0,0,0,.85)) drop-shadow(0 2px 22px rgba(0,0,0,.75))}
html .home .home__logo{filter:drop-shadow(0 0 14px rgba(0,0,0,.7)) drop-shadow(0 2px 30px rgba(0,0,0,.6))}
html.bd-leave .home::before{opacity:0;transition:opacity .32s ease}
.home__spline{display:none!important}
@media (max-width:809.98px){
  html:has(.home){background:#000!important;background-image:none!important}
  html:has(.home)::before{display:none!important}
  .home__vid,.home::before{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;top:calc(env(safe-area-inset-top,0px) * -1);height:calc(100dvh + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)}
}
/* navigation links on a computer: bigger (Back to menu, Grid / Discs, Back to story, prev / next ...) */
@media (min-width:810px){
  html:has(.ms, .dio, .ct) .list-nav,html .post__nav{font-size:18px;line-height:18px}
  html:has(.ms, .dio, .ct) .list-view svg{width:18px;height:18px}
  html .post__nav a.nav-prev{margin-right:20px}
  html .post__text{width:400px}
}
@media (min-width:1600px){
  html:has(.ms, .dio, .ct) .list-nav,html .post__nav{font-size:22px;line-height:22px}
  html:has(.ms, .dio, .ct) .list-view svg{width:22px;height:22px}
  html .post__text{width:470px}
}
/* the prev / next links of posts and dioramas: no bar between them */
html .post__nav .sep{display:none}
/* Contacts on a computer / tablet: the title stands in the top left corner like the other pages (its middle on the line of the bar, 50px from the top); the comment, the head and the form stay in a column in the middle of the screen */
@media (min-width:810px){
  html .ct__h{position:fixed;left:var(--cx);top:calc(50px - .6em);margin:0;z-index:5;pointer-events:none}
  html main.ct{align-items:flex-start;height:100vh;min-height:0;box-sizing:border-box;padding-top:70px;padding-bottom:70px}
  html main.ct .ct__in{margin-top:auto;margin-bottom:auto}
  html .ct__head{min-height:84px}
  html .ct__p{position:absolute;left:0;top:37.5px;margin:0;transform:translateY(-50%)} /* (the middle of the comment stands at the middle of the head: the box is 95px high and starts 13px above) */
}
/* prev / next: only pixel arrows (same size as the view icon), vertically centred on the line of "Back to story" */
html .post__nav a.nav-prev,html .post__nav a.nav-next{display:inline-flex!important;align-items:center}
html .post__nav a.nav-prev svg,html .post__nav a.nav-next svg{display:block;flex:none;width:14px;height:14px;shape-rendering:crispEdges}
html .post__nav a.nav-prev::after,html .post__nav a.nav-next::after{left:-12px;right:-12px}
html .dd__nav a.nav-prev svg,html .dd__nav a.nav-next svg{filter:drop-shadow(0 2px 14px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(0,0,0,.7))}
@media (min-width:810px){html .post__nav a.nav-prev svg,html .post__nav a.nav-next svg{width:18px;height:18px}}
@media (min-width:1600px){html .post__nav a.nav-prev svg,html .post__nav a.nav-next svg{width:22px;height:22px}}
html .post__nav a.nav-prev{margin-right:16px}
/* inside a diorama: no fade behind the bottom bar */
html main.dd::after,html main.dd::before{display:none!important}
/* a diorama page on phones: the bottom bar has no background, only the soft shadow behind the words (as the list-nav in Main Story) */
@media (max-width:809.98px){
  html .dd__nav.post__nav{background:transparent!important;box-shadow:none!important}
  html .dd__nav.post__nav a,html .dd__nav.post__nav .sep{text-shadow:rgba(0,0,0,.9) 0 2px 28px,rgba(0,0,0,.8) 0 0 16px,rgba(0,0,0,.6) 0 0 8px}
}