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

/* the crease drawn when the phone is folded or unfolded */
.fold-crease { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
.fold-crease path { fill: none; stroke: var(--accent, #1f3fd0); stroke-width: 1.3; stroke-linecap: round; opacity: 0.55; }
.fold-crease.fold path { stroke: var(--warm, #c0532b); }

/* half-open like a book: a spine down the hinge, and one thing on each page */
html.fold-book body::after { content: ""; position: fixed; top: 0; bottom: 0; z-index: 70; pointer-events: none;
  left: calc(var(--hinge-x) - 18px); width: calc(var(--hinge-w) + 36px);
  background: linear-gradient(90deg, transparent, rgba(60, 50, 20, 0.05) 40%, rgba(60, 50, 20, 0.1) 50%, rgba(60, 50, 20, 0.05) 60%, transparent); }
html.dark.fold-book body::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25) 50%, transparent); }

/* 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 .stage { grid-column: 2; grid-row: 1; height: 100vh; height: 100svh; top: 0; background: none; z-index: auto; }
html.fold-book .stage > svg { width: min(92%, 86svh); }
html.fold-book .steps { grid-column: 1; grid-row: 1; padding: 40vh 28px 40vh; pointer-events: auto; z-index: auto; }
html.fold-book .step { min-height: 80vh; justify-content: center; padding-bottom: 0; }
html.fold-book .step p { background: none; font-size: 1.25rem; }
html.fold-book .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 .stage { grid-column: 1; grid-row: 1; top: 0; height: var(--page-t); z-index: 1; background: var(--paper); }
html.fold-table .stage > svg { width: min(92vw, calc(var(--page-t) - 24px)); }
html.fold-table .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 .step { min-height: calc(100vh - var(--page-t)); justify-content: center; padding-bottom: 0; }
html.fold-table .step p { background: none; font-size: 1.15rem; }
html.fold-table body::after { content: ""; position: fixed; left: 0; right: 0; top: calc(var(--hinge-y) - 12px); height: calc(var(--hinge-h) + 24px); z-index: 70; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(60, 50, 20, 0.08) 50%, transparent); }

/* 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) .stage { height: 46vh; height: 46svh; }
  html:not(.fold-book):not(.fold-table) .stage > svg { width: min(92vw, 42svh); }
  html:not(.fold-book):not(.fold-table) .steps { padding-top: 50vh; }
  html:not(.fold-book):not(.fold-table) .step p { font-size: 1.1rem; }
  html:not(.fold-book):not(.fold-table) .step p.small { font-size: 0.95rem; }
}