/* Kalypse - Ink & Seal: Kalypedia (loads after ink.css) */

.wk { position: relative; overflow-x: clip; --barh: 0px; --measure: 41rem; }
.wk-glyph {
  position: absolute;
  z-index: 0;
  right: -3vw;
  top: 24px;
  font-family: var(--brush);
  font-size: min(58vh, 40vw, 560px);
  line-height: 1;
  color: var(--wash);
  opacity: .14;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  animation: wk-ink-in 1.8s cubic-bezier(.2,.65,.25,1) .05s both;
}
@keyframes wk-ink-in {
  0% { opacity: 0; filter: blur(24px); transform: scale(1.08); }
  100% { opacity: .14; filter: none; transform: none; }
}

/* ---------- title page ---------- */
.wk-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  align-items: end;
  padding-top: clamp(128px, 11vw, 168px);
  padding-bottom: clamp(32px, 3.4vw, 48px);
}
.wk-top .sec-head { grid-column: 1 / span 6; }
.wk-top .sec-head .seal { margin-top: .6rem; }
.wk-top h1 {
  font-size: clamp(3rem, 6.2vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}
.wk-intro {
  grid-column: 7 / span 5;
  max-width: 30rem;
  padding-bottom: .5rem;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- volumes bar: the four tabs and the search ---------- */
.wk-bar {
  position: relative;
  z-index: 20;
  transition: background-color .2s, box-shadow .2s;
}
.wk-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
  background: var(--brushline) left bottom / 100% 6px no-repeat, var(--brushline) left top / 100% 3px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}
.wk-tabs { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.wk-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.25rem;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
}
.wk-tabs .g {
  --s: 2.35rem;
  font-family: var(--brush);
  font-size: 2.1rem;
  line-height: 1;
  width: 2.35rem;
  text-align: center;
  transition: color .2s;
}
.wk-tabs .g.seal { font-size: calc(var(--s) * .72); --r: -3deg; }
.wk-tabs a:hover .t, .wk-tabs a:focus-visible .t { color: var(--cinnabar); }
.wk-tabs a:hover .g:not(.seal) { color: var(--cinnabar); }

.wk-search {
  position: relative;
  flex: 0 1 22rem;
  display: flex;
  align-items: center;
}
.wk-search svg {
  position: absolute;
  left: .15rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.wk-search input {
  width: 100%;
  min-height: 2.9rem;
  padding: .45rem .4rem .45rem 2.1rem;
  font: 500 1.06rem/1.3 var(--serif);
  color: var(--ink);
  background: rgba(224,217,202,.55);
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.wk-search input::placeholder { color: var(--wash-text); opacity: 1; }
.wk-search input:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }
.wk-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-right: .3rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23141210' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- the spread: index on the left, the page on the right ---------- */
.wk-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
  padding-top: clamp(40px, 4.4vw, 64px);
  padding-bottom: clamp(88px, 9vw, 136px);
}
.wk-side { grid-column: 1 / span 3; }
.wk-content { grid-column: 5 / span 8; min-width: 0; max-width: 46rem; }

/* ---------- index: set like the back of a book ---------- */
.wk-index > summary { display: none; }
.wk-side-group + .wk-side-group { margin-top: 1.6rem; }
.wk-side-h {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  padding-bottom: .45rem;
  margin-bottom: .3rem;
  background: var(--brushline) left bottom / 100% 3px no-repeat;
}
#wkSide a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem 0;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--ink-soft);
}
#wkSide a .t { flex: 0 1 auto; }
#wkSide a .n {
  font-size: .95rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--wash-text);
}
#wkSide a:has(.n)::after {
  content: "";
  order: 1;
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--wash);
  opacity: .6;
  transform: translateY(-.25em);
}
#wkSide a .n { order: 2; }
#wkSide a .g {
  font-family: var(--brush);
  font-size: 1.45rem;
  line-height: 1;
  width: 1.7rem;
  color: var(--ink);
  align-self: center;
}
#wkSide a:hover { color: var(--cinnabar); }
#wkSide a.active { color: var(--ink); font-weight: 700; }
#wkSide a.active::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: .82em;
  width: .42rem;
  height: .42rem;
  background: var(--cinnabar);
  transform: rotate(45deg);
}
#wkSide a.active .g { color: var(--cinnabar); }
#wkSide .wk-back { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cinnabar); text-underline-offset: .3em; margin-bottom: .5rem; }
.wk-off {
  font-size: .82em;
  font-weight: 500;
  color: var(--wash-text);
  white-space: nowrap;
}

/* ---------- page head ---------- */
.wk-head {
  max-width: var(--measure);
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  background: var(--brushline) left bottom / 100% 6px no-repeat;
}
.wk-head h2 {
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.wk-tagline {
  margin-top: .8rem;
  max-width: 36rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}
.wk-head-g {
  font-family: var(--brush);
  font-size: clamp(4rem, 6vw, 5.4rem);
  line-height: .9;
  color: var(--ink);
  margin-top: -.1rem;
}

/* ---------- running text ---------- */
.wk-content p, .wk-content li, .wk-content dd { overflow-wrap: break-word; }
.wk-block { max-width: var(--measure); }
.wk-block + .wk-block, .wk-facts + .wk-block, .wk-note + .wk-block { margin-top: 2.6rem; }
.wk-block h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.008em;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.wk-block p { line-height: 1.78; color: var(--ink-soft); }
.wk-block p + p { margin-top: .9em; }
.wk-block p + .wk-list, .wk-block p + .wk-table-wrap, .wk-block p + .wk-days { margin-top: 1.1rem; }
.wk-list { display: grid; gap: .5rem; }
.wk-list li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.wk-list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .66em;
  width: .4rem;
  height: .4rem;
  background: var(--cinnabar);
  transform: rotate(45deg);
}

/* when / where: hanging labels */
.wk-facts {
  max-width: var(--measure);
  margin: 0 0 2.4rem;
}
.wk-facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .75rem 0 .85rem;
  background: var(--brushline) left bottom / 100% 3px no-repeat;
}
.wk-facts dt { font-size: 1rem; font-weight: 700; color: var(--ink); padding-top: .1rem; }
.wk-facts dd { margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); }

.wk-note {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  max-width: var(--measure);
  margin: 0 0 2.2rem;
  padding: 1rem 1.2rem 1.05rem;
  background: rgba(224,217,202,.7);
  box-shadow: inset 0 0 0 1px rgba(20,18,16,.22);
  line-height: 1.6;
  color: var(--ink-soft);
}
.wk-note .seal { --s: 2.1rem; --r: 3deg; margin-top: .1rem; }
.wk-note b { color: var(--ink); }

.wk-cmds { display: flex; flex-wrap: wrap; gap: .6rem; }
.wk-cmd {
  display: inline-block;
  font: 600 1rem/1.4 var(--serif);
  padding: .3rem .7rem .35rem;
  background: rgba(224,217,202,.75);
  box-shadow: inset 0 0 0 1px rgba(20,18,16,.35);
  border-radius: 2px;
}

/* previous / next */
.wk-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: var(--measure);
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  background: var(--brushline) left top / 100% 6px no-repeat;
}
.wk-pager a { text-decoration: none; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.wk-pager a[rel="next"] { text-align: right; grid-column: 2; }
.wk-pager small { display: block; font-size: .95rem; font-weight: 500; color: var(--wash-text); margin-bottom: .2rem; }
.wk-pager a:hover { color: var(--cinnabar); }

/* ---------- features: table of contents ---------- */
.wk-toc + .wk-toc { margin-top: 2.8rem; }
.wk-toc h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .6rem;
}
.wk-toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}
.wk-toc li { background: var(--brushline) left bottom / 100% 3px no-repeat; }
.wk-toc a {
  display: block;
  height: 100%;
  padding: .85rem 0 .95rem;
  text-decoration: none;
}
.wk-toc .t { display: block; font-size: 1.16rem; font-weight: 700; line-height: 1.3; }
.wk-toc .d { display: block; margin-top: .25rem; font-size: .98rem; line-height: 1.5; color: var(--wash-text); }
.wk-toc a:hover .t, .wk-toc a:focus-visible .t { color: var(--cinnabar); }

/* ---------- skills ---------- */
.wk-classes { display: none; }
.wk-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.4rem;
  margin: 2.4rem 0 .6rem;
}
.wk-filter button, .wk-days button {
  font: 600 1.02rem/1.2 var(--serif);
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: .55rem 0;
  min-height: 2.75rem;
  cursor: pointer;
}
.wk-filter .n { margin-left: .4rem; font-weight: 500; color: var(--wash-text); font-variant-numeric: lining-nums; }
.wk-filter button:hover { color: var(--cinnabar); }
.wk-filter button.active {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--cinnabar);
  text-decoration-thickness: 2px;
  text-underline-offset: .42em;
}

.wk-skills { max-width: var(--measure); }
.wk-skill { background: var(--brushline) left bottom / 100% 3px no-repeat; }
.wk-skill > summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  list-style: none;
  cursor: pointer;
}
.wk-skill > summary::-webkit-details-marker { display: none; }
.wk-skill > summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s;
  justify-self: center;
}
.wk-skill[open] > summary::after { transform: translateY(15%) rotate(-135deg); }
.wk-skill > summary:hover .wk-sk-name { color: var(--cinnabar); }
.wk-sk-ico {
  display: inline-block;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20,18,16,.55), 0 0 0 3px var(--paper-hi), 0 0 0 4px rgba(20,18,16,.18);
  filter: sepia(.12) saturate(.9);
}
.wk-sk-ico.none { width: 40px; height: 40px; background: var(--silk); }
.wk-sk-main { min-width: 0; display: block; }
.wk-sk-name { display: block; font-size: 1.18rem; font-weight: 700; line-height: 1.3; }
.wk-sk-sub { display: block; margin-top: .1rem; font-size: .95rem; line-height: 1.4; color: var(--wash-text); }
.wk-sk-sub .ty { font-weight: 700; color: var(--ink-soft); margin-right: .7rem; }
.wk-skill.t-passive .wk-sk-sub .ty { color: var(--wash-text); }
.wk-sk-lv, .wk-entry-lv {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.wk-sk-lv small, .wk-entry-lv small { font-size: .85rem; font-weight: 500; color: var(--wash-text); }
.wk-sk-body {
  max-width: var(--measure);
  padding: 0 0 1.4rem calc(40px + 1rem);
}
.wk-sk-body p { line-height: 1.75; color: var(--ink-soft); }
.wk-sk-body p + p { margin-top: .8em; }
.wk-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  margin: 0 0 .9rem;
}
.wk-stats div { display: flex; align-items: baseline; gap: .5rem; }
.wk-stats dt { font-size: .92rem; color: var(--wash-text); }
.wk-stats dd { margin: 0; font-weight: 700; font-variant-numeric: lining-nums; }
.wk-req { margin-bottom: .6rem; }
.wk-req b { color: var(--ink); margin-right: .35rem; }

/* ---------- entries: bosses, daily quests, chapters ---------- */
.wk-entries { max-width: var(--measure); }
.wk-entry { padding: 1.3rem 0 1.4rem; background: var(--brushline) left bottom / 100% 3px no-repeat; }
.wk-entry:first-child { padding-top: .2rem; }
.wk-entry header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.wk-entry h3, .wk-entry h4 { font-size: 1.32rem; font-weight: 700; line-height: 1.3; margin: 0; }
.wk-entry-alt { margin-top: .1rem; font-size: .98rem; color: var(--wash-text); }
.wk-entry-dl { margin: .75rem 0 0; display: grid; gap: .45rem; }
.wk-entry-dl > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; }
.wk-entry-dl dt { font-size: .95rem; font-weight: 700; color: var(--ink); padding-top: .12rem; }
.wk-entry-dl dd { margin: 0; font-size: 1.03rem; line-height: 1.62; color: var(--ink-soft); }
.wk-entry-dl dd.num { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; color: var(--ink); }
.wk-entry-dl .wk-list { gap: .2rem; }
.wk-entry-dl .wk-list li { font-size: 1.03rem; line-height: 1.55; }

/* storyline: zones as parts, chapters numbered in the margin */
.wk-part { max-width: var(--measure); }
.wk-part + .wk-part { margin-top: 2.6rem; }
.wk-part h3 {
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: .5rem;
  background: var(--brushline) left bottom / 100% 5px no-repeat;
}
.wk-chapter {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0 1.25rem;
  background: var(--brushline) left bottom / 100% 3px no-repeat;
}
.wk-chapter-no {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.wk-chapter-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; font-size: 1.02rem; color: var(--wash-text); }
.wk-chapter-meta b { font-size: 1.12rem; color: var(--ink); }
.wk-chapter .wk-entry-dl { margin-top: .55rem; }

/* ---------- tables ---------- */
.wk-table-wrap { max-width: var(--measure); overflow-x: auto; }
.wk-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.wk-table th {
  text-align: left;
  font-size: .92rem;
  font-weight: 600;
  color: var(--wash-text);
  padding: 0 .9rem .5rem 0;
  vertical-align: bottom;
}
.wk-table td, .wk-table tbody th {
  padding: .7rem .9rem .75rem 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--brushline) left bottom / 100% 3px no-repeat;
  vertical-align: top;
}
.wk-table tbody th { font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.wk-table td.num { white-space: nowrap; font-weight: 600; color: var(--ink); }
.wk-rota td:first-child { width: 5rem; }

.wk-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .3rem;
  max-width: var(--measure);
  margin-bottom: 1.2rem;
}
.wk-days button {
  position: relative;
  padding: .55rem 0 .6rem;
  border-radius: 2px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(20,18,16,.28);
}
.wk-days button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.wk-days button.active {
  background: var(--cinnabar);
  color: #E9E2D4;
  box-shadow: inset 0 0 0 3px var(--cinnabar), inset 0 0 0 4px rgba(233,226,212,.7);
}
.wk-days button.today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .22rem;
  width: .3rem;
  height: .3rem;
  margin-left: -.15rem;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- search results ---------- */
.wk-results { scroll-margin-top: calc(var(--barh) + 24px); }
.wk-results + .wk-results { margin-top: 2.6rem; }
.wk-results h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.45rem;
  font-weight: 700;
  padding-bottom: .5rem;
  background: var(--brushline) left bottom / 100% 5px no-repeat;
}
.wk-results h3 .g { font-family: var(--brush); font-size: 1.9rem; line-height: 1; font-weight: 400; }
.wk-results h3 .n { margin-left: auto; font-size: 1rem; font-weight: 600; color: var(--wash-text); font-variant-numeric: lining-nums; }
.wk-results li { background: var(--brushline) left bottom / 100% 3px no-repeat; }
.wk-results a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: .75rem 0 .8rem;
  text-decoration: none;
}
.wk-results a:has(.wk-sk-ico) { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; }
.wk-results .wk-sk-ico { box-shadow: 0 0 0 1px rgba(20,18,16,.5); }
.r-name { display: block; font-size: 1.14rem; font-weight: 700; line-height: 1.35; }
.r-sub {
  display: block;
  margin-top: .1rem;
  font-size: .96rem;
  line-height: 1.45;
  color: var(--wash-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-kind {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  color: var(--wash-text);
  text-align: right;
  white-space: nowrap;
}
.r-kind .g { font-family: var(--brush); font-size: 1.3rem; line-height: 1; color: var(--ink); }
.wk-results a:hover .r-name, .wk-results a:focus-visible .r-name { color: var(--cinnabar); }
.wk-results mark {
  color: inherit;
  background: linear-gradient(transparent 58%, rgba(184,35,27,.26) 58%, rgba(184,35,27,.26) 94%, transparent 94%);
}
.wk-empty { font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- desktop: the volumes bar stays in reach ---------- */
@media (min-width: 901px) {
  .wk { --barh: 76px; }
  .wk-bar {
    position: sticky;
    top: 0;
  }
  .wk-bar.stuck {
    background-color: #D8D0BF;
    box-shadow: 0 14px 24px -22px rgba(20,18,16,.5);
  }
  .wk-side {
    position: sticky;
    top: calc(var(--barh) + 28px);
    max-height: calc(100vh - var(--barh) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wash) transparent;
    padding-left: 1.2rem;
    margin-left: -1.2rem;
    padding-right: .5rem;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .wk-side { grid-column: 1 / span 4; }
  .wk-content { grid-column: 5 / span 8; }
  .wk-toc ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wk-glyph { font-size: 62vw; top: 40px; right: -8vw; }
  .wk-top { display: block; }
  .wk-intro { margin-top: 1rem; margin-left: calc(3.25rem + 1.25rem); }
  .wk-bar-inner { flex-direction: column; align-items: stretch; gap: .9rem; padding-block: .6rem 1rem; }
  .wk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .wk-tabs a { justify-content: center; }
  .wk-search { flex: 1 1 auto; }
  .wk-layout { display: block; padding-top: 1.25rem; }
  .wk-content { max-width: none; }
  .wk-side { margin-bottom: 2.25rem; }
  .wk-index > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: .55rem 0 .65rem;
    font-size: 1.06rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    background: var(--brushline) left bottom / 100% 3px no-repeat;
  }
  .wk-index > summary::-webkit-details-marker { display: none; }
  .wk-index > summary::after {
    content: "";
    width: .5rem; height: .5rem;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: translateY(-25%) rotate(45deg);
    margin-right: .35rem;
  }
  .wk-index[open] > summary::after { transform: translateY(15%) rotate(-135deg); }
  .wk-index #wkSide { padding: .8rem 0 0 1.1rem; }
  .wk-classes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 2rem;
  }
  .wk-classes a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .4rem 0;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
  }
  .wk-classes .g { --s: 3rem; font-family: var(--brush); font-size: 2.5rem; line-height: 3rem; height: 3rem; }
  .wk-classes .g.seal { font-size: calc(var(--s) * .72); }
}
@media (max-width: 560px) {
  .wk-top { padding-top: 104px; }
  .wk-top .sec-head .seal { --s: 2.5rem; margin-top: .35rem; }
  .wk-top h1 { font-size: 2.9rem; }
  .wk-intro { margin-left: 0; font-size: 1.08rem; }
  .wk-tabs a { flex-direction: column; gap: .2rem; font-size: 1rem; min-height: 0; padding: .25rem 0; }
  .wk-tabs .g { --s: 2.2rem; width: 2.2rem; height: 2.2rem; line-height: 2.2rem; font-size: 1.9rem; }
  .wk-tabs .g.seal { line-height: 1; }
  .wk-head { gap: .9rem; }
  .wk-head h2 { font-size: 2rem; }
  .wk-head-g { font-size: 3.4rem; }
  .wk-tagline { font-size: 1.1rem; }
  .wk-block h3, .wk-toc h3, .wk-part h3 { font-size: 1.32rem; }
  .wk-facts > div { grid-template-columns: 4.9rem minmax(0, 1fr); gap: .75rem; }
  .wk-entry-dl > div { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .75rem; }
  .wk-entry-dl dt, .wk-facts dt { font-size: .9rem; }
  .wk-chapter { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; }
  .wk-chapter-no { font-size: 1.85rem; }
  .wk-skill > summary { grid-template-columns: 36px minmax(0, 1fr) auto 1rem; gap: .75rem; }
  .wk-skill .wk-sk-ico:not(.none) { transform: scale(.9); transform-origin: left center; }
  .wk-sk-body { padding-left: 0; }
  .wk-sk-lv, .wk-entry-lv { font-size: 1.15rem; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.1; }
  .wk-sk-lv small, .wk-entry-lv small { font-size: .78rem; }
  .wk-entry header { align-items: flex-start; }
  .wk-entry h3, .wk-entry h4 { font-size: 1.2rem; }
  .wk-filter { gap: 0 1.1rem; }
  .wk-days button { font-size: .92rem; }
  .wk-pager { grid-template-columns: minmax(0, 1fr); }
  .wk-pager a[rel="next"] { grid-column: 1; }
  .wk-results a, .wk-results a:has(.wk-sk-ico) { grid-template-columns: minmax(0, 1fr); }
  .wk-results a:has(.wk-sk-ico) { grid-template-columns: 28px minmax(0, 1fr); column-gap: .9rem; }
  .wk-results a:has(.wk-sk-ico) .r-kind { grid-column: 2; }
  .r-kind { justify-content: flex-start; text-align: left; margin-top: .2rem; white-space: normal; }
  /* grades table becomes stacked rows */
  .wk-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wk-stack, .wk-stack tbody, .wk-stack tr, .wk-stack th, .wk-stack td { display: block; width: 100%; }
  .wk-stack tr { padding: .8rem 0 .9rem; background: var(--brushline) left bottom / 100% 3px no-repeat; }
  .wk-stack tbody th, .wk-stack td { background: none; padding: .1rem 0; }
  .wk-stack td { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .75rem; }
  .wk-stack td::before { content: attr(data-l); font-size: .9rem; font-weight: 700; color: var(--ink); }
  .wk-stack td.num { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-glyph { animation: none; opacity: .14; }
}
@media (max-width: 900px) {
  /* the class strip above the skill list replaces the index on small screens */
  .wk[data-tab="skills"] .wk-side { display: none; }
}