/* CALM AGAIN — free preview reader (#preview). Ten authored pages of Chapter One. */

.reader {
  --r-bg: var(--page); --r-fg: var(--ink); --r-muted: var(--muted); --r-hair: var(--hair);
  --r-size: 1.125rem;
  position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column;
  background: var(--r-bg); color: var(--r-fg);
  transition: background-color 1.5s var(--ease-inout), color 1.5s var(--ease-inout);
}
@media (min-width: 600px) { .reader { --r-size: 1.25rem; } }
.reader[data-theme="night"], .reader.is-dim { --r-bg: var(--night); --r-fg: var(--paper); --r-muted: var(--cream-muted); --r-hair: var(--hair-dark); }
.reader[data-theme="night"] :focus-visible, .reader.is-dim :focus-visible { outline-color: var(--dawn); box-shadow: none; }
.reader.is-open { display: flex; }
.reader.is-entering .reader-sheet { opacity: 0; transform: translateY(24px); }
.reader-sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }

.reader-bar {
  flex: 0 0 auto; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex; align-items: center; gap: var(--s-4); border-bottom: 1px solid var(--r-hair);
}
.reader-bar .rlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-xs)/1.4 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); }
.reader-bar .rlabel .long { display: none; }
@media (max-width: 599px) { .reader-bar .rlabel .mid { display: none; } }
@media (min-width: 600px) { .reader-bar .rlabel .long { display: inline; } }
.reader-bar .tlink { font-size: .875rem; color: var(--r-muted); white-space: nowrap; flex: 0 0 auto; }
.reader-bar .short-buy { display: none; }
@media (max-width: 599px) { .reader-bar .long-buy { display: none; } .reader-bar .short-buy { display: inline; } }
.reader-bar .ibtn, .reader-nav .ibtn {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0 10px;
  background: none; border: 0; color: inherit; cursor: pointer; font: 500 var(--t-s)/1 var(--f-text); border-radius: 2px;
}
.reader-bar .ibtn:hover, .reader-nav .ibtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.reader-bar .aa { font: 400 1.125rem/1 var(--f-display); letter-spacing: .02em; }

.reader-progress { flex: 0 0 auto; height: 1px; background: var(--r-hair); position: relative; }
.reader-progress i { position: absolute; inset: 0; background: var(--dawn); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform .5s var(--ease-out); }

.aa-panel {
  position: absolute; right: var(--gutter); top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 2; width: 260px;
  display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--r-bg); color: var(--r-fg);
  border: 1px solid var(--r-hair); box-shadow: 0 24px 60px -24px rgba(13, 16, 32, .35);
}
.aa-panel .row { display: flex; gap: var(--s-2); }
.aa-panel .row > button { flex: 1; min-height: 44px; border: 1px solid var(--r-hair); background: none; color: inherit; cursor: pointer; border-radius: 2px; font: 500 var(--t-s)/1 var(--f-text); }
.aa-panel .row > button[aria-pressed="true"] { background: var(--r-fg); color: var(--r-bg); border-color: var(--r-fg); }
.aa-panel .label { color: var(--r-muted); }

.reader-pages { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
.rp { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: none; padding: clamp(32px, 6vh, 72px) var(--gutter) var(--s-8); }
.rp.is-current { display: block; }
.rp.turn-in-next { animation: rp-in-next .24s var(--ease-out) both; }
.rp.turn-in-prev { animation: rp-in-prev .24s var(--ease-out) both; }
@keyframes rp-in-next { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes rp-in-prev { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.rp:focus { outline: none; }
.rp .col { max-width: 34em; margin: 0 auto; font: 400 var(--r-size)/1.62 var(--f-book); font-kerning: normal; }
.rp .col p { text-indent: 1.2em; }
.rp .col p.no-indent { text-indent: 0; }
@media (min-width: 600px) { .rp .col { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }
.rp .chap-open { margin-bottom: 2em; }
.rp .pnext { display: flex; justify-content: flex-end; max-width: 34em; margin: var(--s-6) auto 0; }
.rp .pnext .tlink { color: var(--r-muted); white-space: nowrap; }
.reader-nav .ibtn { white-space: nowrap; }

.reader-nav {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
  padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--r-hair);
}
.reader-nav .count { font: 500 var(--t-xs)/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); font-variant-numeric: tabular-nums; text-align: center; }
.reader-nav .prev { justify-self: start; }
.reader-nav .next { justify-self: end; }
.reader-nav .ibtn[disabled] { opacity: .3; cursor: default; }
.reader-nav .restart { font-size: .8125rem; color: var(--r-muted); }

/* End card: a sunrise from the bottom horizon */
.rp-end { padding: 0; }
.rp-end .sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, var(--night) 20%, var(--dusk) 55%, #7a5a6a 72%, var(--dawn) 86%, var(--paper) 100%); background-size: 100% 300%; background-position: 0 0; transition: background-position 1.2s var(--ease-inout); }
.rp-end.is-risen .sky { background-position: 0 100%; }
.rp-end .inner { position: relative; min-height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--s-5); text-align: center; padding: var(--s-8) var(--gutter); color: var(--ink); }
.rp-end h2 { font-size: var(--t-xl); line-height: 1.02; }
.rp-end p { max-width: 44ch; }
.rp-end .mini-cover { width: 96px; box-shadow: 0 20px 40px -20px rgba(13, 16, 32, .4); }
.rp-end .meta { font-size: var(--t-xs); letter-spacing: .04em; color: var(--muted); }
.rp-end .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); }
.rp-end .legal { display: flex; gap: var(--s-4); font-size: var(--t-xs); }
.rp-end .legal a { color: color-mix(in srgb, var(--ink) 80%, transparent); min-height: 44px; display: inline-flex; align-items: center; }
.rp-end .meta, .rp-end .fine { color: color-mix(in srgb, var(--ink) 80%, transparent); }
#preview .rp-end :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 5px var(--page); }
.reader.on-end .reader-nav { display: none; }

/* While the reader is open the page behind is inert and does not scroll */
html.reader-open, html.reader-open body { overflow: hidden; }

/* No-JS fallback: #preview:target shows every page stacked */
.reader:target { display: block; overflow-y: auto; }
.reader:target .reader-pages { overflow: visible; }
.reader:target .rp { position: static; display: block; }
.reader:target .reader-nav, .reader:target .aa, .reader:target .reader-progress { display: none; }
.reader:target .rp-end .sky { background-position: 0 100%; }
html.js .reader:target:not(.is-open) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reader, .reader-sheet, .rp-end .sky { transition-duration: .2s; }
  .rp.turn-in-next, .rp.turn-in-prev { animation: none; }
}

@media (forced-colors: active) { .reader-progress i { background: Highlight; } .reader-nav .ibtn, .reader-bar .ibtn { border: 1px solid ButtonText; } }