@import url("./fonts.css");        
@import url("./fonts-maria.css");  

:root {
  --paper:        #FEF9F5;  
  --ink:          #26221d;
  --ink-soft:     #4a453e;
  --caption:      #6b665e;
  --folio:        #8a8175;
  --divider-bg:   #000000;  
  --divider-ink:  #F0EDE8;  
  
  --serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --display: "Cinzel", "Playfair Display", serif;
  --sans:    "Nunito", system-ui, -apple-system, sans-serif;
  --folio-serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: radial-gradient(ellipse at center, #2a1f18 0%, #0f0a07 100%);
  color: #f3ead8;
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}


.viewer-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: baseline;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events: none;
}
.viewer-header .title {
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #c9a66b;
}
.viewer-header .subtitle { font-size: 12px; color: #8a7a63; font-style: italic; }


.viewer-header .disclaimer {
  margin-top: 5px;
  max-width: 42ch;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #b9ae9a;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

#flipbook { margin: 0 auto !important; box-shadow: 0 35px 90px rgba(0,0,0,0.75), 0 12px 35px rgba(0,0,0,0.45); }

.controls {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(28,22,16,0.82); border: 1px solid rgba(201,166,107,0.28);
  backdrop-filter: blur(6px);
}
.btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: transparent; color: #e8dcc2; border: 1px solid rgba(201,166,107,0.45);
}
.btn:hover:not(:disabled) { background: rgba(201,166,107,0.16); }
.btn:disabled { opacity: 0.32; cursor: default; }
.page-indicator { font-family: var(--sans); font-size: 12px; color: #8a7a63; min-width: 62px; text-align: center; }


.page {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  font-family: var(--serif);
}


.folio {
  position: absolute; top: 92.3%; left: 0; right: 0;
  text-align: center;
  font-family: var(--folio-serif);
  font-size: calc(var(--ph) * 0.019);
  letter-spacing: 0.14em;
  color: var(--folio);
}


.body-col {
  position: absolute;
  left: 10%; width: 80%;
  
  top: 12.7%;
  text-align: justify;
  hyphens: auto;
  
  font-size: calc(var(--ph) * 0.0231);
  line-height: 1.828;
  color: var(--ink);
}

.chapter-title ~ .body-col {
  top: auto;
  bottom: 10.1%;
}

.body-col p { margin: 0; text-indent: 1.2em; }

.body-col p strong { font-weight: 500; }
.body-col p.flush { text-indent: 0; }


.dropcap {
  float: left;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 3.95em;
  line-height: 0.80;
  padding-right: 0.07em;
  padding-top: 0.04em;
  color: var(--ink);
}


.body-col p.note {
  font-size: 0.88em;
  line-height: 1.5;
  text-indent: 1.2em;
}
.body-col p.note-first {
  text-indent: 0;
  margin-top: 1.9em;
  padding-top: 1.9em;
  position: relative;
}
.body-col p.note-first::before {
  content: "";
  position: absolute;
  top: 0.85em; left: 50%;
  transform: translateX(-50%);
  width: 18%; height: 1px;
  background: rgba(60,45,25,0.38);
}

.body-col p.note.flush { text-indent: 0; }


.body-col p.cast {
  font-size: 0.88em;
  line-height: 1.5;
  text-align: left;
  text-indent: 0;
  margin-top: 0.4em;
}
.body-col p.cast:first-child { margin-top: 0; }


.page.divider { background: #0d0b09; }
.divider-face { position: absolute; inset: 0; overflow: hidden; }
.divider-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  opacity: 0.30;
}

.divider-quote {
  position: absolute;
  left: 16%; right: 16%; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--ph) * 0.026);
  line-height: 1.5;
  color: var(--divider-ink);
}


.divider-rule {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14.4%;                      
  height: 1px;
  background: rgba(240,237,232,0.45);
}

.page.divider .folio { color: rgba(240,237,232,0.42); }



.chapter-kicker {
  position: absolute;
  left: 10%; right: 10%; top: 7%;
  font-family: var(--sans);
  font-size: calc(var(--ph) * 0.0165);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chapter-rule {
  position: absolute;
  left: 10%; right: 10%; top: 11%;
  height: 1px;
  background: rgba(60,45,25,0.42);
}
.chapter-title {
  position: absolute;
  left: 10%; right: 10%; top: 14.6%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--ph) * 0.062);   
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--ink);
}


.bleed { position: absolute; inset: 0; background: #14110d; }
.bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }


.bleed ~ .folio {
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}


.bleed-caption {
  position: absolute;
  left: 10%; bottom: 9.9%;
  width: max-content; max-width: 80%;
  padding: calc(var(--ph) * 0.011) calc(var(--ph) * 0.015);
  background: rgba(0,0,0,0.32);
  color: #ffffff;
  font-family: var(--sans);
  font-size: calc(var(--ph) * 0.0191);   
  line-height: 1.32;                     
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}


.plate {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 26.6%;                    
  width: fit-content;
  max-width: 80%;
}
.plate img {
  display: block;
  width: auto; height: auto;
  max-width: calc(var(--pw) * 0.80);
  max-height: calc(var(--ph) * 0.49);
}
.plate figcaption {
  position: absolute;
  top: calc(100% + var(--ph) * 0.020);
  left: 0; width: 100%;
  font-family: var(--sans);
  font-size: calc(var(--ph) * 0.0191);
  line-height: 1.32;
  color: var(--caption);
  text-align: left;
}


.archival-tag {
  font-family: var(--sans);
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
}


.page.cover { background: #14110d; }
.cover-meta {
  position: absolute;
  left: 6%; right: 6%; bottom: 8.6%;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.cover-name {
  font-family: var(--display);
  font-weight: 700;                
  font-size: calc(var(--ph) * 0.044);    
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.15;
}
.cover-sub {
  font-family: var(--display);      
  margin-top: calc(var(--ph) * 0.016);
  font-size: calc(var(--ph) * 0.024);
  letter-spacing: 0.08em;
}


.title-name, .title-dates, .title-sub {
  position: absolute; left: 8%; right: 8%; text-align: center;
}
.title-name {
  top: 29.4%;
  font-family: var(--display);
  
  font-size: calc(var(--ph) * 0.034);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.title-dates {
  top: 40.1%;
  font-family: var(--display);
  font-size: calc(var(--ph) * 0.024);
  letter-spacing: 0.05em;
  color: var(--ink);
}
.title-sub {
  top: 47.2%;
  font-family: var(--display);
  font-size: calc(var(--ph) * 0.018);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}


.page.back { background: var(--paper); }

.bc-photo {
  position: absolute;
  left: 26%; right: 0; top: 0; height: 62%;
  overflow: hidden;
  background: #14110d;
}
.bc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


.bc-spine, .bc-spine-dates {
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--display);
  color: var(--ink);
}
.bc-spine {
  left: 10%; top: 60%;
  font-size: calc(var(--ph) * 0.022);
  letter-spacing: 0.12em;
}
.bc-spine-dates {
  left: 10.5%; top: 34%;
  font-size: calc(var(--ph) * 0.018);
  letter-spacing: 0.10em;
  color: var(--ink-soft);
}

.bc-name {
  position: absolute;
  left: 27.5%; right: 4%; top: 64.5%;
  font-family: var(--display);
  font-size: calc(var(--ph) * 0.032);
  letter-spacing: 0.02em;
  color: var(--ink);
}


.bc-qr-frame {
  position: absolute;
  left: 27.5%; top: 71%;
  width: calc(var(--pw) * 0.135);
  height: calc(var(--pw) * 0.135);
  padding: calc(var(--pw) * 0.014);
  
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
}
.bc-qr-frame img {
  display: block;
  width: 100%; height: 100%;
  opacity: 0.78;
}


.bc-line {
  position: absolute;
  left: 27.5%; right: 8%; top: 86%;
  font-family: var(--serif);
  font-size: calc(var(--ph) * 0.017);
  line-height: 1.45;
  color: var(--ink-soft);
}


.cr-notice {
  position: absolute;
  left: 12%; right: 12%; top: 18%;
  font-family: var(--serif);
  font-size: calc(var(--ph) * 0.0165);
  line-height: 1.55;
  color: var(--ink-soft);
}
.cr-notice p { margin: 0 0 1.1em; }
.cr-notice p:last-child { margin-bottom: 0; }

.cr-online {
  position: absolute;
  left: 12%; right: 12%; top: 64%;
  text-align: center;
}
.cr-online-label {
  font-family: var(--serif);       
  font-weight: 400;                
  font-size: calc(var(--ph) * 0.0165);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: calc(var(--ph) * 0.02);
}
.cr-qr {
  width: calc(var(--pw) * 0.16);
  height: calc(var(--pw) * 0.16);
  margin: 0 auto calc(var(--ph) * 0.015);
  padding: calc(var(--pw) * 0.014);
  
  border: 1px solid rgba(0,0,0,0.08);
}
.cr-qr img { display: block; width: 100%; height: 100%; }
.cr-url {
  font-family: var(--serif);       
  font-weight: 400;
  font-size: calc(var(--ph) * 0.0165);
  letter-spacing: 0.02em;
  color: var(--ink);
}


.eg-text {
  position: absolute;
  left: 16%; right: 16%; top: 42%; transform: translateY(-50%);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--ph) * 0.026);
  line-height: 1.5;
  color: var(--ink);
}
.eg-name {
  position: absolute;
  left: 8%; right: 8%; top: 62%;
  text-align: center;
  font-family: var(--display);
  font-size: calc(var(--ph) * 0.02);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page.blank { background: var(--paper); }