/* Parchment theme: dark table, torn-paper sheet, maroon / gold ink. Loaded after style.css. */
:root {
  color-scheme: light;
  --bg: #17120d; --surface: rgba(255, 248, 230, .38); --fg: #3a1a12; --muted: #6a3b24;
  --line: rgba(143, 99, 48, .65); --accent: #4a1212; --accent-fg: #e9c98f; --gold: #8f6330;
  --danger: #8f1d1d; --ok: #3d5a1f; --tan: #c8a574; --maroon: #4a1212;
  --c0: #2c4a7c; --c1: #8a2f3a; --c2: #8a5f10; --c3: #3a6b4a; --c4: #5a4390; --c5: #2a6a80; --cover-fg: #f8f1dc;
  --font-body: 'Pragati Narrow', 'Anek Malayalam', 'Noto Sans Malayalam', system-ui, sans-serif;
  --font-display: 'Crimson Pro', 'Noto Serif Malayalam', 'Anek Malayalam', Georgia, serif;
  --ml: 'Anek Malayalam', 'Noto Sans Malayalam', sans-serif;
  --pad: clamp(22px, 5.6vw, 70px);
}
html { background: #17120d; }
body { background: #17120d; color: var(--fg); font-size: 1.25rem; line-height: 1.45; }
a { color: var(--maroon); }
:focus-visible { outline-color: var(--maroon); }

/* the sheet */
.wrap {
  position: relative; isolation: isolate; container-type: inline-size;
  max-width: 1240px; margin: 28px auto; padding: 46px var(--pad) 78px;
}
.wrap::before, .wrap::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.wrap::before { z-index: -2; top: 19cqw; bottom: 14cqw; background: url('/assets/d_mid.webp') 0 0 / 100% auto repeat-y; }
.wrap::after {
  z-index: -1; top: 0; bottom: 0;
  background: url('/assets/d_top.webp') top center / 100% auto no-repeat, url('/assets/d_bot.webp') bottom center / 100% auto no-repeat;
}
.wrap.loading { min-height: 60vh; }

/* header */
.top { gap: 12px 24px; padding: 0 0 4px; border: 0; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: #3f1a10; }
.brand-logo { width: 82px; height: 82px; border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 30, 10, .45); flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; letter-spacing: .06em; line-height: 1.05; text-transform: uppercase; }
.brand-sub { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; letter-spacing: .07em; text-transform: uppercase; color: #6a3b24; margin-top: 2px; }
.nav { gap: 12px; }
.tab { font-size: 1.55rem; line-height: 1; color: #2a1710; padding: 12px 24px; border: 0; border-radius: 999px; }
.tab[aria-current="page"] { color: #2a1710; background: linear-gradient(#dcac62, #c68f45); box-shadow: 0 1px 3px rgba(80, 40, 10, .35); }
.tab:hover { background: rgba(200, 165, 116, .45); }

.banner { margin: 14px calc(34px - var(--pad)) 8px; border-top: 3px solid #8a5a2b; border-bottom: 3px solid #8a5a2b; box-shadow: 0 4px 12px rgba(30, 15, 5, .5); line-height: 0; background: #17110c; }
.banner img { width: 100%; height: auto; display: block; }

/* headings & text */
h1, h2, .highlight h2, .prose h2 { font-family: var(--font-display); font-weight: 500; color: var(--maroon); }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.2; }
.highlight h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; }
.prose h2 { font-size: 1.7rem; }
.lede, .hint, .cond, .genre, .gal-cap { color: var(--muted); }
.author { color: #4a1a10; font-family: var(--ml); font-weight: 600; }
.info h1 { font-family: var(--ml); font-weight: 800; color: #4a1010; }
.mail, .price { font-family: var(--font-body); }
.price { font-weight: 700; color: var(--maroon); }
.intro { padding-block: 22px 0; }
main > h1:first-child { margin-top: 22px; }

/* buttons, inputs */
.btn { background: #2a1810; color: #d9a45f; border: 0; border-radius: 0; font-family: var(--font-display); font-size: 1.2rem; padding: 9px 20px; }
.btn.ghost { background: var(--tan); color: #2a1710; }
.btn.danger { background: transparent; color: var(--danger); border: 2px solid var(--danger); }
.btn.small { font-size: 1rem; padding: 3px 12px; }
.field { background: rgba(255, 250, 235, .55); border: 2px solid #3d1812; border-radius: 2px; color: var(--fg); font-size: 1.15rem; }
.field::placeholder { color: #6a4a30; opacity: 1; }
label.f { color: var(--muted); font-size: 1.05rem; }
label.f .field { background: rgba(255, 250, 235, .55); }
.chip { border: 0; border-radius: 8px; font-size: 1.3rem; padding: 5px 15px; color: #2a1710; }
.chip[aria-pressed="true"] { background: var(--tan); color: #2a1710; }
.seg { border-color: #3d1812; border-width: 2px; }
.seg button[aria-pressed="true"] { background: #2a1810; color: #d9a45f; }

/* book tiles */
.grid { grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 26px 20px; }
.book { color: var(--maroon); }
.photo, .cover { border-radius: 3px; box-shadow: 2px 5px 10px rgba(50, 25, 10, .5); }
.photo { background: rgba(255, 248, 230, .3); }
.cap { align-items: center; text-align: center; margin-top: 10px; }
.cap strong { font-weight: 700; font-size: 1.2rem; line-height: 1.15; color: var(--maroon); }
.cap span { color: var(--muted); font-size: 1rem; line-height: 1.2; }
.meta { align-items: center; margin-top: 2px; }
.cv-title { font-family: var(--ml); font-weight: 700; font-size: 1.05rem; }
.cv-author { font-size: .95rem; }
.meta + * , .meta { text-align: center; }
.row { justify-content: center; }
.soldtxt { color: #8f1d1d; }
.badge { background: #7a1f1f; font-family: var(--font-body); }
/* New Arrival tag hangs off the top-right corner so it never covers the title or author */
.badge.new, .cover .badge.new {
  top: 8px; bottom: auto; left: auto; right: -5px; font-size: .95rem; line-height: 1; padding: 4px 8px;
  background: #8a5a1b; color: #f6e3bd; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); z-index: 2;
}
.photo .badge.new { right: 4px; }
.cover:has(.badge.new) { padding-top: 34px; }

/* featured / panels */
.highlight { margin-top: 26px; padding: 18px 22px 24px; position: relative; border: 2px solid var(--gold); }
.highlight::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(143, 99, 48, .8); pointer-events: none; }
.panel { position: relative; border: 2px solid var(--gold); border-radius: 0; background: rgba(255, 248, 230, .2); }
.panel::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(143, 99, 48, .75); pointer-events: none; }
.panel > * { position: relative; }
.panel h2 { font-family: var(--font-display); font-weight: 600; color: var(--maroon); font-size: 1.5rem; }
.note { background: rgba(255, 248, 230, .45); border-color: var(--gold); border-radius: 0; }
.note.ok { border-color: var(--ok); }
.item { border: 1px solid var(--line); border-radius: 0; background: rgba(255, 248, 230, .35); }
.item .thumb, .pv-box { border-color: var(--line); background: rgba(255, 248, 230, .4); }
.codes, .qr { background: rgba(255, 250, 235, .7); border-color: var(--line); }
.tabs { gap: 8px; }
.admin-top { border-bottom: 3px double #8a5a2b; }
.admin-top h1 { font-size: 2rem; }
.preview-banner { background: rgba(255, 248, 230, .55); border-color: var(--maroon); color: var(--maroon); border-radius: 0; }

/* detail page */
.face { box-shadow: 3px 6px 12px rgba(50, 25, 10, .55); border-radius: 3px; }
.contact { border-top: 3px double #8a5a2b; }

/* gallery */
.gal-btn { background: #f4e8cc; padding: 10px; border-radius: 0; aspect-ratio: auto; box-shadow: 2px 6px 12px rgba(50, 25, 10, .45); }
.gal-btn img { aspect-ratio: 1; }

/* footer */
.foot { border-top: 3px double #8a5a2b; margin-top: 44px; font-size: 1.4rem; color: #6a3b24; }
.social { border: 2px solid #4a1212; color: #4a1212; font-weight: 700; font-size: 1.3rem; padding: 4px 18px; }
.social:hover { background: #4a1212; color: #e9c98f; }

/* coming soon / maintenance / about */
.soon-logo img { filter: drop-shadow(0 8px 18px rgba(40, 20, 5, .5)); }
.soon-logo.dim img { filter: brightness(.5) drop-shadow(0 8px 18px rgba(40, 20, 5, .5)); }
.soon-over h1 { color: inherit; font-family: var(--font-display); }
.about-logo { box-shadow: 4px 6px 12px rgba(50, 25, 10, .55); }
.prose { font-size: 1.3rem; }
.prose h2 { margin-top: 24px; }

/* phones */
@media (max-width: 700px) {
  body { font-size: 1.12rem; }
  :root { --pad: 32px; }
  .wrap { margin: 14px auto; padding: 34px var(--pad) 62px; }
  .wrap::before { top: 36cqw; bottom: 29cqw; background-image: url('/assets/m_mid.webp'); }
  .wrap::after { background-image: url('/assets/m_top.webp'), url('/assets/m_bot.webp'); }
  .top { flex-direction: column; align-items: center; gap: 8px; }
  .brand { gap: 10px; }
  .brand-logo { width: 54px; height: 54px; }
  .brand-name { font-size: 1.6rem; }
  .brand-sub { font-size: .8rem; }
  .nav { gap: 4px; justify-content: center; }
  .tab { font-size: 1.2rem; padding: 8px 14px; }
  .banner { margin: 10px calc(12px - var(--pad)) 6px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .highlight { padding: 12px 12px 18px; }
  .foot { font-size: 1.1rem; }
}

/* Trending / New Arrivals shelves: one scrolling row */
.shelf { position: relative; }
.shelf-track { display: flex; grid-template-columns: none; gap: 0 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 4px 10px; margin: 0 -4px; }
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-track > li { flex: 0 0 9.2rem; scroll-snap-align: start; min-width: 0; }
.shelf-btn { position: absolute; top: 95px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #8a5a2b; background: #2a1810; color: #d9a45f; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 0 4px; box-shadow: 0 2px 6px rgba(30, 15, 5, .5); }
.shelf-btn[hidden] { display: none; }
.shelf-btn.prev { left: -14px; }
.shelf-btn.next { right: -14px; }
.highlight + .highlight { margin-top: 18px; }
@media (max-width: 700px) { .shelf-track > li { flex-basis: 8.4rem; } .shelf-btn { width: 36px; height: 36px; font-size: 24px; top: 80px; } .shelf-btn.prev { left: -8px; } .shelf-btn.next { right: -8px; } }

/* promotion bar under the banner */
.promo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 14px; margin: 0 calc(34px - var(--pad)) 8px; padding: 10px 16px; text-align: center; background: linear-gradient(#c68f45, #a8732c); color: #2a1208; border-bottom: 3px solid #8a5a2b; box-shadow: 0 3px 8px rgba(30, 15, 5, .4); }
.promo strong { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.promo span { font-size: 1.1rem; opacity: .8; }
.banner:has(+ .promo) { margin-bottom: 0; }
@media (max-width: 700px) { .promo { margin-inline: calc(12px - var(--pad)); } .promo strong { font-size: 1.25rem; } }
input.field:not([type=file]), select.field { height: 48px; box-sizing: border-box; }

/* front / back thumbnails on the book page */
.thumbs { display: flex; gap: 14px; }
.thumb-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--fg); font-size: 1.05rem; line-height: 1.2; }
.thumb-img { display: block; width: 4.4rem; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; border: 3px solid transparent; box-shadow: 1px 3px 6px rgba(50, 25, 10, .45); opacity: .75; }
.thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-img .cover { height: 100%; aspect-ratio: auto; padding: 4px; font-size: .4rem; box-shadow: none; }
.thumb-img .cv-title { font-size: .6rem; line-height: 1.2; } .thumb-img .cv-author { display: none; }
.thumb-btn[aria-pressed="true"] .thumb-img { border-color: #4a1212; opacity: 1; }
.thumb-btn[aria-pressed="true"] span:last-child { font-weight: 700; color: var(--maroon); }
.detail { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
.viewer { max-width: 19rem; }
@media (max-width: 48rem) { .detail { grid-template-columns: minmax(0, 1fr); } .viewer { max-width: 17rem; margin-inline: auto; } }