:root {
  color-scheme: light;
  font-family: Poppins, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brown:#483b2f;
  --ink:#25211d;
  --gold:#cc8613;
  --gold-dark:#9e6810;
  --taupe:#e9e4df;
  --soft:#f7f5f1;
  --line:#ddd6cd;
}

* { box-sizing:border-box; }
html { background:var(--soft); }
body { margin:0; min-width:320px; color:var(--ink); background:var(--soft); }
button { font:inherit; letter-spacing:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }

.site-header { position:sticky; top:0; z-index:20; background:#fff; box-shadow:0 4px 18px rgba(39,29,20,.12); }
.utility-bar { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:5px clamp(18px,4vw,58px); background:var(--taupe); }
.top-link-bar { min-width:0; display:flex; gap:clamp(14px,2.3vw,34px); overflow-x:auto; white-space:nowrap; font-size:13px; font-weight:700; scrollbar-width:none; }
.top-link-bar::-webkit-scrollbar { display:none; }
.top-link-bar a:hover { color:var(--gold-dark); }
.consult-link { flex:0 0 auto; padding:8px 15px; border-radius:999px; background:var(--gold); color:#17110a; font-size:12px; font-weight:800; }
.utility-actions { display:flex; align-items:center; gap:10px; }
.offline-link { flex:0 0 auto; padding:7px 11px; border:1px solid rgba(72,59,47,.25); border-radius:999px; background:#fff; color:var(--brown); font-size:10px; font-weight:850; text-transform:uppercase; }
.offline-link:hover { border-color:var(--gold); color:var(--gold-dark); }
.brand-row { min-height:66px; display:grid; grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr); align-items:center; gap:24px; padding:7px clamp(18px,4vw,58px); background:#fff; }
.brand-row a { justify-self:start; display:block; }
.brand-row img { width:min(170px,22vw); max-height:50px; object-fit:contain; object-position:left center; display:block; mix-blend-mode:multiply; }
.brand-row h1 { margin:0; font-size:clamp(24px,3vw,35px); line-height:1; text-align:center; white-space:nowrap; }
.catalog-tabs { min-height:44px; display:flex; align-items:stretch; justify-content:center; border-top:1px solid #eee9e3; border-bottom:1px solid var(--line); background:#fff; }
.catalog-tabs a { min-width:150px; display:grid; place-items:center; padding:0 22px; border-right:1px solid var(--line); background:#fff; color:#544c45; font-size:13px; font-weight:800; white-space:nowrap; }
.catalog-tabs a:first-child { border-left:1px solid var(--line); }
.catalog-tabs a:hover { color:var(--gold-dark); }
.catalog-tabs a.active { background:#f7f1e7; color:var(--gold-dark); box-shadow:inset 0 -3px 0 var(--gold); }

main { min-height:calc(100vh - 150px); padding-bottom:38px; }
.catalog-toolbar { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:14px clamp(18px,4vw,58px) 12px; background:#fff; border-bottom:1px solid var(--line); }
.catalog-toolbar h2 { margin:2px 0 0; font-size:clamp(20px,2.3vw,29px); line-height:1.05; }
.eyebrow { margin:0; color:var(--gold-dark); font-size:10px; font-weight:850; text-transform:uppercase; }
.page-controls { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.page-controls p { min-width:92px; margin:0; color:#625a53; font-size:12px; font-weight:750; text-align:center; }
.icon-button,.thumb-button { min-height:36px; border:1px solid #cec6bc; background:#fff; color:var(--brown); font-weight:800; }
.icon-button { width:38px; border-radius:50%; font-size:20px; }
.thumb-button { padding:0 14px; border-radius:4px; font-size:12px; }
.icon-button:hover,.thumb-button:hover { border-color:var(--gold); color:var(--gold-dark); }

.book-stage { position:relative; display:grid; place-items:center; min-height:calc(100dvh - 220px); padding:24px clamp(48px,7vw,110px); overflow:hidden; background:#d9d4ce; }
.book { width:min(1180px,82vw); perspective:1800px; }
.page-frame { position:relative; margin:0; overflow:hidden; border:1px solid rgba(44,34,24,.18); border-radius:2px; background:#fff; box-shadow:0 18px 44px rgba(38,28,18,.22); touch-action:pan-y; }
.page-frame::after { content:""; position:absolute; inset:0 auto 0 0; width:22px; pointer-events:none; background:linear-gradient(90deg,rgba(30,22,15,.12),transparent); }
.page-frame img { width:100%; height:auto; max-height:calc(100dvh - 268px); display:block; object-fit:contain; background:#fff; }
.custom-page { width:100%; max-height:calc(100dvh - 268px); aspect-ratio:16 / 9; display:grid; grid-template-columns:42% 58%; background:#fff; }
.custom-page[hidden], #page-image[hidden] { display:none; }
.cover-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(34px,5vw,76px); background:#fff; }
.cover-copy.dark { background:#11110f; color:#fff; }
.cover-copy h3 { margin:0; font-size:clamp(34px,5vw,70px); line-height:.98; letter-spacing:0; }
.cover-copy p { max-width:32ch; margin:22px 0 30px; color:#5e5750; font-size:clamp(13px,1.35vw,19px); line-height:1.5; }
.cover-copy.dark p { color:#d8d3cd; }
.cover-copy .cover-kicker { margin:0 0 20px; color:var(--gold); font-size:clamp(10px,1.1vw,14px); font-weight:850; text-transform:uppercase; }
.cover-art { min-width:0; min-height:0; overflow:hidden; }
.cover-art img { width:100%; height:100%; max-height:none; object-fit:cover; background:#ddd; }
.cover-logo { position:relative; width:min(240px,82%); aspect-ratio:435 / 191; overflow:hidden; }
.cover-logo img { position:absolute; width:172.42%; height:auto; max-width:none; max-height:none; left:-36.32%; top:-141.4%; background:transparent; }
.closing-page { grid-template-columns:1fr; place-items:center; padding:clamp(34px,7vw,90px); text-align:center; background:#f7f5f1; }
.closing-page .cover-logo { width:min(280px,60vw); margin:0 auto 24px; }
.closing-page h3 { margin:0; color:var(--brown); font-size:clamp(36px,5vw,68px); line-height:1; }
.closing-page p { max-width:42ch; margin:20px auto 0; color:#625a53; font-size:clamp(15px,1.5vw,20px); line-height:1.5; }
.turn-zone { position:absolute; z-index:2; top:0; bottom:0; width:10%; border:0; background:transparent; color:var(--brown); }
.turn-zone span { position:absolute; top:50%; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(72,59,47,.22); border-radius:50%; background:rgba(255,255,255,.78); box-shadow:0 4px 14px rgba(38,28,18,.12); font-size:21px; opacity:.62; transform:translateY(-50%); transition:opacity 140ms ease, background 140ms ease; }
.turn-zone:hover span,.turn-zone:focus-visible span { background:#fff; opacity:1; }
.turn-zone:disabled { visibility:hidden; }
.previous-zone { left:0; }
.previous-zone span { right:14px; }
.next-zone { right:0; }
.next-zone span { left:14px; }
.turn-zone:focus-visible { outline:3px solid var(--gold); outline-offset:-5px; }

.thumbnail-drawer { padding:22px clamp(18px,4vw,58px) 40px; border-top:1px solid var(--line); background:#fff; }
.thumbnail-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.thumbnail { padding:0; overflow:hidden; border:2px solid transparent; border-radius:3px; background:#fff; box-shadow:0 5px 16px rgba(38,28,18,.12); }
.thumbnail img { width:100%; display:block; }
.thumbnail span { display:block; padding:6px; color:#625a53; font-size:10px; font-weight:800; }
.thumbnail-cover { aspect-ratio:16 / 9; display:grid!important; place-items:center; padding:14px!important; background:#151411; color:#fff!important; font-size:clamp(12px,1.3vw,18px)!important; text-align:center; }
.thumbnail-cover.light { background:#f5f2ed; color:var(--brown)!important; }
.thumbnail.active { border-color:var(--gold); }

@media (max-width:1050px) {
  .utility-bar { min-height:36px; }
  .top-link-bar { gap:13px; font-size:11px; }
  .consult-link { padding:7px 10px; font-size:10px; }
  .brand-row { min-height:54px; grid-template-columns:minmax(118px,1fr) auto minmax(118px,1fr); gap:14px; }
  .brand-row img { width:138px; max-height:42px; }
  .brand-row h1 { font-size:clamp(22px,3.3vw,30px); }
  .catalog-tabs { min-height:38px; }
  .catalog-tabs a { min-width:0; padding:0 24px; }
  .book-stage { min-height:calc(100dvh - 200px); padding:18px 44px; }
  .book { width:min(920px,90vw); }
  .page-frame img { max-height:calc(100dvh - 240px); }
  .thumbnail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:720px) {
  .utility-bar { padding-inline:18px; }
  .top-link-bar { gap:18px; }
  .consult-link { display:none; }
  .offline-link { display:none; }
  .brand-row { grid-template-columns:minmax(105px,1fr) auto minmax(105px,1fr); padding-inline:18px; }
  .brand-row img { width:112px; }
  .brand-row h1 { max-width:45vw; font-size:19px; white-space:normal; }
  .catalog-tabs { justify-content:flex-start; overflow-x:auto; }
  .catalog-tabs a { flex:1 0 auto; padding-inline:18px; }
  .catalog-toolbar { align-items:start; padding:10px 18px; }
  .catalog-toolbar h2 { font-size:20px; }
  .thumb-button { display:none; }
  .book-stage { min-height:0; padding:18px 34px; }
  .book { width:100%; }
  .page-frame img { max-height:none; }
  .custom-page { max-height:none; }
  .cover-copy { padding:24px; }
  .cover-copy h3 { font-size:clamp(28px,6vw,46px); }
  .cover-copy p { margin-block:14px 18px; }
  .cover-logo { width:min(170px,90%); }
  .thumbnail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (hover:none) and (pointer:coarse) {
  .turn-zone { display:none; }
}