/* ========== Base / Variables ========== */
:root{
  --blue:#3b8ba1;   /* cover blue */
  --brown:#6b4a2f;  /* cover brown */
  --text:#0e1628;
}

html,body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
}

/* A11y helper */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
}

/* Center page titles */
main > h1{ text-align:center; }

/* Filters bar */
.filters{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 16px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  margin:10px 16px 0;
  background:#fff;
}
.filters select{
  padding:6px 8px;
  border:1px solid #cbd5e1;
  border-radius:8px;
}
@media (max-width:640px){
  .filters{ flex-wrap:wrap; }
}


/* ========== Global Buttons & Layout Helpers ========== */
.btn{
  display:inline-block;
  padding:8px 12px;
  text-decoration:none;
  background:var(--blue);
  color:#fff;
  border-radius:10px;
}
.btn:hover{ filter:brightness(.96) }
.btn-alt{ background:var(--brown) }

.btn-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0;
}
.btn-row.single{ margin-top:10px }
/* extra gap when rows are stacked */
.btn-row + .btn-row{ margin-top:28px; }

/* ========== Header / Nav ========== */
#site-nav{
  display:flex;
  gap:18px;                 /* spacing between links */
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #ddd;
}
#site-nav a{
  text-decoration:none;
  color:var(--blue);
  font-weight: 600;
}
#site-nav a:hover{ text-decoration:underline; }

/* ========== Provenance Banner ========== */
#provenance{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid #ddd;
  background:linear-gradient(180deg,#fff,#f7f7f7);
}
#provenance .prov-text{ max-width:800px }
#provenance .prov-text{
  color: var(--brown);
  font-weight: 700;
}


/* ========== Footer ========== */
#site-footer{
  padding:24px 16px;
  border-top:1px solid #ddd;
  margin-top:24px;
}

/* ========== Home: Search by Number ========== */
.searchbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin:10px 0;
}
.searchbar input{
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  min-width:220px;
}
.searchbar button{
  padding:8px 14px;
  border:0;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  cursor:pointer;
}
.searchbar button:hover{ filter:brightness(.96) }
.hint{ color:#555; margin-top:6px }

/* ========== Strip View (one-row scroller) ========== */
.stripWrap{
  position:relative;
  padding:10px 16px;
  border-bottom:1px solid #eee;
}
.stripBar{
  display:flex;
  align-items:flex-start; /* allow img + caption stack */
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scroll-behavior:smooth;
}
.thumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:0 0 auto;          /* keep in one row */
}
.stripBar img{
  height:300px;           /* strip thumbnail height */
  width:auto;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
}
.stripBar img[aria-current="true"]{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(46,120,198,.15);
}
.thumb .tcap{
  font-size:.9rem;
  color:#555;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:320px;
}

/* strip arrows */
.stripNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}
.stripPrev{ left:8px }
.stripNext{ right:8px }

/* caption under strip */
.stripCaption{
  padding:6px 16px 0;
  color:#555;
  text-align:center;
}

/* Large viewer */
.viewerImg{ display:block; margin:0 auto; }
.viewerCtrls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center; /* center Prev/Next + Download */
  flex-wrap:wrap;
}

/* ========== Grid View ========== */
.gridWrap{ padding:14px 16px }
.gridControls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
#grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.gItem{
  position:relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
}
.gItem img{ display:block; width:100%; height:100px; object-fit:cover }
/* number-only badge */
.badge{
  position:absolute; top:6px; left:6px;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.85rem; border-radius:999px; padding:2px 6px;
}
.pager{
  display:flex; gap:6px; justify-content:center; margin-top:14px;
}
.pager a{
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  text-decoration:none;
  color:var(--blue);
}
.pager a[aria-current="page"]{
  background:var(--blue); color:#fff; border-color:var(--blue);
}

/* ========== Number List ========== */
.numListWrap{ padding:14px 16px }
#numList{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px;
}
#numList a{
  text-decoration:none;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:6px 8px;
  text-align:center;
  color:var(--blue);
}

/* Home hero cover */
.hero{ display:flex; justify-content:center; margin:12px 0 24px; }
.hero img{ max-width:280px; height:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* Center whole page content when .centered is on <main> */
.centered{ text-align:center; }

/* Tidy up common centered layouts */
.centered .searchbar{ justify-content:center; }
.centered .btn-row{ justify-content:center; }
.centered .hero{ justify-content:center; } /* cover image wrapper */

/* ========== About page ========== */
.aboutWrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px;   /* more space between the two columns */
  row-gap:24px;
  padding:14px 16px;
  align-items:start;
}
.aboutWrap h2{
  margin-top:0;
  text-align:center; /* center the “About the Book/Author” headers */
}
.aboutCover,
.aboutHeadshot{
  display:flex;
  justify-content:center; /* center images */
  margin:8px 0 12px;
}
.aboutCover img{ height:180px; width:auto; }
.aboutHeadshot img{ height:180px; width:auto; }

/* phones only: stack to 1 column, author below book */
@media (max-width: 640px){
  .aboutWrap{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* About: fully justify paragraphs */
.aboutWrap p{
  text-align: justify;
  text-justify: inter-word; /* better spacing on supporting browsers */
  hyphens: auto;            /* cleaner justification; uses page language */
}

/* About images: rounded corners (and a soft shadow) */
.aboutCover img,
.aboutHeadshot img{
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Home: feature bullets inside a centered page */
.centered .features{ 
  max-width: 900px;     /* keeps the list away from the screen edge */
  margin: 8px auto 20px;
  text-align: left;     /* list left-aligned even though the page is centered */
}
.centered .features ul{
  list-style: disc;
  padding-left: 1.2rem; /* neat indent for bullets */
  margin: 0;
}
.centered .features li{
  margin: 6px 0;        /* tighter line spacing between bullets */
  line-height: 1.4;
}

/* Scale large image to the screen */
.viewerImg{
  width:auto;
  height:auto;
  max-width:96vw;        /* never wider than the viewport */
  max-height:78dvh;      /* never taller than ~78% of the viewport (uses dynamic vh) */
}

/* Narrow the search box on phones */
@media (max-width: 640px){
  .searchbar input{
    width: 200px;   /* tweak this number to taste */
    min-width: 0;   /* override the desktop min-width */
  }
}