« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'src/static/css')
-rw-r--r--src/static/css/site.css1255
1 files changed, 1073 insertions, 182 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css
index e297993c..25d9ce47 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -40,6 +40,9 @@ body {
 
 body::before {
   content: "";
+}
+
+body::before, .wallpaper-part {
   position: fixed;
   top: 0;
   left: 0;
@@ -176,6 +179,16 @@ body::before {
   display: none;
 }
 
+.sidebar-column.always-content-column {
+  /* duplicated in thin & medium media query */
+  position: static !important;
+  max-width: unset !important;
+  flex-basis: unset !important;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  width: 100%;
+}
+
 .sidebar-multiple {
   display: flex;
   flex-direction: column;
@@ -225,12 +238,22 @@ body::before {
 
 /* Design & Appearance - Layout elements */
 
+:root {
+  color-scheme: dark;
+}
+
 body {
   background: black;
 }
 
 body::before {
-  background-image: url("../../media/bg.jpg");
+  /* This is where the basic background-image rule
+   * gets applied... but the path *to* that media file
+   * isn't part of the CSS itself anymore!
+   */
+}
+
+body::before, .wallpaper-part {
   background-position: center;
   background-size: cover;
   opacity: 0.5;
@@ -329,6 +352,11 @@ body::before {
   margin: 0;
 }
 
+.sidebar h2:first-child {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
 .sidebar h3 {
   font-size: 1.1em;
   font-style: oblique;
@@ -380,6 +408,42 @@ body::before {
   padding-left: 10px;
 }
 
+.sidebar details.has-tree-list[open] summary {
+  font-weight: 800;
+}
+
+.sidebar dl.tree-list {
+  margin-top: 0.25em;
+  line-height: 1.25em;
+  padding-left: 15px;
+}
+
+.sidebar dl.tree-list dt {
+  display: list-item;
+  list-style-type: disc;
+  padding-left: 0;
+  margin-left: 20px;
+}
+
+.sidebar dl.tree-list dl {
+  padding-left: 15px;
+}
+
+.sidebar dl.tree-list dd {
+  margin-left: 0;
+}
+
+.sidebar dl.tree-list dt.current a {
+  font-weight: 800;
+  border-bottom: 1px solid;
+}
+
+.sidebar .times-used {
+  opacity: 0.7;
+  font-size: 0.9em;
+  cursor: default;
+}
+
 .sidebar li.current {
   font-weight: 800;
 }
@@ -397,6 +461,15 @@ body::before {
   padding-left: 5px;
 }
 
+.sidebar > details.current summary span b {
+  font-weight: 800;
+}
+
+summary > span b {
+  font-weight: normal;
+  color: var(--primary-color);
+}
+
 summary > span:hover {
   cursor: pointer;
   text-decoration: underline;
@@ -433,10 +506,6 @@ summary.underline-white > span:hover a:not(:hover) {
   text-decoration-color: white;
 }
 
-summary .group-name {
-  color: var(--primary-color);
-}
-
 .sidebar > details ul,
 .sidebar > details ol {
   margin-top: 0;
@@ -477,6 +546,52 @@ summary .group-name {
   align-self: flex-start !important; /* pls */
 }
 
+.sidebar-box-joiner {
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+  border-right: 1px dashed var(--primary-color);
+  height: 10px;
+}
+
+.sidebar-box-joiner + .sidebar {
+  margin-top: 0 !important;
+}
+
+.track-release-sidebar-box {
+  --content-padding: 3px;
+}
+
+.track-release-sidebar-box h1 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 0.9em;
+  font-style: oblique;
+}
+
+.track-release-sidebar-box + .track-release-sidebar-box,
+.track-release-sidebar-box + .track-list-sidebar-box,
+.track-list-sidebar-box + .track-release-sidebar-box {
+  margin-top: 5px !important;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.track-release-sidebar-box:has(+ .track-list-sidebar-box),
+.track-list-sidebar-box:has(+ .track-release-sidebar-box) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.track-list-sidebar-box summary {
+  padding-left: 20px !important;
+  text-indent: -15px !important;
+}
+
+.track-list-sidebar-box .track-section-range {
+  white-space: nowrap;
+}
+
 .wiki-search-sidebar-box {
   padding: 1px 0 0 0;
 
@@ -514,23 +629,77 @@ summary .group-name {
   filter: brightness(0.7);
 }
 
-.wiki-search-input {
+.wiki-search-label {
   width: calc(100% - 4px);
   padding: 2px 4px;
   margin: 2px 2px 3px 2px;
   box-sizing: border-box;
 
+  display: flex;
+  flex-direction: row;
+
   background: transparent;
   border: 1px solid var(--dim-color);
   border-radius: 3px;
+}
+
+.wiki-search-label::before {
+  display: inline-block;
+  padding-left: 3px;
+  padding-right: 3px;
+  margin-right: 3px;
+  width: 1.8em;
+  text-align: center;
+  content: '\1f50d\fe0e';
+}
+
+.wiki-search-input {
+  background: transparent;
+  border: transparent;
   color: inherit;
+  flex-grow: 1;
 }
 
-.wiki-search-input[disabled] {
+.wiki-search-input::-webkit-search-cancel-button {
+  filter: grayscale(1) invert(1);
+}
+
+.wiki-search-label.disabled {
   opacity: 0.6;
+}
+
+.wiki-search-label.disabled,
+.wiki-search-input[disabled] {
   cursor: not-allowed;
 }
 
+.wiki-search-label:not(.disabled):hover,
+.wiki-search-label:focus-within {
+  background: var(--light-ghost-color);
+}
+
+.wiki-search-label:focus-within {
+  border-color: var(--primary-color);
+}
+
+.wiki-search-label:focus-within::before {
+  opacity: 0.7;
+}
+
+.wiki-search-input:focus {
+  border: none;
+  outline: none;
+}
+
+.wiki-search-input::placeholder {
+  color: var(--primary-color);
+  font-style: oblique;
+}
+
+.wiki-search-input:focus::placeholder {
+  color: var(--dim-color);
+}
+
 .wiki-search-sidebar-box hr {
   border-color: var(--primary-color);
   border-style: none none dotted none;
@@ -603,7 +772,8 @@ summary .group-name {
   border-bottom: 1px solid var(--dim-color);
 }
 
-.wiki-search-result:hover::before {
+.wiki-search-result:hover::before,
+.wiki-search-result:focus::before {
   display: block;
   background: var(--light-ghost-color);
 }
@@ -694,19 +864,6 @@ summary .group-name {
   border-color: var(--deep-color);
 }
 
-.wiki-search-input:focus {
-  border-color: var(--primary-color);
-}
-
-.wiki-search-input::placeholder {
-  color: var(--primary-color);
-  font-style: oblique;
-}
-
-.wiki-search-input:focus::placeholder {
-  color: var(--dim-color);
-}
-
 #content {
   overflow-wrap: anywhere;
 }
@@ -737,6 +894,10 @@ a.current {
   font-weight: 800;
 }
 
+a.series {
+  font-style: oblique;
+}
+
 a:not([href]) {
   cursor: default;
 }
@@ -745,6 +906,10 @@ a:not([href]):hover {
   text-decoration: none;
 }
 
+a .normal-content {
+  color: white;
+}
+
 .external-link:not(.from-content) {
   white-space: nowrap;
 }
@@ -758,6 +923,28 @@ a:not([href]):hover {
   color: white;
 }
 
+.image-media-link::after {
+  content: '';
+  display: inline-block;
+  width: 22px;
+  height: 1em;
+
+  background-color: var(--primary-color);
+
+  mask-image: url(/static-4p1/misc/image.svg);
+  mask-repeat: no-repeat;
+  mask-position: calc(100% - 2px);
+  vertical-align: text-bottom;
+}
+
+.image-media-link:hover::after {
+  background-color: white;
+}
+
+.nav-link {
+  display: inline-block;
+}
+
 .nav-main-links .nav-link.current > span.nav-link-content > a {
   font-weight: 800;
 }
@@ -772,30 +959,97 @@ a:not([href]):hover {
   font-weight: 800;
 }
 
-.nav-links-hierarchical .nav-link:not(:first-child)::before {
+.nav-links-hierarchical .nav-link + .nav-link::before,
+.nav-links-hierarchical .nav-link + .blockwrap .nav-link::before {
   content: "\0020/\0020";
 }
 
-#header .chronology .heading,
-#header .chronology .buttons {
+.series-nav-links {
+  display: inline-block;
+}
+
+.series-nav-links:not(:first-child)::before {
+  content: "\00a0»\00a0";
+  font-weight: normal;
+}
+
+.series-nav-links:not(:last-child)::after {
+  content: ",\00a0";
+}
+
+.series-nav-links + .series-nav-links::before {
+  content: "";
+}
+
+.dot-switcher > span:not(:first-child) {
+  display: inline-block;
   white-space: nowrap;
 }
 
-#header .scoped-chronology {
-  display: none;
+/* Yeah, all this stuff only applies to elements of the dot switcher
+ * besides the first, which will necessarily have a bullet point at left.
+ */
+.dot-switcher *:where(.dot-switcher > span:not(:first-child) > *) {
+  display: inline-block;
+  white-space: wrap;
+  text-align: left;
+  vertical-align: top;
+}
+
+.dot-switcher > span:not(:first-child)::before {
+  content: "\0020\00b7\0020";
+  white-space: pre;
+  font-weight: 800;
+}
+
+.dot-switcher > span.current {
+  font-weight: 800;
 }
 
-#header .scoped-chronology-switcher .switcher-link {
+.dot-switcher.intrapage > span:not(.current) a {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
 
-#header .scoped-chronology-switcher > div {
-  margin-left: 20px;
+.dot-switcher.intrapage > span.current a {
+  /* Keeping cursor: pointer (the default) is intentional here. */
+  text-decoration: none !important;
 }
 
 #secondary-nav {
   text-align: center;
+
+  /* Default to visible. It'll automatically be hidden
+   * in layouts where the sidebar is visible.
+   */
+  display: block;
+}
+
+#secondary-nav.album-secondary-nav {
+  display: flex;
+  justify-content: space-around;
+  padding-left: 7.5% !important;
+  padding-right: 7.5% !important;
+  flex-wrap: wrap;
+  line-height: 1.4;
+}
+
+#secondary-nav.album-secondary-nav.with-previous-next .group-with-series {
+  width: 100%;
+}
+
+#secondary-nav.album-secondary-nav.with-previous-next > * {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+#secondary-nav.album-secondary-nav .group-nav-links .dot-switcher,
+#secondary-nav.album-secondary-nav .series-nav-links .dot-switcher {
+  white-space: nowrap;
+}
+
+.inert-previous-next-link {
+  opacity: 0.7;
 }
 
 .nowrap {
@@ -821,7 +1075,11 @@ a:not([href]):hover {
 }
 
 .text-with-tooltip.datetimestamp .text-with-tooltip-interaction-cue,
-.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue {
+.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue,
+.text-with-tooltip.commentary-date .text-with-tooltip-interaction-cue,
+.text-with-tooltip.wiki-edits .text-with-tooltip-interaction-cue,
+.text-with-tooltip.rerelease .text-with-tooltip-interaction-cue,
+.text-with-tooltip.first-release .text-with-tooltip-interaction-cue {
   cursor: default;
 }
 
@@ -838,7 +1096,17 @@ a:not([href]):hover {
   text-decoration: none !important;
 }
 
+.text-with-tooltip.wiki-edits > .hoverable {
+  white-space: nowrap;
+}
+
+.isolate-tooltip-z-indexing > * {
+  position: relative;
+  z-index: -1;
+}
+
 .tooltip {
+  font-size: 1rem;
   position: absolute;
   z-index: 3;
   left: -10px;
@@ -846,6 +1114,11 @@ a:not([href]):hover {
   display: none;
 }
 
+.cover-artwork .tooltip,
+#sidebar .tooltip {
+  font-size: 0.9rem;
+}
+
 li:not(:first-child:last-child) .tooltip,
 .offset-tooltips > :not(:first-child:last-child) .tooltip {
   left: 14px;
@@ -867,30 +1140,42 @@ li:not(:first-child:last-child) .tooltip,
   box-shadow:
     0 3px 4px 4px #000000aa,
     0 -2px 4px -2px var(--primary-color) inset;
+
+  text-indent: 0;
 }
 
-.icons-tooltip {
+.contribution-tooltip {
   padding: 3px 6px 6px 6px;
   left: -34px;
 }
 
 .datetimestamp-tooltip,
-.missing-duration-tooltip {
+.missing-duration-tooltip,
+.commentary-date-tooltip,
+.rerelease-tooltip,
+.first-release-tooltip {
   padding: 3px 4px 2px 2px;
   left: -10px;
 }
 
-.thing-name-tooltip {
+.thing-name-tooltip,
+.wiki-edits-tooltip {
   padding: 3px 4px 2px 2px;
   left: -6px !important;
+}
 
-  /* Terrifying?
-   * https://stackoverflow.com/a/64424759/4633828
-   */
-  margin-right: -120px;
+.thing-name-tooltip .tooltip-content,
+.wiki-edits-tooltip .tooltip-content {
+  font-size: 0.85em;
 }
 
-.icons-tooltip .tooltip-content {
+/* Terrifying?
+ * https://stackoverflow.com/a/64424759/4633828
+ */
+.thing-name-tooltip { margin-right: -120px; }
+.wiki-edits-tooltip { margin-right: -200px; }
+
+.contribution-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
 
   -webkit-user-select: none;
@@ -901,78 +1186,160 @@ li:not(:first-child:last-child) .tooltip,
   display: grid;
 
   grid-template-columns:
-    [icon-start] auto [icon-end domain-start] auto [domain-end];
+    [icon-start] 26px [icon-end handle-start] auto [handle-end platform-start] auto [platform-end];
+}
+
+.contribution-tooltip .external-link {
+  display: grid;
+  grid-column-start: icon-start;
+  grid-column-end: handle-end;
+  grid-template-columns: subgrid;
+
+  height: 1.4em;
+}
+
+.contribution-tooltip .chronology-link {
+  display: grid;
+  grid-column-start: icon-start;
+  grid-column-end: handle-end;
+  grid-template-columns: subgrid;
+
+  height: 1.2em;
 }
 
-.icons-tooltip .icon {
+.contribution-tooltip .external-icon,
+.contribution-tooltip .chronology-symbol {
   grid-column-start: icon-start;
   grid-column-end: icon-end;
 }
 
-.icons-tooltip .icon-platform {
+.contribution-tooltip .external-icon svg {
+  width: 18px;
+  height: 18px;
+  top: -0.1em;
+}
+
+.contribution-tooltip .chronology-symbol {
+  text-align: center;
+}
+
+.contribution-tooltip .external-handle,
+.contribution-tooltip .chronology-text {
+  grid-column-start: handle-start;
+  grid-column-end: handle-end;
+
+  width: max-content;
+  max-width: 200px;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.contribution-tooltip .external-handle {
+  padding-right: 8px;
+}
+
+.contribution-tooltip .chronology-text {
+  padding-right: 6px;
+}
+
+.contribution-tooltip .chronology-text,
+.contribution-tooltip .chronology-info {
+  font-size: 0.85em;
+}
+
+.contribution-tooltip .tooltip-divider,
+.tooltip-content hr.cute {
+  grid-column-start: icon-start;
+  grid-column-end: platform-end;
+  border-top: 1px dotted var(--primary-color);
+}
+
+/* Don't mind me... */
+.tooltip-content .tooltip-divider,
+.tooltip-content hr.cute {
+  margin-top: 3px;
+  margin-bottom: 4px;
+}
+
+.contribution-tooltip .external-platform,
+.contribution-tooltip .chronology-info {
   display: none;
 
-  grid-column-start: domain-start;
-  grid-column-end: domain-end;
+  grid-column-start: platform-start;
+  grid-column-end: platform-end;
 
-  --icon-platform-opacity: 0.8;
-  padding-right: 4px;
+  --external-platform-opacity: 0.8;
   opacity: 0.8;
+  padding-right: 4px;
+
+  white-space: nowrap;
 }
 
-.icons-tooltip.show-info .icon-platform {
+.contribution-tooltip.show-info .external-platform,
+.contribution-tooltip.show-info .chronology-info {
   display: inline;
-  animation: icon-platform 0.2s forwards linear;
+  animation: external-platform 0.2s forwards linear;
 }
 
-@keyframes icon-platform {
+@keyframes external-platform {
   from {
     opacity: 0;
   }
 
   to {
-    opacity: var(--icon-platform-opacity);
+    opacity: var(--external-platform-opacity);
   }
 }
 
-.icons-tooltip .icon:hover + .icon-platform {
-  --icon-platform-opacity: 1;
+.contribution-tooltip .external-link:hover,
+.contribution-tooltip .chronology-link:hover {
+  filter: brightness(1.4);
+  text-decoration: none;
+}
+
+.contribution-tooltip .external-link:hover .external-handle,
+.contribution-tooltip .chronology-link:hover .chronology-text {
+  text-decoration: underline;
+}
+
+.contribution-tooltip .external-link:hover + .external-platform,
+.contribution-tooltip .chronology-link:hover + .chronology-info {
+  --external-platform-opacity: 1;
   text-decoration: underline;
   text-decoration-color: #ffffffaa;
 }
 
 .datetimestamp-tooltip .tooltip-content,
-.missing-duration-tooltip .tooltip-content {
+.missing-duration-tooltip .tooltip-content,
+.commentary-date-tooltip .tooltip-content {
   padding: 5px 6px;
   white-space: nowrap;
   font-size: 0.9em;
 }
 
-.thing-name-tooltip .tooltip-content {
+.thing-name-tooltip .tooltip-content,
+.wiki-edits-tooltip .tooltip-content {
   padding: 3px 4.5px;
 }
 
-.icons {
-  font-style: normal;
-  white-space: nowrap;
-}
-
-.icons a:hover {
-  filter: brightness(1.4);
-}
-
-.icons a {
-  padding: 0 3px;
+.rerelease-tooltip .tooltip-content,
+.first-release-tooltip .tooltip-content {
+  padding: 3px 4.5px;
+  width: 260px;
+  font-size: 0.9em;
 }
 
-.icon {
+.external-icon {
   display: inline-block;
+  padding: 0 3px;
   width: 24px;
   height: 1em;
   position: relative;
 }
 
-.icon > svg {
+.external-icon svg {
   width: 24px;
   height: 24px;
   top: -0.25em;
@@ -980,25 +1347,8 @@ li:not(:first-child:last-child) .tooltip,
   fill: var(--primary-color);
 }
 
-.icon.has-text {
-  display: block;
-  width: unset;
-  height: 1.4em;
-}
-
-.icon.has-text > svg {
-  width: 18px;
-  height: 18px;
-  top: -0.1em;
-}
-
-.icon.has-text > .icon-text {
-  margin-left: 24px;
-  padding-right: 8px;
-}
-
-.rerelease,
-.other-group-accent {
+.other-group-accent,
+.rerelease-line {
   opacity: 0.7;
   font-style: oblique;
 }
@@ -1011,6 +1361,26 @@ li:not(:first-child:last-child) .tooltip,
   color: var(--page-primary-color);
 }
 
+s.spoiler {
+  display: inline-block;
+  color: transparent;
+  text-decoration: underline;
+  text-decoration-color: white;
+  text-decoration-style: dashed;
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+}
+
+s.spoiler::selection {
+  color: black;
+  background: white;
+}
+
+s.spoiler::-moz-selection {
+  color: black;
+  background: white;
+}
+
 progress {
   accent-color: var(--primary-color);
 }
@@ -1032,12 +1402,16 @@ p .current {
   font-weight: 800;
 }
 
-#cover-art-container {
+hr.cute,
+#content hr.cute,
+.sidebar hr.cute {
+  border-color: var(--primary-color);
+  border-style: none none dotted none;
+}
+
+.cover-artwork {
   font-size: 0.8em;
   border: 2px solid var(--primary-color);
-  box-shadow:
-    0 2px 14px -6px var(--primary-color),
-    0 0 12px 12px #00000080;
 
   border-radius: 0 0 4px 4px;
   background: var(--bg-black-color);
@@ -1046,33 +1420,53 @@ p .current {
           backdrop-filter: blur(3px);
 }
 
-#cover-art-container:has(.image-details),
-#cover-art-container.has-image-details {
+.cover-artwork:has(.image-details),
+.cover-artwork.has-image-details {
   border-radius: 0 0 6px 6px;
 }
 
-#cover-art-container:not(:has(.image-details)),
-#cover-art-container:not(.has-image-details) {
+.cover-artwork:not(:has(.image-details)),
+.cover-artwork:not(.has-image-details) {
   /* Hacky: `overflow: hidden` hides tag tooltips, so it can't be applied
    * if we've got tags/details visible. But it's okay, because we only
    * need to apply it if it *doesn't* - that's when the rounded border
-   * of #cover-art-container needs to cut off its child image-container
+   * of the .cover-artwork needs to cut off its child .image-container
    * (which has a background that otherwise causes sharp corners).
    */
   overflow: hidden;
 }
 
-#cover-art-container .image-container {
-  /* Border is handled on the cover-art-container. */
+#artwork-column .cover-artwork {
+  box-shadow:
+    0 2px 14px -6px var(--primary-color),
+    0 0 12px 12px #00000080;
+}
+
+#artwork-column .cover-artwork:not(:first-child) {
+  margin-top: 20px;
+  margin-left: 30px;
+  margin-right: 5px;
+}
+
+#artwork-column .cover-artwork:last-child:not(:first-child) {
+  margin-bottom: 25px;
+}
+
+.cover-artwork .image-container {
+  /* Border is handled on the .cover-artwork. */
   border: none;
-  border-radius: 0;
+  border-radius: 0 !important;
 }
 
-#cover-art-container .image-details {
+.cover-artwork .image-details {
   border-top-color: var(--deep-color);
 }
 
-#cover-art-container .image {
+.cover-artwork .image-details + .image-details {
+  border-top-color: var(--primary-color);
+}
+
+.cover-artwork .image {
   display: block;
   width: 100%;
   height: 100%;
@@ -1081,48 +1475,125 @@ p .current {
 .image-details {
   display: block;
 
-  padding: 6px 9px 4px 9px;
   margin-top: 0;
   margin-bottom: 0;
+
+  /* Styles below only apply for first image-details. */
+
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 9px;
+  padding-right: 9px;
+
+  padding-top: 6px;
+  padding-bottom: 4px;
+
   border-top: 1px dashed var(--dim-color);
 }
 
-ul.image-details li {
+.image-details + .image-details {
+  display: block;
+
+  margin-left: 6px;
+  margin-right: 6px;
+  padding-left: 3px;
+  padding-right: 3px;
+
+  padding-top: 4px;
+  padding-bottom: 4px;
+
+  border-top: 1px dotted var(--primary-color);
+}
+
+.image-details:last-child {
+  margin-bottom: 2px;
+}
+
+ul.image-details.art-tag-details {
+  padding-bottom: 0;
+}
+
+ul.image-details.art-tag-details li {
   display: inline-block;
-  margin: 0;
 }
 
-#cover-art-container ul li:not(:last-child)::after {
+ul.image-details.art-tag-details li:not(:last-child)::after {
   content: " \00b7 ";
 }
 
-#artist-commentary.first-entry-is-dated {
+p.image-details.illustrator-details {
+  text-align: center;
+  font-style: oblique;
+}
+
+p.image-details.origin-details {
+  margin-bottom: 2px;
+}
+
+.album-art-info {
+  font-size: 0.8em;
+  border: 2px solid var(--deep-color);
+
+  margin: 10px min(15px, 1vw) 15px;
+
+  background: var(--bg-black-color);
+  padding: 6px;
+  border-radius: 5px;
+
+  -webkit-backdrop-filter: blur(3px);
+          backdrop-filter: blur(3px);
+}
+
+.album-art-info p {
+  margin: 0;
+}
+
+p.content-heading:has(+ .commentary-entry-heading.dated) {
   clear: right;
 }
 
 .commentary-entry-heading {
+  display: flex;
+  flex-direction: row;
+
   margin-left: 15px;
   padding-left: 5px;
   max-width: 625px;
   padding-bottom: 0.2em;
-  border-bottom: 1px dotted var(--primary-color);
+
+  border-bottom: 1px solid var(--dim-color);
+}
+
+.commentary-entry-heading-text {
+  flex-grow: 1;
+  padding-left: 1.25ch;
+  text-indent: -1.25ch;
 }
 
 .commentary-entry-accent {
   font-style: oblique;
 }
 
-.commentary-entry-heading time {
-  float: right;
+.commentary-entry-heading .commentary-date {
+  flex-shrink: 0;
+
+  margin-left: 0.75ch;
+  align-self: flex-end;
+
   padding-left: 0.5ch;
   padding-right: 0.25ch;
-  margin-left: 0.75ch;
-  border-left: 1px dotted transparent;
-  transition: border-left-color 0.15s;
 }
 
-.commentary-entry-heading time:hover {
-  border-left-color: white;
+.commentary-entry-heading .hoverable {
+  box-shadow: 1px 2px 6px 5px #04040460;
+}
+
+.commentary-entry-body summary {
+  list-style-position: outside;
+}
+
+.commentary-entry-body summary > span {
+  color: var(--primary-color);
 }
 
 .commentary-art {
@@ -1139,24 +1610,41 @@ ul.image-details li {
   box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.25) !important;
 }
 
+.lyrics-switcher {
+  padding-left: 20px;
+}
+
+.lyrics-switcher > span:not(:first-child)::before {
+  content: "\0020\00b7\0020";
+  font-weight: 800;
+}
+
+.lyrics-entry {
+  padding-left: 40px;
+  max-width: 600px;
+}
+
 .js-hide,
 .js-show-once-data,
 .js-hide-once-data {
   display: none;
 }
 
-.content-image-container {
+.content-image-container,
+.content-video-container {
   margin-top: 1em;
   margin-bottom: 1em;
 }
 
-.content-image-container.align-center {
+.content-image-container.align-center,
+.content-video-container.align-center,
+.content-audio-container.align-center {
   text-align: center;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 }
 
-a.align-center, img.align-center {
+a.align-center, img.align-center, audio.align-center {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -1218,11 +1706,6 @@ h1 {
   font-size: 2em;
 }
 
-html[data-url-key="localized.home"] #content h1 {
-  text-align: center;
-  font-size: 2.5em;
-}
-
 #content.flash-index h2 {
   text-align: center;
   font-size: 2.5em;
@@ -1240,13 +1723,27 @@ html[data-url-key="localized.home"] #content h1 {
   margin-bottom: 0.25em;
 }
 
+#content.top-index.has-subtitle h1 {
+  margin-bottom: 0.35em;
+}
+
+#content.top-index h2.page-subtitle {
+  font-size: 1.8em;
+  margin-top: 0.35em;
+  margin-bottom: 0.5em;
+}
+
 .quick-info {
   text-align: center;
+  padding-left: calc(var(--responsive-padding-ratio) * 100%);
+  padding-right: calc(var(--responsive-padding-ratio) * 100%);
+  line-height: 1.25em;
 }
 
 ul.quick-info {
   list-style: none;
   padding-left: 0;
+  padding-right: 0;
 }
 
 ul.quick-info li {
@@ -1258,10 +1755,73 @@ ul.quick-info li:not(:last-child)::after {
   font-weight: 800;
 }
 
-.carousel-container + .quick-info {
+.carousel-container + .quick-info,
+.carousel-container + .quick-description {
   margin-top: 25px;
 }
 
+.gallery-set-switcher {
+  text-align: center;
+}
+
+.quick-description:not(.has-external-links-only) {
+  --clamped-padding-ratio: max(var(--responsive-padding-ratio), 0.06);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: calc(0.40 * var(--clamped-padding-ratio) * 100%);
+  padding-right: calc(0.40 * var(--clamped-padding-ratio) * 100%);
+  max-width: 500px;
+
+  padding-top: 0.25em;
+  padding-bottom: 0.75em;
+  border-left: 1px solid var(--dim-color);
+  border-right: 1px solid var(--dim-color);
+  line-height: 1.25em;
+}
+
+.quick-description.has-external-links-only {
+  padding-left: 12%;
+  padding-right: 12%;
+}
+
+.quick-description.has-content-only {
+  padding-bottom: 0.5em;
+}
+
+.quick-description p {
+  text-align: center;
+}
+
+.quick-description > blockquote {
+  margin-left: 0 !important;
+}
+
+.quick-description .description-content.long hr ~ p {
+  text-align: left;
+}
+
+.quick-description > .description-content :first-child {
+  margin-top: 0;
+}
+
+.quick-description > .quick-description-actions,
+.quick-description.has-content-only .description-content :last-child {
+  margin-bottom: 0;
+}
+
+.quick-description:not(.collapsed) .description-content.short,
+.quick-description:not(.collapsed) .quick-description-actions.when-collapsed,
+.quick-description:not(.expanded) .description-content.long,
+.quick-description:not(.expanded) .quick-description-actions.when-expanded {
+  display: none;
+}
+
+.quick-description .quick-description-actions .expand-link,
+.quick-description .quick-description-actions .collapse-link {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
 #intro-menu {
   margin: 24px 0;
   padding: 10px;
@@ -1329,8 +1889,12 @@ p code {
   font-style: oblique;
 }
 
+main {
+  --responsive-padding-ratio: 0.10;
+}
+
 main.long-content {
-  --long-content-padding-ratio: 0.10;
+  --long-content-padding-ratio: var(--responsive-padding-ratio);
 }
 
 main.long-content .main-content-container,
@@ -1351,6 +1915,10 @@ dl dt {
   margin-bottom: 2px;
 }
 
+dl dt[id]:not(.content-heading) {
+  --custom-scroll-offset: calc(2.5em - 2px);
+}
+
 dl dd {
   margin-bottom: 1em;
 }
@@ -1366,19 +1934,45 @@ ul > li.has-details {
   margin-left: -17px;
 }
 
-.album-group-list dt {
+.album-group-list dt,
+.group-series-list dt {
   font-style: oblique;
   padding-left: 0;
 }
 
-.album-group-list dd {
+.album-group-list dd,
+.group-series-list dd {
   margin-left: 0;
 }
 
-.group-chronology-link {
+.album-group-list blockquote {
+  max-width: 540px;
+  margin-bottom: 9px;
+  margin-top: 3px;
+}
+
+.album-group-list blockquote p:first-child {
+  margin-top: 0;
+}
+
+.album-group-list blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.group-chronology-link,
+.series-chronology-link {
   font-style: oblique;
 }
 
+.group-chronology-link a,
+.series-chronology-link a {
+  font-style: normal;
+}
+
+.group-view-switcher {
+  margin-left: 1ch;
+}
+
 #content hr {
   border: 1px inset #808080;
   width: 100%;
@@ -1481,6 +2075,14 @@ html[data-url-key="localized.albumCommentary"] .content-heading-accent {
   display: inline-block;
 }
 
+html[data-url-key="localized.albumCommentary"] p.track-info {
+  margin-left: 20px;
+}
+
+html[data-url-key="localized.groupInfo"] .by a {
+  color: var(--page-primary-color);
+}
+
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loading-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loaded-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-error-line {
@@ -1512,19 +2114,9 @@ h1 a[href="#additional-names-box"]:hover {
   --custom-scroll-offset: calc(0.5em - 2px);
 
   margin: 1em 0 1em -10px;
-  padding: 15px 20px 10px 20px;
-  width: max-content;
   max-width: min(60vw, 600px);
 
-  border: 1px dotted var(--primary-color);
-  border-radius: 6px;
-
-  background:
-    linear-gradient(var(--bg-color), var(--bg-color)),
-    linear-gradient(#000000bb, #000000bb),
-    var(--primary-color);
-
-  box-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+  padding: 15px 20px 10px 20px;
 
   display: none;
 }
@@ -1561,6 +2153,177 @@ h1 a[href="#additional-names-box"]:hover {
   vertical-align: text-bottom;
 }
 
+#content.top-index #additional-names-box {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2em;
+}
+
+#content.top-index #additional-names-box {
+  text-align: center;
+  margin-bottom: 0.75em;
+}
+
+/* Specific pages - homepage */
+
+html[data-url-key="localized.home"] #content h1 {
+  text-align: center;
+  font-size: 2.5em;
+}
+
+html[data-language-code="preview-en"][data-url-key="localized.home"] #content h1::after {
+  font-family: cursive;
+  display: block;
+  content: "(Preview Build)";
+  font-size: 0.8em;
+}
+
+/* Specific pages - art tag gallery */
+
+html[data-url-key="localized.artTagGallery"] #descends-from-line {
+  margin-bottom: 0.25em;
+}
+
+html[data-url-key="localized.artTagGallery"] #descendants-line {
+  margin-top: 0.25em;
+}
+
+html[data-url-key="localized.artTagGallery"] #descends-from-line a,
+html[data-url-key="localized.artTagGallery"] #descendants-line a {
+  display: inline-block;
+}
+
+
+html[data-url-key="localized.artTagGallery"] #featured-direct-line,
+html[data-url-key="localized.artTagGallery"] #featured-indirect-line,
+html[data-url-key="localized.artTagGallery"] #showing-direct-line,
+html[data-url-key="localized.artTagGallery"] #showing-indirect-line {
+  display: none;
+}
+
+html[data-url-key="localized.artTagGallery"] #showing-all-line a,
+html[data-url-key="localized.artTagGallery"] #showing-direct-line a,
+html[data-url-key="localized.artTagGallery"] #showing-indirect-line a {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+/* Specific pages - "Art Tag Network" listing */
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd) {
+  margin-left: 20px;
+  margin-bottom: 0;
+  padding-left: 10px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd):not(:last-child) {
+  padding-bottom: 20px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-stat-line {
+  padding-left: 10px;
+  margin-left: 20px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-stat-line a {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] .network-tag-stat {
+  display: inline-block;
+  text-align: right;
+  min-width: 5ch;
+  margin-right: 2px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-top-dl > dt:has(.network-tag.with-stat:not([style*="display: none"])) {
+  padding-left: 20px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dt + dt:has(+ dd) {
+  padding-top: 20px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dt:has(+ dd) .network-tag-stat {
+  text-align: center;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt {
+  padding-left: 10px;
+  margin-left: 20px;
+  margin-bottom: 0;
+  padding-bottom: 2px;
+  max-width: unset;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).even,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).even {
+  border-left: 1px solid #eaeaea;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).odd,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).odd {
+  border-left: 1px solid #7b7b7b;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt {
+  position: relative;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).odd::after,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).odd::after {
+  content: "";
+  display: block;
+  width: 7px;
+  height: 7px;
+  background: #7b7b7b;
+  position: absolute;
+  bottom: -4px;
+  left: -4px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).even::after,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).even::after {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: #eaeaea;
+  position: absolute;
+  bottom: -3px;
+  left: -3px;
+  border-bottom-right-radius: 6px;
+  border-top-left-radius: 3px;
+}
+
+/* "Drops" */
+
+.drop {
+  padding: 15px 20px;
+  width: max-content;
+  max-width: min(60vw, 600px);
+
+  border: 1px dotted var(--primary-color);
+  border-radius: 6px;
+
+  background:
+    linear-gradient(var(--bg-color), var(--bg-color)),
+    linear-gradient(#000000bb, #000000bb),
+    var(--primary-color);
+
+  box-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+}
+
+.commentary-drop {
+  margin-top: 25px;
+  margin-bottom: 15px;
+  margin-left: 20px;
+  padding: 10px 20px;
+  max-width: min(60vw, 300px);
+}
+
 /* Images */
 
 .image-container {
@@ -1579,6 +2342,21 @@ h1 a[href="#additional-names-box"]:hover {
   color: white;
 }
 
+/* Videos and audios (in content) get a lite version of image-container. */
+.content-video-container,
+.content-audio-container {
+  width: min-content;
+  background-color: var(--dark-color);
+  border: 2px solid var(--primary-color);
+  border-radius: 2.5px 2.5px 3px 3px;
+  padding: 5px;
+}
+
+.content-video-container video,
+.content-audio-container audio {
+  display: block;
+}
+
 .image-text-area {
   position: absolute;
   top: 0;
@@ -1648,7 +2426,8 @@ img {
     6px -6px 2px -4px white inset;
 }
 
-img.pixelate, .pixelate img {
+img.pixelate, .pixelate img,
+video.pixelate, .pixelate video {
   image-rendering: crisp-edges;
 }
 
@@ -2220,14 +2999,32 @@ h3.content-heading {
   );
 }
 
+.content-sticky-heading-root {
+  width: calc(100% + 2 * var(--content-padding));
+  margin: calc(-1 * var(--content-padding));
+  margin-bottom: 0;
+}
+
+.content-sticky-heading-anchor,
 .content-sticky-heading-container {
+  width: 100%;
+}
+
+.content-sticky-heading-root:not([inert]) {
   position: sticky;
   top: 0;
+}
 
-  margin: calc(-1 * var(--content-padding));
-  margin-bottom: calc(0.5 * var(--content-padding));
+.content-sticky-heading-anchor:not(:where(.content-sticky-heading-root[inert]) *) {
+  position: relative;
+}
+
+.content-sticky-heading-container:not(:where(.content-sticky-heading-root[inert]) *) {
+  position: absolute;
+}
 
-  transform: translateY(-5px);
+.content-sticky-heading-root[inert] {
+  visibility: hidden;
 }
 
 main.long-content .content-sticky-heading-container {
@@ -2267,9 +3064,60 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   grid-template-columns: 1fr min(40%, 400px);
 }
 
+.content-sticky-heading-container.cover-visible .content-sticky-heading-row {
+  grid-template-columns: 1fr min(40%, 90px);
+}
+
+.content-sticky-heading-root.has-cover {
+  padding-right: min(40%, 400px);
+}
+
 .content-sticky-heading-row h1 {
+  position: relative;
   margin: 0;
   padding-right: 20px;
+  line-height: 1.4;
+}
+
+.content-sticky-heading-row h1 .reference-collapsed-heading {
+  position: absolute;
+  white-space: nowrap;
+  visibility: hidden;
+}
+
+.content-sticky-heading-container.collapse h1 {
+  white-space: nowrap;
+  overflow-wrap: normal;
+
+  animation: collapse-sticky-heading 0.35s forwards;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+@keyframes collapse-sticky-heading {
+  from {
+    height: var(--uncollapsed-heading-height);
+  }
+
+  99.9% {
+    height: var(--collapsed-heading-height);
+  }
+
+  to {
+    height: auto;
+  }
+}
+
+.content-sticky-heading-container h1 a {
+  transition: text-decoration-color 0.35s;
+}
+
+.content-sticky-heading-container h1 a:not([href]) {
+  color: inherit;
+  cursor: text;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: transparent;
 }
 
 .content-sticky-heading-cover-container {
@@ -2297,7 +3145,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: transform 0.35s, opacity 0.30s;
 }
 
-.content-sticky-heading-cover .image-container {
+.content-sticky-heading-cover .cover-artwork {
   border-width: 1px;
   border-radius: 1.25px;
   box-shadow: none;
@@ -2390,13 +3238,13 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   flex-shrink: 1;
   overflow-y: scroll;
   scrollbar-width: thin;
-  scrollbar-color: var(--dark-color);
+  scrollbar-color: var(--dim-color) var(--dark-color);
 }
 
 .wiki-search-sidebar-box .wiki-search-results-container {
   overflow-y: scroll;
   scrollbar-width: thin;
-  scrollbar-color: var(--dark-color);
+  scrollbar-color: var(--dim-color) var(--dark-color);
 }
 
 .sidebar-column.sticky-column .sidebar:last-child::-webkit-scrollbar,
@@ -2491,31 +3339,34 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
           backdrop-filter: blur(3px);
 }
 
-#image-overlay-image-container {
+#image-overlay-image-area {
   display: block;
-  position: relative;
   overflow: hidden;
   width: 80vmin;
-  height: 80vmin;
   margin-left: auto;
   margin-right: auto;
 }
 
+#image-overlay-image-layout {
+  display: block;
+  position: relative;
+  margin: 4px 3px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
 #image-overlay-image,
 #image-overlay-image-thumb {
-  display: inline-block;
-  object-fit: contain;
+  display: block;
   width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.65);
+  height: auto;
 }
 
 #image-overlay-image {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: calc(100% - 6px);
-  height: calc(100% - 4px);
+}
+
+#image-overlay-container.no-thumb #image-overlay-image {
+  position: static;
 }
 
 #image-overlay-image-thumb {
@@ -2529,7 +3380,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: opacity 0.25s;
 }
 
-#image-overlay-image-container::after {
+#image-overlay-image-area::after {
   content: "";
   display: block;
   position: absolute;
@@ -2542,18 +3393,18 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: 0.25s;
 }
 
-#image-overlay-container.loaded #image-overlay-image-container::after {
+#image-overlay-container.loaded #image-overlay-image-area::after {
   width: 100%;
   background: white;
   opacity: 0;
 }
 
-#image-overlay-container.errored #image-overlay-image-container::after {
+#image-overlay-container.errored #image-overlay-image-area::after {
   width: 100%;
   background: red;
 }
 
-#image-overlay-container:not(.visible) #image-overlay-image-container::after {
+#image-overlay-container:not(.visible) #image-overlay-image-area::after {
   width: 0 !important;
 }
 
@@ -2581,21 +3432,11 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   font-size: 0.9em;
 }
 
-/* important easter egg mode */
-
-html[data-language-code="preview-en"][data-url-key="localized.home"] #content
-  h1::after {
-  font-family: cursive;
-  display: block;
-  content: "(Preview Build)";
-  font-size: 0.8em;
-}
-
 /* Layout - Wide (most computers) */
 
 @media (min-width: 900px) {
-  #page-container.showing-sidebar-left #secondary-nav,
-  #page-container.showing-sidebar-left #secondary-nav {
+  #page-container.showing-sidebar-left:not(.sidebars-in-content-column) #secondary-nav:not(.always-visible),
+  #page-container.showing-sidebar-right:not(.sidebars-in-content-column) #secondary-nav:not(.always-visible) {
     display: none;
   }
 }
@@ -2612,16 +3453,16 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
    * don't apply the similar layout change of widening the long-content area
    * if this page doesn't have a sidebar to hide in the first place.
    */
-  #page-container.showing-sidebar-left main.long-content,
-  #page-container.showing-sidebar-right main.long-content {
-    --long-content-padding-ratio: 0.06;
+  #page-container.showing-sidebar-left main,
+  #page-container.showing-sidebar-right main {
+    --responsive-padding-ratio: 0.06;
   }
 }
 
 /* Layout - Wide or Medium */
 
 @media (min-width: 600px) {
-  .content-sticky-heading-container {
+  .content-sticky-heading-root {
     /* Safari doesn't always play nicely with position: sticky,
      * this seems to fix images sometimes displaying above the
      * position: absolute subheading (h2) child
@@ -2635,7 +3476,7 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
   /* Cover art floats to the right. It's positioned in HTML beneath the
    * heading, so pull it up a little to "float" on top.
    */
-  #cover-art-container {
+  #artwork-column {
     float: right;
     width: 40%;
     max-width: 400px;
@@ -2645,6 +3486,15 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     z-index: 2;
   }
 
+  /* ...Except on top-indexes, where cover art is displayed prominently
+   * between the heading and subheading.
+   */
+  #content.top-index #artwork-column {
+    float: none;
+    margin: 2em auto 2.5em auto;
+    max-width: 375px;
+  }
+
   html[data-url-key="localized.home"] #page-container.showing-sidebar-left .grid-listing > .grid-item:not(:nth-child(n+7)) {
     flex-basis: 23%;
     margin: 15px;
@@ -2660,13 +3510,12 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
 
 @media (max-width: 899.98px) {
   .sidebar.collapsible,
+  .sidebar-box-joiner.collapsible,
   .sidebar-column.all-boxes-collapsible {
     display: none;
   }
 
-  #secondary-nav {
-    display: block;
-  }
+  /* Duplicated for "sidebars in content column" */
 
   .layout-columns {
     flex-direction: column;
@@ -2689,11 +3538,53 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     display: none;
   }
 
+  .wiki-search-sidebar-box {
+    max-height: max(245px, 60vh, calc(100vh - 205px));
+  }
+
+  /* End duplicated for "sidebars in content column" */
+
   .grid-listing > .grid-item {
     flex-basis: 40%;
   }
 }
 
+/* Layout - "sidebars in content column"
+ * This is the same code as immediately above, for medium and
+ * thin layouts, but can be opted into by the page itself
+ * instead of through a media query.
+ */
+
+#page-container.sidebars-in-content-column
+.layout-columns {
+  flex-direction: column;
+}
+
+#page-container.sidebars-in-content-column
+.layout-columns > *:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+#page-container.sidebars-in-content-column
+.sidebar-column {
+  position: static !important;
+  max-width: unset !important;
+  flex-basis: unset !important;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  width: 100%;
+}
+
+#page-container.sidebars-in-content-column
+.sidebar .news-entry:not(.first-news-entry) {
+  display: none;
+}
+
+#page-container.sidebars-in-content-column
+.wiki-search-sidebar-box {
+  max-height: max(245px, 60vh, calc(100vh - 205px));
+}
+
 /* Layout - Thin (phones) */
 
 @media (max-width: 600px) {
@@ -2701,11 +3592,11 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     columns: 1;
   }
 
-  main.long-content {
-    --long-content-padding-ratio: 0.02;
+  main {
+    --responsive-padding-ratio: 0.02;
   }
 
-  #cover-art-container {
+  #artwork-column {
     margin: 25px 0 5px 0;
     width: 100%;
     max-width: unset;
@@ -2722,7 +3613,7 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
 
   /* Show sticky heading above cover art */
 
-  .content-sticky-heading-container {
+  .content-sticky-heading-root {
     z-index: 2;
   }
generated by cgit-pink 1.3.0-6-gf8a5 (git 2.35.1) at 2025-07-01 11:43:26 +0000