/* Foldable phones (static/js/fold.js sets the classes and the hinge variables). */

/* half-open like a book: one thing on each page (no drawn spine: the hinge is left as it is) */

/* stories: the words on the left page, the drawing on the right */
html.fold-book .story { grid-template-columns: var(--page-l) var(--page-r); column-gap: var(--hinge-w); width: 100%; margin: 0; }
html.fold-book .story .stage { grid-column: 2; grid-row: 1; height: 100vh; height: 100svh; top: 0; background: none; z-index: auto; }
html.fold-book .story .stage > svg { width: min(92%, 86svh); }
html.fold-book .story .steps { grid-column: 1; grid-row: 1; padding: 40vh 28px 40vh; pointer-events: auto; z-index: auto; }
html.fold-book .story .step { min-height: 80vh; justify-content: center; padding-bottom: 0; }
html.fold-book .story .step p { background: none; font-size: 1.25rem; }
html.fold-book .story .step p.small { font-size: 1rem; }

/* the dissertation: the contents on the left page, the chapter on the right */
html.fold-book .thesis { grid-template-columns: var(--page-l) var(--page-r); column-gap: var(--hinge-w); padding-left: 0; padding-right: 0; padding-top: 4.5rem; }
html.fold-book .rail { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; border-bottom: 0; padding: 0 20px 1rem; }
html.fold-book .rail .toc { display: block; }
html.fold-book .rail .book::after { content: none; }
html.fold-book .paper { border-radius: 0; }

/* half-open like a laptop: the drawing on the upper half, the words on the lower */
html.fold-table .story { grid-template-columns: 1fr; width: 100%; }
html.fold-table .story .stage { grid-column: 1; grid-row: 1; top: 0; height: var(--page-t); z-index: 1; background: var(--paper); }
html.fold-table .story .stage > svg { width: min(92vw, calc(var(--page-t) - 24px)); }
html.fold-table .story .steps { grid-column: 1; grid-row: 1; padding: calc(var(--page-t) + var(--hinge-h) + 10vh) 20px 30vh; position: relative; z-index: 0; }
html.fold-table .story .step { min-height: calc(100vh - var(--page-t)); justify-content: center; padding-bottom: 0; }
html.fold-table .story .step p { background: none; font-size: 1.15rem; }

/* short, narrow screens (a folded iPhone Duo, a phone on its side): a smaller drawing, smaller words */
@media (max-width: 820px) and (max-height: 700px) {
  html:not(.fold-book):not(.fold-table) .story .stage { height: 46vh; height: 46svh; }
  html:not(.fold-book):not(.fold-table) .story .stage > svg { width: min(92vw, 42svh); }
  html:not(.fold-book):not(.fold-table) .story .steps { padding-top: 50vh; }
  html:not(.fold-book):not(.fold-table) .story .step p { font-size: 1.1rem; }
  html:not(.fold-book):not(.fold-table) .story .step p.small { font-size: 0.95rem; }
}