@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/assets/fonts/cinzel-decorative-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/assets/fonts/cinzel-decorative-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #2e241a;
  --muted: #604a34;
  --paper: #dfbd83;
  --paper-light: #ecd5ab;
  --line: #9d7950;
  --red: #763624;
  --green: #234a3d;
  --grain: url('/assets/paper-grain.svg');
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #59412d 0%, #302217 62%, #231910 100%);
  color: var(--ink);
  font: 1rem/1.75 Georgia, 'Times New Roman', serif;
  padding: 22px clamp(12px, 3vw, 42px) 30px;
}
h1, h2, h3, p, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; }
button, select, input { font: inherit; }
button, a, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-underline-offset: .25em; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #7b3b29; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: fixed; top: -100px; left: 20px; background: #f5e8cd; padding: 12px 20px; z-index: 100; }
.skip:focus { top: 12px; }
.masthead, .navigation, main, footer { max-width: 1280px; margin: auto; }
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding: 24px 40px; border: 1px solid #9c7249;
  background: var(--grain), linear-gradient(100deg, #b48a57 0%, #dfc095 8%, #e6cba1 50%, #ceaa78 100%);
  box-shadow: inset 0 0 20px #60402135, 0 9px 25px #09060255;
}
.wordmark { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.monogram { border: 3px double #6b3d29; width: 46px; height: 49px; display: grid; place-items: center; font-size: 32px; flex-shrink: 0; color: var(--red); }
.wordmark b { font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.15; display: block; }
.wordmark small { display: block; font-size: 12px; letter-spacing: .18em; margin-top: 5px; }
.masthead-links { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.canon-return { font-size: 14px; line-height: 1.35; max-width: 260px; color: #532d20; text-decoration-thickness: 1px; }
.private-mark { color: var(--red); border: 3px double #88412d; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; transform: rotate(-3deg); white-space: nowrap; }
.navigation {
  display: flex; justify-content: center; gap: 36px; position: sticky; top: 0; z-index: 20;
  padding: 0 24px; background: var(--grain), linear-gradient(#d4b487, #c8a574);
  border: 1px solid #8c623f; border-top: 0; box-shadow: 0 3px 10px #27160830;
}
.navigation button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 15px 4px 12px; color: #513c29; font-size: 16px; white-space: nowrap; }
.navigation button[aria-selected=true] { border-bottom-color: var(--red); color: var(--red); font-weight: 700; }
.navigation button:hover { color: var(--red); }
.navigation span { color: var(--red); margin-right: 4px; }
main { box-shadow: 0 14px 35px #0e08076b; }
main > section {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grain), radial-gradient(ellipse at 0% 4%, #83542644, transparent 30%), radial-gradient(ellipse at 100% 65%, #94623228, transparent 28%), linear-gradient(90deg, #c09a61 0%, #ddbd8a 1.4%, #e7cda3 4%, #ecd7b1 45%, #e5c89a 94%, #c49c65 99%, #926239 100%);
  border: 1px solid #8c633e; border-top: 0;
  box-shadow: inset 0 0 35px #7e542930;
}
main > section::after { content: ''; position: absolute; inset: 14px; border: 1px solid #77533655; box-shadow: inset 0 0 0 3px #e6c79d55; pointer-events: none; z-index: -1; }
.folio-heading { margin: 0 38px; padding: 22px 4px 17px; border-bottom: 3px double #99744d; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.folio-heading span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.folio-page-number { font-size: 18px; font-style: italic; white-space: nowrap; color: #6c452d; }
.eyebrow { color: var(--red); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; margin-bottom: 13px; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 55px; padding: 45px 7% 52px; }
.hero-copy { max-width: 670px; }
.hero h1 { font-size: clamp(35px, 4vw, 60px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 25px; text-transform: uppercase; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.75; max-width: 550px; }
.hero-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 17px; font-size: 15px; line-height: 1.4; background: #f0ddbb75; border: 1px solid #805634; border-radius: 1px; text-decoration: none; color: var(--ink); min-height: 42px; }
.button:hover { background: #f3e3c4; border-color: var(--red); }
.button.primary, .button.dark { background: #663b29; color: #f4e5c9; border-color: #663b29; }
.button.primary:hover, .button.dark:hover { background: #814932; }
.text-button { border: 0; background: none; color: var(--red); text-decoration: underline; text-underline-offset: 6px; font-size: 16px; padding: 9px 0; }
.hero-signature { display: block; font-family: 'Segoe Print', 'Bradley Hand', cursive; font-style: italic; font-size: 18px; color: #684830; margin-top: 28px; }
.hero-art { display: flex; flex-direction: column; align-items: center; justify-self: center; max-width: 390px; padding: 14px 14px 8px; background: #e2bf8d; border: 1px solid #957040; box-shadow: 5px 9px 15px #43241540; transform: rotate(2deg); }
.hero-art img { display: block; width: min(100%, 320px); height: auto; }
.art-caption { font-size: 12px; letter-spacing: .1em; color: #6a4932; margin-top: 15px; text-align: center; }
.section-heading { padding: 36px 40px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; border-top: 3px double #94724e; margin: 0 38px; }
.section-heading h2 { font-size: 36px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading > p { font-size: 16px; color: var(--muted); max-width: 340px; font-style: italic; }
.book-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; padding: 0 6% 48px; }
.book-card { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 23px; padding: 24px; min-width: 0; align-items: start; border: 3px double #96744b; background: var(--grain), linear-gradient(135deg,#efdcb5,#ddbc89); box-shadow: 3px 5px 10px #67432628; }
.book-cover { width: 100%; height: 180px; object-fit: contain; display: block; }
.text-book { width: 100%; min-height: 180px; background: #d1ac73; border: 3px double #795331; padding: 12px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 18px; }
.text-book span { font-size: 21px; line-height: 1.15; color: #663622; }
.text-book small { font-size: 12px; line-height: 1.3; letter-spacing: .08em; }
.book-copy h3 { font-size: 28px; margin-bottom: 12px; }
.book-copy .eyebrow { font-size: 12px; letter-spacing: .05em; margin-bottom: 8px; }
.book-copy > p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.book-links { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.book-links .button { font-size: 14px; padding: 9px 12px; }
.purchase-note { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 12px; font-style: italic; }
.author-note { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 55px; margin: 0 6%; padding: 34px 0 48px; border-top: 3px double #99744d; }
.author-note h2 { font-size: 32px; line-height: 1.2; }
.author-note > p { font-size: 17px; line-height: 1.85; }
.page-intro { padding: 38px 7% 35px; }
.page-intro h1 { font-size: clamp(36px,4vw,54px); text-transform: uppercase; margin-bottom: 18px; color: var(--red); }
.page-intro > p:not(.eyebrow), .cabinet-intro > div > p:not(.eyebrow) { font-size: 18px; line-height: 1.75; max-width: 760px; }
.records-feature { padding: 8px 7% 45px; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
.record-pair { display: flex; align-items: center; gap: 17px; padding: 12px 0; }
.record-pair img { width: 47%; height: auto; box-shadow: 3px 7px 14px #39231640; border: 1px solid #9b784d; }
.record-pair img:first-child { transform: rotate(-2deg); }
.record-pair img:last-child { transform: rotate(2deg); margin-top: 35px; }
.feature-copy h2 { font-size: 37px; margin-bottom: 23px; }
.feature-copy p { font-size: 17px; margin-bottom: 20px; line-height: 1.85; }
.archive-categories { padding: 0 7% 40px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.archive-category { padding-top: 17px; border-top: 3px double #93724d; }
.archive-category > span { font-size: 14px; color: var(--red); }
.archive-category h3 { font-size: 26px; margin: 11px 0 14px; }
.archive-category p { font-size: 16px; }
.rule-banner { margin: 0 7%; padding: 27px 20px; border-block: 3px double #8c6743; text-align: center; }
.rule-banner blockquote { font-size: 34px; font-style: italic; color: var(--red); }
.rule-banner p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.archive-link { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 32px 7% 48px; padding: 24px; border: 3px double #947049; background: var(--grain), #ebd4ab80; }
.archive-link strong { font-size: 19px; font-weight: 400; }
.archive-link p { font-size: 16px; margin-top: 7px; }
.archive-link .button { max-width: 330px; text-align: center; flex-shrink: 0; }
.artwork-grid { padding: 10px 6% 35px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px 28px; }
.artwork-card { min-width: 0; padding: 12px 12px 20px; background: var(--grain), #efdcb660; border: 1px solid #a27f51; box-shadow: 3px 6px 10px #4c311b23; }
.artwork-card button { display: block; width: 100%; border: 0; background: none; padding: 0; }
.artwork-frame { display: block; background: #b69261; padding: 6px; border: 1px solid #82623d; }
.artwork-frame img { display: block; width: 100%; height: auto; aspect-ratio: 558/720; object-fit: contain; }
.artwork-card button:hover .artwork-frame { border-color: var(--red); box-shadow: 0 3px 10px #47291c40; }
.artwork-card .eyebrow { font-size: 12px; letter-spacing: .04em; margin: 16px 0 8px; }
.artwork-card h2 { font-size: 26px; margin-bottom: 12px; }
.artwork-card p { font-size: 16px; line-height: 1.75; }
.artwork-note { max-width: 760px; padding: 0 28px 42px; text-align: center; margin: auto; font-size: 14px; color: var(--muted); font-style: italic; }
.cabinet-intro { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.cabinet-seal { flex-shrink: 0; border: 4px double #8b3927; padding: 15px 18px; color: #843c29; transform: rotate(-4deg); font-size: 12px; letter-spacing: .12em; text-align: center; }
.cabinet-seal b { display: block; font-size: 40px; line-height: 1.3; font-weight: 400; }
.reader-toolbar { padding: 0 5% 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.reader-toolbar > div { display: flex; align-items: center; gap: 10px; }
.reader-toolbar label { font-size: 16px; }
.reader-toolbar select { background: #f0ddbb; border: 1px solid #927048; padding: 9px 12px; color: var(--ink); font-size: 15px; min-height: 43px; max-width: 360px; }
.reader-navigation { display: flex; align-items: center; gap: 9px; }
.reader-navigation button { border: 1px solid #87613d; background: #e8cca0; color: var(--ink); padding: 9px 15px; font-size: 15px; min-height: 43px; }
.reader-navigation button:hover:enabled { background: #f2dfbc; }
.reader-layout { padding: 0 5% 30px; display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 26px; align-items: start; }
.journal-index { position: sticky; top: 77px; max-height: 850px; overflow-y: auto; scrollbar-width: thin; padding: 18px 12px; border: 3px double #97734b; background: var(--grain), linear-gradient(100deg,#ddbc89,#e7c99b); }
.journal-index h2 { font-size: 14px; letter-spacing: .05em; line-height: 1.4; padding: 2px 7px 16px; border-bottom: 1px solid #a17b4c; margin-bottom: 10px; color: var(--red); }
.journal-index ol { list-style: none; padding: 0; margin: 0; }
.journal-index button { display: flex; align-items: center; width: 100%; gap: 10px; text-align: left; color: var(--ink); padding: 9px 7px; margin-bottom: 3px; line-height: 1.4; font-size: 15px; border: 1px solid transparent; background: none; }
.journal-index button[aria-current=page] { background: #f0dcba; border-color: #8f5f3a; color: var(--red); }
.journal-index button:hover { background: #eed5ae; }
.journal-index img { width: 32px; height: 43px; object-fit: contain; flex-shrink: 0; }
.index-number { display: block; font-size: 12px; letter-spacing: .06em; color: #735333; margin-bottom: 2px; }
.journal-reader { min-width: 0; padding: 20px; background: var(--grain), #c9a46f85; border: 3px double #947049; box-shadow: 4px 6px 15px #54341f2b; }
.journal-reader header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.journal-reader header p { font-size: 12px; letter-spacing: .06em; color: #734f2e; }
.journal-reader header h2 { font-size: 27px; margin-top: 6px; color: var(--red); }
.zoom-page { background: none; border: 0; color: #6c3926; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; padding: 8px 0; flex-shrink: 0; }
.journal-image-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.journal-image-button img { display: block; max-width: 100%; width: auto; height: auto; max-height: 1000px; margin: auto; box-shadow: 2px 6px 14px #32200b55; }
.journal-reader .reader-navigation { justify-content: center; margin-top: 22px; }
.reader-counter { font-size: 15px; min-width: 80px; text-align: center; font-style: italic; }
.collection-note { display: flex; align-items: center; justify-content: space-between; gap: 25px; flex-wrap: wrap; margin: 0 5%; padding: 12px 0 40px; }
.collection-note p { max-width: 760px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.collection-note a { color: var(--red); font-size: 15px; }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 28px 40px; background: var(--grain), linear-gradient(#d1ad7c,#bb935f); border: 1px solid #8d6541; box-shadow: inset 0 -4px 15px #68432135; }
.footer-wordmark { font-size: 24px; text-decoration: none; color: #6b3525; }
footer p { font-size: 13px; }
footer > span { font-size: 12px; font-style: italic; }
.footer-canon { font-size: 15px; color: #592f20; }
dialog { padding: 0; border: 3px double #9c7343; width: min(1160px,94vw); max-height: 94vh; overflow-y: auto; background: var(--grain), #e3c69b; color: var(--ink); }
dialog::backdrop { background: #1a100bea; }
.dialog-heading { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: 0; z-index: 3; background: var(--grain), #e3c69b; border-bottom: 3px double #947049; }
.dialog-heading .eyebrow { margin-bottom: 6px; }
.dialog-heading h2 { font-size: 27px; color: var(--red); }
.dialog-close { width: 40px; height: 40px; border: 1px solid #8e6140; background: none; font-size: 28px; line-height: 1; color: var(--red); flex-shrink: 0; }
.dialog-image { padding: 20px; background: #b8956570; }
.dialog-image img { display: block; max-width: 100%; width: auto; height: auto; margin: auto; box-shadow: 0 4px 15px #2c180d40; }
dialog > p { padding: 16px 26px 22px; font-size: 15px; }
@media (max-width: 1050px) {
  .masthead { padding: 21px 28px; gap: 20px; }
  .masthead-links { gap: 15px; }
  .canon-return { max-width: 225px; }
  .hero { gap: 35px; padding: 40px 6%; }
  .hero h1 { font-size: 46px; }
  .book-card { grid-template-columns: 95px minmax(0,1fr); padding: 19px; gap: 18px; }
  .book-cover, .text-book { height: 148px; min-height: 148px; }
  .book-copy h3 { font-size: 25px; }
  .records-feature { gap: 35px; }
  .artwork-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reader-layout { grid-template-columns: 230px minmax(0,1fr); gap: 18px; }
  .reader-toolbar select { max-width: 300px; }
  .archive-link { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  body { padding: 10px 8px 18px; }
  .masthead { padding: 19px 19px; flex-wrap: wrap; gap: 17px; }
  .wordmark b { font-size: 25px; }
  .wordmark small { font-size: 12px; letter-spacing: .08em; }
  .masthead-links { width: 100%; justify-content: space-between; gap: 20px; }
  .canon-return { max-width: none; font-size: 14px; }
  .private-mark { font-size: 12px; }
  .navigation { gap: 24px; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; padding: 0 20px; }
  .navigation button { font-size: 15px; flex-shrink: 0; padding-block: 14px 11px; }
  main > section::after { inset: 8px; }
  .folio-heading { margin: 0 20px; padding-block: 18px 14px; align-items: flex-start; gap: 14px; }
  .folio-heading span:first-child { font-size: 12px; letter-spacing: .05em; max-width: 240px; }
  .folio-page-number { font-size: 17px; }
  .hero { grid-template-columns: 1fr .6fr; padding: 32px 25px 38px; gap: 24px; }
  .hero h1 { font-size: 36px; margin-bottom: 18px; }
  .hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .hero-actions { gap: 14px; margin-top: 20px; }
  .hero-art { padding: 8px; }
  .art-caption { font-size: 12px; letter-spacing: .04em; margin-top: 9px; }
  .hero-signature { font-size: 17px; margin-top: 22px; }
  .section-heading { margin: 0 24px; padding: 29px 0 22px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-heading h2 { font-size: 32px; }
  .book-grid { grid-template-columns: 1fr; padding: 0 24px 35px; gap: 20px; }
  .book-card { grid-template-columns: 110px minmax(0,1fr); padding: 21px; gap: 22px; }
  .book-cover, .text-book { height: 160px; min-height: 160px; }
  .author-note { grid-template-columns: 1fr; margin: 0 24px; gap: 24px; padding: 29px 0 38px; }
  .author-note h2 { font-size: 30px; }
  .author-note > p { font-size: 16px; }
  .page-intro { padding: 30px 25px; }
  .page-intro h1 { font-size: 36px; }
  .page-intro > p:not(.eyebrow), .cabinet-intro > div > p:not(.eyebrow) { font-size: 16px; }
  .records-feature { padding: 0 25px 32px; grid-template-columns: 1fr; gap: 25px; }
  .record-pair { max-width: 560px; }
  .feature-copy h2 { font-size: 32px; }
  .feature-copy p { font-size: 16px; }
  .archive-categories { padding: 0 25px 30px; grid-template-columns: 1fr; gap: 26px; }
  .rule-banner { margin: 0 25px; }
  .rule-banner blockquote { font-size: 29px; }
  .archive-link { margin: 27px 25px 38px; padding: 20px; gap: 20px; }
  .archive-link .button { max-width: 100%; }
  .artwork-grid { padding: 0 24px 30px; gap: 24px 18px; }
  .artwork-card { padding: 8px 8px 17px; }
  .artwork-card h2 { font-size: 24px; }
  .artwork-card p { font-size: 16px; }
  .cabinet-seal { display: none; }
  .reader-toolbar { padding: 0 24px 20px; gap: 15px; }
  .reader-toolbar > div:first-child { width: 100%; }
  .reader-toolbar select { flex: 1; min-width: 0; max-width: none; }
  .reader-layout { display: flex; flex-direction: column; padding: 0 20px 23px; gap: 22px; }
  .journal-reader { order: 1; width: 100%; padding: 14px; }
  .journal-reader header h2 { font-size: 25px; }
  .journal-index { order: 2; position: static; width: 100%; max-height: 380px; }
  .journal-index ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 8px; }
  .journal-index button { font-size: 14px; }
  .collection-note { margin: 0 24px; padding-bottom: 32px; }
  footer { padding: 25px; gap: 15px; flex-direction: column; align-items: flex-start; }
  .dialog-heading { padding: 16px 18px; }
  .dialog-heading h2 { font-size: 24px; }
  .dialog-image { padding: 10px; }
  dialog > p { padding: 14px 18px 20px; }
}
@media (max-width: 470px) {
  .monogram { width: 39px; height: 44px; font-size: 28px; }
  .wordmark b { font-size: 23px; }
  .masthead { padding: 17px; }
  .hero { grid-template-columns: 1fr; padding: 29px 24px 35px; gap: 30px; }
  .hero h1 { font-size: 39px; }
  .hero-art { max-width: 245px; }
  .book-card { grid-template-columns: 1fr; }
  .book-cover { width: 130px; height: auto; justify-self: center; }
  .text-book { width: 160px; min-height: 150px; height: auto; justify-self: center; }
  .book-copy h3 { font-size: 28px; }
  .artwork-grid { grid-template-columns: 1fr; }
  .artwork-card { padding: 12px 12px 20px; }
  .artwork-card h2 { font-size: 28px; }
  .journal-index ol { grid-template-columns: 1fr; }
  .reader-toolbar .button { width: 100%; }
  .reader-toolbar .reader-navigation { width: 100%; }
  .reader-toolbar .reader-navigation button { flex: 1; }
  .journal-reader header { flex-wrap: wrap; gap: 8px; }
  .journal-reader .reader-navigation button { padding-inline: 10px; font-size: 14px; }
  .reader-counter { min-width: 65px; font-size: 14px; }
  .cabinet-intro h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hero-art > a { display: block; width: min(100%, 320px); }
.book-cover-link { display: block; align-self: start; }
@media (max-width: 470px) { .book-cover-link { width: 130px; justify-self: center; } }

/* Decorative capitals echo the supplied cover; paragraph text stays readable. */
h1, h2, h3, .wordmark b, .monogram, .footer-wordmark, .text-book > span {
  font-family: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
  overflow-wrap: anywhere;
  font-synthesis: none;
  line-height: 1.4;
  letter-spacing: .015em;
}
h1, .wordmark b, .monogram { font-weight: 700; }
.hero h1 { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.3; letter-spacing: .01em; }
.hero h1 em { color: #754528; text-shadow: 0 1px 0 #f4deb7; }
.wordmark b { line-height: 1.4; }
.page-intro h1 { line-height: 1.35; letter-spacing: .01em; }
.book-copy h3, .journal-reader header h2, .dialog-heading h2, .text-book > span { line-height: 1.4; }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(26px, 4.6vw, 33px); }
  .wordmark b { font-size: 22px; }
  .page-intro h1 { font-size: 32px; }
  .section-heading h2 { font-size: 29px; }
  .journal-reader header h2 { font-size: 23px; }
}
@media (max-width: 470px) {
  .hero h1 { font-size: 32px; }
  .wordmark b { font-size: 21px; }
  .book-copy h3 { font-size: 25px; }
  .cabinet-intro h1 { font-size: 32px; }
}

/* Recovered field journal: leather cover, scorched folios, emerald ink. */
body {
  background: linear-gradient(#171c18e8,#17130ff2), url('/assets/southern-expedition-chart.webp') center top / 1050px auto fixed;
  padding-top: 28px;
}
.masthead {
  position: relative;
  color: #e4c28e;
  border: 1px solid #806341;
  border-top: 3px double #a88652;
  background: linear-gradient(100deg,#17231ff2,#35271ef2),url('/assets/trunk-frontispiece.webp') center 48% / cover;
  box-shadow: inset 0 0 32px #020a0675, 0 9px 25px #09060288;
  padding-block: 28px;
}
.monogram { color: #d2ab65; border-color: #ad884f; }
.wordmark small { color: #baa47f; letter-spacing: .16em; }
.canon-return { color: #e1c598; }
.canon-return small { display: block; font: italic .8125rem/1.5 Georgia,serif; color: #baa47f; margin-top: 5px; }
.archive-mark { border: 3px double #98733e; color: #d8b574; padding: 5px 11px; transform: rotate(-4deg); text-transform: uppercase; font-size: .8125rem; letter-spacing: .07em; white-space: nowrap; }
.navigation { gap: 14px; padding-top: 10px; background: #211b14; border-color: #735333; box-shadow: 0 5px 14px #170e0960; }
.navigation button { position: relative; background: var(--grain),#c7a271; border: 1px solid #91714c; border-bottom: 0; padding: 11px 21px 12px; color: #41311f; box-shadow: inset 0 0 15px #7c532e30; }
.navigation button[aria-selected=true] { color: #f0d7a9; background: var(--grain),#254636; border-color: #9d8a59; border-bottom: 0; box-shadow: inset 0 0 18px #051a1245; }
.navigation button:hover { color: #633a20; background-color: #dfbf8b; }
.navigation button[aria-selected=true]:hover { color: #fff1cf; background-color: #305744; }
.navigation button[aria-selected=true] span { color: #e4c47f; }
.navigation button:focus-visible,.masthead a:focus-visible,footer a:focus-visible { outline-color: #dabc7b; }
main > section {
  background: var(--grain),radial-gradient(ellipse at 0% 3%,#73421b65,transparent 28%),radial-gradient(ellipse at 100% 70%,#73421b45,transparent 28%),linear-gradient(90deg,#684323 0%,#b88b51 1%,#ddba83 4%,#ecd4ac 47%,#d8b685 49.7%,#b3844d 50%,#e6c99a 51%,#ecd4ac 91%,#d1a66a 97%,#694527 100%);
  box-shadow: inset 0 0 45px #42210b4d;
}
main > section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/assets/southern-expedition-chart.webp') center top / 1100px auto; opacity: .055; pointer-events: none; }
main > section::after { border-color: #5c3f2780; box-shadow: inset 0 0 0 4px #cfa86b30; }
.folio-heading { border-bottom-color: #9e784a; }
.folio-heading span:first-child { color: #60452c; font: .8125rem/1.5 'Courier New',monospace; letter-spacing: .07em; }
.folio-page-number { color: #584b31; }
.eyebrow { color: var(--green); font-size: .8125rem; }
.hero { padding-top: 40px; align-items: start; gap: 65px; }
.hero h1 { font-size: clamp(2rem,3.45vw,3.2rem); line-height: 1.3; }
.hero h1 em { color: #2b4939; text-shadow: 0 1px 0 #f5dfb4; }
.hero-art { margin-top: 16px; background: var(--grain),#dbc18e; padding: 13px 13px 12px; border: 1px solid #765836; box-shadow: 10px 16px 18px #442a1959; transform: rotate(3deg); }
.hero-art::before { content: ''; position: absolute; width: 34%; height: 25px; top: -12px; background: #d4b78199; border: 1px solid #9f804b55; transform: rotate(-7deg); }
.art-caption { font-size: .8125rem; }
.hero-actions { gap: 18px; }
.button.primary,.button.dark { background: #284737; border-color: #284737; color: #f1dcaf; }
.button.primary:hover,.button.dark:hover { background: #395d47; border-color: #395d47; }
.margin-note { max-width: 390px; border-left: 2px solid #406149; margin-top: 30px; padding: 0 0 0 18px; color: #2d503e; transform: rotate(-1deg); }
.margin-note > span { font: .8125rem/1.5 'Courier New',monospace; text-transform: uppercase; letter-spacing: .08em; }
.margin-note p { margin-top: 7px; font: italic 1.125rem/1.7 Georgia,serif; }
.hero-signature { margin-top: 21px; font-size: 1rem; color: #5c432a; }
.section-heading { border-top-color: #977143; }
.section-heading h2 { font-size: 2rem; }
.book-grid { gap: 24px; }
.book-card { position: relative; background: var(--grain),linear-gradient(115deg,#eed9b1,#dfbe87); border-color: #977047; box-shadow: 4px 7px 13px #4b2d173b; }
.book-card:nth-child(2n) { background: var(--grain),linear-gradient(115deg,#e9cd9d,#d5b079); }
.book-copy h3 { color: #42301d; }
.text-book { background: var(--grain),#2c4032; border-color: #97784b; color: #e5cea2; box-shadow: inset 0 0 16px #07161055; }
.text-book span { color: #e6c58d; }
.file-access-note { margin: -21px 6% 32px; font: italic .875rem/1.65 Georgia,serif; color: var(--muted); max-width: 760px; }
.page-intro h1 { color: #2e4a38; font-size: clamp(2rem,3.6vw,3.1rem); }
.records-feature { grid-template-columns: 1.2fr .8fr; gap: 50px; }
.record-pair { align-items: flex-start; gap: 18px; }
.recovered-plate { width: calc(50% - 9px); margin: 0; padding: 8px 8px 12px; background: var(--grain),#d9b580; border: 1px solid #81613c; box-shadow: 6px 9px 14px #3c231946; }
.recovered-plate:first-child { transform: rotate(-3deg); }
.recovered-plate:last-child { transform: rotate(3deg); margin-top: 34px; }
.recovered-plate button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.record-pair .recovered-plate img { width: 100%; height: auto; transform: none; margin: 0; border: 0; box-shadow: none; }
.recovered-plate figcaption { font-size: .75rem; line-height: 1.5; letter-spacing: .04em; text-align: center; margin-top: 9px; }
.feature-copy h2 { color: #364936; font-size: clamp(1.6rem,2.6vw,2.2rem); line-height: 1.45; }
.feature-copy p { font-size: 1.0625rem; }
.archive-category > span { color: #284936; font-size: .8125rem; letter-spacing: .03em; }
.archive-category h3 { font-size: 1.45rem; }
.rule-banner { border-color: #836441; }
.rule-banner blockquote { color: #264937; }
.archive-link { background: var(--grain),#dec297; box-shadow: 4px 5px 9px #6645262a; }
.artwork-card { background: var(--grain),#e1c496; box-shadow: 5px 8px 13px #51301835; }
.artwork-card:nth-child(2n) { background: var(--grain),#d6b583; }
.artwork-card h2 { font-size: 1.45rem; }
#cabinet { color: #dec9a2; background: var(--grain),radial-gradient(ellipse at 0% 10%,#29493960,transparent 45%),linear-gradient(90deg,#101814,#29352a 7%,#18201a 49%,#090e0b 50%,#273029 52%,#172018 97%,#080b08); border-color: #806139; box-shadow: inset 0 0 40px #01050380; }
#cabinet::before { opacity: .035; filter: sepia(1); }
#cabinet::after { border-color: #7f7147; box-shadow: inset 0 0 0 4px #131c1480; }
#cabinet .folio-heading { border-color: #71633d; }
#cabinet .folio-heading span { color: #c1aa7e; }
#cabinet .eyebrow,#cabinet .page-intro h1 { color: #e0bd79; }
#cabinet .page-intro h1 { font-size: clamp(2rem,3.6vw,3rem); }
#cabinet .cabinet-seal { color: #caae73; border-color: #b29358; }
#cabinet .reader-toolbar label { color: #ddc6a0; }
#cabinet .reader-toolbar select { color: #efd7a7; background: #25372b; border-color: #91794e; }
#cabinet .reader-navigation button { background: #27372b; border-color: #8d784d; color: #edd4a6; }
#cabinet .reader-navigation button:hover:enabled { background: #3b5040; }
#cabinet .button { color: #edcfa0; background: #29392e; border-color: #927c50; }
#cabinet .button:hover { background: #3d5140; }
.reader-file-note { width: 100%; font: italic .875rem/1.5 Georgia,serif; color: #bea984; }
#cabinet .journal-index { background: var(--grain),#202e24; border-color: #947b4d; box-shadow: 3px 5px 12px #02070355; }
#cabinet .journal-index h2 { color: #dfbf83; border-color: #726344; }
#cabinet .journal-index button { color: #d9c39e; }
#cabinet .journal-index .index-number { color: #b8a275; }
#cabinet .journal-index button[aria-current=page] { color: #f4dfb5; border-color: #a88b4d; background: #3f4a32; }
#cabinet .journal-index button:hover { background: #354333; }
#cabinet .journal-reader { color: #dbc294; background: var(--grain),#181d16; border-color: #a1834e; box-shadow: 8px 9px 20px #02070355; }
#cabinet .journal-reader header p { color: #c2ab7b; }
#cabinet .journal-reader header h2 { color: #e6c791; }
#cabinet .zoom-page { color: #d8bd85; }
#cabinet .collection-note { border-color: #7b6b43; color: #d4bc91; }
#cabinet .collection-note p { color: #d4bc91; }
#cabinet .collection-note a { color: #e3c58d; }
#cabinet button:focus-visible,#cabinet a:focus-visible,#cabinet select:focus-visible { outline-color: #dfc087; }
footer { color: #d5b683; background: var(--grain),linear-gradient(120deg,#1a251d,#322519); border-color: #7d603c; }
footer p,footer span { color: #c0a77e; }
.footer-canon { color: #d3b987; }
.footer-wordmark { color: #dfc08a; }
dialog { background: var(--grain),#e2c696; border-color: #89693f; box-shadow: 0 25px 80px #02080290; }
dialog::backdrop { background: #08110bd9; }
.dialog-heading { background: var(--grain),#283d2e; color: #ebd3a5; border-color: #92764d; }
.dialog-heading .eyebrow { color: #cdb174; }
.dialog-heading h2 { color: #ebd3a5; }
.dialog-heading button:focus-visible { outline-color: #dfc087; }
.dialog-close { color: #f3dfb5; }
@media (max-width:1050px) {
  .masthead { padding-inline: 28px; }
  .hero { gap: 35px; }
  .hero h1 { font-size: 2.65rem; }
  .navigation { gap: 10px; }
  .navigation button { padding-inline: 15px; }
  .records-feature { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width:760px) {
  body { padding-top: 10px; background-attachment: scroll; }
  .masthead { padding: 22px 20px; }
  .archive-mark { font-size: .75rem; }
  .navigation { padding: 9px 14px 0; gap: 7px; }
  .navigation button { padding: 10px 14px; }
  main > section { background: var(--grain),linear-gradient(90deg,#a67946,#e4c69a 5%,#ead1a6 91%,#a67946); }
  .hero { gap: 28px; padding-top: 32px; align-items: center; }
  .hero h1 { font-size: 2rem; }
  .margin-note { padding-left: 13px; margin-top: 23px; }
  .margin-note p { font-size: 1rem; }
  .hero-art { margin-top: 0; padding: 9px; }
  .section-heading h2 { font-size: 1.8rem; }
  .records-feature { grid-template-columns: 1fr; }
  .record-pair { width: 100%; max-width: 540px; margin: auto; padding: 12px 5px 24px; }
  .feature-copy h2 { font-size: 1.8rem; }
  .file-access-note { margin: -12px 24px 28px; }
  .artwork-card h2 { font-size: 1.3rem; }
  #cabinet { background: var(--grain),linear-gradient(90deg,#121c15,#253529 50%,#131e17); }
  .page-intro h1,#cabinet .page-intro h1 { font-size: 1.9rem; }
}
@media (max-width:470px) {
  .hero h1 { font-size: 2rem; }
  .hero-art { max-width: 255px; }
  .recovered-plate { padding: 5px 5px 8px; }
  .recovered-plate figcaption { font-size: .75rem; letter-spacing: 0; }
  .record-pair { gap: 12px; }
  .recovered-plate { width: calc(50% - 6px); }
  .book-copy h3 { font-size: 1.6rem; }
  .artwork-card h2 { font-size: 1.5rem; }
}

/* Maritime plates sit behind the book as loose papers in Isla’s journal. */
.hero-display { position: relative; isolation: isolate; width: min(100%,440px); justify-self: center; padding: 76px 0 0 62px; margin: 5px 0 20px; }
.hero-chart { position: absolute; top: 0; left: 0; width: 76%; padding: 0; border: 1px solid #6f522f; background: #b48c55; box-shadow: 9px 13px 18px #39231370; transform: rotate(-7deg); cursor: zoom-in; }
.hero-chart img { display: block; width: 100%; height: auto; }
.hero-chart:hover { box-shadow: 9px 13px 24px #143d2870; border-color: #42634a; }
.hero-chart:focus-visible { outline: 3px solid #28523c; outline-offset: 6px; }
.hero-display .hero-art { position: relative; margin: 0; width: 100%; max-width: none; transform: rotate(4deg); background: var(--grain),#ead1a3; box-shadow: 9px 14px 20px #37211470; }
.hero-display .hero-art > a { width: 100%; }
.hero-display .hero-art img { width: 100%; }
.hero { background: radial-gradient(ellipse at 100% 7%,#f0b8571f,transparent 48%),radial-gradient(ellipse at 100% 85%,#234b3a18,transparent 40%); }
.hero-copy { padding-top: 10px; }
.hero-signature { font-family: Georgia,'Times New Roman',serif; font-style: italic; }
.margin-note { border-left-color: #476b50; color: #244b39; }
.artwork-frame { border: 3px double #745638; padding: 5px; background: #c19c63; box-shadow: inset 0 0 9px #44250d35; }
@media (max-width:1050px) {
  .hero-display { padding: 65px 0 0 47px; }
}
@media (max-width:760px) {
  .hero-display { padding: 52px 0 0 29px; margin-bottom: 5px; }
  .hero-chart { width: 79%; transform: rotate(-5deg); }
  .hero-display .hero-art { transform: rotate(3deg); }
  .hero-copy { padding-top: 0; }
}
@media (max-width:470px) {
  .hero-display { width: min(100%,310px); padding: 58px 0 0 50px; margin: 4px auto 13px; }
  .hero-chart { width: 76%; }
  .hero-display .art-caption { line-height: 1.6; }
}

/* Isla's story register: a readable narrative with a searchable margin index. */
.records-intro { padding-bottom: 22px; }
.records-intro .spoiler-note { font-size: .9rem; font-style: italic; color: #654b31; margin-top: 14px; }
.story-legend { margin: 0 7% 28px; border-left: 3px solid #426149; padding: 10px 18px; color: #344631; background: #bfc59b35; font-size: .9rem; }
.record-controls { display: grid; grid-template-columns: 2fr 1.2fr 1.15fr 1.2fr auto; align-items: end; gap: 13px; margin: 0 7%; padding: 23px 0; border-block: 3px double #987448; }
.record-controls > div { min-width: 0; }
.record-controls label { display: block; font-size: .85rem; font-weight: bold; margin-bottom: 6px; color: #4c3726; }
.record-controls input, .record-controls select { width: 100%; min-height: 45px; padding: 9px 11px; border: 1px solid #957249; border-radius: 1px; background: #f3e3c2; color: #322719; font-size: .9rem; }
.record-controls input:focus-visible { outline: 3px solid #345c43; outline-offset: 3px; }
.record-reset { min-height: 45px; }
.record-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 7% 0; }
.record-shortcuts button { border: 1px solid #8c7850; background: #e5d2ab; color: #304b37; font-size: .85rem; padding: 6px 12px; }
.record-shortcuts button:hover { background: #f3e4c5; border-color: #37533a; }
.record-results { margin: 17px 7% 25px; font-size: .85rem; color: #654b32; }
.story-register { margin: 0 7% 40px; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 37px; align-items: start; }
.story-register > aside { position: sticky; top: 84px; min-width: 0; }
.story-index { border: 3px double #847043; padding: 16px; color: #e5c997; background: var(--grain),linear-gradient(130deg,#2d4030,#182b21); box-shadow: 3px 5px 12px #34271330; }
.story-index summary { font-size: 1.05rem; cursor: pointer; }
.story-index nav { max-height: 62vh; overflow-y: auto; scrollbar-width: thin; margin-top: 14px; }
.story-index nav a { display: block; padding: 10px 0; font-size: .88rem; line-height: 1.45; text-decoration: none; border-top: 1px solid #93825970; }
.story-index nav a:hover { color: #fff0cb; text-decoration: underline; }
.story-index nav small { display: block; font-size: .7rem; color: #bda675; margin-bottom: 3px; }
.story-index > p { font-size: .8rem; color: #c9b58d; line-height: 1.6; border-top: 1px solid #93825970; padding-top: 15px; margin-top: 15px; }
.story-index a:focus-visible { outline-color: #e1c17f; }
.story-entry { position: relative; padding: 0 0 35px; margin-bottom: 35px; border-bottom: 3px double #a07a4c; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.story-entry:last-child { margin-bottom: 0; }
.record-entry-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 15px; }
.record-entry-meta > span:first-child { font-size: .78rem; color: #695035; margin-right: auto; }
.record-status { display: inline-block; font: bold .69rem/1.5 Georgia,serif; letter-spacing: .03em; padding: 3px 7px; border: 1px solid currentColor; color: #35533d; background: #c6d0a64a; }
.record-status.unresolved { color: #78501c; background: #f0d69b80; }
.record-status.superseded { color: #803d2b; background: #e2b69a6b; }
.story-entry .eyebrow { font-size: .75rem; letter-spacing: .06em; margin-bottom: 10px; }
.story-entry h2 { font-size: clamp(1.5rem,2.4vw,2.05rem); color: #42301f; line-height: 1.28; margin-bottom: 22px; }
.story-entry h2:focus-visible { outline: 2px solid #46684b; outline-offset: 5px; }
.record-prose { font-size: 1.06rem; line-height: 1.9; }
.record-prose p + p { margin-top: 17px; }
.reference-entry .record-prose { font-size: 1rem; }
.story-page-index, .record-facts { margin-top: 23px; border: 1px solid #a08359; background: #f2dfb755; padding: 12px 16px; }
.story-page-index summary, .record-facts summary, .record-provenance summary { color: #35513b; cursor: pointer; font-size: .9rem; }
.story-page-index ol { list-style: none; padding: 0; margin: 10px 0 0; }
.story-page-index li { border-top: 1px solid #ac8e63; padding: 14px 0; }
.story-page-index li > div { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.story-page-index strong { font-size: .85rem; line-height: 1.5; font-weight: normal; color: #733e2b; }
.story-page-index p { margin-top: 9px; font-size: .9rem; line-height: 1.75; }
.record-facts dl { margin: 17px 0 4px; }
.record-facts dt { font-size: .88rem; font-weight: bold; margin-top: 17px; }
.record-facts dt .record-status { margin-left: 5px; }
.record-facts dd { margin: 7px 0 0; font-size: .95rem; line-height: 1.8; }
.record-related { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; align-items: baseline; }
.record-related > span { width: 100%; color: #6b5136; font-style: italic; font-size: .8rem; margin-bottom: 3px; }
.record-related a { font-size: .78rem; line-height: 1.5; padding: 4px 8px; border: 1px solid #9e8859; background: #d7d0a445; text-decoration: none; color: #354d35; }
.record-related a:hover { text-decoration: underline; background: #e5ddbb; }
.record-permalink { display: inline-block; font-size: .78rem; color: #745335; margin-top: 18px; }
.record-empty { padding: 24px; border: 3px double #9c784d; }
.record-empty h2 { font-size: 1.6rem; margin-bottom: 16px; }
.record-empty p { margin-bottom: 22px; }
.record-provenance { margin: 0 7% 40px; padding: 26px 0; border-block: 3px double #987348; }
.record-provenance h2 { font-size: 1.75rem; margin-bottom: 18px; }
.record-provenance > p:not(.eyebrow) { max-width: 760px; }
.record-provenance details { margin-top: 20px; }
.record-provenance dt { font-size: .9rem; font-weight: bold; margin-top: 18px; }
.record-provenance dd { margin: 5px 0 0; font-size: .9rem; color: #614a32; }
.record-plates { padding-top: 0; }
@media(max-width:1050px) {
  .record-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .record-search { grid-column: span 2; }
  .record-reset { justify-self: start; }
  .story-register { grid-template-columns: 180px minmax(0,1fr); gap: 26px; }
}
@media(max-width:760px) {
  .record-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .record-search { grid-column: 1/-1; }
  .record-reset { align-self: end; }
  .story-register { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .story-register > aside { position: static; }
  .story-index nav { max-height: 350px; }
  .story-entry { scroll-margin-top: 125px; }
  .record-prose { font-size: 1rem; }
  .record-entry-meta { gap: 6px; }
  .story-entry h2 { font-size: 1.55rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

/* Single recovered leaves, following the supplied Isla journal pages. */
:root {
  --ink: #35291c;
  --muted: #65503a;
  --paper: #d2b98e;
  --paper-light: #e2cba4;
  --red: #793b2a;
  --green: #3b4e35;
  --folio: var(--grain), radial-gradient(ellipse at 0% 0%,#69431d80,transparent 26%), radial-gradient(ellipse at 100% 100%,#70431e65,transparent 22%), linear-gradient(90deg,#947044 0%,#d0b386 3%,#e0c69b 12%,#e5cda6 68%,#d2b489 96%,#89603b 100%);
}
body { background: var(--grain),radial-gradient(ellipse at top,#3b2c1e,#17120d 75%); padding-top: 20px; }
.masthead,.navigation,main,footer { max-width: 1180px; }
.masthead { background: var(--folio); color: var(--ink); border: 1px solid #705237; border-top: 4px double #826443; box-shadow: inset 0 0 22px #65401b45,0 8px 20px #0d08075c; padding-block: 25px; }
.wordmark b { color: #3b2a1b; }
.wordmark small { color: #64492e; }
.monogram { color: var(--red); border-color: #81543a; }
.canon-return { color: #513a27; }
.canon-return small { color: #74583c; }
.archive-mark { color: var(--red); border-color: var(--red); background: #dec49870; font-weight: bold; transform: rotate(-3deg); }
.navigation { background: #38291b; border-color: #715135; padding-top: 8px; gap: 9px; }
.navigation button { background: var(--grain),#c8ac7d; color: #4c3824; border-color: #997646; box-shadow: inset 0 0 10px #65451d25; }
.navigation button[aria-selected=true],.navigation button[aria-selected=true]:hover { background: var(--grain),#e0c59a; color: var(--red); border-color: #b5966a; box-shadow: inset 0 3px 0 #793b2a; }
.navigation button[aria-selected=true] span { color: var(--red); }
.navigation button:hover { color: var(--red); background-color: #dbc196; }
main > section,main > #cabinet { background: var(--folio); color: var(--ink); box-shadow: inset 0 0 25px #5d351c40; }
main > section::before { background: none; opacity: 0; }
main > section::after { inset: 13px; border: 1px solid #75523375; box-shadow: inset 0 0 0 3px #ddc29760; }
.folio-heading { margin-inline: 5%; padding-top: 22px; border-bottom: 1px solid #836544; }
.folio-heading span:first-child { color: #513c27; font: .75rem/1.5 'Courier New',monospace; letter-spacing: .035em; }
.folio-page-number { font: italic 1.2rem/1.5 Georgia,serif; color: #57412e; }
.eyebrow,.page-intro h1,.hero h1 em { color: #493222; }
.hero { background: none; grid-template-columns: 1.15fr .85fr; gap: 38px; padding-top: 32px; }
.hero h1 { font-size: clamp(1.8rem,3.25vw,2.9rem); color: #3f2c1b; }
.hero h1 em { color: #613b27; text-shadow: none; }
.hero-display { padding-top: 55px; }
.hero-chart { width: 79%; border-color: #755438; transform: rotate(-5deg); }
.hero-chart:hover { border-color: #793b2a; }
.hero-display .hero-art { background: var(--grain),#d7bd92; padding: 10px; border: 3px double #8b6841; transform: rotate(3deg); box-shadow: 5px 8px 12px #50331e70; }
.hero-art::before { display: none; }
.margin-note { color: #563b27; border: 1px solid #a18052; padding: 17px 19px; background: var(--grain),linear-gradient(120deg,#e9d1a9,#d5b88a); box-shadow: 3px 5px 7px #50331e35; transform: rotate(-2deg); }
.margin-note > span { color: #6a3b27; font: italic 1rem/1.5 Georgia,serif; text-transform: none; letter-spacing: 0; border-bottom: 1px solid #907049; }
.margin-note p { font: italic 1.125rem/1.7 'Snell Roundhand','Segoe Print',Georgia,serif; }
.hero-signature { font: italic 1rem/1.7 Georgia,serif; color: #63432e; }
.button.primary,.button.dark { background: #62422d; border-color: #62422d; color: #f3e4c6; }
.button.primary:hover,.button.dark:hover { background: #805239; border-color: #805239; }
.section-heading { padding-inline: 0; }
.book-card,.artwork-card { background: var(--folio); border: 1px solid #9b774c; box-shadow: 4px 6px 8px #573b2240,inset 0 0 15px #92633320; }
.book-card:nth-child(2n) { background: var(--folio); }
.book-card .eyebrow { color: #73422d; }
.text-book { background: var(--grain),#cfaf7f; color: #65452d; border-color: #8d653e; }
.text-book span { color: #604029; }
.artwork-frame { padding: 7px; background: #c6a574; border: 1px solid #84613c; box-shadow: 3px 4px 6px #4d321c40; }
.artwork-card .eyebrow { color: #70402c; }
.recovered-plate { background: var(--grain),#d9bb8b; border-color: #8a6640; }
.story-legend { background: var(--grain),#ddc19590; color: #573f2a; border-left: 2px solid #8d5c3b; font-style: italic; }
.record-controls { background: var(--grain),#d5b98c60; padding: 18px 15px; border: 3px double #92704a; }
.record-controls label { font-size: .875rem; }
.record-controls input,.record-controls select { background: #ead5b2; border-color: #9a7852; }
.record-shortcuts button { background: #dfc59b; color: #5c3d28; font-size: .875rem; }
.record-shortcuts button:hover { background: #eddbba; border-color: #825338; }
.story-register { gap: 27px; }
.story-index { background: var(--folio); color: #493524; border-color: #8e6c44; box-shadow: 3px 5px 8px #53372140; }
.story-index summary { color: #633e28; }
.story-index nav a { color: #483725; font-size: .875rem; border-color: #96754c75; }
.story-index nav a:hover { color: #7b3c29; }
.story-index nav small { color: #72573b; font-size: .75rem; }
.story-index > p { color: #644e35; font: italic .875rem/1.6 Georgia,serif; border-color: #9b774c; }
.story-entry { background: var(--folio); border: 1px solid #9b794f; padding: 27px 30px 25px; margin-bottom: 28px; box-shadow: 4px 6px 9px #573a2338,inset 0 0 16px #8b613027; }
.story-entry::after { content: ''; position: absolute; inset: 7px; border: 1px solid #9c785438; pointer-events: none; }
.story-entry .eyebrow { font: .75rem/1.5 'Courier New',monospace; color: #68442b; }
.story-entry h2 { color: #483020; border-bottom: 1px solid #a18052; padding-bottom: 15px; font-size: clamp(1.45rem,2.2vw,1.85rem); }
.record-status { font-size: .875rem; letter-spacing: 0; background: transparent; border: 2px double currentColor; padding: 2px 7px; }
.record-status.locked { color: #425237; }
.record-status.unresolved { color: #765021; background: #efd59e40; }
.record-status.superseded { color: #873d2c; background: transparent; }
.record-prose { line-height: 1.85; }
.record-facts,.story-page-index { background: var(--grain),#e2cba550; border-color: #a17f55; }
.record-facts summary,.story-page-index summary,.record-provenance summary { color: #68422c; }
.record-related { border-top: 1px solid #9e7a4e65; padding-top: 15px; }
.record-related > span { font: italic .9rem/1.5 Georgia,serif; color: #68452d; }
.record-related a { color: #62442d; background: #e2c79d; border-color: #a38255; font-size: .875rem; }
.record-related a:hover { background: #edd7b3; }
.record-permalink { font-size: .875rem; }
#cabinet .page-intro h1,#cabinet .cabinet-intro p,#cabinet .reader-toolbar label { color: #473323; }
#cabinet .cabinet-intro .eyebrow { color: #7d442e; }
#cabinet .cabinet-seal { color: #813f2d; border-color: #813f2d; background: #e0c49a65; }
#cabinet .reader-toolbar select,#cabinet .reader-navigation button { color: #493623; background: #e3cba4; border-color: #96704a; }
#cabinet .reader-navigation button:hover:enabled { background: #f0ddbb; }
#cabinet .button { background: #694732; color: #f3e2c1; border-color: #694732; }
#cabinet .button:hover { background: #83573b; }
#cabinet .reader-file-note { color: #705338; }
#cabinet .journal-index { background: var(--folio); border-color: #977348; }
#cabinet .journal-index h2 { color: #6c402a; border-color: #9c794c; }
#cabinet .journal-index button { color: #483624; }
#cabinet .journal-index .index-number { color: #795b3a; }
#cabinet .journal-index button[aria-current=page] { color: #793b2a; background: #ecdbb8; border-color: #9a7149; }
#cabinet .journal-index button:hover { background: #e5cba3; }
#cabinet .journal-reader { color: #483220; background: var(--folio); border-color: #927045; box-shadow: 5px 7px 12px #4a321f55; }
#cabinet .journal-reader header p { color: #795137; }
#cabinet .journal-reader header h2 { color: #48301f; }
#cabinet .zoom-page,#cabinet .collection-note,#cabinet .collection-note p,#cabinet .collection-note a { color: #66482e; }
#cabinet .collection-note { border-color: #a18052; }
.dialog-heading { background: var(--folio); color: #45301e; }
.dialog-heading h2,.dialog-heading .eyebrow,.dialog-close { color: #5f3d28; }
.navigation button:focus-visible,.masthead a:focus-visible,.story-index a:focus-visible,#cabinet button:focus-visible,#cabinet a:focus-visible,#cabinet select:focus-visible { outline-color: #7a3e29; }
@media(max-width:1050px) { .hero { gap: 28px; } .story-register { gap: 20px; } .story-entry { padding-inline: 22px; } }
@media(max-width:760px) {
  body { padding-top: 10px; }
  .hero { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .hero-display { width: min(100%,340px); padding: 45px 0 0 45px; margin-inline: auto; }
  .navigation { padding-inline: 10px; gap: 5px; }
  .navigation button { padding: 11px 13px; }
  .folio-heading { align-items: start; gap: 10px; }
  .folio-heading span:first-child { font-size: .75rem; max-width: 75%; }
  .story-entry { padding: 24px 20px; }
  .record-entry-meta > span:first-child { width: 100%; }
  .record-controls { padding: 15px; }
}
@media(max-width:470px) { .story-register { margin-inline: 6%; } .story-entry { padding-inline: 16px; } .record-controls { margin-inline: 6%; padding: 12px; } }

/* Coffee, water, torn inscriptions and pen marks live in the paper itself. */
:root {
  --folio: url('/assets/isla-weathered-paper.webp') center top / 100% auto repeat-y, #dfc49b;
}
main > section,main > #cabinet { background: var(--folio); }
.masthead { background: linear-gradient(#e5cca84d,#e5cca84d),var(--folio); }
.story-entry { background: linear-gradient(#efdcbc45,#efdcbc45),var(--folio); }
.story-entry .record-prose { background: #f0ddbe35; }
.story-index { background: linear-gradient(#e8d1ad73,#e8d1ad73),var(--folio); }
#cabinet .journal-index { background: linear-gradient(#e8d1ad73,#e8d1ad73),var(--folio); }
.book-card,.book-card:nth-child(2n),.artwork-card { background: linear-gradient(#ecd7b44d,#ecd7b44d),var(--folio); }
.margin-note { background: linear-gradient(#f0ddbf55,#f0ddbf55),var(--folio); }
.record-controls { background: linear-gradient(#ecd6b673,#ecd6b673),var(--folio); }

/* The personnel register uses the same recovered-paper leaves. */
.character-source-note { margin-top: 16px; font-size: .9rem !important; font-style: italic; color: #6b5035; }
.character-directory { margin: 0 7% 38px; padding: 22px; border: 3px double #987347; background: linear-gradient(#e8d0ad70,#e8d0ad70),var(--folio); }
.character-directory > div + div { margin-top: 19px; padding-top: 17px; border-top: 1px solid #a07e55; }
.character-directory strong { display: block; color: #70422d; font-size: .95rem; margin-bottom: 9px; font-weight: normal; font-style: italic; }
.character-directory > div > div { display: flex; gap: 6px 15px; flex-wrap: wrap; }
.character-directory a { font-size: .9rem; color: #59412b; }
.character-group { margin: 0 7% 42px; }
.character-group-heading { margin-bottom: 24px; border-bottom: 3px double #99764b; padding-bottom: 18px; }
.character-group-heading .eyebrow { margin-bottom: 7px; }
.character-group-heading h2 { font-size: clamp(1.4rem,2.6vw,2rem); }
.character-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.character-card { min-width: 0; padding: 24px; border: 1px solid #987449; background: linear-gradient(#ecd7b44d,#ecd7b44d),var(--folio); box-shadow: 4px 6px 9px #573a2338; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.character-card header { border-bottom: 1px solid #a17e52; padding-bottom: 16px; margin-bottom: 19px; }
.character-card h3 { font-size: 1.4rem; color: #513522; margin-bottom: 12px; }
.character-card header > div { display: flex; gap: 7px; flex-wrap: wrap; }
.character-card h3:focus-visible { outline: 2px solid #7a3e29; outline-offset: 5px; }
.character-body { display: grid; gap: 19px; }
.character-body.has-dossier { grid-template-columns: 115px minmax(0,1fr); }
.character-dossier { margin: 0; }
.character-dossier button { display: block; width: 100%; padding: 5px; border: 1px solid #927147; background: #c6a777; box-shadow: 3px 4px 6px #49321c40; }
.character-dossier img { display: block; width: 100%; height: auto; }
.character-dossier figcaption { margin-top: 10px; font-size: .8rem; line-height: 1.55; font-style: italic; color: #6b5136; }
.character-summary { font-size: 1rem; line-height: 1.8; }
.character-facts { margin: 17px 0 0; }
.character-facts dt { font-size: .9rem; font-weight: bold; color: #6b432c; margin-top: 15px; }
.character-facts dd { margin: 5px 0 0; font-size: 1rem; line-height: 1.75; }
.character-facts .record-status { font-size: .8rem; margin-top: 4px; }
.character-links { display: flex; gap: 10px 17px; flex-wrap: wrap; margin-top: 19px; }
.character-links a { font-size: .875rem; color: #754b31; }
@media(max-width:1050px) { .character-body.has-dossier { grid-template-columns: minmax(0,1fr); } .character-dossier { width: 125px; } }
@media(max-width:760px) {
  .character-grid { grid-template-columns: minmax(0,1fr); }
  .character-body.has-dossier { grid-template-columns: 100px minmax(0,1fr); }
  .character-dossier { width: auto; }
  .character-card { scroll-margin-top: 100px; padding: 20px; }
}
@media(max-width:470px) { .character-body.has-dossier { grid-template-columns: minmax(0,1fr); } .character-dossier { width: 125px; } .character-directory { padding: 17px; } }

/* Original stained paper remains the base; loose pieces sit on top. */
main > section,main > #cabinet { background: var(--folio); }
main > section::before,main > #cabinet::before { background: none; opacity: 0; }
.page-intro { background: none; }
.book-card,.book-card:nth-child(2n),.artwork-card,.character-card,.story-entry,
.character-directory,.story-index,.record-controls,.margin-note,.archive-link,
.record-provenance,.record-facts,.story-page-index,.recovered-plate,
.character-dossier button,#cabinet .journal-index,#cabinet .journal-reader { background: var(--folio); }
.story-entry .record-prose { background: none; }
.folio-heading { display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 8px 20px; }
.folio-heading span:first-child { max-width: none; }
.folio-page-number { grid-column: 1; grid-row: 2; align-self: start; }
.folio-objects { grid-column: 2; grid-row: 1 / 3; width: 100%; height: auto; display: block; pointer-events: none; transform: rotate(2deg); }
.book-card,.artwork-card,.character-card,.story-entry,.margin-note {
  position: relative;
  isolation: isolate;
  padding-bottom: 118px;
}
.book-card::before,.artwork-card::before,.character-card::before,
.story-entry::before,.margin-note::before {
  content: '';
  position: absolute;
  inset: auto 12px 7px auto;
  width: 145px;
  height: 98px;
  z-index: 0;
  background: url('/assets/isla-loose-archive-pieces.webp') center / contain no-repeat;
  opacity: 1;
  pointer-events: none;
  transform: rotate(-2deg);
}
.book-card:nth-child(2n)::before,.artwork-card:nth-child(2n)::before,
.character-card:nth-child(2n)::before { right: auto; left: 12px; transform: rotate(2deg); }
.record-provenance { padding: 26px 22px; border: 3px double #977248; }
@media(max-width:760px) {
  .folio-heading { grid-template-columns: minmax(0,1fr) 110px; gap: 7px 12px; }
  .folio-heading span:first-child { max-width: none; }
}