*{box-sizing:border-box}

body{
 margin:0;
 background:#241b14;
 color:#f0dfc1;
 font-family:Georgia,serif;
}

header{
 background:#140f0b;
 padding:18px 25px;
 border-bottom:3px solid #a18458;
}

header h1{
 margin:0;
 font-size:clamp(19px,3vw,28px);
}

nav{
 display:flex;
 gap:18px;
 flex-wrap:wrap;
 margin-top:12px;
}

a{color:#f0dfc1}

main{
 max-width:1500px;
 margin:auto;
 padding:20px;
}

h2{
 font-size:clamp(20px,3vw,29px);
}

.viewer{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:18px;
}

.panel{
 background:#d7c4a1;
 color:#241b12;
 padding:16px;
 border:2px solid #96784f;
 min-width:0;
}

.panel h3{margin-top:0}

iframe{
 width:100%;
 height:900px;
 border:0;
 background:white;
}

.ocr{
 white-space:pre-wrap;
 overflow-wrap:anywhere;
 font:15px/1.6 Consolas,monospace;
 background:#f5ecd9;
 padding:20px;
 min-height:70vh;
}

.controls{
 display:flex;
 justify-content:space-between;
 gap:12px;
 margin:22px 0;
 flex-wrap:wrap;
}

.controls a{
 background:#8c241b;
 padding:13px 20px;
 text-decoration:none;
 border:1px solid #c69a67;
}

.notice{font-size:13px}

.page-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
 gap:12px;
}

.page-grid a{
 background:#5a3928;
 padding:10px;
 text-align:center;
}

@media(max-width:800px){
 .viewer{grid-template-columns:1fr}
 iframe{height:900px}
 .ocr{min-height:200px}
  main{padding:10px}
 .panel{padding:10px}
}


/* Synchronized page navigation */
iframe {
    pointer-events: none !important;
}

iframe, .viewer iframe {
    touch-action: none !important;
}
/* Internet Archive toolbar cleanup - test only */