/* ================= Harland's diary — virtual book =================
   Rhythm: every vertical measure is a multiple of 28px (the ruling). */

:root{
  --line: 28px;
  --ink: #2e2519;
  --ink-soft: #4a3d2c;
  --hand-ink: #3a3128;
  --rule: rgba(121, 85, 48, .28);
  --page-w: 560px;
  --page-h: 756px;
}

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

html,body{ height:100%; }

body{
  background: radial-gradient(ellipse at 50% 38%, #2a1e14 0%, #17100a 55%, #0b0805 100%);
  overflow:hidden;
  font-family:'Special Elite', 'Courier New', monospace;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------------- Cover ---------------- */

#cover{
  cursor:pointer; text-align:center;
  opacity:0; transition:opacity .8s ease;
}
#cover.visible{ opacity:1; }

.cover-board{
  position:relative;
  width:var(--page-w); height:var(--page-h);
  margin:0 auto;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(96,62,38,.35), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(0,0,0,.5), transparent 55%),
    linear-gradient(135deg, #241610 0%, #1a0f0a 45%, #120a06 100%);
  border-radius: 6px 14px 14px 6px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    0 4px 18px rgba(0,0,0,.6),
    inset 0 0 60px rgba(0,0,0,.55),
    inset -3px 0 6px rgba(0,0,0,.5),
    inset 8px 0 12px rgba(0,0,0,.45);
}
.cover-frame{
  position:absolute; inset:26px;
  border:1px solid rgba(0,0,0,.55);
  border-radius:4px 10px 10px 4px;
  box-shadow: 0 1px 0 rgba(120,80,50,.12), inset 0 1px 0 rgba(0,0,0,.5);
}
.cover-initials{
  position:absolute; left:0; right:0; bottom:96px;
  color:rgba(0,0,0,.85);
  text-shadow: 0 1px 0 rgba(140,95,60,.18);
  font-size:22px; letter-spacing:8px;
}
.cover-hint{
  margin-top:26px; color:rgba(216,196,154,.35);
  font-size:12px; letter-spacing:6px; text-transform:uppercase;
}
#cover:hover .cover-hint{ color:rgba(216,196,154,.6); }

/* ---------------- Book & pages ---------------- */

#book{ position:relative; }

.spread{
  display:flex; align-items:stretch;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.7));
}

.spine{
  width:14px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.85) 50%, rgba(0,0,0,.55));
}

.page{
  width:var(--page-w); height:var(--page-h);
  position:relative;
  background:
    radial-gradient(ellipse at 50% 42%, #ead9b2 0%, #ddc79b 55%, #c4a675 88%, #ab8a58 100%);
}
.page::before{      /* paper grain */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.page::after{       /* ruling, full page, 28px rhythm */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 26px,
    var(--rule) 26px, var(--rule) 27px,
    transparent 27px, transparent 28px);
  background-position: 0 0;
}
.page.left{
  border-radius: 4px 0 0 4px;
  box-shadow: inset -26px 0 34px -22px rgba(60,35,15,.55), inset 3px 0 8px rgba(60,35,15,.25);
}
.page.right{
  border-radius: 0 4px 4px 0;
  box-shadow: inset 26px 0 34px -22px rgba(60,35,15,.55), inset -3px 0 8px rgba(60,35,15,.25);
}

.page-inner{
  position:relative; z-index:1;
  height:100%;
  padding: 56px 52px;
  overflow:hidden;
  color:var(--ink);
  font-size:16px; line-height:var(--line);
  text-shadow: 0 0 .6px rgba(46,37,25,.55);   /* faint ink bleed */
}

/* ---------------- Typed content blocks ---------------- */

.page-inner p{ margin:0; }

.blank-line{ height:var(--line); }

.case-title{
  font-size:21px; letter-spacing:3px;
  padding-bottom:0;
}
.case-title-rule{ border-bottom:1.5px solid var(--ink-soft); height:8px; margin-bottom:20px; }

.meta-row{ display:flex; }
.meta-row .lbl{ width:128px; flex:none; }
.meta-row .val{ flex:1; }

.impression .val{ }

.entry-sep{
  border-top:1px solid var(--rule);
  height:0; margin-top:-1px;
}

.entry-date{
  text-decoration:underline;
  text-underline-offset:4px;
  letter-spacing:1px;
}

.q{ padding-left:32px; }        /* quoted speech */
.ind{ padding-left:32px; }      /* indented object / list lines */

.found{                          /* recovered written text: photo reverses, notebook lines, carvings */
  padding-left:32px;
  text-decoration:underline;
  text-underline-offset:4px;
  letter-spacing:1px;
}
.found.spaced{ letter-spacing:8px; }

.closed{
  letter-spacing:3px;
  text-decoration:underline;
  text-underline-offset:5px;
}

.hand{
  font-family:'Homemade Apple', cursive;
  color:var(--hand-ink);
  font-size:15px; line-height:var(--line);
  transform:rotate(-.6deg);
  text-shadow:none;
}

.addendum{
  border:1.5px solid var(--ink-soft);
  padding:13px 16px;
  transform:rotate(-.25deg);
  box-shadow: 1px 1px 0 rgba(74,61,44,.25);
}
.addendum .adx-title{
  letter-spacing:2px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.sketch{ padding-left:16px; }
.sketch svg{ display:block; }

/* Front matter */
.front-own{
  font-family:'Homemade Apple', cursive;
  color:var(--hand-ink);
  font-size:16px; line-height:var(--line);
  transform:rotate(-1deg);
  text-shadow:none;
}
.invocation{ text-align:left; }
.invocation .inv-year{ font-size:20px; letter-spacing:4px; }
.inv-sign{ letter-spacing:2px; }

/* ---------------- Navigation ---------------- */

.turn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:rgba(216,196,154,.35);
  font-size:56px; line-height:1;
  padding:30px 18px;
  font-family:inherit;
  transition:color .25s;
  user-select:none;
}
.turn:hover{ color:rgba(216,196,154,.85); }
.turn:disabled{ opacity:0; cursor:default; }
#prev{ left:-86px; }
#next{ right:-86px; }

#ledger-btn{
  position:absolute; left:50%; bottom:-58px; transform:translateX(-50%);
  background:none; border:none; cursor:pointer;
  color:rgba(216,196,154,.35);
  font-family:inherit; font-size:12px; letter-spacing:6px;
  padding:12px 20px;
  transition:color .25s;
}
#ledger-btn:hover{ color:rgba(216,196,154,.8); }

/* ---------------- Index overlay ---------------- */

#ledger[hidden]{ display:none; }
#ledger{
  position:fixed; inset:0; z-index:50;
  background:rgba(8,5,3,.72);
  display:flex; align-items:center; justify-content:center;
}
.ledger-card{
  width:400px; max-width:88vw;
  background:
    radial-gradient(ellipse at 50% 40%, #e6d5ac 0%, #d5bf92 70%, #bd9d6c 100%);
  color:var(--ink);
  padding:40px 40px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
  font-size:15px; line-height:var(--line);
}
.ledger-title{
  letter-spacing:3px; text-decoration:underline; text-underline-offset:5px;
  margin-bottom:var(--line);
}
#ledger-list{ list-style:none; }
#ledger-list li{ cursor:pointer; }
#ledger-list li:hover{ color:#6b4a1f; }
#ledger-list .dots{ opacity:.45; }
.ledger-close{
  margin-top:var(--line);
  text-align:right; cursor:pointer;
  font-size:12px; letter-spacing:4px; text-transform:uppercase; opacity:.55;
}
.ledger-close:hover{ opacity:1; }

/* ---------------- Measurer ---------------- */

#measurer{
  position:absolute; left:-99999px; top:0;
  width:var(--page-w); height:var(--page-h);
}

/* ---------------- Page turn animation ---------------- */

.page-inner.turning{ animation:turnfade .28s ease; }
@keyframes turnfade{
  from{ opacity:.15; }
  to{ opacity:1; }
}

/* ---------------- Single-page (narrow screens) ---------------- */

#stage.single .page.left{ display:none; }
#stage.single .spine{ display:none; }
#stage.single .page.right{ border-radius:4px; }