/* The library look (#91): paper, leather, gilt and marbled paper, and the binding each book would have worn in its
   century. Shared by every page. Fonts are self-hosted and SIL OFL (src/fonts/OFL-*.txt). */

@font-face { font-family: 'EB Garamond'; src: url(/fonts/eb-garamond.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url(/fonts/eb-garamond-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url(/fonts/im-fell-english.woff2) format('woff2'); font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url(/fonts/im-fell-english-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url(/fonts/im-fell-english-sc.woff2) format('woff2'); font-display: swap; }

:root {
  --page: #f5efe2; --card: #fbf6ea; --ink: #2a2018; --muted: #6b5a48; --rule: #b9a37c; --accent: #0f6b4a;
  --band: #1f1a14; --band-ink: #d9b65a; --gilt: #d9b65a; --marble-base: #efe4c8; --label: #f6efdd; --label-ink: #2a2018;
  --body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --old: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --old-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.5'%3E%3CfeDistantLight azimuth='225' elevation='50'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #17110c; --card: #221911; --ink: #efe4cc; --muted: #bba987; --rule: #5a4430; --accent: #6fcf9f;
    --band: #0e0a07; --marble-base: #d8c9a6;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  }
}

/* House colours: the cloth and leather of each house's books, and its marbled paper. */
[data-house] { --house: #5a4a3a; --house-2: #c8963e; }
[data-house=foundations] { --house: #5b2a1c; --house-2: #c8963e; }
[data-house=hermetic] { --house: #1f5a3f; --house-2: #6fc3a0; }
[data-house=alchemy] { --house: #6b2420; --house-2: #d97a3a; }
[data-house=kabbalah] { --house: #1d2d4f; --house-2: #5a7fa8; }
[data-house=ceremonial] { --house: #3a2a22; --house-2: #8a2a1d; }
[data-house=divination] { --house: #4a2a5a; --house-2: #9a7ac0; }
[data-house=witchcraft-history] { --house: #5a4a26; --house-2: #2f5a3a; }
[data-house=revival] { --house: #1f4d52; --house-2: #c8963e; }
[data-house=eastern] { --house: #8a5a1c; --house-2: #c23b2a; }

* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; background: var(--page) var(--grain); color: var(--ink); font: 19px/1.6 var(--body); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-family: var(--old); font-weight: normal; line-height: 1.15; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 16px; }

/* A marbled sheet with a printer's label on it */
.sheet { position: relative; min-height: 18rem; display: grid; place-items: center; padding: 2.5rem 16px; overflow: hidden; background: var(--marble-base); }
.sheet > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.label { position: relative; max-width: 26rem; width: 100%; background: var(--label) var(--grain); color: var(--label-ink); text-align: center;
  padding: 1.4rem 1.2rem; border: 1px solid #6b5a3a; outline: 1px solid #6b5a3a; outline-offset: -6px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.label img { width: 44px; height: 44px; }
.label h1 { font-family: var(--old-sc); font-size: clamp(1.7rem, 6vw, 2.2rem); letter-spacing: .04em; margin: .3rem 0 .2rem; }
.label p { margin: 0; font-style: italic; color: #5a4a3a; }

.band { background: var(--band); color: var(--band-ink); font: 15px/1 var(--old-sc); letter-spacing: .14em; text-transform: uppercase; }
.band ul { list-style: none; margin: 0; padding: .7rem 16px; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: center; }
.band a { color: inherit; text-decoration: none; }

.section-title { text-align: center; font-size: clamp(1.6rem, 5vw, 2rem); margin: 2.4rem 0 .2rem; }
.section-sub { text-align: center; font-style: italic; color: var(--muted); margin: 0 auto 1.2rem; max-width: 34rem; }
.ours { font-size: .85em; font-style: italic; color: var(--muted); }

/* Tutors */
.tutors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 15rem), 1fr)); gap: 12px; }
.tutor { all: unset; box-sizing: border-box; cursor: pointer; display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; text-align: center; }
.tutor canvas { display: block; width: 100%; height: 84px; background: var(--house); }
.tutor .name { display: block; font: 1.1rem/1.2 var(--old); margin: .6rem .5rem 0; }
.tutor .title { display: block; font-size: .95rem; color: var(--muted); font-style: italic; }
.tutor .house { display: block; font-size: .85rem; color: var(--muted); padding: .1rem .5rem .7rem; }
.tutor:hover { border-color: var(--house); }
.tutor[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 2px; }
.tutor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A tutor's reading list, printed */
.list { margin: 1.4rem 0 0; background: var(--card); border: 1px solid var(--rule); padding: 1.2rem clamp(1rem, 4vw, 2rem); }
.list h3 { text-align: center; font-size: 1.5rem; margin: 0; }
.list .by { text-align: center; font-style: italic; color: var(--muted); margin: 0 0 .6rem; }
.list h4 { font: 1rem var(--old-sc); letter-spacing: .08em; margin: 1rem 0 .2rem; color: var(--muted); }
.list ol { list-style: upper-roman; margin: 0; padding-left: 2.6rem; }
.list li { padding: .35rem 0; border-bottom: 1px dotted var(--rule); }
.list li::marker { color: var(--muted); font-size: .9em; }
.list .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.list .t { flex: 1 1 16rem; }
.list .when { white-space: nowrap; color: var(--muted); font-size: .95rem; }
.age { display: inline-block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #8a5a2a, #d9b65a); vertical-align: middle; margin-left: .4rem; }
.status { font-size: .8rem; color: var(--accent); margin-left: .4rem; white-space: nowrap; }

/* Books in the binding of their century (scripts/shelf.mjs, binding()) */
.eras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 3px; padding: 0 6px;
  background: repeating-linear-gradient(to bottom, transparent 0 150px, #6b4527 150px 158px, #3d2614 158px 160px, transparent 160px 172px); }
.era { all: unset; box-sizing: border-box; width: 4.6rem; height: 140px; margin: 10px 4px 22px; display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center; font-size: .78rem; line-height: 1.2; color: var(--muted); border-left: 1px solid var(--rule); padding: 0 0 4px 6px; }
.era b { display: block; font: 500 .9rem/1.15 var(--body); color: var(--ink); margin-bottom: .2rem; }
.era:first-child { border-left: 0; padding-left: 0; }
.spine { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: var(--w, 30px); height: var(--h, 140px); margin: calc(150px - var(--h, 140px)) 0 22px; border-radius: 3px 3px 1px 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 0 8px; overflow: hidden;
  box-shadow: inset -4px 0 6px rgba(0,0,0,.4), inset 3px 0 4px rgba(255,255,255,.12); }
.spine:focus-visible, .spine[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 2px; }
.spine .tt { writing-mode: vertical-rl; transform: rotate(180deg); font: 13px/1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: calc(100% - 26px); margin-top: auto; }
.spine .yr { position: absolute; bottom: 4px; font-size: 10px; }
.spine::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5; background-image: var(--leather); }
/* limp vellum: pale skin, the title inked by hand */
.b-vellum { background: #e9dcb6; color: #5a3a1c; box-shadow: inset 0 0 10px rgba(140,100,40,.45); }
.b-vellum .tt { font: italic 14px/1 var(--old); }
.b-vellum::after { opacity: .15; }
/* calf, blind-tooled: brown leather, raised bands, no gold */
.b-calf { background: #6a3f24; color: #2a170c; text-shadow: 0 1px 0 rgba(255,255,255,.15);
  background-image: repeating-linear-gradient(transparent 0 26px, rgba(0,0,0,.35) 26px 28px, rgba(255,255,255,.12) 28px 29px, transparent 29px 40px); }
/* gilt calf: gold bands and a red lettering-piece */
.b-gilt-calf { background: radial-gradient(ellipse at 50% 40%, #9a5a2a, #5a2e14 80%); color: var(--gilt); }
.b-gilt-calf .tt { background: #7a1f1a; padding: 4px 1px; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); }
.b-gilt-calf::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); }
/* half leather: leather spine in the house colour, a sliver of marbled board at each edge */
.b-half-leather { background: var(--house); color: var(--gilt); }
.b-half-leather > canvas { position: absolute; top: 0; bottom: 0; width: 4px; height: 100%; }
.b-half-leather > canvas:first-child { left: 0; } .b-half-leather > canvas + canvas { right: 0; }
.b-half-leather::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); }
/* publisher's cloth: ribbed cloth in the house colour, gilt title */
.b-cloth { background: var(--house); color: var(--gilt); }
.b-cloth::after { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); opacity: .6; }
.b-cloth::before { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 14px; border: 1px solid var(--gilt); border-bottom: 0; border-radius: 10px 10px 0 0; }

.picked { margin: 1rem auto 0; max-width: 36rem; background: var(--card); border: 1px solid var(--rule); padding: .8rem 1.2rem; text-align: center; min-height: 3.2rem; }
.picked b { font-family: var(--old); font-weight: normal; font-size: 1.2rem; }

/* The book browser (scripts/books.mjs): reading pages in the same paper and type */
.crumbs p { margin: 0; padding: .7rem 16px; text-align: center; text-transform: none; letter-spacing: .04em; line-height: 1.5; font-size: 14px; }
.crumbs a { text-decoration: underline; text-decoration-color: rgba(217,182,90,.5); }
.crumbs [aria-current] { color: #f6efdd; }
.reader main { max-width: 42rem; }
.reader h1 { text-align: center; font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 2rem 0 .4rem; }
.reader h2 { font-size: 1.3rem; margin: 1.6rem 0 .4rem; }
.title-page { text-align: center; border-bottom: 3px double var(--rule); padding-bottom: 1rem; margin-bottom: 1rem; }
.title-page cite { font-style: normal; }
.by { font-style: italic; color: var(--muted); margin: .2rem 0; }
.hint { font-size: .85em; color: var(--muted); }
.lede { font-style: italic; color: var(--muted); text-align: center; }
.intro { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: .4rem 1.2rem; font-size: .95em; }
.contents { padding-left: 1.6rem; }
.contents li { padding: .2rem 0; }
.contents .hint, .books-list .hint { white-space: nowrap; }
.books-list { list-style: none; padding: 0; }
.books-list li { padding: .6rem 0; border-bottom: 1px dotted var(--rule); display: flex; flex-direction: column; }
.books-list cite { font-style: italic; font-size: 1.1rem; }
.about { margin: 1.6rem 0; color: var(--muted); font-size: .95em; }
.about summary { cursor: pointer; }
.cite { text-align: center; font-style: italic; color: var(--muted); margin: 0 0 1.2rem; }
.text p { margin: 0 0 .8rem; text-align: justify; hyphens: auto; overflow-wrap: break-word; }
.text h2 { text-align: center; font-size: 1.15rem; }
.para { position: relative; }
.text .pgmark { text-align: right; margin: .6rem 0 .2rem; font-size: .8rem; }
.pg { color: var(--muted); font-size: .8rem; font-family: var(--body); white-space: nowrap; }
a.pg { color: var(--accent); }
.turn { font-size: .8rem; }
.turn::before { content: "|"; color: var(--rule); margin-right: .2rem; }
.fn { font-size: .7em; line-height: 0; }
.notes { font-size: .85em; color: var(--muted); border-top: 1px solid var(--rule); margin: .2rem 0 1rem; padding: .4rem 0 0 1.4rem; list-style: none; }
.notes li { margin: 0 0 .3rem; }
.notes li > sup { margin-left: -1rem; }
figure { margin: 1rem 0; text-align: center; }
figure img { max-width: 100%; height: auto; }
.prevnext { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 3px double var(--rule); font-size: .95rem; }
.prevnext a[rel=next] { text-align: right; }

/* Search (src/search/, src/js/search.js) */
.searchbox { display: flex; gap: .5rem; margin: 1rem 0 .4rem; }
.searchbox input { flex: 1 1 auto; min-width: 0; font: inherit; padding: .45rem .7rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--card); color: var(--ink); }
.searchbox button { font: 1rem var(--old-sc); letter-spacing: .06em; padding: .45rem 1rem; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fbf6ea; cursor: pointer; }
.results { list-style: none; padding: 0; margin: 1rem 0; }
.results li { padding: .8rem 0; border-bottom: 1px dotted var(--rule); }
.results p { margin: .1rem 0; }
.results .where { display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline; }
.results .snip a { color: inherit; text-decoration: none; }
.results .snip a:hover { text-decoration: underline; }
mark { background: rgba(217,182,90,.45); color: inherit; padding: 0 .1em; border-radius: 2px; }

/* Correspondences (scripts/correspondences.mjs) */
.reader.wide main { max-width: 72rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); background: var(--card); }
.corr { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.3; }
.corr th, .corr td { border-bottom: 1px dotted var(--rule); padding: .35rem .5rem; vertical-align: top; text-align: left; }
.corr thead th { font: 1rem var(--old-sc); letter-spacing: .04em; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.corr tbody th { font-weight: normal; font-style: italic; color: var(--muted); white-space: nowrap; position: sticky; left: 0; background: var(--card); }
.corr td a { color: inherit; text-decoration: none; }
.corr td a:hover { text-decoration: underline; color: var(--accent); }
.corr td.differ { background: rgba(217,182,90,.18); box-shadow: inset 3px 0 0 var(--gilt); }

/* Glossary (scripts/glossary.mjs) and the term links in the books */
a.term { color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
a.term:hover { color: var(--accent); }
.az { display: flex; flex-wrap: wrap; gap: .2rem .7rem; justify-content: center; font-family: var(--old-sc); margin: 0 0 1.4rem; }
.term-entry { border-bottom: 1px dotted var(--rule); padding: .4rem 0 1rem; scroll-margin-top: 1rem; }
.term-entry h2 { margin: .8rem 0 .2rem; }
.gloss { margin: 0 0 .6rem; }
.term-entry blockquote { margin: .5rem 0 .5rem 1rem; padding-left: .8rem; border-left: 3px solid var(--rule); }
.term-entry blockquote p { margin: 0; font-style: italic; }
.term-entry blockquote footer { margin: .2rem 0 0; padding: 0; border: 0; text-align: left; font-size: .85rem; }

footer { margin: 3rem 0 0; padding: 1.4rem 16px 2rem; border-top: 3px double var(--rule); text-align: center; font-size: .9rem; color: var(--muted); }
@media (max-width: 40rem) { body { font-size: 18px; } .tutor canvas { height: 60px; } .tutor .name { font-size: 1rem; } }
@media (prefers-reduced-motion: no-preference) { .spine { transition: transform .15s; } .spine:hover { transform: translateY(-4px); } }