:root {
  --paper: #fffcf1;
  --ink: #222120;
  --green: #1a2f23;
  --rust: #74341e;
  --muted: #2c3930;
  --sans: "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #d9d8d1; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

.viewer-bar {
  position: sticky;
  inset: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 18px max(24px, calc((100vw - 1280px) / 2));
  border-bottom: 2px solid var(--green);
  background: rgba(255, 252, 241, .96);
  backdrop-filter: blur(12px);
}

.viewer-bar a { color: var(--ink); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.viewer-title { text-align: right; }
.viewer-title span { display: block; margin-bottom: 3px; color: var(--rust); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.viewer-title strong { font-size: 14px; }

.viewer-main { padding: 32px 24px 64px; overflow-x: auto; }
.page-canvas { position: relative; width: 100%; margin: 0 auto; background: #0c0e0f; box-shadow: 0 18px 50px rgba(21, 23, 20, .18); }
.page-canvas img { display: block; width: 100%; height: auto; }
.viewer--original .page-canvas { max-width: 1280px; }
.viewer--redesign .page-canvas { max-width: 1319px; }

.redesign-credit {
  position: absolute;
  right: 3%;
  bottom: .55%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 27%;
  height: .38%;
  padding-right: 0;
  background: #0f1012;
  color: #707174;
  font-size: clamp(9px, .9vw, 12px);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .viewer-bar { grid-template-columns: 1fr; gap: 8px; padding: 16px 20px; }
  .viewer-title { text-align: left; }
  .viewer-main { padding: 16px 16px 48px; }
  .page-canvas { width: 960px; max-width: none !important; margin: 0; }
}