/* ==========================================================
   THE READING ROOM — tokens
   ========================================================== */
:root{
  --cream:       #f3ead8;
  --paper:       #fbf6ec;
  --brass:       #c89b5c;
  --brass-dark:  #a97c3f;
  --ink:         #2b1d14;
  --ink-soft:    #5b4636;
  --wood-dark:   #3d2a1f;

  --font-display: "Fraunces", serif;
  --font-body: "Work Sans", sans-serif;
}

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

html{ height:100%; }

body{
  /* Your own background photo — placed at its native 1920x1080 size and
     centered; on screens smaller than that it's simply cropped, never
     scaled down. Swap the file at BG.jpg for your own image (same name,
     same 1920x1080 size) and nothing else needs to change. */
  background-image: url('BG.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1920px 1080px;
  background-attachment: fixed;
  background-color: #f7f5f1; /* neutral light fallback while BG.jpg loads / if missing */
  font-family: var(--font-body);
  color: var(--ink);
  height:100%;
  overflow:hidden;
}

/* App shell: header + cabinet fill the viewport and never scroll as a
   whole. Only .cabinet-interior scrolls, so the header stays put. */
.app-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:2;
}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{
  flex-shrink:0;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  row-gap: 8px;
  max-width:740px;
  width:100%;
  margin:0 auto;
  padding: 24px 20px 14px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ color: var(--brass-dark); flex-shrink:0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--wood-dark);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}
.brand-tagline{
  font-size: 0.78rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-soft);
  text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}

.contact-btn{
  font-family: var(--font-body);
  font-weight:600;
  font-size: 0.85rem;
  letter-spacing:0.03em;
  color: var(--wood-dark);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  border: 1.5px solid var(--brass-dark);
  border-radius: 999px;
  padding: 9px 20px;
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.contact-btn:hover{
  background: var(--brass-dark);
  color: var(--paper);
  transform: translateY(-1px);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  flex-shrink:0;
  text-align:center;
  padding: 8px 16px 12px;
}
.site-footer p{
  margin:0;
  font-size: 0.72rem;
  color: var(--wood-dark);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

/* ==========================================================
   CABINET — transparent, no frame; just the books and a thin
   cream shelf line under each row
   ========================================================== */
.cabinet-wrap{
  flex: 1;
  min-height: 0;                 /* required so the flex child can scroll internally */
  max-width: 740px;
  width:100%;
  margin: 0 auto;
  padding: 4px 20px 80px;
  display:flex;
}

/* the scrolling interior — this is the ONLY part of the page that scrolls
   on larger screens; the header stays fixed. Capped at its current
   maximum size (max-height below); it only shrinks below that once the
   available space actually gets tight — e.g. to avoid overlapping the
   footer — rather than shrinking proportionally with every small change
   in viewport height. */
.cabinet-interior{
  flex:1;
  min-width:0;
  height: 100%;
  max-height: 605px;
  align-self: flex-start;
  margin-top: 30px;
  border: 1px solid #808080;
  border-radius: 10px;
  padding: 0 16px;
  overflow-y:auto;
  overflow-x:hidden;
  background: transparent;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}
.cabinet-interior::-webkit-scrollbar{ display:none; width:0; height:0; }

/* shelf-rack holds the book grid plus the JS-inserted shelf lines,
   which are positioned absolutely under each visual row of books */
.shelf-rack{
  position:relative;
  padding-top: 14px;
  padding-bottom: 20px;
}

.shelf-books{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 18px;
  row-gap: 56px;
  align-items:end;
  position:relative;
  z-index:2;
}

/* thin shelf line, inserted by script.js under every row of
   books except the last — no shelf/floor below the final row */
.shelf-line{
  position:absolute;
  left:0; right:0;
  height:6px;
  border-radius: 3px;
  background: #bdb1a0;
  box-shadow:
    0 3px 6px rgba(0,0,0,0.3),
    0 6px 10px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);
  z-index:1;
}

/* ==========================================================
   BOOK
   ========================================================== */
.book{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.book-cover{
  all:unset;
  cursor:pointer;
  display:block;
  width:100%;
  aspect-ratio: 2/3;
  border-radius: 3px 6px 6px 3px;
  overflow:hidden;
  position:relative;
  box-shadow:
    -3px 0 0 rgba(0,0,0,0.25) inset,
    0 14px 20px -10px rgba(0,0,0,0.6);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.book-cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.book-cover .cover-shine{
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 30%);
  pointer-events:none;
}
.book-cover:hover{
  transform: translateY(-8px) rotate(-1deg);
  box-shadow:
    -3px 0 0 rgba(0,0,0,0.25) inset,
    0 26px 30px -12px rgba(0,0,0,0.65);
}
.book-cover:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

.about-btn{
  margin-top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(3px);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  line-height:1;
  cursor:pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.about-btn:hover{ background: var(--brass); color: var(--ink); transform: scale(1.08); }
.about-btn:focus-visible{ outline: 2px solid var(--brass); outline-offset:2px; }

/* ==========================================================
   MODALS
   ========================================================== */
.overlay{
  position:fixed; inset:0;
  background: rgba(20,12,6,0.55);
  backdrop-filter: blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding: 20px;
}
.overlay.active{ display:flex; }

.modal{
  display:none;
  background: var(--paper);
  border-radius: 14px;
  max-width: 520px;
  width:100%;
  max-height: 82vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding: 30px 30px 26px;
  position:relative;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.06);
}
.modal.active{ display:block; animation: pop 0.18s ease; }
@keyframes pop{ from{ transform: scale(0.96); opacity:0; } to{ transform:scale(1); opacity:1; } }

.modal h3{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.4rem;
  color: var(--wood-dark);
  margin: 0 0 12px;
  padding-right: 20px;
}
.modal p{
  font-size:0.95rem;
  line-height:1.6;
  color: var(--ink-soft);
  margin:0;
}
.modal-close{
  all:unset;
  position:absolute;
  top:16px; right:18px;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  color: var(--ink-soft);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.modal-close:hover{ background: rgba(0,0,0,0.06); }

.file-modal iframe{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:60vh;
  border:none;
  border-radius:8px;
  background:#eee;
}
.file-download{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding: 30px 10px;
  text-align:center;
}
.file-download .file-icon{
  width:56px; height:56px;
  border-radius:12px;
  background: var(--brass);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
  font-size:0.75rem;
  text-transform:uppercase;
}
.modal-btn{
  display:inline-block;
  margin-top: 10px;
  background: var(--brass-dark);
  color: var(--paper);
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  padding: 11px 22px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.modal-btn:hover{ background: var(--wood-dark); transform: translateY(-1px); }

/* ==========================================================
   RESPONSIVE — 4 books per row down to 768px, then 3, then 2
   ========================================================== */
@media (max-width: 768px){
  .shelf-books{ grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 50px; }

  /* Below this width the fixed full-viewport shell stops making sense —
     there isn't enough room for a static header + internally-scrolling
     cabinet, so the page goes back to scrolling normally end to end. */
  html, body{ height:auto; overflow:visible; }
  .app-shell{ height:auto; }
  .cabinet-wrap{ display:block; padding: 4px 16px 30px; }
  .cabinet-interior{ height:auto; max-height:none; margin-top: 20px; padding: 14px 12px; overflow:visible; }
}

@media (max-width: 520px){
  .shelf-books{ grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 46px; }
  .site-header{ padding: 20px 16px 6px; }
  .brand-name{ font-size: 1.15rem; }
  .brand-tagline{ font-size: 0.7rem; }
}

@media (max-width: 380px){
  .contact-btn{ padding: 7px 14px; font-size:0.78rem; }
  .brand-name{ font-size: 1.05rem; }
  .brand-tagline{ font-size: 0.64rem; }
}