/* Magicians Keep: Gimbly's old journal, down in the basement (about.html).
   It lies on his old desk in the picture at the top; opened, it is the Library's book (assets/css/tome.css) with two of
   his stories to a spread. The workings live in assets/js/journal.js. */

/* ===== The open journal: two stories to a spread ===== */
/* brown leather, like the journal on the desk */
dialog.journal-tome{--leather:#5a3519}
.journal-tome .page{display:flex;flex-direction:column}
/* the close button is printed on the right-hand page on a computer, at the top of the book on a phone */
.journal-tome .page.right > .tome-close{top:8px;right:8px}
.journal-tome .binding > .tome-close{display:none}
.jr-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.journal-tome .page .jr-pg{color:#3a2410}
.jr-entry{margin-top:16px}
.jr-entry[hidden]{display:none}
.page.right .jr-no{padding-right:52px}
.journal-tome .page .jr-no{color:#8a2a1f}
.journal-tome .jr-title{margin-top:6px;font-family:var(--f-display);font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.08;color:#2a1a0e}
.jr-text{margin-top:14px}
.jr-text p{font-size:1.08rem;line-height:1.6;color:#3d2f22;max-width:44ch}
.jr-text p + p{margin-top:.7em}
.jr-text p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font-family:var(--f-display);font-size:3.1em;line-height:.8;color:#8a2a1f}
.jr-gap{flex:1 0 20px}
.journal-tome .turn.jr-foot{align-items:center;margin-top:0;padding-top:12px}
.jr-foot.l{justify-content:flex-start}
.jr-foot.r{justify-content:flex-end}
.jr-foot .phone{display:none}
.journal-tome .turn button{white-space:nowrap}
.journal-tome .turn button:disabled{opacity:.35;cursor:default;text-decoration:none}
@media (min-width:761px) and (max-height:900px),(min-width:560px) and (max-height:520px){.jr-text p{font-size:1.02rem;line-height:1.55}}
/* a phone on its side: two pages like a computer, closer together, with the close button kept on the book */
@media (min-width:560px) and (max-width:1100px) and (max-height:520px){
  .jr-entry{margin-top:6px}
  .jr-text{margin-top:8px}
  .journal-tome .jr-title{font-size:1.35rem}
  .jr-gap{flex-basis:8px}
  .journal-tome .turn.jr-foot{padding-top:4px}
  .journal-tome .page.right > .tome-close{display:none}
  .journal-tome .binding > .tome-close{display:grid}
}
@media (max-width:760px) and (min-height:521px),(max-width:559px){
  .journal-tome .page.right > .tome-close{display:none}
  .journal-tome .binding > .tome-close{display:grid}
  .jr-foot.l,.page.left .jr-gap{display:none}
  .jr-foot.r{justify-content:space-between}
  .jr-foot .phone{display:inline-flex}
  .jr-head{padding-right:52px}
  .journal-tome .page.left .jr-head .mono{padding-right:0}
  .page.right .jr-no{padding-right:0}
  .jr-spacer{display:none}
  .page.right .jr-entry{margin-top:0}
  .journal-tome .page.right{padding-bottom:14px}
}