/* ---- 6 the doorway: the field draws the frame ----
   Nothing here is a container either. The words sit in open page and the point
   field traces their box, read from the DOM exactly as the rail and the sky
   are. The dust arrives a little off the line and works itself onto it, which
   is the gold line made literal: bis all Detail passt. Resting on the section
   leaves a slight shimmer; putting the pointer on the doorway takes it to
   nothing. It fits when you go over it together. */
#zesummen{align-items:center;text-align:center}
/* Closed, the book is one A4 leaf: 210x297, so 1:1.4142 portrait, standing in
   the dust frame. The spread is not here -- a spread drawn at this size is a
   picture of a book. You get the spread by opening it. */
.doorway{--pw:min(calc(clamp(340px,58vh,520px) / 1.4142),calc(100vw - 2 * var(--gut)));
  --leaf:calc(var(--pw) * 1.4142);
  position:relative;width:var(--pw);height:var(--leaf);margin:0 auto}
/* Every metric on the leaf is a fraction of the leaf's own height, so the same
   page drawn at two sizes is the same page scaled -- which is what lets the
   closed book travel into the spread instead of dissolving into a copy of
   itself. Change one number here and change it nowhere else. */
.case,.cover{--pad-y:calc(var(--leaf) * .0504);--pad-x:calc(var(--leaf) * .0544);
  align-items:stretch}
.case{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-y) var(--pad-x);
  background:none;border:0;color:inherit;font:inherit;text-align:center;cursor:pointer}
.rh{position:absolute;top:calc(var(--leaf) * .0354);left:0;right:0;
  font:500 calc(var(--leaf) * .0169)/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.folio{position:absolute;bottom:calc(var(--leaf) * .0338);right:var(--pad-x);
  font:300 calc(var(--leaf) * .015)/1 var(--serif);color:var(--gold-dim)}
/* The title of the book. */
.zes{display:block;margin:0 0 calc(var(--leaf) * .0106);font-family:var(--serif);
  font-weight:300;font-size:calc(var(--leaf) * .112);
  line-height:.95;letter-spacing:-.03em;color:var(--text);transition:color .3s}
/* One statement under it, in the gold. */
.fits{display:block;width:100%;margin:0;text-align:center;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;
  font-size:calc(var(--leaf) * .0521);line-height:1.08;color:var(--gold);
  text-wrap:balance;transition:color .3s}
.meta{display:block;margin:calc(var(--leaf) * .0554) 0 0;
  font:500 calc(var(--leaf) * .0191)/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);transition:color .3s}
.meta .out{margin-left:.55em}
.case:hover .zes,.case:focus-visible .zes{color:var(--gold)}
.case:hover .fits,.case:focus-visible .fits,
.case:hover .meta,.case:focus-visible .meta{color:var(--amber)}
.case:hover .out,.case:focus-visible .out{transform:translate(3px,-3px);color:var(--amber)}
/* The leaf is not there once the book has left it. It is not dimmed, not
   faded: it is the same object, now inside the dialog. */
body:has(.case-modal[open]) .doorway{visibility:hidden}

/* ---- the book, opened ----
   Two A4 pages side by side: 2 x 210 : 297, so 1.4142:1. It takes the full
   width up to a maximum, and gives way to the height only when that would
   push the foot of the page off screen. */
.case-modal{--sw:min(calc(100vw - 2 * var(--gut)),1560px,calc(88dvh * 1.4142));
  --sh:calc(var(--sw) / 1.4142);
  --py:calc((100dvh - var(--sh)) / 2);--px:calc((100vw - var(--sw)) / 2);
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--text);overflow:hidden;display:grid;place-items:center}
/* display:grid above beats the UA rule that hides a shut dialog, and the cover
   was printing itself under the footer. It has to be said back. */
.case-modal:not([open]){display:none}
/* Not opaque and not blurred: the point field is what opens the book, and it
   is drawn on the page behind this. At .74 the dust was all but gone and the
   book travelled through an empty black room -- the frame has to stay legible
   through it, so this is as far as the dimming may go. */
.case-modal::backdrop{background:rgba(3,3,3,.45)}
/* Full width up to a maximum -- but the height cap has to be folded into the
   width, or max-height silently wins and the spread stops being A4. The half
   of it is one A4 page, and --leaf is that page's height, so the cover prints
   itself at exactly the scale the closed leaf did. */
.spread{--leaf:var(--sh);
  position:relative;width:var(--sw);aspect-ratio:1.4142 / 1;perspective:2600px;
  transform-origin:0 0}
/* Seated on the closed leaf by script, then let go. No fade anywhere: a fade
   is a second book arriving, and there is only ever the one. The curve has to
   be read as travel, so it is nearly symmetric -- a front-loaded one is 90%
   done in a third of its time and the book simply appears where it landed. */
.case-modal.slide .spread{transition:transform .9s cubic-bezier(.62,0,.38,1)}
/* One page, and it is the whole screen. It is not in the book: it is behind
   it, clipped away to nothing while the leaf is still travelling, then cut
   open from the right-hand page out to the edges as the cover turns off it.
   So the book still reads left and right while it opens, and what you are
   left reading is one page. */
.page{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:0;
  display:block;border:0;background:var(--bg);
  clip-path:inset(50% 50% 50% 50%)}
/* One inherited turn drives the cover and the page cut together. Separate
   compositor transitions/keyframes can reveal the study before the cover has
   turned. The front stops painting at edge-on; no second back face exists. */
@property --book-turn{syntax:"<number>";inherits:true;initial-value:0}
@keyframes book-open{from{--book-turn:0}to{--book-turn:1}}
@keyframes book-close{from{--book-turn:1}to{--book-turn:0}}
.case-modal.on{animation:book-open .95s linear .1s both}
.case-modal.rev{animation:book-close .95s linear both}
.case-modal.folding .page,.case-modal.on .page,.case-modal.rev .page{
  --covered:calc(1 - max(0,calc(-1 * cos(calc(var(--book-turn) * 180deg)))));
  clip-path:inset(calc(var(--py) * var(--covered)) calc(var(--px) * var(--covered))
    calc(var(--py) * var(--covered)) calc(50vw * var(--covered)))}
/* Once it is open the spread is a turned-away cover and an empty box. Left
   live it is an invisible sheet over the middle of the page, and the page
   inside it cannot be scrolled. */
.case-modal.on .spread{pointer-events:none}
/* Going home is not a performance; it only has to be legible. */
.case-modal.closing .spread{transition-duration:.56s}
/* The cover lies over the right-hand page and turns left on the spine. Past
   ninety degrees it is edge-on and gone, and that is what uncovers the page. */
/* The title is printed on the rotating leaf itself. An extra front/back
   pair creates competing 3D paint planes in WebKit; the empty back can cover
   the title even while the leaf faces the reader. */
.cover{position:absolute;top:0;left:50%;width:50%;height:100%;z-index:2;
  transform-origin:0 50%;transform:rotateY(calc(var(--book-turn) * -180deg));
  /* A near-step at exactly edge-on, where the front has no visible width. */
  opacity:clamp(0,calc((.5 - var(--book-turn)) * 1000000),1);
  background:var(--bg);display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:var(--pad-y) var(--pad-x)}
.case-brand{position:fixed;z-index:6;top:0;left:var(--gut);height:64px;
  display:flex;align-items:center;pointer-events:none;color:var(--text);
  font:500 .78rem/1 var(--sans);letter-spacing:.34em}
.case-close{position:fixed;z-index:5;top:14px;right:var(--gut);border:1px solid var(--gold-dim);
  background:rgba(5,5,5,.88);backdrop-filter:blur(10px);color:var(--gold);padding:.72rem .9rem;
  font:500 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .35s ease,top .75s cubic-bezier(.22,.61,.36,1),right .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1),color .25s,border-color .25s}
.case-modal.on .case-close{opacity:1;pointer-events:auto}
.case-close:hover,.case-close:focus-visible{color:var(--text);border-color:var(--gold)}
.case-modal.end-dock .case-close{top:calc(100dvh - 62px);right:50%;transform:translateX(50%)}
.case-modal.on .case-close.dusting{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.case-modal.on .case-close.dusting.forming{opacity:var(--form,0);visibility:visible}
.close-dust{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
body:has(.case-modal[open]){overflow:hidden}
@media (max-width:760px){
  /* No room to put a page beside another on a phone, so the book lands on the
     whole screen and the cover turns off the whole screen. */
  .case-modal{--sw:100vw;--sh:100dvh;--py:0px;--px:0px}
  .spread{--leaf:100dvh;width:100vw;height:100dvh;aspect-ratio:auto}
  .cover{left:0;width:100%}
  /* No left page to open out from, so the page is simply the screen. */
  .case-modal.folding .page{clip-path:inset(0)}
  .case-modal.on .page,.case-modal.rev .page{clip-path:inset(0)}
}