:root{
  --paper:#efe7d6;
  --paper-edge:#e0d5ba;
  --ink:#2b2016;
  --ink-soft:#5a4d3c;
  --accent:#8a6d3b;
  --accent-dark:#6b5127;
  --gold:#b8923f;
  --header-h:56px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Georgia","Iowan Old Style","Times New Roman",serif;
  background:#211b14;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header / nav ---------- */
header.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:linear-gradient(180deg,#241c14,#1c1712);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  border-bottom:1px solid #3a2f22;
}
.brand{
  color:var(--gold);font-size:15px;letter-spacing:.5px;
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:40vw;
}
nav.tabs{display:flex;gap:2px;}
nav.tabs button{
  background:transparent;border:1px solid transparent;color:#d8c9a3;
  font-family:inherit;font-size:13px;padding:8px 10px;border-radius:6px;
  cursor:pointer;transition:.15s;
}
nav.tabs button:hover{background:#2c2418;}
nav.tabs button.active{
  background:var(--gold);color:#1c1712;font-weight:700;border-color:var(--gold);
}
.menu-toggle{display:none;background:none;border:none;color:var(--gold);font-size:22px;padding:6px 10px;cursor:pointer;}

@media (max-width:640px){
  :root{--header-h:92px;}
  header.site-header{
    flex-wrap:wrap;align-items:center;height:var(--header-h);
    padding:8px 10px 6px;
  }
  .brand{font-size:14px;max-width:100%;width:100%;text-align:left;margin-bottom:6px;}
  .menu-toggle{display:none;}
  nav.tabs{
    position:static;transform:none;background:transparent;
    flex-direction:row;flex-wrap:nowrap;width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:0 0 2px;gap:6px;border-bottom:none;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  nav.tabs::-webkit-scrollbar{display:none;}
  nav.tabs button{
    flex:0 0 auto;white-space:nowrap;text-align:center;
    font-size:13px;padding:8px 12px;
  }
}

/* ---------- Book views ---------- */
main{padding-top:var(--header-h);}
.book{
  display:none;
  height:calc(100vh - var(--header-h));
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  background:#1c1712;
}
.book.active{display:block;}

.page{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:18px 14px 34px;
  background:var(--paper);
  background-image:
    radial-gradient(ellipse at top left, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,.05), transparent 60%);
  border-bottom:2px solid var(--paper-edge);
  position:relative;
}
.page-inner{
  max-width:560px;width:100%;margin:auto;
  font-size:17px;line-height:1.85;color:var(--ink);
}
.page-inner p{margin:0 0 1em;}
.page-num{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--ink-soft);font-family:Georgia,serif;letter-spacing:1px;
}

/* Arabic pages: right-to-left, image based */
.arabic-page .page-inner{
  display:flex;align-items:center;justify-content:center;max-width:640px;
}
.arabic-page img{
  width:100%;height:auto;max-height:calc(100vh - var(--header-h) - 70px);
  object-fit:contain;box-shadow:0 4px 18px rgba(0,0,0,.25);border-radius:2px;
}
#arabic-book{direction:rtl;}

/* Turkish translation styling */
#turkish-book .page-inner{font-size:16.5px;}

/* History article */
#history-book{
  background:var(--paper);overflow-y:auto;
}
.history-wrap{
  max-width:680px;margin:0 auto;padding:28px 20px 60px;
  font-size:17px;line-height:1.85;color:var(--ink);
}
.history-wrap h1{
  font-size:26px;color:var(--accent-dark);margin-bottom:4px;
}
.history-wrap h2{
  font-size:19px;color:var(--accent-dark);margin-top:1.8em;
  border-bottom:1px solid var(--paper-edge);padding-bottom:6px;
}
.history-wrap p{margin:0 0 1.1em;}
.history-wrap .lead{color:var(--ink-soft);font-style:italic;margin-bottom:1.6em;}

/* First page heading style (day names etc appear inline, keep simple) */

/* ---------- Bottom controls ---------- */
.controls{
  position:fixed;left:0;right:0;bottom:0;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(0deg,#241c14,rgba(36,28,20,.85));
  padding:0 12px;z-index:90;gap:8px;
}
.controls.hidden{display:none;}
.controls button{
  background:var(--gold);border:none;color:#1c1712;font-weight:700;
  width:40px;height:36px;border-radius:8px;font-size:16px;cursor:pointer;
}
.controls button:disabled{opacity:.35;}
.page-indicator{
  color:#d8c9a3;font-size:13px;flex:1;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.page-indicator input{
  width:48px;text-align:center;background:#12100c;border:1px solid #4a3d2a;
  color:#eee;border-radius:5px;padding:4px 2px;font-size:13px;
}

/* Intro / SEO text block visible under first page for crawlers & context */
.seo-intro{
  max-width:560px;margin:0 auto;padding:0 14px 30px;color:var(--ink-soft);
  font-size:14px;line-height:1.7;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

footer.site-footer{
  background:#1c1712;color:#a89876;text-align:center;font-size:12px;
  padding:14px 10px 70px;display:none;
}