/* Academia / Classical: the library look, laid over the site's components. Loaded after site.css and menu.css on every page
   (the archive and lessons pages too). Tokens (palette, fonts, radius, motion) are in tokens.css.
   Brass is the colour of everything you can press. Crimson is kept for the wax seals. Nothing here is pure black or white. */

/* ---------- reading: three serifs, each with one job ---------- */
body {
  font-family: var(--font-body); font-size: var(--t-m); line-height: 1.625;
  font-variant-numeric: lining-nums; font-synthesis: none; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; font-variant-numeric: lining-nums; }
em, i { font-style: italic; }
::selection { background: var(--brass); color: var(--black); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* overlines and labels: Cinzel, small capitals, wide tracking */
.crumb, .pk-crumbs, .pk-concept__no, .stats dt, .rail__h small, .part__range, .speaker, .eg__label, .tile__n, .card__n,
.byline, .event__count, .pk-pic__at, .side-panel__sub { font-family: var(--font-display); }
.crumb, .pk-crumbs, .pk-concept__no, .stats dt, .part__range, .speaker, .rail__h small {
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.volume {
  display: block; margin-bottom: var(--s-2); font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase; color: var(--link);
}

/* ---------- the room: paper grain and lamp-light, fixed over everything and never in the way ----------
   Desktop only. On iPhone Safari a full-screen fixed layer with a blend mode stops the page painting past the first
   screens (the lower volumes came up blank), so touch devices get the plain page: no grain, no vignette, no blend mode. */
:root { --vignette: rgba(28, 23, 20, .36); }
:root[data-theme="light"] { --vignette: rgba(92, 64, 30, .14); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --vignette: rgba(92, 64, 30, .14); } }
@media (hover: hover) and (pointer: fine) {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, var(--vignette) 100%);
  }
}

/* ---------- links: brass ---------- */
.prose a, .link, .cite a:not(.play), .src__doc, .quote .cite a:not(.play), .term__idea a:not(.chip), .pk-resume a, .crumb a, .pk-crumbs a,
.moment__what a, .played li > a:first-child, .written a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent); }
.prose a:hover, .link:hover, .cite a:hover { text-decoration-color: var(--link); }
/* titles you can press turn brass under the pointer (never the coloured chips, whose ink is fixed) */
.rec__title:hover, .trackrow:hover .trackrow__title, .pn:hover .pn__title, .card:hover .card__name, .sleeve:hover .sleeve__title,
.libindex a:hover, .stagelist a:hover, .played li > a:hover, .entity-row:hover .entity-row__name { color: var(--link); }
.sleeve:hover, .card:hover, .tile:hover, .entry:hover, .pk-firstcard:hover { color: inherit; }

/* ---------- the header ---------- */
.mast__name { font-size: 28px; font-weight: 600; letter-spacing: 0; }
.mast__sub { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 24px; }
header.mast .mast__nav a, .subnav a {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: letter-spacing var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
header.mast .mast__nav a:hover, .subnav a:hover { color: var(--link); letter-spacing: .2em; border-bottom-color: var(--accent-line); }
header.mast .mast__nav a[aria-current], .subnav a[aria-current="page"] { border-bottom-color: var(--accent-line); }
.mast__search { background: var(--oak); border: 1px solid var(--rule); border-radius: var(--radius); height: 44px; }
:root[data-theme="light"] .mast__search { background: var(--panel); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mast__search { background: var(--panel); } }
.mast__search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent-line); }
.mast__search input, .libsearch input, .bigsearch input, .pk-search input { font-family: var(--font-body); font-size: var(--t-s); }
input::placeholder { font-family: var(--font-body); font-style: italic; color: var(--grey); }
.mast__menu, .pk-inst button, .pk-allbtn, .pk-order button, .seg button, .foot__theme button, .az a {
  font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- buttons: brass you can press ---------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  color: var(--black); background: var(--brass-gradient); border: 0; border-radius: var(--radius); text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .3);
  transition: filter var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pk-btn:hover { filter: brightness(1.1); color: var(--black); background: var(--brass-gradient); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 4px 12px rgba(201, 169, 98, .3); }
.pk-btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.pk-btn--learn { color: var(--black); background: var(--brass-gradient); border: 0; }
.pk-btn--ghost { color: var(--link); background: transparent; border: 2px solid var(--accent-line); box-shadow: none; text-shadow: none; }
.pk-btn--ghost:hover { color: var(--paper); background: var(--crimson); border-color: var(--crimson); box-shadow: none; filter: none; }
.pk-link, .pk-idea-nav a { font-family: var(--font-display); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--link); text-decoration-color: var(--accent-line); }
.pk-idea-nav a { font-size: 12.5px; padding: 12px 0; }
.pk-inst button, .pk-allbtn, .pk-order button, .seg button, .foot__theme button, .mast__menu {
  color: var(--link); background: transparent; border: 1px solid var(--accent-line); border-radius: 0;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pk-inst button:hover, .pk-allbtn:hover, .pk-order button:hover, .seg button:hover, .foot__theme button:hover, .mast__menu:hover { background: color-mix(in srgb, var(--brass) 14%, transparent); }
.pk-inst button[aria-pressed="true"], .pk-allbtn[aria-pressed="true"], .pk-order button[aria-pressed="true"], .seg button[aria-pressed="true"],
.foot__theme button[aria-pressed="true"] { color: var(--black); background: var(--brass-gradient); border-color: var(--brass-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, .28); }
.seg, .seg button + button { border-color: var(--accent-line); }
.az a { color: var(--link); border-color: var(--accent-line); }
.az a:hover { color: var(--black); background: var(--brass-gradient); }
.eg__hear {
  font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--link); border: 1px solid var(--accent-line); border-radius: var(--radius); background: transparent;
}
.eg__hear:hover { background: color-mix(in srgb, var(--brass) 14%, transparent); }
.eg__hear[aria-pressed="true"] { color: var(--black); background: var(--brass-gradient); }
.eg__hear[aria-pressed="true"] .eg__hear-i { background: var(--black); }
.eg__hear-i { border-color: transparent transparent transparent var(--accent-line); }
.play { background: var(--brass-gradient); color: var(--black); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .3); }
.rec .play { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.rec:hover .play, .rec .play:focus-visible { background: var(--brass-gradient); color: var(--black); box-shadow: none; }

/* ---------- containers: aged oak, grain borders, brass at the corners ---------- */
.entry, .pk-pic.eg, .pk-firstcard, .side-panel, .others, .pk-lesson, .tile {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); position: relative;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.side-panel, .tile { padding: var(--s-5); }
.pk-lesson { padding: var(--s-6) var(--s-6) var(--s-7); }
.entry:hover, .pk-pic.eg:hover, .pk-firstcard:hover, .tile:hover { border-color: color-mix(in srgb, var(--accent-line) 55%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.pk-firstcard:hover { background: var(--panel); color: var(--ink); }
.pk-firstcard:hover span { color: var(--grey); }
.entry::before, .pk-pic.eg::before, .side-panel::before, .tile::before, .pk-lesson::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 24px; height: 24px; pointer-events: none; opacity: .6;
  border-top: 2px solid var(--accent-line); border-left: 2px solid var(--accent-line); transition: opacity var(--t-base) var(--ease);
}
.entry::after, .pk-pic.eg::after, .side-panel::after, .tile::after, .pk-lesson::after {
  content: ""; position: absolute; bottom: -1px; right: -1px; width: 24px; height: 24px; pointer-events: none; opacity: .6;
  border-bottom: 2px solid var(--accent-line); border-right: 2px solid var(--accent-line); transition: opacity var(--t-base) var(--ease);
}
.entry:hover::before, .entry:hover::after, .pk-pic.eg:hover::before, .pk-pic.eg:hover::after, .tile:hover::before, .tile:hover::after { opacity: 1; }
.tile { border-top: 1px solid var(--rule); }
.tile__t { font-size: var(--t-xl); }
.pk-practise { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--accent-line); border-radius: var(--radius); }
.pk-more, .pk-idea-nav { border-top-color: var(--rule); }

/* the wax seal on the two ways in */
.entry::after {
  width: 34px; height: 34px; top: -12px; right: 22px; bottom: auto; left: auto; border: 0; opacity: 1; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E8DFD4' d='M12 3.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z'/%3E%3C/svg%3E") center / 18px no-repeat,
    radial-gradient(circle at 35% 30%, #B03A4A 0%, #8B2635 55%, #6A1B27 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .2), inset 0 -2px 4px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .4);
}

/* ---------- ornate dividers: a hairline that warms to brass at the centre, with a star ---------- */
.foot, .method, .prevnext, .tracklist {
  position: relative; border-top: 0;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 20%, var(--accent-line) 50%, var(--rule) 80%, transparent 100%) top / 100% 1px no-repeat;
}
.foot::before, .method::before, .prevnext::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 24px; transform: translate(-50%, -50%); pointer-events: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C9A962' d='M12 4l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.foot { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
.foot::before { grid-column: auto; }

/* ---------- arched sleeves: cathedral tops, aged until you touch them ---------- */
.sleeve__art, .mono, .pk-modtile {
  border-radius: var(--arch); filter: sepia(.28) contrast(.97) brightness(.94);
  transition: filter var(--t-dramatic) var(--ease), transform var(--t-dramatic) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.sleeve:hover .sleeve__art, .card:hover .mono, .pk-modtile:hover, .sleeve:focus-visible .sleeve__art {
  filter: none; transform: scale(1.03); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.sleeve__no { left: 15%; top: 17%; }
.mono { padding: 12% 10% 10%; }
.mono--title { padding: 14% 10% 9%; }
.pk-modtile { font-family: var(--font-heading); font-weight: 600; padding-top: 14%; }

/* ---------- drop caps: the first word of an opening paragraph, illuminated ---------- */
.intro .lede::first-letter, .phead:not(.phead--entity) .lede::first-letter, .pk-hero .lede::first-letter,
.plain .para-block:first-child p::first-letter, .entity-body .para-block:first-of-type p::first-letter {
  float: left; font-family: var(--font-display); font-weight: 500; font-size: 4.5rem; line-height: .8; margin: .08em .14em 0 0;
  color: var(--link); text-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .lede::first-letter, :root[data-theme="light"] .plain p::first-letter { text-shadow: 1px 1px 2px rgba(0, 0, 0, .18); }

/* ---------- motion that suits a library ---------- */
.sleeve__art, .mono, .pk-modtile, .card .mono { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- phones: keep the type and the colour, soften the ornament ---------- */
@media (max-width: 600px) {
  .tile::before, .tile::after, .side-panel::before, .side-panel::after, .pk-lesson::before, .pk-lesson::after { display: none; }
  .intro .lede::first-letter, .phead:not(.phead--entity) .lede::first-letter, .pk-hero .lede::first-letter,
  .plain .para-block:first-child p::first-letter, .entity-body .para-block:first-of-type p::first-letter { font-size: 3.4rem; }
  .pk-lesson { padding: var(--s-5) var(--s-4) var(--s-6); }
}

/* the timeline bars and ticks are brass */
.lane__bar, .track .tick i { background: var(--accent-line); }
.track .tick:hover i { background: var(--ink); }

/* sources read like a bibliography: the title in italic, then a brass button for each moment */
.src { font-size: var(--t-s); }
.src__title { font-family: var(--font-body); font-style: italic; color: var(--grey); }
.src__title::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 1px;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--accent-line);
}
@media (max-width: 600px) {
  .src__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .src__title { flex: 1 1 100%; }
  .entry::after { width: 28px; height: 28px; top: -12px; right: 14px; background-size: 15px, auto; }
  .entry { padding-top: 22px; }
}

/* initials never break across lines on a sleeve */
.mono:not(.mono--title) > span { white-space: nowrap; }
@media (max-width: 600px) { .phead--entity .mono { font-size: 44px; } }

/* the Classes filter, which is wider than its column in tracked capitals, becomes a two-by-two grid below a wide screen */
@media (max-width: 1180px) {
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 440px; }
  .seg button { padding: 10px 6px; letter-spacing: .08em; border: 1px solid var(--accent-line); margin: 0 -1px -1px 0; }
  .seg button + button { border-left: 1px solid var(--accent-line); }
}

/* the video frame: a dark oak panel with a grain border, so the space reads as a frame before the video arrives */
.pk-player .player { background: var(--oak); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.pk-player .player.live .pl-float.docked, .pk-player .player.live .pl-float.docked .pl-dockbar { background: var(--mahogany); }

/* the big idea number gets room below it, so its curves never touch the title */
.cover__no { line-height: .9; padding-bottom: .06em; }
@media (max-width: 600px) { .cover__body { gap: 26px; } .cover__no { font-size: 112px; } }