/* =========================================================================
   SORTALIS — the Wiki (`/wiki`, `/wiki/<slug>`), over site.css and blog.css.
   =========================================================================
   The blog's family: its hero, its sheet and its prose. A Wiki page is read
   to look something up, so it trades the article's drop cap and pull quotes
   for a contents rail, an "On this page" list and quieter, denser type. */

/* --------------------------------------------------------------- search */
.wikisearch {
  position: relative;
  max-width: 560px;
  margin: clamp(18px, 3vw, 28px) auto 0;
  text-align: left;
}
.wikisearch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.wikisearch__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 17px;
  color: var(--n7);
  background: rgb(var(--v0-rgb) / .88);
  box-shadow: 0 0 0 var(--px) rgb(var(--v3-rgb) / .9), var(--lift);
}
.wikisearch__input::placeholder { color: var(--ink-faint); }
.wikisearch__input:focus-visible { outline: 2px solid var(--y4); outline-offset: 2px; }
.wikisearch__out {
  position: absolute;
  inset: calc(100% + 8px) 0 auto;
  z-index: 5;
  max-height: min(60vh, 440px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border-radius: 16px;
  background: rgb(var(--v1-rgb) / .97);
  box-shadow: 0 0 0 var(--px) rgb(var(--v3-rgb) / .9), var(--lift);
}
.wikisearch__out a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--n7);
  text-decoration: none;
}
.wikisearch__out a:hover,
.wikisearch__out a:focus-visible { background: rgb(var(--v3-rgb) / .55); outline: none; }
.wikisearch__s { flex: 0 0 auto; color: var(--ink-faint); font-size: .86em; }
.wikisearch__none { padding: 10px 14px; color: var(--ink-dim); }

/* ------------------------------------------------------------- contents */
.wikicontents { padding-bottom: clamp(8px, 2vw, 20px); }
.wikicat + .wikicat { margin-top: clamp(28px, 4vw, 44px); }
.wikicat__h {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: .95;
  color: var(--b5);
  text-shadow: 0 3px 0 var(--v0);
}
.wikicat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.wikicard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: calc(var(--radius) + 2px);
  background: rgb(var(--v1-rgb) / .86);
  box-shadow: var(--ring), var(--lift);
  backdrop-filter: blur(6px);
}
.wikicard__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: .98;
}
.wikicard__title a { color: var(--y4); text-decoration: none; }
.wikicard__title a:hover, .wikicard__title a:focus-visible { color: var(--y5); }
.wikicard__summary { margin: 0; color: var(--n6); line-height: 1.45; }
.wikicat__heads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.wikicat__heads a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--n6);
  text-decoration: none;
  background: rgb(var(--v3-rgb) / .45);
}
.wikicat__heads a:hover, .wikicat__heads a:focus-visible { color: var(--n7); background: rgb(var(--b2-rgb) / .7); }

/* ------------------------------------------------------------------ page */
.wikipage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  padding-top: clamp(18px, 3vw, 32px);
}
@media (min-width: 980px) {
  .wikipage { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
}

.wikiside__box {
  padding: 14px 16px;
  border-radius: calc(var(--radius) + 2px);
  background: rgb(var(--v1-rgb) / .86);
  box-shadow: var(--ring), var(--lift);
  backdrop-filter: blur(6px);
}
/* Below the sticky masthead (site.css), whose bar is 56px. */
.wikipage { --under-mast: 72px; }
@media (min-width: 980px) {
  .wikiside {
    position: sticky;
    top: var(--under-mast);
    max-height: calc(100vh - var(--under-mast) - 16px);
    overflow-y: auto;
    border-radius: calc(var(--radius) + 2px);
  }
  .wikiside__head { pointer-events: none; list-style: none; }
  .wikiside__head::-webkit-details-marker { display: none; }
}
.wikiside__head {
  min-height: 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  list-style-position: inside;
}
.wikiside__home {
  display: inline-block;
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--y4);
  text-decoration: none;
}
.wikiside__sec {
  margin: 12px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--b4);
}
.wikiside__list,
.wikiside__list .wikicat__heads {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wikiside__list a {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--n6);
  text-decoration: none;
  line-height: 1.3;
}
.wikiside__list a:hover, .wikiside__list a:focus-visible { color: var(--n7); background: rgb(var(--v3-rgb) / .45); }
.wikiside__list a[aria-current='page'] { color: var(--y5); background: rgb(var(--y3-rgb) / .16); font-weight: 600; }
.wikiside__list .wikicat__heads { margin: 2px 0 6px 10px; border-left: 2px solid rgb(var(--v4-rgb) / .9); }
.wikiside__list .wikicat__heads a {
  padding: 3px 10px;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  background: none;
}
.wikiside a.is-reading { color: var(--y5); box-shadow: inset 2px 0 0 var(--y4); }

.wikidoc { min-width: 0; }
.wikidoc__crumbs {
  display: flex;
  gap: 10px;
  max-width: none;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wikidoc__crumbs a { color: var(--y3); text-decoration: none; }
.wikidoc__crumbs a:hover { color: var(--y5); }
.wikidoc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  line-height: .9;
  text-wrap: balance;
  color: transparent;
  background: linear-gradient(to bottom, var(--y5) 0%, var(--y4) 45%, var(--y3) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 5px 0 var(--v0));
  padding-bottom: .06em;
}
.wikidoc__summary {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: clamp(17px, .5vw + 15px, 20px);
  line-height: 1.45;
  color: var(--n6);
}
.wikidoc__updated {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.wikitoc {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  padding: 14px 18px;
  border-radius: calc(var(--radius) - 4px);
  background: rgb(var(--v0-rgb) / .78);
  box-shadow: 0 0 0 var(--px) rgb(var(--v3-rgb) / .8);
  backdrop-filter: blur(6px);
}
.wikitoc__head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
}
.wikitoc__list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15.5px; }
.wikitoc__list a { display: inline-block; padding: 3px 0; color: var(--b4); text-decoration: none; line-height: 1.3; }
.wikitoc__list a:hover, .wikitoc__list a:focus-visible, .wikitoc__list a.is-reading { color: var(--y5); }
.wikitoc__l2 { font-weight: 600; }
.wikitoc__l2:not(:first-child) { margin-top: 6px; }
.wikitoc__l3 { padding-left: 16px; font-size: .94em; }
/* A long list, or a catalogue of fifty Charms, sits in columns. */
.wikitoc--many .wikitoc__list { columns: 3 200px; column-gap: 24px; }
.wikitoc--long .wikitoc__list { columns: 2 260px; column-gap: 28px; }
.wikitoc--long .wikitoc__l2 { break-after: avoid; }
.wikitoc--long li { break-inside: avoid; }
.wikitoc--many .wikitoc__l2 { break-after: avoid; }
.wikitoc--many li { break-inside: avoid; }

.wikidoc__sheet { max-width: none; margin: clamp(16px, 2.4vw, 24px) 0 0; }
.wikipage--missing .wikidoc__sheet { display: none; }

/* The article's flourishes read as decoration in a reference page. */
.wiki .prose { font-size: clamp(16.5px, .25vw + 15.4px, 18px); line-height: 1.66; }
.wiki .prose > p:first-child { font-size: inherit; color: inherit; }
.wiki .prose > p:first-child::first-letter { all: unset; }
.wiki .prose h2, .wiki .prose h3 { clear: both; scroll-margin-top: var(--under-mast); }
.wiki .prose > h2:first-child, .wiki .prose > h3:first-child { margin-top: 0; }
.wiki .prose h3 { color: var(--y5); }
.wiki .prose blockquote {
  font-family: inherit;
  font-size: 1em;
  line-height: 1.6;
  text-align: left;
  color: var(--n7);
  text-shadow: none;
  padding: 14px 18px 14px 20px;
  border: 0;
  border-left: 4px solid var(--y4);
  border-radius: 0 12px 12px 0;
  background: rgb(var(--y3-rgb) / .1);
}
.wiki .prose blockquote::before { content: none; }

.wiki-anchor {
  margin-left: .35em;
  font-size: .6em;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s linear;
}
h2:hover > .wiki-anchor, h3:hover > .wiki-anchor, .wiki-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .wiki-anchor { opacity: .5; } }

/* A Charm beside its notes: smaller than the blog's, and never hanging past the sheet. */
.wiki .post-card { --post-card-w: 210px; }
.wiki .post-card--left { margin-left: 0; }
.wiki .post-card--right { margin-right: 0; }
@media (max-width: 679px) {
  .wiki .post-card, .wiki .post-card--left, .wiki .post-card--right { --post-card-w: min(220px, 64vw); }
}

.wikipair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
.wikipair:empty { display: none; }
.wikipair__link {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgb(var(--v1-rgb) / .86);
  box-shadow: var(--ring), var(--lift);
  color: var(--n7);
  text-decoration: none;
}
.wikipair__link.is-next { grid-column: 2; text-align: right; }
.wikipair__link:hover, .wikipair__link:focus-visible { color: var(--y5); box-shadow: 0 0 0 var(--px) rgb(var(--y4-rgb) / .7), var(--lift); }
.wikipair__k { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.is-prev .wikipair__k::before { content: '\2190  '; color: var(--y3); }
.is-next .wikipair__k::after { content: '  \2192'; color: var(--y3); }
.wikipair__t { font-family: var(--font-display); font-size: 26px; line-height: 1; }
@media (max-width: 599px) {
  .wikipair { grid-template-columns: 1fr; }
  .wikipair__link.is-next { grid-column: auto; }
}