@import url('root_variables.css');
@import url('themes.css');
@import url('buttons.css');
@import url('components.css');

/*===================================*/
/*========== GLOBAL STYLES ==========*/
/*===================================*/

/* Border debug outline for all elements */
*,
*::before,
*::after {
  outline: 0px solid lime;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--font-colour_white);
  background-color: var(--bg-colour);
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-size: contain;
  padding-bottom: 12px;
  overflow-x: hidden;
}

/* Link Colours */
a:link {
  color: var(--link-colour);
}

a:visited {
  color: var(--link-colour_visited);
}

a:hover {
  color: var(--link-colour_hover);
}

a:active {
  color: var(--link-colour_active);
}

a:focus {
  color: var(--link-colour_focus);
}

input[type="text"] {
  position: relative;
  left: 0;
  outline: none;
  border: var(--input-border-style);
  background-color: var(--sidebar-menu_bg2);
  color: var(--font-colour_offwhite);
  padding: var(--padding-xs) var(--padding-sm);
  border-radius: var(--padding-lg);
  width: 100%;
  box-sizing: border-box;
}

/* Keyboard focus indicator (a11y) — :focus-visible leaves mouse clicks unstyled */
input[type="text"]:focus-visible {
  outline: 1px solid var(--main-colour);
  outline-offset: 1px;
}

#searchQuery {
  width: clamp(10%, 300px, 50%);
}

/*===================================*/
/*========== LAYOUT ==========*/
/*===================================*/

/* Main content area */
#main {
  transition: margin-left var(--transition-slow);
}

/* Main gallery container */
.gallery {
  margin: var(--padding-lg) 0;
  padding-bottom: var(--padding-sm);
  /* Removes gaps between images by setting font size to 0 on the parent */
  font-size: 0px;
}

.gallery img {
  width: 100%;
}

.gallery img:hover {
  filter: brightness(80%);
}

/* Description box */
.desc {
  position: relative;
  margin-bottom: var(--padding-lg);
  max-width: fit-content;
  color: var(--font-colour_offwhite);
  font-size: var(--font-lg);
  background-color: var(--desc-bg);
  padding: var(--padding-lg);
  border-radius: var(--border-radius);
  border: var(--desc-border-style);
}

/* Tag filter dropdown (clothing page) */
.tag-filter-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-filter-wrap label {
  font-size: var(--font-base);
}

.tag-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--sales-light-red);
  color: var(--sales-text-primary);
  border: 2px solid var(--sales-red);
  border-radius: 5px;
  padding: 8px 32px 8px 12px;
  font-size: 0.95em;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ccc' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}

.tag-filter:hover {
  background-color: var(--sales-hover-red);
}

.tag-filter:focus {
  outline: 2px solid var(--sales-red);
  outline-offset: 1px;
}

.tag-filter option {
  background-color: var(--desc-bg);
  color: var(--font-colour_offwhite);
}

/* Small font used on HWM page */
.less {
  font-size: var(--font-base);
  font-variant: small-caps;
  vertical-align: bottom;
}

/*===================================*/
/*========== FOOTER ==========*/
/*===================================*/

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--menu-colour);
  width: 100%;
  height: auto;
  min-height: 14px;
  margin: 0;
  z-index: var(--z-footer);
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer a {
  text-decoration: none;
  font-size: var(--font-base);
  color: var(--font-colour_grey);
  border: none;
  background: none;
  text-align: center;
  cursor: pointer;
  outline: none;
  font-family: var(--font-body);
  padding: 0 var(--padding-md);
}

.instagramlink:hover {
  color: var(--link-colour_hover);
}

/* Keyboard focus indicator (a11y) */
.footer a:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: -2px;
}

.pagecounter {
  font-size: var(--font-base);
  color: var(--font-colour_grey);
  /* pinned to the viewport corner, same as its .footer parent */
  position: fixed;
  right: 8px;
  bottom: 1px;
}

/* Hide footer on mobile */
@media (max-width: 600px) {
  .footer {
    display: none;
  }
}

/*===================================*/
/*========== NAVIGATION ==========*/
/*===================================*/

/* Go Back Button */
.round_corners {
  border-radius: 15px;
  background-color: var(--main-colour);
  width: fit-content;
  padding: var(--padding-sm);
  margin-bottom: -10px;
}

.goback {
  display: flex;
  align-items: center;
  font-variant: all-small-caps;
  font-weight: bold;
  padding: inherit;
}

.goback img {
  width: var(--icon-md);
  padding-right: var(--padding-sm);
}

/*===================================*/
/*========== SEARCH ==========*/
/*===================================*/

.search-container {
  position: relative;
  max-width: 600px;
  margin: var(--padding-2xl) auto;
  margin-left: 255px;
}

.search-input {
  width: 100%;
  padding: var(--padding-lg);
  font-size: var(--font-lg);
  border: var(--input-border-style);
}

/* Search Input width for smaller screen sizes */
@media (max-width: 900px) {
  .search-input {
    max-width: 85%;
  }
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sidebar-bg_colour);
  border: var(--input-border-style);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: var(--z-search);
}

.result-item {
  padding: var(--padding-lg);
  border-bottom: var(--border-width-thin) solid var(--border-colour);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-item:hover {
  background-color: var(--sidebar-menu_bg2);
}

.result-image {
  width: 60px;
  height: 60px;
  margin-right: var(--padding-lg);
  flex-shrink: 0;
  position: relative;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
}

.result-image.has-multiple img {
  position: absolute;
  top: 0;
  left: 0;
}

.result-image.has-multiple .image-primary {
  z-index: 2;
  box-shadow: 1px 0px 3px var(--font-colour_black);
}

.result-image.has-multiple .image-secondary {
  z-index: 1;
  transform: translateX(10px);
}

.result-info {
  flex-grow: 1;
  margin-left: 5px;
}

.result-title {
  font-weight: bold;
  color: var(--font-colour_white);
}

.result-details {
  font-size: var(--font-md);
  color: var(--font-colour_grey);
}

.result-details .released {
  color: var(--gallery-title_secondary);
}

/* Badges */
.badge {
  padding: var(--padding-xs) var(--padding-md);
  border-radius: 12px;
  margin-left: var(--padding-md);
  color: var(--font-colour_white);
  font-size: var(--font-base);
}

.badge-green {
  background-color: #28a745;
}

.badge-red {
  background-color: #dc3545;
}

/* Overlay and highlighting */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--z-overlay);
  opacity: 1;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

div.container {
  position: relative;
  z-index: 1;
}

.highlighted {
  outline: 3px solid limegreen;
}

/*===================================*/
/*========== HOMEPAGE ==========*/
/*===================================*/
.title img {
  width: clamp(200px, 30vw, 800px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: var(--logo-colour);
}

.homepage_desc {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap to next line */
  gap: var(--padding-lg);
  /* Add gap between items */
  margin: var(--padding-lg) 0 0;
  text-wrap: pretty;
  color: var(--font-colour_grey);
  font-size: var(--font-lg);
}

.homepage_info {
  flex: 1;
  /* Allow both to grow equally */
  min-width: 300px;
  /* Minimum width before wrapping */
  background-color: var(--desc-bg);
  padding: var(--padding-lg);
  border-radius: var(--border-radius);
  border: var(--desc-border-style);
}

.homepage_desc span {
  font-size: 1.1em;
  font-weight: bold;
  font-variant-caps: small-caps;
  color: var(--font-colour_offwhite);
}

.homepage_need-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage_need {
  flex: unset;
  margin: var(--padding-lg);
  text-align: center;
}

/*===================================*/
/*========== SHOW / HIDE STATES ==========*/
/*===================================*/

/* Image Bar on Mouseover */
.more-images {
  display: inherit;
  width: 100%;
  margin-left: 0;
  position: relative;
  margin-bottom: var(--padding-sm);
}

/* Horizontal Scrolling for More Images */
.scroll-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scroll-behavior: smooth;
  width: 100%;
  user-select: none;
  justify-content: center;
  position: relative;
  transition: padding 0.3s;
}

/* When scrolling, align start to prevent cut-off and add padding for arrows */
.has-scroll .scroll-wrapper {
  justify-content: flex-start;
  padding: 0 var(--image-bar-height);
  /* Space for arrows 40px */
}

/* Sizing logic: Fit 5 images */
.scroll-wrapper>a {
  flex: 0 0 auto;
  display: block;
  text-decoration: none;
}

.scroll-wrapper img,
.image-bar,
.image-bar_CD {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-right: 2px;
  /* Space between images */
}

/* Wider images for CD blocks */
.cd-block .scroll-wrapper>a {
  width: auto;
  max-width: 40%;
}

/* Wider images for CD blocks */
.cd-block .scroll-wrapper img {
  /* Allow natural aspect ratio for wide images */
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-width: 100px;
}

/* Revert aspect ratio for CD block specifically if needed */
.cd-block .image-bar_CD {
  aspect-ratio: auto !important;
  object-fit: contain;
}

.scroll-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.scroll-wrapper.active {
  cursor: default;
}

/* Scroll Arrows */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  cursor: pointer;
  background: var(--sales-dark-bg);
  color: var(--font-colour_offwhite);
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  font-size: 16px;
  opacity: 0;
  pointer-events: auto;
}

/* Arrow hover effect */
.scroll-arrow:hover {
  background: var(--sales-dark-bg);
  color: var(--font-colour_white);
  transform: translateY(-50%) scale(1.1);
}

/* Position arrows */
.scroll-arrow.left {
  left: 0;
}

.scroll-arrow.right {
  right: 0;
}

/* Show arrows only when has-scroll class is added */
.has-scroll .scroll-arrow {
  opacity: 0.7;
}

/* Show arrows on hover or hide when not needed */
.has-scroll:hover .scroll-arrow {
  opacity: 1;
}

.scroll-arrow.hidden {
  display: none !important;
}

/* Hide arrows when not needed */
.more-images.hidden .scroll-arrow,
.more-images.hidden .scroll-wrapper {
  display: none;
}

/* 2x Vinyl Image Clipping  THIS WOULD HAVE TO BE REMOVED TO SHOW FANCY SHADOW VINYL*/
.image2x,
.image2x2 {
  -webkit-clip-path: inset(0 0 var(--vinyl-w-2x) 0);
  clip-path: inset(0 0 var(--vinyl-w-2x) 0);
}

/* Rounded State */
.rounded .image,
.rounded .image2x,
.rounded .image2x2 {
  border-radius: var(--vinyl-w-2x);
}

.rounded .image2x {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

.rounded .container {
  background-color: rgba(0, 0, 0, 0);
}

/*==============================================*/
/*========== LIGHTBOX & STRIPPED ROWS ==========*/
/*==============================================*/

/* Pressing Info & Tracklist Tables */
.inf_press,
.inf_tracks {
  width: 95%;
  border-spacing: 0;
}

tr {
  color: var(--font-colour_lightgrey);
}

tr:nth-child(odd) {
  background: var(--main-colour_clear);
}

tr:nth-child(even) {
  background: var(--transparent);
}

td.inf_num,
td.inf_trk,
td.inf_len,
td.inf_title,
td.inf_info {
  color: var(--font-colour_lightgrey);
}

td.inf_title {
  min-width: 90px;
}

.inf_bonus {
  color: var(--font-colour_grey);
  font-variant: small-caps;
  text-align: center;
}

.price-value {
  color: var(--font-colour_offwhite);
}

.price-separator {
  padding: 0 5px;
  color: var(--font-colour_grey);
}

/*===================================*/
/*========== TOOLTIPS ==========*/
/*===================================*/

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: var(--border-width-thin) dotted var(--border-colour);
}

.tooltip .tooltiptext {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-block;
  width: max-content;
  max-width: 240px;
  padding: 6px var(--padding-lg);
  border-radius: 6px;
  background-color: var(--bg-colour);
  color: var(--font-colour_white);
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-size: var(--font-md);
  text-align: center;
  line-height: 1.4;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  pointer-events: none;
}

.tooltip:hover .tooltiptext,
.tooltip:focus-visible .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Keyboard focus indicator (a11y) — triggers need tabindex="0" in the markup */
.tooltip:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: 2px;
}

/* Floating tooltip for ellipsised .pressingNumber/.album_title headers (mobile
   2-col). Singleton element created + positioned by js/ui-controls.js; visual
   language mirrors .tooltiptext above. pointer-events: none so a tap lands on
   the document and the tap-away dismiss handles it. */
.hdr-tooltip {
  position: fixed;
  z-index: var(--z-modal);
  max-width: min(240px, calc(100vw - 8px));
  padding: 6px var(--padding-lg);
  border: var(--border-width-thin) solid var(--border-colour);
  border-radius: 6px;
  background-color: var(--bg-colour);
  color: var(--font-colour_white);
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-size: var(--font-md);
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

/*===================================*/
/*========== PROJECTS PAGE ==========*/
/*===================================*/

.projects {
  position: relative;
  margin-left: var(--padding-lg);
  height: auto;
  min-width: -moz-available;
  display: inline-block;
  color: var(--font-colour_offwhite);
  margin-top: var(--padding-xs);
}

.projects_title {
  display: block;
  color: var(--font-colour_white);
  min-width: -moz-available;
  font-size: var(--font-3xl);
  font-variant: small-caps;
  background-color: var(--gallery-title_main);
  border-bottom: var(--border-width-thin) solid var(--border-colour);
  padding-left: var(--padding-sm);
  padding-bottom: 3px;
}

.projects_header {
  display: block;
  color: var(--font-colour_white);
  min-width: -moz-available;
  font-size: var(--font-xl);
  font-variant: small-caps;
  background-color: var(--gallery-title_secondary);
  padding-left: var(--padding-sm);
  margin-bottom: 3px;
}

/* Projects Header release information (date of release) */
.rel {
  margin: 0 5px 0 30px;
}

/* Bandmate bio */
.pro_bio {
  display: flex;
  gap: var(--padding-2xl);
  justify-content: center;
  align-items: flex-start;
  background-color: var(--desc-bg);
  color: var(--font-colour_white);
  margin: 0 auto var(--padding-md);
  padding: 16px;
  border: solid var(--border-width) var(--border-colour);
}

.pro_bio img {
  flex: 0 0 auto;
  height: 400px;
  width: auto;
  object-fit: cover;
  border-radius: var(--padding-md);
  max-width: 100%;
}

.bio_img {
  text-align: right;
  color: var(--font-colour_grey);
}

.bio_text {
  flex: 1 1 100%;
  padding: var(--padding-md);
}

.bio_text p {
  margin: 0;
  font-size: var(--font-lg);
  line-height: 1.5;
  color: var(--font-colour_lightgrey);
  padding-left: var(--padding-md);
}

@media (max-width: 768px) {
  .pro_bio {
    flex-direction: column;
    align-items: center;
    gap: var(--padding-lg);
  }

  .bio_img {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .pro_bio img {
    height: auto;
    width: 100%;
    max-width: 400px;
  }

  .bio_text {
    padding: 0;
  }

  .bio_text p {
    padding-left: 0;
  }
}

.bio_text strong {
  font-variant: small-caps;
}

.bio_text h2 {
  margin: 0;
  font-size: var(--font-3xl);
  color: var(--font-colour_white);
  text-decoration: underline;
}

.bio_text h3 {
  margin: var(--padding-lg) 0 0;
  font-size: var(--font-2xl);
  color: var(--font-colour_offwhite);
  font-variant: petite-caps;
}

/*===================================*/
/*========== ALBUM PAGES ==========*/
/*===================================*/

/* Main header */
.albumpageHeader {
  color: var(--font-colour_white);
  font-size: var(--font-3xl);
  font-variant: small-caps;
  font-family: var(--font-body);
  background-color: var(--main-colour);
  border: var(--border-width) solid var(--border-colour);
  text-indent: var(--padding-sm);
  display: inline-block;
  width: 100%;
}

.albumpageTitle {
  display: inline-block;
  /* Neutralise <h2> UA defaults so the semantic heading renders exactly like the old
     inline <font> (no-op for any page still using <font class="albumpageTitle">). */
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.albumpageReleased {
  display: inline-block;
  font-size: var(--font-base);
}

.albumpageLabel {
  display: inline-block;
}

/* Variant containers */
#box {
  display: inline-block;
}

/* The containing box for all of my main vinyl/poster/cd containers */
#box_single,
#box_merch {
  display: inline-block;
  padding-right: var(--padding-sm);
  padding-bottom: var(--padding-sm);
}

.album-title-cd+#box_single,
.album-title-cd+#box_merch {
  margin-top: 5px;
}

/* Standalone boxes conatining a pressingNumber or album-title */
.standalone_box {
  display: inline-block;
}

/* Blog teaser container on the homepage */
.blog_teaser_box {
  display: block;
  max-width: 850px;
  margin: 20px auto 0 auto;
}

/* Main variant containers */
.container,
.cass-container {
  position: relative;
  background-color: var(--main-colour);
}

.container {
  width: var(--vinyl-w);
  height: var(--vinyl-h);
  display: inline-block;
}

.cass-container {
  width: var(--cass-w);
  height: var(--cass-h);
  display: inline-block;
}

/* Base state for pressing info (hidden by default) */
.container .pressing,
.container .total,
.container .album-colour,
.cass-container .pressing,
.cass-container .total,
.cass-container .album-colour,
.postercontainer .album-colour {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-normal), visibility 0s linear 0.3s;
}

/* Show when requested via settings (Global) */
.show-press-info .container .pressing,
.show-press-info .container .total,
.show-press-info .container .album-colour,
.show-press-info .cass-container .pressing,
.show-press-info .cass-container .total,
.show-press-info .cass-container .album-colour,
.show-press-info .postercontainer .album-colour {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-normal), visibility 0s linear 0s;
}

/* Hover Mode Styles (Large Screens) */
@media screen and (min-width: 810px) {

  .hover .container:hover .pressing,
  .hover .container:hover .total,
  .hover .container:hover .album-colour,
  .hover .cass-container:hover .pressing,
  .hover .cass-container:hover .total,
  .hover .cass-container:hover .album-colour,
  .hover .postercontainer:hover .album-colour,
  .hover .container:active .pressing,
  .hover .container:active .total,
  .hover .container:active .album-colour,
  .hover .cass-container:active .pressing,
  .hover .cass-container:active .total,
  .hover .cass-container:active .album-colour,
  .hover .postercontainer:active .album-colour {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-normal), visibility 0s linear 0s;
  }
}


/* Images inside vinyl blocks */
.image {
  display: block;
  width: 100%;
  height: 100%;
}

.image2x {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.image2x2 {
  position: absolute;
  top: var(--vinyl-w-2x);
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* border-radius: 100%;
  box-shadow: 0px 0px 10px var(--font-colour_black); */
}

/* Pressing information */
.pressingNumber,
.album_title,
.disIMG_header {
  display: flex;
  width: var(--vinyl-w);
  min-width: 200px;
  color: var(--font-colour_offwhite);
  font-size: var(--font-base);
  font-variant: small-caps;
  background-color: var(--secondary-colour);
  text-indent: var(--padding-sm);
  padding: 1px 0;
  font-family: 'Signika', sans-serif;
  border: var(--border-width-thin) solid var(--border-colour);
  max-height: 20px;
  flex-basis: 100%;
}

.pressing {
  position: absolute;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  color: var(--font-colour_offwhite);
  width: 100%;
  transition: var(--transition-slow);
  opacity: 0;
  text-shadow: var(--gallery-font_shadow) 2px 0 10px;
  font-size: calc(var(--font-2xl) * var(--box-scale, 1));
  font-family: 'Signika', sans-serif;
  padding: 0;
  text-align: left;
}

.releasedate {
  font-variant: small-caps;
  font-size: var(--font-sm);
  margin-top: -3px;
}

.total {
  position: absolute;
  top: 0;
  color: var(--font-colour_offwhite);
  width: 100%;
  transition: var(--transition-slow);
  opacity: 0;
  font-size: calc(var(--font-2xl) * var(--box-scale, 1));
  font-family: 'Signika', sans-serif;
  padding: 0;
  text-align: right;
}

.catalog {
  font-size: var(--font-lg);
}

.outof {
  font-variant: small-caps;
  font-size: var(--font-sm);
  margin-bottom: -5px;
}

.album-colour {
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  color: var(--font-colour_offwhite);
  width: 100%;
  transition: var(--transition-slow);
  opacity: 0;
  font-size: calc(var(--font-2xl) * var(--box-scale, 1));
  font-family: 'Signika', sans-serif;
  text-align: center;
}

.imgC {
  font-variant: small-caps;
  font-size: var(--font-sm);
  display: block ruby;
}

.imgC.hidden {
  display: none;
}

/* Image bar on mouseover */
.image-bar {
  display: inline;
  width: var(--image-bar-height) !important;
  height: var(--image-bar-height) !important;
  background-color: var(--main-colour);
}

.more-images a {
  color: transparent;
}

/* Icons */
.xtra_imgs {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: var(--padding-lg);
  max-height: var(--padding-lg);
  margin: var(--padding-xs);
}

.link_imgs {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: var(--padding-lg);
  max-height: var(--padding-lg);
  margin: var(--padding-xs);
  cursor: pointer;
}

/*===================================*/
/*========== ALL COLLECTION ==========*/
/*===================================*/

.sortboxes {
  color: var(--font-colour_white);
  font-size: var(--font-xl);
  font-variant: small-caps;
  background-color: var(--main-colour);
  border: var(--border-width) solid var(--border-colour);
  padding: 0 0 var(--padding-sm) var(--padding-sm);
}

.sticky {
  position: sticky;
  top: 0;
  background-color: var(--menu-colour);
  height: 28px;
  width: 100%;
  z-index: var(--z-sticky);
  padding-left: 16px;
  margin: -8px -8px var(--padding-md);
  align-content: center;
  overflow: hidden;
  text-wrap: nowrap;
}

.sticky a {
  text-decoration: none;
  font-size: var(--font-xl);
  color: var(--font-colour_grey);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: var(--font-body);
}

.sticky a:hover {
  color: var(--font-colour_offwhite);
}

/* Keyboard focus indicator (a11y) */
.sticky a:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: -2px;
}

.album_sub-title {
  display: inline;
  position: inherit;
  color: var(--font-colour_white);
  font-size: var(--font-xl);
  font-variant: small-caps;
  padding: inherit;
}

/*===================================*/
/*========== DIGITAL RELEASES ==========*/
/*===================================*/

.tracklist {
  color: var(--desc-tracklist);
  font-size: var(--font-lg);
  font-variant: small-caps;
}

.download a {
  color: var(--link-colour);
  font-size: var(--font-lg);
  font-variant: small-caps;
}

.download a:hover {
  color: var(--link-colour_hover);
}

.download-link {
  position: absolute;
  bottom: var(--padding-sm);
  right: var(--padding-xl);
  color: var(--link-colour);
  text-decoration: none;
  font-size: var(--font-md);
}

.download-link:hover {
  text-decoration: underline;
}

/* Download galleries (Masonry Layout) */
.download-gallery {
  column-count: 3;
  column-gap: var(--padding-lg);
  width: 100%;
  margin-top: var(--padding-lg);
}

@media (max-width: 1400px) {
  .download-gallery {
    column-count: 2;
  }
}

@media (max-width: 810px) {
  .download-gallery {
    column-count: 1;
  }
}

/* Download cards */
.download-card {
  display: flex !important;
  flex-wrap: wrap;
  border: var(--border-width) solid var(--border-colour);
  background-color: var(--secondary-colour);
  color: var(--font-colour_white);
  max-width: 600px;
  min-height: 120px;
  position: relative;
  margin: var(--padding-sm);
  break-inside: avoid;
  width: calc(100% - (var(--padding-sm) * 2));
}

.download-gallery .download-card {
  max-width: 100%;
}

.card-image {
  max-width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: cover;
}

.card-content {
  flex: 1;
  padding: var(--padding-xl);
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.card-title {
  font-size: var(--font-xl);
  margin: 0 0 var(--padding-lg) 0;
  font-weight: bold;
}

.card-title_sub {
  font-size: var(--font-md);
  margin: -10px 0 var(--padding-lg) 0;
  font-family: monospace;
  font-weight: normal;
  text-decoration: underline;
  color: var(--font-colour_grey);
}

.card-details {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--desc-tracklist);
  font-size: var(--font-lg);
}

.card-details li {
  margin-bottom: var(--padding-sm);
}

.card-details .track-title {
  font-size: var(--font-md);
  margin-bottom: var(--padding-md);
}

/* Video container wrapper */
#desc_wrapper {
  margin-bottom: var(--padding-lg);
}

#video-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: var(--z-modal-backdrop);
}

#video-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--secondary-colour);
  color: var(--font-colour_white);
  padding: var(--padding-lg);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  z-index: var(--z-modal);
  border: var(--border-width) solid var(--border-colour);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

.toggle-button {
  padding: var(--padding-md);
  margin-bottom: var(--padding-lg);
  cursor: pointer;
  background: var(--sidebar-dropdown_focus);
  color: var(--font-colour_white);
  border: none;
  border-radius: 4px;
  position: absolute;
  right: var(--padding-sm);
}

/* Album link colours for videos page */
.alb-link {
  text-decoration: none;
  transition: filter var(--transition-fast), text-decoration var(--transition-fast), color var(--transition-fast);
}

.alb-link:hover {
  text-decoration: underline;
  filter: brightness(1.5);
}

/* Tag-qualified (a.a-*) so each rule ties with a:link/:visited/:hover/:active/:focus
   at (0,1,1) and wins by source order — the colour holds in every link state without
   !important. */
a.a-gd {
  color: #FF3B1F;
}

a.a-gdredux {
  color: #008CFF;
}

a.a-micf {
  color: #FF7F50;
}

a.a-fhti {
  color: #A3BECF;
}

a.a-gm {
  color: #FF4A4A;
}

a.a-crim {
  color: #C0C0C0;
}

a.a-ai {
  color: #A0A2A8;
}

a.a-ta {
  color: #5FAF75;
}

a.a-msit {
  color: #E24366;
}

a.a-ittc {
  color: #F4D4A2;
}

a.a-bhe {
  color: #D3E7FF;
}

a.a-st {
  color: #9B4A5C;
}

a.a-remains {
  color: #B89E64;
}

a.a-damnesia {
  color: #4D6650;
}

a.a-pastlive {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a.a-oblivion {
  color: #329b28;
}

a.a-bleedingout {
  color: #c47816;
}

a.a-surprisesurprise {
  color: #2948e6;
}

/*===================================*/
/*========== POSTERS ==========*/
/*===================================*/

#box_merch {
  /* other styles comes from #box_single */
  text-align: center;
}

.postercontainer {
  position: relative;
  width: auto;
  height: var(--vinyl-h);
  display: inline-block;
  background-color: var(--main-colour);
  overflow: hidden;
}

.postercontainer>a {
  position: relative;
  z-index: 1;
  display: block;
}

.postercontainer .album-colour {
  z-index: 2;
}

.postercontainer .album-colour .more-posters {
  display: block;
  width: 100%;
  margin-left: 0;
  position: relative;
  color: var(--font-colour_offwhite);
}

.postercontainer .album-colour .imgC {
  font-variant: small-caps;
  font-size: var(--font-sm);
  text-align: center;
  padding: 2px 0;
}

.postercontainer .album-colour .imgC a {
  color: var(--link-colour);
  text-decoration: underline;
  pointer-events: auto;
}

.postercontainer .album-colour .imgC a:hover {
  color: var(--link-colour_hover);
}

.poster {
  display: block;
  height: var(--vinyl-h);
}

/*===================================*/
/*========== CD, DVD, & BLU-RAY ==========*/
/*===================================*/

.album-title-cd {
  display: flex;
  width: 100%;
  color: var(--font-colour_white);
  font-size: var(--font-3xl);
  font-variant: small-caps;
  background-color: var(--gallery-title_secondary);
  border: var(--border-width) solid var(--border-colour);
  padding-left: var(--padding-sm);
  padding-bottom: 3px;
}

/* CD and Cassette Image Bar */
.image-bar_CD {
  display: inline;
  width: auto !important;
  height: var(--image-bar-height) !important;
  background-color: var(--main-colour);
}

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

/* Default sidebar values */
.sidebar a,
.dropdown-btn,
.menu-btn,
.menu-item {
  font-size: var(--font-2xl);
  padding: 6px var(--padding-md) 6px 16px;
}

.releases {
  margin-left: 245px;
  padding: 0 var(--padding-lg);
}

.navimg {
  margin: -5px var(--padding-xs) -8px -16px;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
}

.navimground {
  margin: -5px var(--padding-xs) -8px -16px;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  border-radius: 50%;
  perspective: 1px;
  overflow: hidden;
}

.dropdown-container a,
.settings_text {
  font-size: var(--font-xl);
}

/* Main sidebar */
.sidebar {
  width: 255px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--menu-colour);
  overflow-x: hidden;
  padding-top: 25px;
  z-index: var(--z-sidebar);
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: var(--transition-slow);
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* Open / Close buttons */
.openbtn {
  font-size: var(--font-2xl);
  cursor: pointer;
  background-color: var(--menu-colour);
  color: var(--font-colour_white);
  padding: var(--padding-lg) var(--padding-xl);
  border: none;
  position: fixed;
  left: 0;
  top: 1px;
  z-index: 1;
  display: none;
}

.openbtn:hover {
  background-color: var(--sidebar-open_btn);
}

.sidebar .closebtn {
  position: absolute;
  top: -10px;
  font-size: var(--font-4xl);
  color: var(--sidebar-close_btn);
  right: var(--padding-sm);
  pointer-events: auto;
  cursor: pointer;
}

/* Base styles for all interactive sidebar elements (links, dropdown buttons, menu buttons) */
.sidebar a,
.dropdown-btn,
.menu-btn {
  text-decoration: none;
  color: var(--font-colour_grey);
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: var(--font-body);
  transition: var(--transition-normal);
  white-space: nowrap;
}

/* Hover state */
.sidebar a:hover,
.dropdown-btn:hover,
.menu-btn:hover {
  color: var(--font-colour_lightgrey);
}

/* Active (clicked) state */
.sidebar a:active,
.dropdown-btn:active,
.menu-btn:active {
  color: var(--font-colour_offwhite);
}

/* Focus state */
.sidebar a:focus,
.dropdown-btn:focus,
.menu-btn:focus {
  color: var(--font-colour_white);
}

/* Keyboard focus indicator (a11y) — negative offset so the outline isn't
   clipped by the sidebar's overflow-x: hidden */
.sidebar a:focus-visible,
.dropdown-btn:focus-visible,
.menu-btn:focus-visible,
.sidebar .closebtn:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: -2px;
}

/* Close button interaction states */
.sidebar .closebtn:hover {
  color: var(--font-colour_lightgrey);
}

.sidebar .closebtn:active {
  color: var(--font-colour_offwhite);
}

.sidebar .closebtn:focus {
  color: var(--font-colour_white);
}

/* Active dropdown highlighting – now applied to any dropdown-btn or menu-btn that has the .active class */
.dropdown-btn.active,
.menu-btn.active {
  background-color: var(--sidebar-dropdown_focus);
  color: var(--font-colour_white);
}

.dropdown-btn.active:not(:focus),
.menu-btn.active:not(:focus) {
  background: var(--sidebar-dropdown_nofocus);
  color: var(--font-colour_white);
}

/* Settings text */
.settings_text {
  color: var(--font-colour_grey);
  display: inline-grid;
}

/* Slider (including thumb and ticks) */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--padding-sm);
  margin: var(--padding-sm) 0;
  background-color: var(--font-colour_offwhite);
  outline: none;
  opacity: 0.7;
  -webkit-transition: var(--transition-fast);
  transition: opacity var(--transition-fast);
  background-image:
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to right, #ccc 1px, transparent 1px);
  background-position: left center, center center, right center;
  background-size: calc(25% - 1px) calc(100% - 2px), calc(50% - 1px) calc(100% - 2px), calc(25% - 1px) calc(100% - 2px);
  background-repeat: no-repeat;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background-color: var(--link-colour);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: var(--icon-sm);
  height: var(--icon-sm);
  background-color: var(--main-colour);
  cursor: pointer;
}

.ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-base);
  color: var(--font-colour_white);
}

.ticks span {
  position: relative;
}

/* Horizontal separators */
.hrsolid {
  color: var(--sidebar-hr_solid);
}

.hrtrans {
  color: transparent;
  visibility: hidden;
}

/* Headers */
.sidebar_header {
  text-align: left;
  color: var(--font-colour_white);
  font-variant: small-caps;
  background-image: linear-gradient(to right, var(--font-colour_black), var(--menu-colour));
  padding-left: var(--padding-lg);
  font-size: var(--font-lg);
}

.sidebar_subheader {
  text-align: center;
  color: var(--font-colour_white);
  font-variant: small-caps;
  background-color: var(--secondary-colour);
  border-top: thin solid var(--border-colour);
  border-bottom: thin solid var(--border-colour);
  font-size: var(--font-base);
}

/* Dropdown containers */
.dropdown-container {
  display: none;
  background-color: var(--sidebar-menu_bg1);
}

/* Dropdown arrows (FA <i> and the SVG sprite .icon both sit here) */
.dropdown-btn i,
.dropdown-btn .icon {
  float: right;
  padding-right: var(--padding-md);
}

/* Open state flips the SVG caret instantly (replaces the old fa-caret-down/up glyph swap) */
.dropdown-btn.active .icon {
  transform: rotate(180deg);
}

/* Appearances "Show/Hide List" chevron: JS toggles fa-caret-up/down as state hooks;
   the up state flips the SVG caret (instant, no animation). */
.chevron.fa-caret-up {
  transform: rotate(180deg);
}

/* Menu item base styles (icon pseudo-element) */
/* `.sidebar .menu-item` (0,2,0) so the icon's padding-left/display win over the base
   `.sidebar a` rule (0,1,1) now that nav items are <a> not <button>; border-box matches
   the old <button> width model so width:100% includes the icon padding. */
.sidebar .menu-item {
  position: relative;
  padding-left: 40px;
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
}

.menu-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: var(--padding-lg);
  transform: translateY(-50%);
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: var(--sidebar-menu_icons);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0.35;
  transition: background-color var(--transition-normal);
}

/* Icon states for menu-item (hover / active / focus) */
.menu-item:hover::before {
  background-color: var(--sidebar-menu_icons_hover);
}

.menu-item:active::before {
  background-color: var(--sidebar-menu_icons_active);
}

.menu-item:focus::before {
  background-color: var(--sidebar-menu_icons_focus);
}

/* Specific menu icons */
.menu-item.studio::before {
  mask-image: url('/images/menu/menu-studio.png');
  -webkit-mask-image: url('/images/menu/menu-studio.png');
}

.menu-item.comp::before {
  mask-image: url('/images/menu/menu-comp.png');
  -webkit-mask-image: url('/images/menu/menu-comp.png');
}

.menu-item.ep::before {
  mask-image: url('/images/menu/menu-ep.png');
  -webkit-mask-image: url('/images/menu/menu-ep.png');
}

.menu-item.single::before {
  mask-image: url('/images/menu/menu-single.png');
  -webkit-mask-image: url('/images/menu/menu-single.png');
}

.menu-item.tp::before {
  mask-image: url('/images/menu/menu-tp.png');
  -webkit-mask-image: url('/images/menu/menu-tp.png');
}

.menu-item.cd::before {
  mask-image: url('/images/menu/menu-cd.png');
  -webkit-mask-image: url('/images/menu/menu-cd.png');
}

.menu-item.cass::before {
  mask-image: url('/images/menu/menu-cass.png');
  -webkit-mask-image: url('/images/menu/menu-cass.png');
}

.menu-item.digi::before {
  mask-image: url('/images/menu/menu-digi.png');
  -webkit-mask-image: url('/images/menu/menu-digi.png');
}

.menu-item.member::before {
  mask-image: url('/images/menu/menu-member.png');
  -webkit-mask-image: url('/images/menu/menu-member.png');
}

.menu-item.merch::before {
  mask-image: url('/images/menu/menu-merch.png');
  -webkit-mask-image: url('/images/menu/menu-merch.png');
}

.menu-item.allstudio::before {
  mask-image: url('/images/menu/menu-allstudio.png');
  -webkit-mask-image: url('/images/menu/menu-allstudio.png');
}

.menu-item.allep::before {
  mask-image: url('/images/menu/menu-allep.png');
  -webkit-mask-image: url('/images/menu/menu-allep.png');
}

.menu-item.collection::before {
  mask-image: url('/images/menu/menu-collection.png');
  -webkit-mask-image: url('/images/menu/menu-collection.png');
}

.menu-item.wantcollection::before {
  mask-image: url('/images/menu/menu-wantcollection.png');
  -webkit-mask-image: url('/images/menu/menu-wantcollection.png');
}

.menu-item.epcollection::before {
  mask-image: url('/images/menu/menu-epcollection.png');
  -webkit-mask-image: url('/images/menu/menu-epcollection.png');
}

.menu-item.epwantcollection::before {
  mask-image: url('/images/menu/menu-epwantcollection.png');
  -webkit-mask-image: url('/images/menu/menu-epwantcollection.png');
}

.menu-item.home::before {
  mask-image: url('/images/menu/menu-home.png');
  -webkit-mask-image: url('/images/menu/menu-home.png');
}

.menu-item.blog::before {
  mask-image: url('/images/menu/menu-blog.png');
  -webkit-mask-image: url('/images/menu/menu-blog.png');
}

.menu-item.about::before {
  mask-image: url('/images/menu/menu-about.png');
  -webkit-mask-image: url('/images/menu/menu-about.png');
}

.menu-item.guestbook::before {
  mask-image: url('/images/menu/menu-book.png');
  -webkit-mask-image: url('/images/menu/menu-book.png');
}

.menu-item.uploadpage::before {
  mask-image: url('/images/menu/menu-upload.png');
  -webkit-mask-image: url('/images/menu/menu-upload.png');
}

.menu-item.settings::before {
  mask-image: url('/images/menu/menu-settings.png');
  -webkit-mask-image: url('/images/menu/menu-settings.png');
}

/*===================================*/
/*========== RESPONSIVE MEDIA QUERIES ==========*/
/*===================================*/

/* Tablet sized screens */
@media screen and (min-width: 641px) and (max-width: 1007px) {
  .sidebar {
    width: 205px;
  }

  .sidebar a,
  .dropdown-btn,
  .menu-item,
  .settings {
    font-size: var(--font-lg);
    padding: 4px 6px 4px 14px;
  }

  .sidebar_header {
    font-size: var(--font-lg);
  }

  .sidebar_subheader {
    font-size: var(--font-base);
  }

  .releases {
    margin-left: 195px;
    padding: 0 var(--padding-lg);
  }

  .navimg {
    margin: -3px 0 -6px -14px;
    width: var(--icon-xl);
    height: var(--icon-xl);
  }

  .navimground {
    margin: -3px 0 -6px -14px;
    width: var(--icon-xl);
    height: var(--icon-xl);
    border-radius: 50%;
    perspective: 1px;
    overflow: hidden;
  }

  .dropdown-container a,
  .settings_text {
    font-size: var(--font-md);
  }

  .menu-item::before {
    width: var(--icon-md);
    height: var(--icon-md);
  }

  .sidebar .menu-item {
    padding-left: 36px;
  }

  .search-container {
    margin-left: 205px;
  }
}

/* Phone sized screens */

@media screen and (max-width: 639px) {
  .sidebar {
    width: 155px;
  }

  .sidebar a,
  .dropdown-btn,
  .menu-item,
  .settings {
    font-size: var(--font-base);
    padding: var(--padding-xs) 4px var(--padding-xs) 12px;
  }

  .sidebar_header {
    font-size: var(--font-base);
  }

  .sidebar_subheader {
    font-size: var(--font-xs);
  }

  .releases {
    margin-left: 145px;
    padding: 0 var(--padding-lg);
  }

  .navimg {
    margin: -1px var(--padding-xs) -4px -12px;
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  .navimground {
    margin: -1px var(--padding-xs) -4px -12px;
    width: var(--icon-lg);
    height: var(--icon-lg);
    border-radius: 50%;
    perspective: 1px;
    overflow: hidden;
  }

  .dropdown-container a,
  .settings_text {
    font-size: var(--font-sm);
  }

  .menu-item::before {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  .sidebar .menu-item {
    padding-left: 31px;
  }

  .search-container {
    margin-left: 155px;
  }
}

/* Gallery on mobile (centered grid) */
@media (max-width: 768px) {

  .gallery,
  #all {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--padding-sm);
  }

  #box_single,
  #box_merch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--vinyl-w);
    max-width: 100%;
    padding: 0;
  }

  #box_single .pressingNumber,
  #box_merch .pressingNumber {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .album-title-cd+#box_single,
  .album-title-cd+#box_merch {
    margin-top: 2px;
  }
}

@media (max-width: 768px) {

  .gallery.mobile-2col #box_single {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - (var(--padding-sm) / 2));
    max-width: 100%;
    padding: 0;
  }

  .gallery.mobile-2col #box_single .container {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* .pressingNumber spans the full gallery row, not just one column */
  .gallery.mobile-2col .pressingNumber {
    width: 100%;
    display: block;
  }

  /* Image-credit is bulky in the narrow 2-column box; shrink it down a step */
  .gallery.mobile-2col .imgC {
    font-size: var(--font-xs);
  }

  /* Header-carrying wrappers (r/ standalone boxes, collection #box) become
     2-col cells themselves, so their header stays glued to its own variant.
     Without this the wrapper shrink-wraps to the header's 200px min-width and
     the inner #box_single's 50% resolves against THAT, squishing the image. */
  .gallery.mobile-2col .standalone_box,
  .gallery.mobile-2col #box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - (var(--padding-sm) / 2));
    max-width: 100%;
  }

  /* The variant fills its cell instead of taking 50% of it */
  .gallery.mobile-2col .standalone_box #box_single,
  .gallery.mobile-2col #box #box_single {
    width: 100%;
  }

  /* In-cell headers hug the column instead of forcing 200px; single line
     with ellipsis — js/ui-controls.js shows the full text on tap/hover */
  .gallery.mobile-2col .standalone_box .pressingNumber,
  .gallery.mobile-2col #box .pressingNumber,
  .gallery.mobile-2col .standalone_box .album_title,
  .gallery.mobile-2col #box .album_title {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Homepage "need" variants (index.php .homepage_need-container) get the same
   2-column shrink as the rules above, but unconditionally — .homepage_need is
   not a .gallery, so the Mobile 2-Column setting never reaches it, and four
   full-size vinyls stacked one-per-row is a lot of scrolling on a phone.
   Desktop keeps the inline-block flow untouched. */
@media (max-width: 768px) {

  .homepage_need {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--padding-sm);
    /* Press-info type is sized against the 300px vinyl; the cells land at
       roughly half that, so scale it the way toggleMobile2Col() does in JS.
       Declared here so it beats the --box-scale the slider puts on <html>. */
    --box-scale: 0.5;
  }

  /* index.php ends the box list with a <br>; as a flex item it would claim a
     whole row of its own. */
  .homepage_need>br {
    display: none;
  }

  .homepage_need .standalone_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - (var(--padding-sm) / 2));
    max-width: 100%;
  }

  /* The variant fills its cell instead of holding the 300px --vinyl-w */
  .homepage_need .standalone_box #box_single {
    width: 100%;
  }

  .homepage_need .standalone_box .container {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Header hugs the column instead of forcing 200px; single line with
     ellipsis — js/ui-controls.js shows the full text on tap/hover */
  .homepage_need .standalone_box .pressingNumber {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Image-credit is bulky in the narrow cell; shrink it down a step */
  .homepage_need .imgC {
    font-size: var(--font-xs);
  }
}

/*===================================*/
/*====== MOBILE BOTTOM NAV SYSTEM ====*/
/*===================================*/

#mobile-nav-wrapper {
  display: none;
}

@media (max-width: 639px) {

  /* Kill desktop sidebar + hamburger + adjust margins */
  .sidebar,
  .openbtn {
    display: none !important;
  }

  /* REMOVE LEFT MARGIN when sidebar is hidden */
  .releases {
    margin-left: 0 !important;
    padding: 0 var(--padding-lg);
  }

  .search-container {
    margin-left: 0 !important;
    max-width: 100%;
    padding: 0 var(--padding-lg);
  }

  body {
    padding-bottom: 80px;
  }

  #mobile-nav-wrapper {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-footer);
    font-family: var(--font-body);
  }

  /* MAIN NAV */
  .mobile-nav {
    display: flex;
    height: 64px;
    background: var(--menu-colour);
    border-top: var(--border-width-thin) solid var(--border-colour);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-footer) + 2);
    touch-action: manipulation;
    /* Prevent double-tap zoom */
    -webkit-tap-highlight-color: transparent;
    /* Remove iOS tap highlight */
    /* GPU compositing — stops bar jumping during fast scroll */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    overscroll-behavior: none;
    /* NO base transition: js/mobile-nav.js (v4 scrub) writes transform 1:1
       with scroll every animation frame; a transition here would ease toward
       each frame's value instead of tracking the finger — that easing lag is
       what made the v2 scrub feel jumpy. */
  }

  /* Apron: same-colour extension hanging below the viewport edge. While the
     browser collapses/expands its own toolbar, fixed-bottom elements get
     repositioned a frame or two late (Android Chrome + Firefox both) and page
     content used to flash in under the bar — those lag frames now show this. */
  .mobile-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 120px;
    background: var(--menu-colour);
  }

  /* Snap-to-nearest-edge once scrolling truly ends: js/mobile-nav.js adds
     .nav-settling only for that snap (and for programmatic shows — menu open,
     near page top). Scrub frames always run WITHOUT this class. */
  .mobile-nav.nav-settling {
    transition: transform 0.18s ease-out;
  }

  /* Add higher z-index when tertiary is open */
  body.tertiary-open .mobile-nav {
    z-index: calc(var(--z-footer) - 1);
  }

  body.tertiary-open .mobile-subnav {
    z-index: calc(var(--z-footer) - 2);
  }

  .mobile-nav button {
    flex: 1;
    background: none;
    border: none;
    color: var(--font-colour_grey);
    font-size: 10px;
    font-variant: small-caps;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    padding: 8px 2px;
    min-width: 0;
  }

  .mobile-nav button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 10px;
  }

  .mobile-nav button.active {
    background: var(--secondary-colour);
    color: var(--link-colour_hover);
    position: relative;
  }

  /* Active indicator */
  .mobile-nav button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--link-colour_hover);
  }

  .mobile-nav button:active {
    color: var(--font-colour_white);
  }

  .mobile-nav button svg,
  .mobile-nav button img {
    width: 20px;
    height: 20px;
    display: block;
    filter: var(--mobile-menu-icon-filter, brightness(0) invert(1));
    transition: filter 0.2s ease;
  }

  .mobile-nav button.active svg,
  .mobile-nav button.active img {
    filter: var(--mobile-menu-icon-filter-active, brightness(0) invert(1) sepia(0.2) hue-rotate(320deg) saturate(3));
  }

  .mobile-nav button:active svg,
  .mobile-nav button:active img {
    filter: var(--mobile-menu-icon-filter-pressed, brightness(0) invert(1) sepia(0.2) hue-rotate(320deg) saturate(3) opacity(0.8));
  }

  /* Hover rules below are gated to real pointers: touch browsers (Firefox
     Android especially) synthesize a lingering :hover on whatever ends up
     under the finger after a tap, ghost-highlighting freshly opened panels. */
  @media (hover: hover) {

    .mobile-nav button:hover svg,
    .mobile-nav button:hover img {
      filter: var(--mobile-menu-icon-filter-hover, brightness(0) invert(1));
    }
  }

  .mobile-nav button:focus svg,
  .mobile-nav button:focus img {
    filter: var(--mobile-menu-icon-filter-focus, brightness(0) invert(1) sepia(0.3) hue-rotate(320deg) saturate(2));
  }

  /* SUBNAV */
  .mobile-subnav {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: var(--sidebar-menu_bg1);
    transform: translateY(100%);
    /* closed, this is a zero-height strip whose top border would peek out as
       a floating 1px line whenever the bottom bar scrubs away — the
       visibility gate (delayed so the close slide still plays) prevents that */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    max-height: 50vh;
    overflow-y: auto;
    border-top: var(--border-width-thin) solid var(--border-colour);
    z-index: calc(var(--z-footer) - 1);
  }

  .mobile-subnav.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }

  .subnav-panel {
    display: none;
    padding: 12px;
    gap: 8px;
  }

  .subnav-panel.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .subnav-panel button,
  .subnav-panel a {
    background: var(--secondary-colour);
    border: none;
    padding: 12px;
    color: var(--font-colour_white);
    text-align: left;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-base);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
    touch-action: manipulation;
    /* Prevent double-tap zoom */
    -webkit-tap-highlight-color: transparent;
    /* Remove iOS tap highlight */
    -webkit-touch-callout: none;
    /* Disable iOS callout */
    user-select: none;
    /* Prevent text selection on touch */
  }

  .subnav-panel button:active,
  .subnav-panel a:active {
    background: var(--sidebar-dropdown_focus);
  }

  .subnav-panel button svg,
  .subnav-panel button img,
  .subnav-panel a svg,
  .subnav-panel a img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: var(--mobile-menu-icon-filter, brightness(0) invert(1));
    transition: filter 0.2s ease;
  }

  @media (hover: hover) {

    .subnav-panel button:hover svg,
    .subnav-panel button:hover img,
    .subnav-panel a:hover svg,
    .subnav-panel a:hover img {
      filter: var(--mobile-menu-icon-filter-hover, brightness(0) invert(1));
    }
  }

  .subnav-panel button:active svg,
  .subnav-panel button:active img,
  .subnav-panel a:active svg,
  .subnav-panel a:active img {
    filter: var(--mobile-menu-icon-filter-pressed, brightness(0) invert(1) sepia(0.2) hue-rotate(320deg) saturate(3) opacity(0.8));
  }

  .subnav-panel button:focus svg,
  .subnav-panel button:focus img,
  .subnav-panel a:focus svg,
  .subnav-panel a:focus img {
    filter: var(--mobile-menu-icon-filter-focus, brightness(0) invert(1) sepia(0.3) hue-rotate(320deg) saturate(2));
  }

  .subnav-panel .nav-label {
    flex: 1;
    font-variant: small-caps;
  }

  .subnav-panel .nav-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.6;
  }

  /* Settings specific styles */
  .subnav-panel.settings-panel {
    grid-template-columns: 1fr;
  }

  .subnav-panel label {
    background: var(--secondary-colour);
    padding: 12px;
    border-radius: 8px;
    color: var(--font-colour_white);
    font-size: var(--font-base);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .subnav-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .subnav-panel .slider-container {
    background: var(--secondary-colour);
    padding: 12px;
    border-radius: 8px;
  }

  .subnav-panel .slider-container label {
    background: none;
    padding: 0;
    margin-bottom: 8px;
    display: block;
  }

  .subnav-panel .slider-container input[type="range"] {
    width: 100%;
  }

  /* TERTIARY */
  .mobile-tertiary {
    position: fixed;
    bottom: 0;
    left: 100%;
    right: 0;
    top: 0;
    background: var(--bg-colour);
    transition: left 0.25s ease;
    z-index: calc(var(--z-footer) + 999);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    contain: layout style paint;
    /* Prevent content from affecting parent */
  }

  .mobile-tertiary.active {
    left: 0;
  }

  .tertiary-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: var(--menu-colour);
    padding: 16px;
    border-bottom: var(--border-width-thin) solid var(--border-colour);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    min-height: 56px;
    width: 100%;
  }

  .tertiary-back {
    background: none;
    border: none;
    color: var(--link-colour_hover);
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    font-family: var(--font-body);
  }

  .tertiary-back img {
    max-width: 40px !important;
    max-height: inherit !important;
  }

  .tertiary-title {
    color: var(--font-colour_white);
    margin: 0;
    font-size: var(--font-xl);
    font-variant: small-caps;
  }

  .tertiary-content {
    padding: 12px;
    min-height: calc(100vh - 56px);
  }

  .tertiary-item {
    width: 100%;
    background: var(--sidebar-menu_bg1);
    border: var(--border-width-thin) solid var(--border-colour);
    padding: 14px 16px;
    color: var(--font-colour_white);
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-md);
    font-family: var(--font-body);
    margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    touch-action: manipulation;
    /* Prevent double-tap zoom */
    -webkit-tap-highlight-color: transparent;
    /* Remove iOS tap highlight */
    -webkit-touch-callout: none;
    /* Disable iOS callout */
    user-select: none;
    /* Prevent text selection on touch */
  }

  @media (hover: hover) {
    .tertiary-item:hover {
      background: var(--sidebar-menu_bg2);
      border-color: var(--link-colour_hover);
    }
  }

  .tertiary-item:active {
    background: var(--sidebar-dropdown_focus);
    border-color: var(--link-colour);
  }

  .tertiary-item img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    filter: brightness(0.95) contrast(1.05);
    transition: filter 0.2s ease, transform 0.2s ease;
  }

  @media (hover: hover) {
    .tertiary-item:hover img {
      filter: brightness(1.05) contrast(1.1);
      transform: scale(1.05);
    }
  }

  .tertiary-item:active img {
    filter: brightness(1.1) contrast(1.15);
    transform: scale(1.02);
  }

  /* Round images for CD menu items */
  .tertiary-item.cd-item img {
    border-radius: 50%;
  }

  /* Ensure other tertiary items (non-member) are unaffected */
  .tertiary-item:not(.cd-item) .title:only-child {
    align-self: center;
  }

  /* OVERLAY */
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 64px;
    /* Stop at main nav */
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-footer) - 2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .mobile-overlay.active {
    pointer-events: auto;
  }

  /* Hide auto-scroll on nav when open */
  body.mobile-nav-open {
    overflow: hidden;
  }

  /* Adjust overlay z-index when tertiary is open */
  .mobile-overlay.tertiary-active {
    z-index: calc(var(--z-footer) + 998);
    bottom: 0;
    /* Cover entire screen including nav */
  }
}

/*===================================*/
/*========== LOGIN FORM ==========*/
/*===================================*/

.login-body {
  background-color: #111;
  color: #eee;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  background: #222;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.login-form h2 {
  margin-top: 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

.login-form input {
  width: 100%;
  padding: 12px;
  margin: 20px 0;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Specificity override for input[type="text"] global style */
.login-body input[type="password"],
.login-body input[type="text"] {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  outline: none;
}

.login-form button {
  width: 100%;
  padding: 12px;
  background: #007bff;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

.login-form button:hover {
  background: #0056b3;
}

.error {
  color: #ff6b6b;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 4px;
}

/*===================================*/
/*========== SIDEBAR VISIBILITY =====*/
/*===================================*/

/* Default: desktop */
.sidebar-mobile {
  display: none;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .sidebar-mobile {
    display: block;
  }
}

/*===================================*/
/*==== MOBILE NAV TERTIARY HEADER ===*/
/*===================================*/

.tertiary-subheader {
  color: var(--font-colour_white);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px 20px 5px;
  margin: 0;
  opacity: 0.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*===================================*/
/*========= ICON SYSTEM =============*/
/* SVG sprite — replaces Font Awesome.                                        */
/* Usage: <svg class="icon"><use href="/images/icons.svg#icon-NAME"></use></svg> */
/* Sized by height so glyphs keep their natural width (like FA's default),     */
/* coloured via currentColor so they inherit text colour exactly.             */
/*===================================*/
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.icon-spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}

/*===================================*/
/* ERROR PAGES (404/500/etc.) — rendered inside #releases by error.php so they  */
/* sit within the normal shell. Centred card matching the homepage's look.      */
/*===================================*/
.error-page {
  text-align: center;
  max-width: 640px;
  margin: 60px auto;
  padding: 0 20px;
}

.error-page .error-code {
  font-family: var(--font-body);
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  font-weight: 700;
  color: var(--sales-light-red);
}

.error-page .error-title {
  font-family: var(--font-body);
  margin: 10px 0 14px;
}

.error-page .error-message {
  font-size: 1.1rem;
  margin: 0 auto 28px;
  opacity: 0.85;
}

/*===================================*/
/*========== VINYL DIRECTORY ==========*/
/*===================================*/
/* Grid of Instagram-sourced vinyl posts (t/vinyldirectory.php). Each card = a per-post
   image carousel (js/alk3directory.js) above a persistent description. Uses the site
   theme tokens so it inherits every theme automatically. */

/* Intro / filter bar */
.alk3-intro {
  max-width: none;
  text-align: center;
}

.alk3-intro_text {
  color: var(--font-colour_lightgrey);
  margin-bottom: var(--padding-lg);
}

.alk3-filter-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--padding-md);
  flex-wrap: wrap;
}

.alk3-filter {
  width: clamp(220px, 60%, 460px);
}

.alk3-filter-count {
  font-size: var(--font-base);
  color: var(--font-colour_grey);
  white-space: nowrap;
}

/* The grid */
.alk3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--padding-xl);
  margin: var(--padding-lg) 0 var(--padding-xl);
}

.alk3-card {
  display: flex;
  flex-direction: column;
  background-color: var(--secondary-colour);
  border: var(--border-width) solid var(--border-colour);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Image stage. aspect-ratio is set per-card inline (from the first photo's real
   dimensions) so the box reserves the correct height before the image loads — no
   jump when cycling. This 19/10 landscape value is only a fallback for cards whose
   dimensions are missing from the JSON. */
.alk3-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 19 / 10;
  background-color: var(--main-colour);
  outline: none;
}

.alk3-stage[tabindex]:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: -2px;
}

.alk3-frame {
  width: 100%;
  height: 100%;
}

.alk3-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.alk3-img[hidden] {
  display: none;
}

/* Prev / next arrows — mirror the .scroll-arrow language used elsewhere */
.alk3-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--sales-dark-bg);
  color: var(--font-colour_offwhite);
  font-size: var(--font-2xl);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.alk3-prev {
  left: var(--padding-md);
}

.alk3-next {
  right: var(--padding-md);
}

.alk3-stage:hover .alk3-arrow,
.alk3-stage:focus-within .alk3-arrow {
  opacity: 0.75;
}

.alk3-arrow:hover {
  opacity: 1;
  color: var(--font-colour_white);
  transform: translateY(-50%) scale(1.1);
}

/* Photo counter pill */
.alk3-count {
  position: absolute;
  top: var(--padding-md);
  right: var(--padding-md);
  z-index: 2;
  padding: 1px var(--padding-md);
  border-radius: 12px;
  background: var(--sales-dark-bg);
  color: var(--font-colour_offwhite);
  font-size: var(--font-base);
  pointer-events: none;
}

/* Dot indicators */
.alk3-dots {
  position: absolute;
  bottom: var(--padding-md);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.alk3-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--font-colour_offwhite);
  opacity: 0.4;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.alk3-dot.is-on {
  opacity: 1;
  transform: scale(1.25);
}

/* Description body — stays fixed while the images cycle */
.alk3-body {
  display: flex;
  flex-direction: column;
  padding: var(--padding-lg);
  border-top: var(--border-width-thin) solid var(--border-colour);
  flex: 1;
}

.alk3-title {
  margin: 0 0 var(--padding-sm);
  color: var(--font-colour_white);
  font-size: var(--font-xl);
  font-variant: small-caps;
  font-weight: bold;
}

.alk3-desc {
  color: var(--font-colour_lightgrey);
  font-size: var(--font-md);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.alk3-nodesc {
  font-style: italic;
  color: var(--font-colour_grey);
}

.alk3-source {
  margin-top: var(--padding-md);
  font-size: var(--font-base);
  font-variant: small-caps;
  text-decoration: none;
  align-self: flex-start;
}

.alk3-source:hover {
  text-decoration: underline;
}

.alk3-empty {
  text-align: center;
  color: var(--font-colour_grey);
  font-size: var(--font-lg);
  margin: var(--padding-xl) 0;
}

/* On touch / no-hover devices, keep the arrows visible since there's no hover */
@media (hover: none) {
  .alk3-stage .alk3-arrow {
    opacity: 0.7;
  }
}

@media (max-width: 600px) {
  .alk3-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--padding-lg);
  }
}

/*===================================*/
/*========== PUBLIC ARTICLES ==========*/
/*===================================*/
/* Public news archive (t/articles.php), fed by data/articles/public.json via the
   moderator "Public Article" button in h/articles/ata-articles.php, plus the
   homepage "Latest News" teaser that sits left of the blog teaser.
   All interactions live in js/articles-handler.js (document delegation). */

/* ── Homepage right-column toggle panel (Useful Links / Blog Posts / Recent
   News) ── Lives in the right cell of .homepage_desc (it also carries the
   .homepage_info class for the shared box background/border). A full-width
   toggle bar sits on top; all three panels are in the DOM and swapped
   client-side by js/ui-controls.js. The panel area has a definite flex-basis so
   the box keeps a fixed footprint (never jumps when you switch tabs) while
   still stretching to match the taller "Welcome" column beside it; longer
   content scrolls inside. */
.homepage_tabs {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.homepage_tabbar {
  display: flex;
  flex: 0 0 auto;
}

/* Standard state uses the background variable */
.homepage_tabbar:not(:active) {
  background: var(--bg-colour);
}

.homepage_tab {
  flex: 1 1 0;
  /* equal thirds spanning the full bar width */
  padding: 4px 8px;
  /* slim ~25px bar */
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--font-colour_grey);
  font-family: inherit;
  font-size: 0.75rem;
  /* smaller text to match the slimmer bar */
  line-height: 1.4;
  font-weight: normal;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.homepage_tab+.homepage_tab {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.homepage_tab:hover {
  color: var(--font-colour_offwhite);
}

.homepage_tab.is-active {
  background: var(--desc-bg);
  /* lifts to the panel colour */
  color: var(--font-colour_white);
  font-weight: bold;
  border-bottom-color: transparent;
  /* no seam — the active tab merges into the body beneath it */
}

.homepage_tab:focus-visible {
  outline: 2px solid var(--link-colour_focus);
  outline-offset: -2px;
}

/* Panel area is a flex column with a definite basis: fixed footprint (never
   jumps when you switch tabs) that still stretches to match the taller "Welcome"
   column. Each active panel fills it and owns its own overflow. */
.homepage_tabpanels {
  flex: 1 1 600px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--padding-lg);
  overflow: hidden;
  /* the active panel scrolls, not this container */
}

.homepage_tabpanel {
  display: none;
}

.homepage_tabpanel.is-active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

/* Links + News can outgrow the box, so they scroll inside it. */
.homepage_tabpanel[data-panel="links"].is-active,
.homepage_tabpanel[data-panel="news"].is-active {
  overflow-y: auto;
}

.homepage_tab_empty {
  color: var(--font-colour_grey);
  text-align: center;
  margin-top: var(--padding-lg);
}

/* ── Blog tab: fill the box, never scroll ──
   The post body flexes into whatever height is left and fades out at the cut;
   the header, featured image and the two footer buttons keep their natural size
   and stay pinned, so the "Read Post" button is always visible. */
.homepage_tabpanel[data-panel="blog"].is-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.homepage_tabpanel[data-panel="blog"] .blog_teaser_box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
}

.homepage_tabpanel[data-panel="blog"] .blog-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  /* header/content/footer own their padding */
  overflow: hidden;
  /* clip the header band to the rounded corners */
  box-shadow: none;
  background: var(--main-colour_clear);
}

/* Request #2: header gets its own darker band flush to the top of the card. */
.homepage_tabpanel[data-panel="blog"] .blog-card-header {
  flex: 0 0 auto;
  background: var(--bg-colour);
  padding: 12px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.homepage_tabpanel[data-panel="blog"] .blog-card-title {
  font-size: var(--font-xl);
}

.homepage_tabpanel[data-panel="blog"] .blog-card-image-wrap {
  flex: 0 0 auto;
  padding: 0 16px;
}

/* Cap the featured image so a tall photo can't push the buttons off-screen. */
.homepage_tabpanel[data-panel="blog"] .blog-card-image {
  max-height: 140px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  margin: 12px 0 14px 0;
}

/* The content wrap is the flexible, clipped, faded region. The fade lives here
   (not on the inner content) so it always sits at the visible cut, and it wins
   over the blog-index rules that clamp to 300px + expand-on-click. */
.homepage_tabpanel[data-panel="blog"] .blog-card-content-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.homepage_tabpanel[data-panel="blog"] .blog-card-content-wrap.is-truncated .blog-card-content,
.homepage_tabpanel[data-panel="blog"] .blog-card-content {
  max-height: none;
  overflow: visible;
  margin-bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* No in-place "Read more" expand here — the fade + Read Post button do the job. */
.homepage_tabpanel[data-panel="blog"] .post-fade-overlay {
  display: none;
}

.homepage_tabpanel[data-panel="blog"] .blog-card-footer {
  flex: 0 0 auto;
  align-items: center;
  /* even top/bottom padding so the Read Post button sits centered, not on the edge */
  padding: 12px 16px;
  background: var(--bg-colour);
}

/* Request #3: restyle the card's own "Read Post" button to the quiet Share-button
   look so it reads as secondary next to the red "Read Full Blog" button. */
.homepage_tabpanel[data-panel="blog"] .blog-card-footer .red-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--font-colour_grey);
  font-size: var(--font-md);
  font-weight: normal;
  line-height: 1;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.homepage_tabpanel[data-panel="blog"] .blog-card-footer .red-button:hover {
  background: color-mix(in srgb, var(--main-colour) 30%, transparent);
  border-color: var(--main-colour);
  color: var(--font-colour_white);
}

.blog-read-full {
  flex: 0 0 auto;
  text-align: center;
  padding: 12px 0 4px;
}

.blog-read-full .red-button {
  display: inline-block;
}

.articles_teaser_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Request #4: each headline is its own rounded card in --bg-colour so the list
   stands out against the translucent panel. */
.articles_teaser_list li {
  margin-bottom: 8px;
}

.articles_teaser_list li:last-child {
  margin-bottom: 0;
}

.articles_teaser_list a {
  display: block;
  padding: 8px 12px;
  background: var(--bg-colour);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--font-colour_offwhite);
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.articles_teaser_list a:hover {
  border-color: var(--main-colour);
  color: var(--link-colour_hover);
}

.articles_teaser_date {
  display: block;
  font-size: 11px;
  color: var(--font-colour_grey);
  margin-bottom: 2px;
}

.articles_teaser_btn {
  text-align: center;
  padding: 12px 14px 4px;
}

/* ── Article page layout ── */
/* Reserve the scrollbar gutter while the articles page is in the DOM, so the
   centered layout doesn't shift sideways when an expanding card makes the
   page scrollable. Scoped via :has() — every other page is untouched. */
html:has(.art-layout-wrapper) {
  scrollbar-gutter: stable;
}

.art-header-container {
  margin-bottom: 20px;
}

.art-layout-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 0 15px 40px 15px;
}

.art-feed-col {
  flex: 1;
  min-width: 0;
}

.art-intro {
  text-align: center;
}

.art-no-posts {
  text-align: center;
  padding: 40px 20px;
  color: var(--font-colour_grey);
}

/* ── Collapsed article cards ── */
.art-card {
  background: var(--desc-bg);
  border: var(--desc-border-style);
  border-radius: var(--border-radius);
  margin-bottom: 14px;
  padding: 14px 18px;
}

.art-card-meta {
  color: var(--font-colour_grey);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.art-card-h {
  margin: 0;
}

.art-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: var(--font-colour_white);
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 600;
}

.art-card-toggle:hover .art-card-title {
  color: var(--link-colour_hover);
}

/* Sits in the title row, so it opts out of the toggle's heading-sized bold. */
.art-readmore {
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--font-colour_grey);
  white-space: nowrap;
  flex-shrink: 0;
}

.art-card-toggle:hover .art-readmore {
  color: var(--link-colour_hover);
}

/* The collapsed card's lede — dimmer than the body text it precedes. */
.art-card-summary {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--font-colour_grey);
}

.art-card-body {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.art-card-body p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--font-colour_offwhite);
}

.art-card-src {
  font-size: 12px;
  color: var(--font-colour_grey);
}

.art-card-src a {
  color: var(--font-colour_grey);
}

.art-card-src a:hover {
  color: var(--link-colour_hover);
}

/* ── Archive tree sidebar (year → month → article) ── */
.art-tree-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.art-tree {
  background: var(--desc-bg);
  border: var(--desc-border-style);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.art-tree-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--bg-colour);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.art-tree-hdr>span {
  font-size: var(--font-md);
  font-weight: bold;
  color: var(--font-colour_white);
  display: flex;
  align-items: center;
  gap: 6px;
}

.art-tree .tree-all-btn {
  font-size: 11px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: var(--font-colour_grey);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.5;
}

.art-tree .tree-all-btn:hover {
  border-color: var(--main-colour);
  color: var(--font-colour_white);
}

.art-year-list,
.art-month-list,
.art-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.art-year-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.art-year-item:last-child {
  border-bottom: none;
}

.art-year-row,
.art-month-row {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.art-year-row:hover,
.art-month-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.art-year-row.active>.art-tree-label,
.art-month-row.active>.art-tree-label {
  color: var(--main-colour);
}

.art-month-list {
  display: none;
  background: rgba(0, 0, 0, 0.18);
}

.art-month-list.open {
  display: block;
}

.art-month-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.art-month-item:last-child {
  border-bottom: none;
}

.art-post-list {
  display: none;
  background: rgba(0, 0, 0, 0.12);
}

.art-post-list.open {
  display: block;
}

.art-post-item a {
  display: block;
  padding: 6px 12px 6px 40px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--font-colour_grey);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.art-post-item a:hover {
  color: var(--link-colour_hover);
  background: rgba(255, 255, 255, 0.04);
}

.art-post-item a.active {
  color: var(--main-colour);
  font-weight: bold;
}

.art-tree-toggle {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-size: 9px;
  color: var(--font-colour_grey);
  transition: transform 0.2s;
  padding: 9px 0;
}

.art-tree-toggle.open {
  transform: rotate(90deg);
}

.art-tree-label {
  flex: 1;
  padding: 9px 10px 9px 0;
  font-size: var(--font-md);
  color: var(--font-colour_offwhite);
  transition: color 0.15s;
}

.art-year-row .art-tree-label {
  font-weight: 600;
}

.art-month-row .art-tree-label {
  font-size: 13px;
  padding-left: 4px;
}

.art-tree-count {
  font-size: 11px;
  color: var(--font-colour_grey);
  padding-right: 12px;
  flex-shrink: 0;
}

/* ── Responsive: hide the archive tree (same breakpoint as the blog) ── */
@media (max-width: 900px) {
  .art-tree-sidebar {
    display: none;
  }

  .art-layout-wrapper {
    flex-direction: column;
  }
}