/* Clothbound travel volume. Opening/turning geometry stays in notebook.css. */
@media (min-width:681px) {
  #notebook-dialog {
    --bound-book-height: clamp(460px, calc(100dvh - 220px), 620px);
    width: min(calc(var(--bound-book-height) * 1.56 + 24px), calc(100vw - 48px));
  }
  #notebook-dialog .notebook-book { height: var(--bound-book-height); }
}

#notebook-dialog .notebook-cover-front {
  --cloth-ink: #243d48;
  --cloth-muted: #74776c;
  --cloth-gold: #a48b59;
  padding: 0;
  overflow: hidden;
  border-radius: 2px 10px 10px 2px;
  color: var(--cloth-ink);
  background-color: #e9e1cd;
  background-image:
    linear-gradient(90deg, #0000 8%, #fff5 12%, #0000 22%, #fff2 72%, #725c2915 100%),
    repeating-linear-gradient(0deg, #5f533910 0 .45px, #ffffff20 .7px 1.1px, transparent 1.3px 3px),
    repeating-linear-gradient(90deg, #776a400e 0 .5px, #ffffff22 1px 1.4px, transparent 1.6px 3.5px),
    linear-gradient(135deg, #eee7d5, #e5ddc8 68%, #eae3d1);
  box-shadow: 2px 3px 0 #b9ad92, 4px 5px 0 #ebe4d3, 6px 7px 0 #9c917a,
    9px 15px 24px #02091055, inset -1px 0 0 #fff8, inset 0 1px 0 #fff9;
}
#notebook-dialog .notebook-cover-front::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 27px;
  background:
    repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #102a35, #284653 35%, #1c3744 75%, #0c2330 100%);
  box-shadow: 3px 0 4px #1d23273d, 6px 0 0 #8c815727, 7px 0 0 #fff5;
}
#notebook-dialog .notebook-cover-spine {
  position: absolute;
  top: 37px; left: 8px;
  writing-mode: vertical-rl;
  color: #d2ba87;
  font: 7px/1 Georgia, serif;
  letter-spacing: .24em;
  opacity: .85;
}
#notebook-dialog .notebook-cover-border {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(95px, .8fr) auto;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
  padding: 33px 35px 29px 56px;
  border: 0;
  color: var(--cloth-ink);
}
#notebook-dialog .notebook-cover-overline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: #6d756c;
  text-align: left;
  font: 10px/1.6 var(--ui);
  letter-spacing: .14em;
}
#notebook-dialog .notebook-cover-overline > span:last-child {
  font: 11px/1.6 Georgia, serif;
  letter-spacing: .08em;
}
#notebook-dialog .notebook-cover-front .notebook-cover-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 28px 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cloth-ink);
}
#notebook-dialog .notebook-cover-label > span {
  font: 11px/1.8 var(--ui);
  color: #7b7b6b;
  letter-spacing: .22em;
}
#notebook-dialog .notebook-cover-label > strong {
  max-width: 100%;
  margin: 0 0 4px;
  color: #293f49;
  text-align: left;
  font: 500 clamp(48px, 6vw, 76px)/1.25 var(--serif);
  letter-spacing: .12em;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #fff8, 0 -1px 0 #17292f24;
}
#notebook-dialog .notebook-cover-label > strong.cover-title-medium { font-size: 48px; letter-spacing: .06em; }
#notebook-dialog .notebook-cover-label > strong.cover-title-long { font-size: 34px; letter-spacing: .03em; }
#notebook-dialog .notebook-cover-label > small {
  color: #66766f;
  font: 12px/1.6 var(--serif);
  letter-spacing: .3em;
}
#notebook-dialog .notebook-cover-landscape {
  display: block;
  align-self: center;
  width: 100%;
  max-height: 170px;
  overflow: visible;
  color: var(--cloth-gold);
  stroke: currentColor;
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}
#notebook-dialog .notebook-cover-landscape .landscape-near { stroke: #677e78; stroke-width: 1.15; opacity: .65; }
#notebook-dialog .notebook-cover-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-top: 27px;
  text-align: left;
  font: 12px/1.8 var(--ui);
  letter-spacing: .06em;
}
#notebook-dialog .notebook-cover-authors {
  width: 100%;
  color: #3d555b;
  overflow-wrap: anywhere;
  font: 15px/1.7 var(--serif);
  letter-spacing: .13em;
}
#notebook-dialog .notebook-cover-caption { color: #767e70; font: 11px/1.7 var(--serif); letter-spacing: .08em; }
#notebook-dialog .notebook-cover-bottom > small {
  margin-top: 8px;
  padding-top: 11px;
  width: 100%;
  border-top: 1px solid #9c98793b;
  color: #7f806d;
  font: 8px/1.7 Georgia, var(--ui), serif;
  letter-spacing: .1em;
}
#notebook-dialog .notebook-cover-bottom i { padding: 0 8px; font-style: normal; }

@media (min-width:681px) and (max-width:880px) {
  #notebook-dialog .notebook-cover-border { padding-inline: 46px 24px; }
  #notebook-dialog .notebook-cover-label > strong { font-size: 56px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-medium { font-size: 38px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-long { font-size: 30px; }
}
@media (max-width:680px) {
  #notebook-dialog .notebook-cover { bottom: auto; width: calc(100% - 14px); height: auto; min-height: 400px; max-height: 600px; aspect-ratio: .75; }
  #notebook-dialog .notebook-cover-front::before { width: 23px; }
  #notebook-dialog .notebook-cover-spine { left: 7px; font-size: 6px; }
  #notebook-dialog .notebook-cover-border { padding: 24px 24px 24px 44px; grid-template-rows: auto minmax(min-content, 1fr) minmax(65px, .65fr) auto; }
  #notebook-dialog .notebook-cover-landscape { height: 100%; max-height: 145px; }
  #notebook-dialog .notebook-cover-front .notebook-cover-label { gap: 7px; padding: 16px 0 8px; }
  #notebook-dialog .notebook-cover-label > strong { font-size: 56px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-medium { font-size: 38px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-long { font-size: 30px; }
  #notebook-dialog .notebook-cover-label > span { font-size: 10px; }
  #notebook-dialog .notebook-cover-bottom { padding-top: 16px; gap: 6px; }
  #notebook-dialog .notebook-cover-authors { font-size: 14px; }
  #notebook-dialog .notebook-cover-caption { font-size: 10px; }
  #notebook-dialog .notebook-cover-bottom > small { font-size: 7.5px; margin-top: 6px; padding-top: 8px; }
  #notebook-dialog .notebook-cover-overline { font-size: 9px; }
}
@media (max-width:360px) {
  #notebook-dialog .notebook-cover-label > strong { font-size: 48px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-medium { font-size: 32px; }
  #notebook-dialog .notebook-cover-label > strong.cover-title-long { font-size: 26px; }
}