:root {
  --ink: #102a31;
  --deep: #081d25;
  --papyrus: #f1e7ce;
  --paper: #fffaf0;
  --gold: #d8a63d;
  --gold-light: #e9c979;
  --red: #9f3527;
  --muted: #667579;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--papyrus); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; }

.masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 520px;
  padding: clamp(2rem, 7vw, 7rem);
  color: var(--paper);
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(8,29,37,.98), rgba(8,29,37,.87)),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(232,199,120,.06) 48px),
    var(--deep);
}
.masthead::after { content: "𓂀  𓅃  𓆣  𓋹"; position: absolute; right: 3vw; bottom: -2rem; color: rgba(232,199,120,.08); font-size: clamp(5rem, 12vw, 11rem); white-space: nowrap; }
.back { position: absolute; top: 2rem; left: clamp(2rem, 7vw, 7rem); z-index: 2; color: var(--gold-light); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.title-block { align-self: end; position: relative; z-index: 1; max-width: 760px; }
.eyebrow, .kicker { margin: 0 0 1rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: .95; }
h1 { font-size: clamp(4.5rem, 10vw, 9rem); letter-spacing: -.055em; }
h1 span { color: var(--gold-light); }
.intro { max-width: 670px; margin: 2rem 0 0; color: #d9dfdc; font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 1.7rem); line-height: 1.45; }
.seal { align-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 150px; height: 150px; margin-left: 3rem; color: var(--deep); background: var(--gold-light); border: 1px solid var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 10px rgba(232,199,120,.1); }
.seal span { font-size: 4rem; line-height: 1; }
.seal small { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

main { max-width: 1500px; margin: 0 auto; }
.reader { padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 7vw, 7rem); }
.reader-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.reader h2, .archive-note h2 { font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -.04em; }
.page-status { display: flex; flex-direction: column; align-items: end; margin: 0; color: var(--red); }
.page-status strong { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; }
.notebook-page { margin: 0; text-align: center; }
.notebook-page a { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: clamp(.5rem, 1.2vw, 1rem); background: var(--paper); box-shadow: 0 22px 65px rgba(8,29,37,.22); }
.notebook-page img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; }
.notebook-page figcaption { margin-top: 1rem; color: var(--muted); font-size: .78rem; }

.controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; margin-top: 2rem; }
.controls > button { padding: .85rem 1.1rem; color: var(--paper); background: var(--deep); border: 1px solid var(--deep); font: 700 .75rem var(--sans); letter-spacing: .06em; cursor: pointer; text-transform: uppercase; }
.controls > button:hover:not(:disabled) { color: var(--deep); background: var(--gold-light); border-color: var(--gold-light); }
.controls > button:disabled { cursor: default; opacity: .35; }
.page-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.page-dots button { width: 2rem; height: 2rem; padding: 0; color: var(--ink); background: transparent; border: 1px solid rgba(16,42,49,.3); cursor: pointer; font: 600 .7rem var(--sans); }
.page-dots button:hover, .page-dots button[aria-current="page"] { color: var(--paper); background: var(--red); border-color: var(--red); }
.keyboard-note { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; text-align: center; }

.archive-note { margin: 0 clamp(1.25rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem); padding: clamp(2rem, 5vw, 4rem); color: var(--paper); background: var(--deep); border-top: 4px solid var(--gold); }
.archive-note p:last-child { max-width: 850px; margin: 2rem 0 0; color: #d1d9d6; font-family: var(--serif); font-size: 1.25rem; }

footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1.25rem, 7vw, 7rem); color: #cbd5d2; background: #06171d; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
footer a { color: var(--gold-light); }

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr; min-height: 610px; }
  .seal { align-self: start; width: 95px; height: 95px; margin: 6rem 0 0 auto; }
  .seal span { font-size: 2.5rem; }
  .seal small { font-size: .58rem; }
  .title-block { grid-row: 2; }
  .reader-heading { align-items: start; flex-direction: column; }
  .page-status { align-items: start; }
  .controls { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .page-dots { grid-column: 1 / -1; grid-row: 2; }
  .controls > button { min-height: 3.5rem; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}