/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');

/* Set the font size back to normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', serif; }

/* Hide the page title. I'll make my own damned title */
#page-title { display: none; }

/* - == === CUSTOM SYNTAX === == - */

/* The inkblot header contains the title and the info box thingy */
.inkblot-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  margin: 1rem 0 3rem;
  width: 100%;
  left: 0;
  max-width: none !important; /* override #page-content div */
}
@media (min-width: 768px) {
  /* On desktop, header expands over the top of the sidebar */
  .inkblot-header {
    width: calc(100% + 18 * 0.82rem);
    left: calc(-18 * 0.82rem);
  }
}

/* The inkblot title is a grid */
.inkblot-title {
  flex: 1 1 0;
  font-size: min(4rem, 10vw);
  font-family: 'Prata', serif;
  display: inline-grid;
  grid-template-areas:
    "one two"
    "three four";
  grid-gap: 0.1em;
  max-width: 100%;
  position: relative;
  margin: 1rem;
}
.inkblot-title::before {
  content: "";
  border-radius: 74% 26% 27% 77% / 74% 38% 73% 38%;
  background-color: var(--inkblot-accent, transparent);
  position: absolute;
  height: 40%; width: 100%; top: 50%; left: 50%;
  transform: translate(-50%, -50%) skewY(-6deg);
  max-width: min(50vw, 80%);
}
.inkblot-title > * { z-index: 1; white-space: nowrap; }
.inkblot-title .title-1 { grid-area: one; place-self: start end; }
.inkblot-title .title-2 { grid-area: two; place-self: start start; }
.inkblot-title .title-3 { grid-area: three; place-self: start end; }
.inkblot-title .title-4 { grid-area: four; place-self: start start; }
.inkblot-title p { margin: 0; line-height: 1em; text-align: center; }
/* Italics encroach to the right a bit, so push them back */
.inkblot-title > em, .inkblot-title .title-1 em, .inkblot-title .title-3 em {
  position: relative;
  left: -0.1em;
}

@media (max-width: 767px) {
  .inkblot-title {
    flex-basis: 100%;
  }
}

/* The info box is itself a flex container */
.inkblot-info {
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.inkblot-info > p {
  min-width: 12.5rem;
}
/* On desktop, if the header overflows onto two rows, it will overlap the sidebar.
 * The max-width of the info thingy is reduced so it won't be wider than #page-content.
 * justify-content:flex-end on .inkblot-header pushes it to the right.
 * !important to override wikidot's default max-width on everything
 */
@media (min-width: 768px) {
  .inkblot-info {
    max-width: calc(100% - 18 * 0.82rem) !important;
  }
}

/* The image should only be styled fancy inside the info section.
 * It could be easily modified to allow a fancy image outside of the info
 * section, but I don't want to do that, because this arrangement is necessary
 * for proper line-wrapping on mobile, and the misformatted image acts as a
 * good indicator that something has gone wrong.
 */
.inkblot-info .inkblot-image { flex: 0 1 10rem; min-width: 10rem; }
.inkblot-info .inkblot-image img {
  border-radius: 65% 35% 43% 57% / 41% 35% 65% 59%;
  box-shadow: 0.5rem 0 var(--inkblot-accent, transparent);
  /* The height is 8rem, but I want it slightly bigger */
  height: 10rem; width: 10rem;
  margin: -1rem 0;
}

/* The inksplot class makes anything blobby */
.inksplot {
  border-width: 0.5rem;
  border-style: solid;
  border-color: var(--inkblot-accent); /* if no accent, will not override */
  padding: 2rem 4rem;
  margin: 1rem -3rem;
  border-radius: 38% 95% 94% 42% / 62% 56% 84% 75%;
}
/* On mobile, the inkblot is rectangular and boring to save space */
@media (max-width: 960px) and (min-width: 767px), (max-width: 650px) {
  .inksplot {
    padding: 1rem;
    border-radius: 5rem / 3rem;
    margin: 1rem -1rem;
  }
}

/* - == === DISTRIBUTED BLOBS === == - */

/* I want some blobs of colour down the page.
 * Thankfully, Wikidot gives me some extra dives to play with:
 * 6 in #container-wrap-wrap and 3 in #container.
 * They are #extra(c?)-div-[1-6]. That's a lot of selectors. */

#container-wrap-wrap, #container { position: relative; overflow: hidden; }

/* Based on CSS by Murray Smith (CC BY-SA 3.0)
 * https://stackoverflow.com/a/14451916/4958427 */

[id^=extra][id*=-div-] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  --content-width: min(1040px, 100vw);
  --content-margin: calc(50vw - var(--content-width) / 2);
  --blob-width: 30rem;
  --blob-radius: calc(var(--blob-width) * 0.67);
  background-color: var(--inkblot-accent, transparent);
  top: var(--top-offset);
  transform: rotate(var(--rotation))
             translate(calc(var(--sin-rotation) * 0.866 * var(--blob-radius) / 2),
                       calc(-1 * var(--cos-rotation) * 0.866 * var(--blob-radius) / 2))
             skewX(-30deg)
             scale(1, 0.866);
}
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
  content: '';
  position: absolute;
  background-color: inherit;
}
[id^=extra][id*=-div-],
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
  width: var(--blob-width); height: var(--blob-width);
  border-top-right-radius: 95%;
}
[id^=extra][id*=-div-]:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0,-50%);
}
[id^=extra][id*=-div-]:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}

/* A lot of maths went into this.
 * To centre a triangle onto its container, it needs the following translation:
 * where A is the angle of rotation:
 * x:
 *   sin(N)
 *   * 0.866 (scale offset)
 *   * radius
 *   / 2
 * y:
 *   -1
 *   * cos(N)
 *   * 0.866 (scale offset)
 *   * radius
 *   / 2
 * Triangles have an order of symmetry around 120deg, so any angles above that are pointless.
 */
#extra-div-1,
#extra-div-3,
#extra-div-5,
#extrac-div-1,
#extrac-div-3 {
  right: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-2,
#extra-div-4,
#extra-div-6,
#extrac-div-2 {
  left: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-1 {
  --blob-width: 30rem;
  --top-offset: 500px;
  --rotation: 53.33deg; --sin-rotation: 0.802; --cos-rotation: 0.597;
}
#extra-div-2 {
  --blob-width: 30rem;
  --top-offset: 1300px;
  --rotation: 40deg; --sin-rotation: 0.642; --cos-rotation: 0.766;
}
#extra-div-3 {
  --blob-width: 20rem;
  --top-offset: 2100px;
  --rotation: 66.66deg; --sin-rotation: 0.918; --cos-rotation: 0.396;
}
#extra-div-4 {
  --blob-width: 15rem;
  --top-offset: 2900px;
  --rotation: 13.33deg; --sin-rotation: 0.231; --cos-rotation: 0.973;
}
#extra-div-5 {
  --blob-width: 40rem;
  --top-offset: 3700px;
  --rotation: 26.66deg; --sin-rotation: 0.448; --cos-rotation: 0.893;
}
#extra-div-6 {
  --blob-width: 25rem;
  --top-offset: 4500px;
  --rotation: 106.66deg; --sin-rotation: 0.958; --cos-rotation: -0.286;
}
#extrac-div-1 {
  --blob-width: 15rem;
  --top-offset: 5300px;
  --rotation: 93.33deg; --sin-rotation: 0.998; --cos-rotation: -0.058;
}
#extrac-div-2 {
  --blob-width: 10rem;
  --top-offset: 6100px;
  --rotation: 120deg; --sin-rotation: 0.855; --cos-rotation: -0.500;
}
#extrac-div-3 {
  --blob-width: 7rem;
  --top-offset: 6900px;
  --rotation: 80deg; --sin-rotation: 0.984; --cos-rotation: 0.173;
}

/* - == === HEADER === == - */

/* Replace the header background */
/* 324px is twice the height of the default header */
div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/review-header.svg) top left/100% 648px no-repeat; }

#header { background: radial-gradient(circle at left 75px top 90px, var(--inkblot-accent, transparent) 42px, transparent 42.5px); }

/* Replace the header text */
/* Centre the text into the middle of the header */
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.3rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: #333;
  font-family: 'Montserrat', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "华尔登工作室");
  font-weight: 300;
}
#header h2::before {
  content: var(--header-subtitle, "未知的鉴赏家");
  font-weight: 600;
}

/* Hide the search box and tuck the button next to the login */
#search-top-box { top: 10px; transform: translateY(-7%); }
#search-top-box-form > input[type=text] { display: none; }
#search-top-box-form > input[type=submit] {
  background:
    url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/search-solid.svg) 50%/0.8rem no-repeat,
    var(--inkblot-accent, transparent)
    !important /* don't revert on mouseover */;
  border: none;
  border-radius: 50%;
  font-size: 0;
  height: 1.5rem; width: 1.5rem;
}
#login-status { right: calc(10px + 2rem); color: #333a; }
#login-status a { color: #b01a; }

/* - == === LINKS === == - */

/* Make links be a darkened version of the accent colour. If not set, the accent colour is assumed to be red because that ends up looking similar to baseline Sigma links. */
a, a:visited, #side-bar a, #interwiki a {
  color: color-mix(in srgb, black 25%, var(--inkblot-accent, red));
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.25rem;
}
:is(#side-bar a, #interwiki a):not(:hover) {
  text-decoration: none;
}

:is(a, a:visited, #side-bar a, #interwiki a):hover {
  text-decoration-style: solid;
}

/* - == === TOPBAR === == - */

#top-bar { display: flex; justify-content: center; right: 0; }
#top-bar a { color: #333d; }

/* - == === SIDEBAR === == - */

/* Move the side bar down, out of the way of the inkblot header */
@media (min-width: 768px) {
  #side-bar { top: 12rem; }
}

/* Make the sidebar look pretty */
/* Keep the side block colours - I like them */
#side-bar .side-block,
#interwiki .side-block {
  border: none;
  border-radius: 0.5rem;
  box-shadow: none;
}

#side-bar .heading,
#interwiki .heading {
  margin: 0.6rem 0 0.5rem;
  padding: 0;
  color: #000a;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: none;
}
#side-bar .heading::before,
#side-bar .heading::after,
#interwiki .heading::before,
#interwiki .heading::after {
  content: "";
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted #333;
  margin: 0.1rem 0.5rem 0;
  flex: 1 1 0;
}
#side-bar .menu-item > img,
#interwiki .menu-item > img {
  visibility: hidden;
}

/* !important to override wikidot style */
#top-bar .open-menu a {
  border-radius: 1px;
  border: none;
  border-left: 0.25rem solid var(--inkblot-accent, #333);
  border-right: 1px dotted #333;
}
@media (max-width: 767px) {
  #side-bar {
    background-image:
      radial-gradient(
        circle at left 10% top 90%,
        var(--inkblot-accent, white) 25%,
        transparent 25%
      ),
      linear-gradient(-75deg, #ccc 30%, white 30%);
    border-right: 4px dotted #444 !important;
    background-clip: padding-box;
  }
}

/* - == === RATING MODULE === == - */

.page-rate-widget-box { box-shadow: none; }
.page-rate-widget-box {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 0;
  border-width: 1px 0;
  border-style: dotted;
  border-color: #333;
  padding: 0.1rem;
  margin-right: 3rem;
}
.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel {
  background-color: transparent !important;
  border-radius: 0;
  border: none;
  color: #333 !important; /* override reset when bottom rating opened */
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  background-color: var(--inkblot-accent, transparent);
  border-radius: 50%;
  border: none;
  color: #333;
  height: 1.5rem; width: 1.5rem;
  position: relative;
  margin-left: 0.25rem;
}
.page-rate-widget-box .cancel {
  color: #333;
  height: 1.5rem; width: 1.5rem;
  position: relative;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
  position: absolute;
  display: block;
  top: 0; left: 0; height: 100%; width: 100%;
  text-align: center; line-height: 1.5rem;
  color: #333;
  padding: 0;
  margin: 0;
  font-weight: bold;
}
.page-rate-widget-box .cancel a { color: transparent; }
.page-rate-widget-box .cancel a::after {
  content: "⤬";
  position: absolute;
  color: #333;
  top: 0; left: 0; height: 100%; width: 100%;
}
.page-rate-widget-box .rateup a:hover { background-color: limegreen; }
.page-rate-widget-box .ratedown a:hover { background-color: tomato; }
.page-rate-widget-box .cancel a:hover {
  color: transparent;
  background-color: transparent;
  border-radius: 0;
}

/* Info module compatibility */
/* More specific because will probably be imported before the info module */
#page-content .rate-box-with-credit-button {
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-width: 1px 0;
  border-style: dotted;
  border-color: #333;
  display: flex;
  align-items: center;
}
.rate-box-with-credit-button .page-rate-widget-box {
  border: none;
}
.creditButton {
  height: 1rem;
  width: 1rem;
  background-color: var(--inkblot-accent, transparent);
  border-radius: 50%;
}
#page-content .creditButton p a {
  color: #333;
  border: none;
  line-height: 1rem;
  margin-left: 0;
}

/* - == === IMAGE BLOCKS === == - */

.scp-image-block {
  border: none;
  border-top: 1px dotted #333;
  box-shadow: none;
}
.scp-image-block .scp-image-caption {
  background: none;
  border-top: solid 0.25rem var(--inkblot-accent, transparent);
  padding-top: 0.5rem;
  font-weight: normal;
}
.scp-image-block img {
  padding: 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .scp-image-block.block-left {
    margin-left: -100px;
  }
}
@media (min-width: 1250px) {
  .scp-image-block.block-right {
    margin-right: -100px;
  }
}
@media (max-width: 600px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}

/* - == === OTHER STUFF === == - */

li, p {
  line-height: 1.6em;
  letter-spacing: 0.01em;
}

#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
  font-family: 'Libre Baskerville', serif;
  color: #333;
  margin: 1em 0 0.5em 0;
  letter-spacing: 0;
}
#page-content h1 {
  font-family: 'Prata', serif; font-size: 3rem; text-align: center;
}
#page-content h2 { font-size: 2rem; font-weight: bold; }

hr {
  margin: 3rem;
  height: 1rem;
  background: radial-gradient(circle at center, var(--inkblot-accent, transparent) 0.375rem, transparent calc(0.375rem + 0.5px));
  display: flex;
  justify-content: space-around;
  align-items: center;
}
hr::before, hr::after {
  content: "";
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted #333;
  width: calc(50% - 3rem);
}

.page-tags span {
  border-top: 1px dotted #333;
}

.footnotes-footer {
  margin-top: 2rem;
}

#page-content {
  margin-bottom: 2rem;
}

#footer {
  background: transparent;
}

#footer a {
  color: black;
}

#breadcrumbs, .pseudocrumbs {
  display: flex;
  flex-direction: row-reverse;
  font-size: 0;
  margin-top: -1rem;
}
#breadcrumbs a, .pseudocrumbs a {
  font-size: 0.82rem;
  margin-left: 0.3rem;
}
#breadcrumbs a::before, .pseudocrumbs a:before {
  content: "«";
  margin-right: 0.3rem;
}

.licensebox {
  font-size: 0.82rem;
  font-family: verdana, arial, helvetica, sans-serif;
  margin: 1rem 0 -1.5rem;
}

span, a {
  word-break: normal;
}

blockquote, div.blockquote {
  border: none;
  border-left: thick solid var(--inkblot-accent, #eee);
  background: none;
}