/*
Theme Name: Wahnsinn August 4 2026
Theme URI: https://30mom.com/
Description: Website Stuff
Author: LF
Version: 2.2
License: ¯\_(ツ)_/¯
Tags: 30MOM
*/

/* ===== CONTENTS =========================================================

    Search "SECTION <n>" to jump. No line numbers on purpose — they go stale
    the moment anything is edited, and a wrong one is worse than none.

    Long explanations live in CSS-NOTES.md, keyed by the [Nxxx] tags in the
    comments below. tools/check-notes.mjs keeps the two in sync.

     1. Fonts                                            6 rules
     2. Reset & base elements                           43 rules
     3. Layout shells                                   16 rules
     4. Site header & desktop nav                       18 rules
     5. Mobile header & nav                             14 rules
     6. Sidebar                                         45 rules
     7. Rack frame system                               43 rules
     8. Vault & tape-spine system                       41 rules
     9. Homepage & page components                      41 rules
    10. Post, blog & zine typography                    28 rules
    11. Gallery systems                                 28 rules
    12. Footer                                           3 rules
    13. Animations (@keyframes)                          7 rules
    14. Quanta Microgen 100 character generator         35 rules
    15. RESPONSIVE — tablet (768–1024px)               136 rules
    16. RESPONSIVE — mobile (≤767px)                   149 rules
    17. RESPONSIVE — other breakpoints & preferences    11 rules

    664 rules total. Regenerate with: node tools/toc.mjs --css style.css --write
   ============================================================================ */


/* ==========================================================================
   SECTION 1 — Fonts
   -----------------------------------------------------------------------
   @font-face declarations for the five self-hosted faces.
   ========================================================================== */
/* Each @font-face block below registers one custom font-family — see CSS-NOTES.md [N001] */
/* @font-face — see CSS-NOTES.md [N002] */
@font-face {
  font-family: 'MOM';
  src: url('/assets/fonts/moms-typewriter.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* @font-face — see CSS-NOTES.md [N003] */
@font-face {
  font-family: 'scratch';
  src: url('/assets/fonts/scratch.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'quanta';
  src: url('/assets/fonts/quanta-microgen.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'quanta';
  src: url('/assets/fonts/quanta-microgen-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 'traveling' Font — the "blog body copy" font. Used 8 times,
   almost entirely on the .blogtext family (blog/zine post body
   text) plus .caption and one rackmount component. */
@font-face {
  font-family: 'traveling';
  src: url('/assets/fonts/traveling-typewriter.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* @font-face — see CSS-NOTES.md [N004] */
@font-face {
  font-family: 'sears';
  src: url('/assets/fonts/sears.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/****************************
    End Custom Fonts
**********************************************/


/* ==========================================================================
   SECTION 2 — Reset & base elements
   -----------------------------------------------------------------------
   The universal reset and the bare-element defaults everything else builds on.
   ========================================================================== */

/* ============================================================
   see CSS-NOTES.md [N005]
   ============================================================ */

/* * — see CSS-NOTES.md [N006] */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body — see CSS-NOTES.md [N007] */
body {
  font-family: 'MOM', monospace;
  color: #282828;
  background: #000;
  line-height: 1.5;
  vertical-align: baseline;
}

/* img — see CSS-NOTES.md [N008] */
img {
  border: 0;
}

a img {
  border: none;
}

/****************************
    Text Elements (Modernized)
   see CSS-NOTES.md [N009]
**********************************************/

/* h1 (+5 more) — see CSS-NOTES.md [N010] */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.75rem;
  margin: 0.5em 0;
}

/* h3 (+1 more) — see CSS-NOTES.md [N011] */
h3, h3 a {
  font-family: 'scratch', monospace;
  color: #ff3c00;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: 1.2px;
  margin: 0.4em 0;
}

h4 {
  font-size: 1.3rem;
  margin: 0.67em 0 0;
}

h5 {
  font-size: 1.15rem;
  margin: 0.67em 0;
}

h6, h6 a {
  font-family: 'scratch', monospace;
  font-size: 2.3rem;
  letter-spacing: 0.3px;
  margin: 0.33em 0;
}

/* a — see CSS-NOTES.md [N012] */
a {
  color: #ff3c00;
  text-decoration: none;
  transition: color 0.2s ease; /* Smooth color change */
}

a:visited { color: #cb3102; }

a:hover   { color: #E00000; }

a:active  { color: #ff4e00; }

/* Special link overrides */
h3 a:active { color: #ff7e00; }

/* Only needed override */

/* p — see CSS-NOTES.md [N013] */
p {
  letter-spacing: 0.2px;
  margin: 0 0 1.5rem;
}

/* (A .rackmountwidetext p rule used to live here — text.php's
   paragraphs now get the identical rhythm from .rack-content p in
   the =Rack Frame section at the bottom of the file.) */

/* blockquote — see CSS-NOTES.md [N014] */
blockquote {
  width: 83%;
  max-width: 800px; /* Prevents overly wide quotes on large screens */
  margin: 1.5rem auto; /* Centers the blockquote with vertical spacing */
  padding: 0;
  color: #484848;
}

blockquote p {
  font-size: 1rem; /* 16px → rem */
  line-height: 1.5; /* 24px → unitless for scalability */
  margin: 0 0 1.5rem; /* Bottom margin for paragraphs */
  text-align: left;
}

/* ul (+1 more) — see CSS-NOTES.md [N015] */
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
/****************************
    End Text Elements
**********************************************/

/* =Fonts
   ------------------------------------------------------------
   see CSS-NOTES.md [N082]
*/
body,
input,
textarea {
	font-family: 'MOM', monospace;
	color: #282828;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.526em;
}

input[type=submit] {
	font-family: 'MOM', monospace;
}

pre {
	font-family: 'MOM', monospace;
}

code {
	font-family: 'MOM', monospace;
}

/* =Global Elements
-------------------------------------------------------------- */

/* hr — see CSS-NOTES.md [N084] */
hr {
	background-color: #585858;
	border: 0;
	clear: both;
	height: 1px;
	width: 90%;
}

/* article:has(> .albumgallery) — see CSS-NOTES.md [N089] */
article:has(> .albumgallery) {
	margin-bottom: 0;
}

/* =Attachment pages
   see CSS-NOTES.md [N091]
-------------------------------------------------------------- */

/****************************
    WP Images
**********************************************/

/* Resize images to fit the main content area — see CSS-NOTES.md [N092] */

/* img.size-full (+2 more) — see CSS-NOTES.md [N093] */
img.size-full,
img.size-large,
img.size-medium {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 5px;
}

/* table — see CSS-NOTES.md [N095] */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ol — see CSS-NOTES.md [N096] */
ol {
	list-style: decimal;
	margin: 0 0 18px 1.5em;
}

ol ol {
	list-style: upper-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

ol ol ol ol {
	list-style: lower-alpha;
}

ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}

dl {
	margin: 0 0 24px 0;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 18px;
}

strong {
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

/* Tumblr-only styles removed — they served an external — see CSS-NOTES.md [N102] */

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
   ------------------------------------------------------------
   see CSS-NOTES.md [N103]
-------------------------------------------------------------*/

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
pre {
	-webkit-text-size-adjust: 140%;
}

code {
	-webkit-text-size-adjust: 160%;
}

/* (#access and a #site-description rule were trimmed from this
   cluster — stock Twenty Fifteen ids this theme's custom
   header.php never outputs, so they matched nothing.) */

/* .screen-reader-text — see CSS-NOTES.md [N104] */
.screen-reader-text {
	position: absolute;
	left: -9000px;
}

/* em — see CSS-NOTES.md [N106] */
em {
	font-family: 'traveling';
	font-size: 24px;
}


/* ==========================================================================
   SECTION 3 — Layout shells
   -----------------------------------------------------------------------
   #wrapper / #main / #content and the per-template width variants.
   ========================================================================== */

/* =Layout
   ------------------------------------------------------------
   see CSS-NOTES.md [N075]
-------------------------------------------------------------- */

/* LAYOUT: Main Page — see CSS-NOTES.md [N076] */

/* .one-column#container — see CSS-NOTES.md [N077] */
.one-column#container {
	flex: 1;
	min-width: 725px;
}

/* LAYOUT: Full width, no sidebar — see CSS-NOTES.md [N080] */

/*
LAYOUT: True Full width, no sidebar
*/

/* .single-30mom #content — see CSS-NOTES.md [N081] */
.single-30mom #content {
	margin: 0;
	width: 1100px;
}

/* =Structure
-------------------------------------------------------------- */

/* #wrapper — see CSS-NOTES.md [N083] */
#wrapper {
	margin: 0 auto;
	width: 1100px;
	background-image:url('/assets/images/structure/rackbars.png');
	background-repeat:repeat-y;
	padding: 0;
}

/* =Content
   ------------------------------------------------------------
   see CSS-NOTES.md [N086]
-------------------------------------------------------------- */

/* #main — see CSS-NOTES.md [N087] */
#main {
	clear: both;
	overflow: hidden;
	padding: 0 0 0 0;
}

/* .main-columns — see CSS-NOTES.md [N088] */
.main-columns {
	display: flex;
	align-items: flex-start;
	gap: 12.8px;
}

#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
	margin-bottom: auto;
}

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul {
	margin-bottom: 0;
}

#content pre,
#content kbd,
#content tt,
#content var {
	line-height: 21px;
}

#content code {
	font-size: 13px;
}

#content dt,
#content th {
	color: #000;
}

#content table {
	border: 1px solid #e7e7e7;
	margin: 0 -1px 0px 0;
	text-align: left;
	width: 100%;
}

#content tr th,
#content thead th {
	color: #888;
	line-height: 18px;
	padding: 9px 24px;
}

#content tr td {
	border-top: 1px solid #e7e7e7;
}

#content tr.odd td {
	background: #f2f7fc;
}

#content .entry-title {
	color: #000;
	font-size: 21px;
	line-height: 1.3em;
	margin-bottom: 0;
}


/* ==========================================================================
   SECTION 4 — Site header & desktop nav
   -----------------------------------------------------------------------
   #hed / #topmenu / #navlisttop and the desktop nav button family.
   ========================================================================== */

/****************************
    Header
    Three similarly-named header wrapper IDs, each used by a
    different set of templates — easy to mix up by name alone.
**********************************************/

/* #hed — the home-page-style header band (with the big video-header
   GIF). Used by header-home.php and 404.php. */
#hed {
	padding: 0;
	margin-top: 0px;
	height: 461px;
	width: 1100px;
	text-align:center;
}

/* #hedsingle — see CSS-NOTES.md [N016] */
#hedsingle {
	padding: 0;
	margin-top: 0px;
	height: 174px;
	width: 1100px;
	text-align:center;
}
/****************************
    End Header
**********************************************/

/****************************
    Top Nav Menu
   see CSS-NOTES.md [N017]
**********************************************/

/* #topmenu — see CSS-NOTES.md [N018] */
#topmenu {
	background-image: url(/assets/images/structure/topmenu.png);
	background-repeat: no-repeat;
	height:61px;
	width:1100px;
}

#navlisttop{
	height:50px;
	width:1100px;
	margin-left:6px;
}

/* The actual nav links — Main/Vault/Episodes/etc. Uses the 'MOM'
   font (see Custom Fonts at the top of this file). */
#navlisttop li, #navlisttop li a{
	height:50px;
	list-style:none;
	top:0;
	font-family:  'MOM', monospace;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:1px;
	text-decoration: none;
	line-height: 50px;
	display: block;
	color: #282828;
	text-align:center;
}

#navlisttop li a:hover, #navlisttop li a:active{
	color: #383838;
}

/* .creditsbutton — only used in main.php (the homepage), not part of
   the repeated nav pattern above. A single dedicated button (own
   sprite image, own size) rather than one of the generic nav items. */
.creditsbutton{
	width:119px;
	height: 41px;
	padding:1px 0px 0px 294px;
	display: block;
	top:0;
	font-family: 'MOM', monospace;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:1px;
	line-height: 39px;
	color: #282828;
	text-align:center;
}

/* .creditsbutton a:link (+1 more) — see CSS-NOTES.md [N019] */
.creditsbutton a:link, .creditsbutton a:visited{
	background:url('/assets/images/structure/creditsbutton.png') 0 0;
	font-family: 'MOM', monospace;
	height: 41px;
	width:119px;
	left:0px;
	display: block;
	text-decoration: none;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.creditsbutton a:hover{
	background: url('/assets/images/structure/creditsbutton.png') -117px 0;
	font-family: 'MOM', monospace;
	height: 41px;
	width:119px;
	display: block;
	color: #383838;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.creditsbutton a:active{
	background: url('/assets/images/structure/creditsbutton.png') -234px 0;
	font-family: 'MOM', monospace;
	height: 40px;
	width:119px;
	display: block;
	color: #383838;
	animation: facebreathe 3.15s ease-in-out infinite;
}

/* .currentbutton — see CSS-NOTES.md [N020] */
.currentbutton{
	width:100px;
	margin-left:8px;
	background: url('/assets/images/structure/button.png') -200px 0;
	display: block;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float:left;
}

.currentbutton a:hover, .currentbutton a:active{
	background: url('/assets/images/structure/button.png') -100px 0;
	animation: facebreathe 3.15s ease-in-out infinite;
}

/* .button — see CSS-NOTES.md [N021] */
.button{
	background-repeat: no-repeat;
	height:50px;
	width:100px;
	margin-left:8px;
	background:url('/assets/images/structure/button.png') 0 0;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float: left;
}

.button a:hover, .button a:active{
	background: url('/assets/images/structure/button.png') -100px 0;
	background-repeat: no-repeat;
	animation: facebreathe 3.15s ease-in-out infinite;
}

/* .currentepbutton — see CSS-NOTES.md [N022] */
.currentepbutton{
	width:100px;
	margin-left:8px;
	background: url('/assets/images/structure/epbutton.png') -100px 0;
	display: block;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float:left;
}

.currentepbutton a:hover, .currentepbutton a:active{
	background: url('/assets/images/structure/epbutton.png') -100px 0;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.epbutton{
	background-repeat: no-repeat;
	height:50px;
	width:100px;
	margin-left:8px;
	background:url('/assets/images/structure/epbutton.png') 0 0;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float: left;
}

.epbutton a:hover, .epbutton a:active{
	background: url('/assets/images/structure/epbutton.png') -100px 0;
	background-repeat: no-repeat;
	animation: facebreathe 3.15s ease-in-out infinite;
}
/****************************
    End Top Nav Menu
**********************************************/


/* ==========================================================================
   SECTION 5 — Mobile header & nav
   -----------------------------------------------------------------------
   The #mobiletopmenu nav that swaps in below 1024px, and its button family.
   ========================================================================== */

/****************************
    Mobile Top Nav Menu
   see CSS-NOTES.md [N023]
**********************************************/

/* #mobiletopmenu — see CSS-NOTES.md [N024] */
#mobiletopmenu {
	background-image: url(/assets/images/structure/mobiletopmenu.png);
	background-repeat: no-repeat;
	height:210px;
	width:1100px;
}

/* Same idea as #navlisttop in the desktop nav above, just bigger
   (mobile-friendly tap targets: 32px text vs 16px, 170px icons vs
   85px). */
#mobilenavlisttop{
	height:100px;
	width:1100px;
	margin-left:-6px;
}

#mobilenavlisttop li, #mobilenavlisttop li a{
	height:100px;
	list-style:none;
	top:0;
	font-family:  'MOM', monospace;
	font-size:32px;
	text-transform:uppercase;
	letter-spacing:1px;
	text-decoration: none;
	line-height:100px;
	display: block;
	color: #282828;
	text-align:center;
}

#mobilenavlisttop li a:hover, #mobilenavlisttop li a:active{
	color: #383838;
}

/* .mobilebutton — see CSS-NOTES.md [N025] */
.mobilebutton{
	background-repeat: no-repeat;
	height:100px;
	width:200px;
	margin-left:19px;
	background:url('/assets/images/structure/mobilebutton.png') 0 0;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float: left;
}

.mobilebutton a:hover, .mobilebutton a:active{
	background: url('/assets/images/structure/mobilebutton.png') -200px 0;
	background-repeat: no-repeat;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.currentmobilebutton{
	width:200px;
	margin-left:19px;
	background: url('/assets/images/structure/mobilebutton.png') -400px 0;
	display: block;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float:left;
}

.currentmobilebutton a:hover, .currentmobilebutton a:active{
	background: url('/assets/images/structure/mobilebutton.png') -200px 0;
	animation: facebreathe 3.15s ease-in-out infinite;
}

/* .epmobilebutton — see CSS-NOTES.md [N026] */
.epmobilebutton{
	background-repeat: no-repeat;
	height:100px;
	width:200px;
	margin-left:19px;
	background: url('/assets/images/structure/epbutton.png') 0 0;
	background-size: 600px 100px;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float: left;
}

.epmobilebutton a:hover, .epmobilebutton a:active{
	background: url('/assets/images/structure/epbutton.png') -200px 0;
	background-size: 600px 100px;
	background-repeat: no-repeat;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.currentepmobilebutton{
	width:200px;
	margin-left:19px;
	background: url('/assets/images/structure/epbutton.png') -200px 0;
	background-size: 600px 100px;
	display: block;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
	float:left;
}

.currentepmobilebutton a:hover, .currentepmobilebutton a:active{
	background: url('/assets/images/structure/epbutton.png') -200px 0;
	background-size: 600px 100px;
	animation: facebreathe 3.15s ease-in-out infinite;
}
/****************************
    End Mobile Top Nav Menu
**********************************************/

/* One self-hosted <video> found (from-the-finger-2025-03-05) i — see CSS-NOTES.md [N136] */

/* #mobiletopmenu — see CSS-NOTES.md [N137] */
#mobiletopmenu {
    display:none;
}

/****************************
    /vault Mobile Layout (Phase 1 of a page-by-page mobile rollout)
   see CSS-NOTES.md [N140]
**********************************************/
.mobile-shell #hedmobile {
	display: none;
}


/* ==========================================================================
   SECTION 6 — Sidebar
   -----------------------------------------------------------------------
   #leftmenu and everything that lives inside it, including the hover-preview thumbnails.
   ========================================================================== */

/****************************
    Left Sidebar Menu
   see CSS-NOTES.md [N045]
**********************************************/

/* #leftmenu — see CSS-NOTES.md [N046] */
#leftmenu {
	width:350.2px;
	margin-left:13px;
	flex-shrink: 0;
	text-align:center;
}

#leftmenu ul li {
	padding: 0;

}

#leftmenu li img {
        width: 344px;
}

/* .sidebarmiddle — see CSS-NOTES.md [N047] */
.sidebarmiddle {
	background-image: url(/assets/images/structure/sidebarmiddle.png);
	background-repeat: repeat-y;
	height: auto;
}

/* .sidebarmiddle li a:hover — see CSS-NOTES.md [N048] */
.sidebarmiddle li a:hover {
	opacity:.93;
}

.sidebarbottom {
	background-image: url(/assets/images/structure/sidebarbottom.png);
	background-repeat: no-repeat;
	height: 39px;
}

/* .vaultcounter — see CSS-NOTES.md [N049] */
.vaultcounter {
	background-image: url(/assets/images/structure/vault-counter.jpg);
	background-repeat: no-repeat;
	height: 86px;
	width: 350px;
	padding-bottom: 10px;
	display: block;
	text-align:center;
	float: left;
}

.vaultbutton {
	width: 63px;
	height: 29px;
	padding: 43px 0px 0px 243px;
	display: block;
	top:0;
	font-family: 'MOM', monospace;
	font-size: 12px;
	text-transform:uppercase;
	letter-spacing: 2px;
	line-height: 30px;
	text-align:center;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.vaultbutton a:link, .vaultbutton a:visited{
	background:url('/assets/images/structure/vault-button.png') -63px 0;
	font-family: 'MOM', monospace;
	height: 29px;
	width: 63px;
	left:0px;
	display: block;
	text-decoration: none;
	color: #282828;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.vaultbutton a:hover{
	background: url('/assets/images/structure/vault-button.png') 0 0;
	font-family: 'MOM', monospace;
	height: 29px;
	width: 63px;
	display: block;
	color: red;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.vaultbutton a:active{
	background: url('/assets/images/structure/vault-button.png') 63px 0;
	font-family: 'MOM', monospace;
	height: 29px;
	width: 63px;
	letter-spacing: 1px;
	font-size: 11px;
	display: block;
	color: #383838;
	 animation: facebreathe 3.15s ease-in-out infinite;
}

/* .streamingbuttons — see CSS-NOTES.md [N050] */
.streamingbuttons {
	width: 344px;
	margin-left:3px;
}

.streamingbuttons img {
     width: 114.6px;
	 transition: transform .2s; /* Animation */
	animation: facebreathe 3.15s ease-in-out infinite;
}

.streamingbuttons a:hover img {
	opacity:.93;
	transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	animation: facebreathe 3.15s ease-in-out infinite;
}

.streamingbuttons a:active img {
  transform: scale(.97); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation: facebreathe 3.15s ease-in-out infinite;
}

/* Used directly in post content, not applied by any template — the
   wide variant of .streamingbuttons (see above) for posts with a
   row of streaming-service buttons (Apple TV/Amazon/Tubi/etc). */
.widestreamingbuttons {
	width: 1000px;
	margin-left:3px;
}

.widestreamingbuttons img {
     width: 175px;
	 transition: transform .2s; /* Animation */
     animation: facebreathe 3.15s ease-in-out infinite;
}

.widestreamingbuttons a:hover img {
	opacity:.93;
	transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	animation: facebreathe 3.15s ease-in-out infinite;
}

.widestreamingbuttons a:active img {
  transform: scale(.97); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* .sidetray — see CSS-NOTES.md [N051] */
.sidetray {
	background-image: url(/assets/images/structure/sidetray.png);
	background-repeat: no-repeat;
	height: 78px;
	width: 350px;
	padding-bottom: 0px;
	display: block;
	text-align:center;
}

.artibtn {
	height: 74px;
    width: 70px;
	padding: 2px 0px 0px 140px;
	display: block;
	text-align:center;
	animation: facebreathe 3s ease-in-out infinite;
}

.artibtn a:link, .artibtn a:visited {
	background:url('/assets/images/structure/artibtn.png') -70px 0;
	height: 74px;
	width: 70px;
	display: block;
	animation: facebreathe 3s ease-in-out infinite;
}

.artibtn a:hover {
	background: url('/assets/images/structure/artibtn.png') 70px 0;
	height: 74px;
	width: 70px;
	display: block;
	animation: facebreathe 3s ease-in-out infinite;
}

.artibtn a:active {
	background: url('/assets/images/structure/artibtn.png') 0px 0;
	height: 74px;
	width: 70px;
	animation: facebreathe 3s ease-in-out infinite;
}
/****************************
    End Left Sidebar Menu
**********************************************/

/****************************
    update glow text elements
   see CSS-NOTES.md [N052]
**********************************************/

/* .updated — see CSS-NOTES.md [N053] */
.updated {
	font-family: 'quanta', monospace;
	color: #ff3c00;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform:uppercase;
	text-shadow: 1px 1px 3px #ff3c00, -1px -1px -3px #ff3c00;
	animation: glower 1.7s infinite;
	text-align: center;
}

.updated a:link {
  color: #ff3c00;
  text-decoration: none;
}

.updated a:visited {
  color: #ff3c00;
  text-decoration: none;
}

.updated a:hover {
  color: #ff3c00;
  text-decoration: none;
}

.updated a:active {
  color: #ff3c00;
  text-decoration: none;
}

/****************************
    Tape-Spine & Thumbnail Components
   see CSS-NOTES.md [N059]
**********************************************/

/* .preview — used in main.php (homepage) and loop-customcat.php's
   vault/merch category branches: the square video-thumbnail card
   wrapper around the_post_thumbnail() output. */
.preview {
	background:#000000;
	height:263px;
	width:350.2px;
}

.preview img {
	height:100%;
	width:100%;
}

.preview:hover img {
	opacity:.93;
}

.preview:active img {
	opacity:1.0;
}

/* .sidebargif — see CSS-NOTES.md [N060] */
.sidebargif {
	height:auto;
	width:344px;
	margin-left: 3.4px;
}

.sidebargif img {
	height:100%;
	width:100%;
}

/* .sidebarflyer — see CSS-NOTES.md [N061] */
.sidebarflyer {
	height:auto;
	width:344px;
	margin-left: 3.4px;
}

.sidebarflyer img {
	height:100%;
	width:100%;
}

/* .boxpreview — see CSS-NOTES.md [N062] */
.boxpreview {
	background:#0F0F0F;
	height: 467px;
	width: 350.2px;
	padding-bottom: 15px;
}

.boxpreview img {
	max-width:100%;
	max-height:100%;
	margin:auto;
	display:block;
}

.boxpreview:hover img {
	opacity:.93;
}

.boxpreview:active img {
	opacity:1.0;
}

/* .gifpreview — used in loop-customcat.php's "gifs" category branch
   specifically (one step before the generic .boxpreview fallback
   above — gifs get their own dedicated thumbnail card). */
.gifpreview {
	background:#0F0F0F;
	height: 263.2px;
	width: 350.2px;
	padding-bottom: 0px;
}

.gifpreview img {
	max-width:100%;
	max-height:100%;
	margin:auto;
	display:block;
}

.gifpreview:hover img {
	opacity:.93;
}

.gifpreview:active img {
	opacity:1.0;
}


/* ==========================================================================
   SECTION 7 — Rack frame system
   -----------------------------------------------------------------------
   The cap/paper/content/screen stack used by catsingle.php and the shortcodes.
   ========================================================================== */

/* =Rack Frame
   ------------------------------------------------------------
   see CSS-NOTES.md [N107]
*/
.rack-cap--narrow {
	width: 1074px;
	margin: 0 auto;
}

.rack-cap--top.rack-cap--narrow {
	background-image: url(/assets/images/structure/fullrack-topper.png);
	background-repeat: no-repeat;
	height: 29px;
}

.rack-cap--bottom.rack-cap--narrow {
	background-image: url(/assets/images/structure/fullrack-bottom.png);
	background-repeat: no-repeat;
	height: 46px;
}

.rack-paper--narrow {
	background-image: url(/assets/images/structure/fullrack-label.png);
	background-repeat: repeat-y;
	width: 1074px;
	margin: 0 auto;
}

/* The one rule that matters: position via margin, width matched
   exactly to the printed label area measured off the artwork
   (fullrack-label.png: cream zone runs x=223 to x=848, 626px wide). */
.rack-paper--narrow .rack-content {
	width: 626px;
	margin-left: 223px;
	text-align: center;
}

/* .rack-content--credits — see CSS-NOTES.md [N108] */
.rack-content--credits {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Defensive: the_content() here can include an <img> missing its size-* class, same overflow risk already fixed twice elsewhere in this project. */
.rack-content--credits img {
	max-width: 100%;
	height: auto;
}

/* .rack-content--zines — see CSS-NOTES.md [N109] */
.rack-content--zines {
	padding-bottom: 15px;
}

.rack-content p {
	padding: 0.55em 0;
	margin: 0 0 1.5em;
}

/* .rack-content:not(.rack-content--text) > p:first-child:has(iframe) (+1 more) — see CSS-NOTES.md [N110] */
.rack-content:not(.rack-content--text) > p:first-child:has(iframe),
.rack-content:not(.rack-content--text) > p:first-child:has(img) {
	padding-top: 0;
}

/* ---- The WIDE variant ----
   Same anatomy as the narrow system above, using the wider artwork
   set. Used by catsingle.php's `flyers`/`gifs` and `blog`/`merch`
   branches and by text.php (six pages: CONTACT, 20 YEARS OF
   MADNESS, PHOTOS, No Access, 20YOM Pics, ARTWORK). */
.rack-cap--wide {
	width: 1074px;
	margin: 0 auto;
}

.rack-cap--top.rack-cap--wide {
	background-image: url(/assets/images/structure/fullrack-topperwide.png);
	background-repeat: no-repeat;
	height: 49px;
}

.rack-cap--bottom.rack-cap--wide {
	background-image: url(/assets/images/structure/fullrack-bottomwide.png);
	background-repeat: no-repeat;
	height: 77px;
}

.rack-paper--wide {
	background-image: url(/assets/images/structure/fullrack-paperwide.png);
	background-repeat: repeat-y;
	width: 1074px;
	margin: 0 auto;
	/* text-align lives on the PAPER here (not just .rack-content,  — see CSS-NOTES.md [N111] */
	text-align: center;
}

/* .rack-paper--wide .rack-content (+1 more) — see CSS-NOTES.md [N112] */
.rack-paper--wide .rack-content,
.artifactowrap .rack-content {
	width: 1045px;
	margin-left: 13px;
	text-align: center;
}

/* .rack-content--zines (+1 more) — see CSS-NOTES.md [N113] */
.rack-content--zines,
.rack-content--text {
	padding-bottom: 15px;
}

.rack-paper--wide .rack-content--text {
	width: 1032px;
}

/* .rack-content--img p — see CSS-NOTES.md [N114] */
.rack-content--img p {
	padding: 0;
	margin: 0;
}

.rack-content--img img {
	width: 1045px;
	display: block;
}

/* .rack-content--img img.aligncenter (+5 more) — see CSS-NOTES.md [N115] */
.rack-content--img img.aligncenter,
.rack-content--img img.alignleft,
.rack-content--img img.alignright,
.rack-content--blog img.aligncenter,
.rack-content--blog img.alignleft,
.rack-content--blog img.alignright {
	margin-bottom: 0;
}

/* .rack-content--blog — see CSS-NOTES.md [N116] */
.rack-content--blog {
	padding-top: 2px;
	padding-bottom: 2px;
}

/* .rack-content--blog img — see CSS-NOTES.md [N117] */
.rack-content--blog img {
	max-width: 100%;
	height: auto;
}

.rack-content--blog p {
	font-family: 'traveling';
	display: block;
	padding: 0 0 32px;
	line-height: 32px;
}

/* =Gallery Masonry
   see CSS-NOTES.md [N118]
*/
.rack-content--gallery {
	column-count: var(--wahnsinn-gallery-cols, 4);
	column-gap: 13px;
	padding: 13px 0;
}

/* .rack-screen — see CSS-NOTES.md [N127] */
.rack-screen {
	background-image: url(/assets/images/structure/fullrack.png);
	background-repeat: repeat-y;
	width: 1074px;
	margin: 0 auto;
}

/* Position via margin, width matched to the dark screen area
   measured directly off the artwork (fullrack.png: dark zone runs
   x=215 to x=859, 645px wide). */
.rack-screen__inner {
	width: 645px;
	margin-left: 215px;
	text-align: center;
}

/* .rack-screen__inner video:not(.locura-video-player__video) — see CSS-NOTES.md [N128] */
.rack-screen__inner video:not(.locura-video-player__video) {
	width: 100%;
	height: auto;
}

/* .rack-screen__inner p:has(iframe) — see CSS-NOTES.md [N129] */
.rack-screen__inner p:has(iframe) {
	position: relative;
	height: 0;
	padding-bottom: 75%;
	overflow: hidden;
}

.rack-screen__inner p:has(iframe[height="360"]) {
	padding-bottom: 56.25%;
}

.rack-screen__inner p:has(iframe[height="493"]) {
	padding-bottom: 77.03125%;
}

.rack-screen__inner p:has(iframe) iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* .rack-content--credits video — see CSS-NOTES.md [N130] */
.rack-content--credits video {
	width: 100%;
	height: auto;
}

/* :has(> iframe) — NOT :has(iframe) — is deliberate on every d — see CSS-NOTES.md [N131] */

/* .rack-content--credits p:has(iframe) (+1 more) — see CSS-NOTES.md [N132] */
.rack-content--credits p:has(iframe),
.rack-content--credits div:has(> iframe) {
	position: relative;
	height: 0;
	padding-bottom: 75%;
	overflow: hidden;
	flex: 1 1 0%;
}

/* .rack-content--credits p:has(iframe[height="353"]) (+1 more) — see CSS-NOTES.md [N133] */
.rack-content--credits p:has(iframe[height="353"]),
.rack-content--credits div:has(> iframe[height="353"]) {
	padding-bottom: 56.25%;
}

.rack-content--credits p:has(iframe) iframe,
.rack-content--credits div:has(> iframe) iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* .rack-content--blog video — see CSS-NOTES.md [N134] */
.rack-content--blog video {
	width: 100%;
	height: auto;
}

.rack-content--blog p:has(iframe),
.rack-content--blog div:has(> iframe) {
	position: relative;
	height: 0;
	padding-bottom: 75%; /* 640x480, the most common ratio found (the six "Top Ten" posts' 10-13 iframes each) */
	overflow: hidden;
	flex: 1 1 0%; /* see the .rack-content--credits version of this rule above for the full writeup — this exact rule is what needed it, on 20-years-of-madness's flex two-column "Bonus Vids" section */
}

.rack-content--blog p:has(iframe[height="360"]),
.rack-content--blog div:has(> iframe[height="360"]) {
	padding-bottom: 56.25%; /* 640x360, 16:9 */
}

.rack-content--blog p:has(iframe[height="588"]),
.rack-content--blog div:has(> iframe[height="588"]) {
	padding-bottom: 56.25%; /* 1045x588 — effectively 16:9 (588/1045=0.5626), written as the exact ratio rather than the rounded pixel one, same convention as .rack-content--credits' own version above */
}

.rack-content--blog p:has(iframe[height="501"]),
.rack-content--blog div:has(> iframe[height="501"]) {
	padding-bottom: 52.7368%; /* 950x501, from-the-finger-2025-03-05's second embed — not a standard 16:9/4:3 ratio, kept as its own exact match */
}

.rack-content--blog p:has(iframe[height="290"]),
.rack-content--blog div:has(> iframe[height="290"]) {
	padding-bottom: 56.3107%; /* 515x290 — 20-years-of-madness's secondary embeds */
}

/* .rack-content--blog div[style*="display: flex"] > div:has(> iframe[height="290"]) — see CSS-NOTES.md [N135] */
.rack-content--blog div[style*="display: flex"] > div:has(> iframe[height="290"]) {
	height: auto;
	padding-bottom: 0;
	aspect-ratio: 515 / 290;
}

.rack-content--blog p:has(iframe) iframe,
.rack-content--blog div:has(> iframe) iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}


/* ==========================================================================
   SECTION 8 — Vault & tape-spine system
   -----------------------------------------------------------------------
   The VHS-spine archive listings, trays and prev/next buttons.
   ========================================================================== */

/* .thevault — see CSS-NOTES.md [N063] */
.thevault {
	margin: 0;
	float: left;
	clear: right;
	padding: 0px 12px 0px 0px;
}

/* .vault3 — see CSS-NOTES.md [N064] */
.vault3 {
	margin: 0;
	float: left;
	clear: right;
	padding: 0px 0px 0px 12.5px;
}

.epcon {
	margin: 0;
	float: left;
	clear: right;
	margin-left: 12.5px;
}

/* .vhsl — see CSS-NOTES.md [N065] */
.vhsl {
	background-repeat: no-repeat;
	/* Used to be an inline style="" attribute in loop-customcat.ph — see CSS-NOTES.md [N066] */
	background-size: 1074px 191px;
	height: 191px;
	width: 1074px;
	font-family: 'scratch', monospace;
	font-size:62px;
	text-transform:uppercase;
	letter-spacing:0px;
	word-spacing:-1px;
	line-height:190px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
}

.vhsl  a {
	color: #303030;
}

.vhsl  a:hover {
	color: #E00000;
}

.vhsl  a:active {
	color: #ff4e00;
}

/* .vhs — see CSS-NOTES.md [N067] */
.vhs {
	margin: 0;
	background-repeat: no-repeat;
	background-size: 711px 136px;
	height: 136px;
	width: 711px;
	font-family: 'scratch', monospace;
	color: #303030;
	font-size:42px;
	text-transform:uppercase;
	letter-spacing:0px;
	word-spacing:-1px;
	line-height:135px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
}

.vhs a {
	color: #303030;
}

.vhs a:hover {
	color: #E00000;
}

.vhs a:active {
	color: #ff4e00;
}

/* .vhssm — the small/sidebar tape-spine size, used in main.php and
   loop-customcat.php's vault-category branch (the smaller spine
   thumbnails seen in vault listing grids and sidebars). */
.vhssm {
	background-repeat: no-repeat;
	background-size: 350.2px 67px;
	height: 67px;
	width: 350.2px;
	font-family: 'scratch', monospace;
	font-size:21px;
	text-transform:uppercase;
	letter-spacing:0px;
	word-spacing:-1px;
	line-height:64px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
}

.vhssm a {
	color: #303030;
}

.vhssm a:hover {
	color: #E00000;
}

.vhssm a:active {
	color: #ff4e00;
}

/* .micro — layout wrapper used only in loop-customcat.php's "blog"
   category branch (wraps .cartspine/.cart below). */
.micro {
	float: left;
	clear: right;
	margin-left: 12.5px;
}

/* .cartspine — see CSS-NOTES.md [N068] */
.cartspine {
	font-family: 'MOM', monospace;
	background-repeat: no-repeat;
	text-decoration:none;
	display: block;
}

/* .cart — see CSS-NOTES.md [N069] */
.cart {
	background-repeat: no-repeat;
	/* Used to be an inline style="" attribute in loop-customcat.ph — see CSS-NOTES.md [N070] */
	background-size: 532px 138px;
	height: 138px;
	width: 532px;
	font-size:24px;
	text-transform:uppercase;
	letter-spacing:0px;
	word-spacing:-1px;
	line-height:24px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
}

.cart  p {
	color: #303030;
	font-size:14px;
	line-height:17px;
	padding-top: 2px;
	padding-left: 35px;
	padding-right: 35px;
	text-transform: none;
}

.cart  a {
	padding-top: 45px;
	color: #303030;
}

.cart  a:hover {
	color: #E00000;
}

.cart  a:active {
	color: #ff4e00;
}

/* .vidspine — see CSS-NOTES.md [N071] */
.vidspine {
	font-family: 'scratch', monospace;
	background-repeat: no-repeat;
	text-decoration:none;
	display: block;
}

/* (Six dead rules used to live here: four `.vidspine a:*` link — see CSS-NOTES.md [N072] */

/* .tray — see CSS-NOTES.md [N073] */
.tray {
	background-image: url(/assets/images/structure/blanktray.gif);
	background-repeat: no-repeat;
	height: 42px;
	width: 711px;
	display: block;
	text-align:center;
	float: left;
}

#fulltray {
	background-image: url(/assets/images/structure/full-tray.gif);
	background-repeat: no-repeat;
	margin: 0 auto;
	padding: 0px 0px 0px 184px;
	height: 79px;
	width: 1074px;
}

.wrap {
	  margin: 0;
	  background-image: url(/assets/images/404/404.gif);
	  background-repeat: no-repeat;
	  background-size: cover;
	  width: 710px;
	  height: 500px;

}

/* .fingerbuttonleft — see CSS-NOTES.md [N074] */
.fingerbuttonleft {
	position: absolute;
	padding-top:8px;
	margin-left: 100px;
	height: 71px;
	width:96px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonleft a:link, .fingerbuttonleft a:visited{
	margin: 0px;
	background:url('/assets/images/structure/fingerbuttonleft.png') 0 0;
	height: 71px;
	width:96px;
	display: block;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonleft a:hover{
	background: url('/assets/images/structure/fingerbuttonleft.png') -96px 0;
	width:96px;
	height: 71px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonleft a:active{
	background: url('/assets/images/structure/fingerbuttonleft.png') -192px 0;
	height: 71px;
	width:96px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonright {
	position: absolute;
	padding-top:8px;
	margin-left: 504px;
	height: 71px;
	width:96px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonright a:link, .fingerbuttonright a:visited{
	margin: 0px;
	background:url('/assets/images/structure/fingerbuttonright.png') 0 0;
	height: 71px;
	width:96px;
	display: block;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonright a:hover{
	background: url('/assets/images/structure/fingerbuttonright.png') -96px 0;
	height: 71px;
	width:96px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.fingerbuttonright a:active{
	background: url('/assets/images/structure/fingerbuttonright.png') -192px 0;
	height: 71px;
	width:96px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.mobile-shell #vaultNavToggle {
	display: none;
}

/****************************
    /vault + /blog Load More (all widths — NOT inside the 767px block
    above)
   see CSS-NOTES.md [N292]
****************************/
.mobile-shell #archive-posts {
	display: flow-root;
}

/* .mobile-shell .archive-load-more-wrap — see CSS-NOTES.md [N293] */
.mobile-shell .archive-load-more-wrap {
	width: 1076px;
	height: 51px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('/assets/images/structure/sidetray.png') repeat;
	background-size: auto 51px;
}

.mobile-shell #archive-load-more {
	display: block;
	width: 153px;
	height: 51px;
	line-height: 51px;
	font-family: 'MOM', monospace;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	color: #282828;
	background: url('/assets/images/structure/load-more-btn.png') 0 0;
	background-size: 459px 51px;
	animation: facebreathe 3.15s ease-in-out infinite;
}

.mobile-shell #archive-load-more:hover {
	background-position: -153px 0;
	color: #383838;
}

.mobile-shell #archive-load-more:active {
	background-position: -306px 0;
	color: #383838;
}

.mobile-shell #archive-load-more[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}


/* ==========================================================================
   SECTION 9 — Homepage & page components
   -----------------------------------------------------------------------
   Main-page and per-page furniture: the players, album stack, merch and zine racks.
   ========================================================================== */

/****************************
    Infinite M & IMC
**********************************************/

/* .flex-im — see CSS-NOTES.md [N027] */
.flex-im {
	background-image: url(/assets/images/structure/blanktray.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Stretches width and height to 100% */
	margin-left: 13px;
	width: 1071px;
	height: 555px;
	display: flex; /* Forces child elements to sit side-by-side */
	gap: 10px;     /* Optional: Adds space between the two divs */
}

#infinite-m {
	height: 480px;
	width: 640px;
}

#imc {
	height: 480px;
	width: 421px;
}
/****************************
    End Infinite M & IMC
**********************************************/

/****************************
    Rack / VCR Display Components
   see CSS-NOTES.md [N028]
**********************************************/

/* .mainpromo — see CSS-NOTES.md [N029] */
.mainpromo {
	display: block;
}

/*************************************************************** 

30MOM "locura" video tag player (primarily for use in vault, episodes)

**********************************************/
.locura-video-player {
    position: relative;
	width: 640px;
	max-width: 100%;
    aspect-ratio: 4 / 3;
	margin: 0 auto;
    overflow: hidden;
}

.locura-video-player__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* .locura-video-player__tag — see CSS-NOTES.md [N298] */
.locura-video-player__tag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;

    opacity: 1;
    pointer-events: none;
    z-index: 10;
}

/* .locura-video-player__tag--opening — see CSS-NOTES.md [N030] */
.locura-video-player__tag--opening {
    transition: opacity 0.7s linear;
}
/*
 * End-of-video poster and replay layer
 */

/* .locura-video-player__end-poster — see CSS-NOTES.md [N299] */
.locura-video-player__end-poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;

    display: block;
    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;
    margin: 0;

    cursor: pointer;
    overflow: hidden;
    background: #000;

    opacity: 0;
    transition: opacity 1s ease;
}

.locura-video-player__end-poster.is-visible {
    opacity: .75;
}

.locura-video-player__end-poster-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Centered replay PNG over the poster.
 */
.locura-video-player__replay-symbol {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 77px;
    height: 76px;

    background-image: url("/assets/images/tags/replay-icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    border: 0;
    border-radius: 0;

    color: transparent;
    font-size: 0;
    line-height: 0;
}
/*
 * End locura video tag elements.
 */

/* .albums — used in sidebar-custom.php for the photo-gallery links
   (1990s Photos, Flyers, Artwork, Gifs, etc. — the row of sidebar
   thumbnail links on the homepage). */
.albums {
   	text-align: center;
	padding: 0px;
}

.albums img {
	opacity:1;
	/* Images are inline by default and pick up the browser's norma — see CSS-NOTES.md [N031] */
	display: block;
}

.albums:hover img {
	opacity:.93;
}

.albums:active img {
	opacity:1.0;
}

/* #topper/#botter (standard-width rack end-caps) replaced by — see CSS-NOTES.md [N032] */

/* .artifactowrap — see CSS-NOTES.md [N033] */
.artifactowrap {
	background-color: #000000;
	width: 1074px;
	height: 920px;
	margin: 0px 0px -12px 12px;
	text-align:center;
}

/* .artifactowrap iframe — see CSS-NOTES.md [N034] */
.artifactowrap iframe {
	display: block;
	border: 0;
}

/* .fullwrap — replaced by .rack-paper--narrow (see =Rack Frame — see CSS-NOTES.md [N035] */

/* #vidbox — replaced by .rack-screen (see =Rack Frame). */

/* .musicshelf — used in loop-customcat.php's "music" category
   branch (the /music archive listing). */
.musicshelf {
	margin: 0px 0px 0px 13px;
	width: 1074px;
}

.musicplayer {
	background-image: url(/assets/images/structure/imradio-rack.png);
	background-repeat: no-repeat;
	margin: 0px 0px 0px 3px;
	width: 1094px;
	height: 270px;
}

/* .rackmountcredits — replaced by .rack-content/.rack-content--credits
   (see =Rack Frame). */

/* .rackmountzines — replaced by .rack-content/.rack-content--zines
   (see =Rack Frame). */

/* .rackmountplacer — see CSS-NOTES.md [N036] */
.rackmountplacer {
	text-align:center;
	width:1074px;
}

.rackmountplacer img {
	width:537px;
	height: auto;
	float: left;
}

/* .blurb — see CSS-NOTES.md [N037] */
.blurb {
	font-size: 1.2em;
	line-height: 1.4em;
	width: 90%;
	margin: 0 auto;
	padding: 1em;
	text-align:left;
}

/* .albumgallery — used in loop-page.php (catsingle.php also used
   it before its 2026 rack-frame conversion). */
.albumgallery {
	text-align:center;
	margin-left: 5px;
}

/* .albumgallery p — see CSS-NOTES.md [N038] */
.albumgallery p {
	margin: 0;
}

/* .albumgallery br — see CSS-NOTES.md [N039] */
.albumgallery br {
	display: none;
}

/* .albumgallery .albums:nth-of-type(2) img — see CSS-NOTES.md [N040] */
.albumgallery .albums:nth-of-type(2) img {
	margin-top: -12px;
}

.albumgallery .albums:nth-of-type(3) img {
	margin-top: -17px;
}

.albumgallery .albums:nth-of-type(4) img {
	margin-top: -10px;
}

.albumgallery .albums:nth-of-type(5) img {
	margin-top: -9px;
}

/* .albumgallery .albums:nth-of-type(1) img — see CSS-NOTES.md [N041] */
.albumgallery .albums:nth-of-type(1) img {
	margin-top: -7px;
	clip-path: inset(7px 0 0 0);
}

.albumgallery .albums:nth-of-type(5) img {
	margin-bottom: -6px;
	clip-path: inset(0 0 6px 0);
}

/* .rackmountwidetext — used only in text.php. */

/* (.rackmountwidetext and .rackmountwideimg used to live here  — see CSS-NOTES.md [N042] */

/* (.rackmountwideblog used to live here — replaced by — see CSS-NOTES.md [N043] */

/* .rackmountmerch — used in loop-customcat.php's "merch" category
   branch (the /merch archive listing). margin:0 cancels the
   browser's default <figure> margin (1em 40px) so nothing shifts. */
.rackmountmerch {
	margin: 0;
	text-align: left;
	padding: 0px 0px 0px 12.5px;
}

/* .rackmountmerch img — see CSS-NOTES.md [N044] */
.rackmountmerch img{
	width: 538px;
	height: auto;
	float: left;
}

.rackmountmerch:hover img {
	opacity:.96;
}

.rackmountmerch:active img {
	opacity:.98;
}

/* .rotating-css — see CSS-NOTES.md [N058] */
.rotating-css {
    animation: rotating .1s linear;
    animation-iteration-count: 5;
}
/****************************
    End Rotate
**********************************************/
/* Notepaper */

/* Used directly in post content, not applied by any template — — see CSS-NOTES.md [N085] */
.notepaper {
  position: relative;
  margin: 1rem auto;
  padding: 0 1.5rem 0.3125rem 0.9375rem; /* 0 15px 5px 15px → rem */
  width: 31.25rem; /* 500px → rem (500/16 = 31.25) */
  color: #6a5f49;
  text-shadow: 0 1px 1px white;
  background-color: #fefff5;
  background-image: 
    radial-gradient(circle farthest-corner at center, 
      rgba(255,255,255,0.7) 0%, 
      rgba(255,255,255,0.1) 90%
    ),
    repeating-linear-gradient(
      transparent 0 29px, 
      rgba(239,207,173,0.7) 29px 30px
    );
  border: 1px solid rgba(195,186,170,0.9);
  box-shadow: 
    inset 0 1px rgba(255,255,255,0.5), 
    inset 0 0 5px #d6ccb8, 
    0 0 1px rgba(0,0,0,0.1), 
    0 2px rgba(0,0,0,0.02);
  box-sizing: border-box; /* Inherits from universal reset */
}

.notepaper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.75rem; /* 28px → rem (28/16 = 1.75rem) + 15px padding (0.9375rem) */
  width: 2px;
  border-left: 2px solid rgba(239,207,173,0.9);
}

/* Background rotation effect */
.notepaper::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(242,246,193,0.9);
  border: 1px solid rgba(170,157,134,0.7);
  transform: rotate(2deg);
}

/* Quote attribution */
.notepaper .quote-by {
  font-family: 'MOM', monospace;
  display: block;
  padding-left: 2.5rem; /* 40px → rem */
  text-align: left;
  font-size: 0.625rem; /* 10px → rem */
  font-style: italic;
  color: #84775c;
  line-height: 1.2;
}


/* ==========================================================================
   SECTION 10 — Post, blog & zine typography
   -----------------------------------------------------------------------
   Body copy for blog/zine posts, captions, and WordPress image alignment classes. Deliberately ahead of the gallery systems: .blogtext img and .wahnsinn-grid img have equal specificity and the hoofsip page nests a grid inside blog text, so flipping these two puts 3.2px of padding on every grid image.
   ========================================================================== */

.entry-title,
.page-title,
.wp-caption-text {
	font-family: 'MOM';
}

.hentry {
	margin: 0 0 48px 0;
}

.page-title {
	font-size: 14px;
	margin: 0 0 36px 0;
}

.entry-title a:link,
.entry-title a:visited {
	color: #ff3c00;
	text-decoration: none;
}

.entry-title a:active,
.entry-title a:hover {
	color: #ff4b33;
}

/* .entry-content (+1 more) — see CSS-NOTES.md [N090] */
.entry-content,
.entry-summary {
	clear: both;
	padding: 24px 0 0 0;
}

/* .alignleft (+1 more) — see CSS-NOTES.md [N094] */
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-left: 24px;
	margin-top: 4px;
}

.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 4px;
}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Used directly in post content, not applied by any template — a
   very common image-float/spacing helper (60+ matches across posts),
   typically on small inline thumbnail links. */
.goleft {
	display: inline;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 4px;
	margin-bottom: 4px;
}

/* Used directly in post content, not applied by any template —
   small bordered caption/image card, seen on at least one post. */
.smaption {
	background: transparent;
	font-family: 'traveling';
	border-style: solid;
	border-width: 1px;
	border-color: #36454F;
	font-size: 85%;
	line-height: 22px;
	max-width: 196px;
	padding: 5px;
	margin: 10px;
	text-align: center;
	float: left;
}

.smaption img {
	margin: 0px 0px 0;
	border-style: double;
	border-color: #71797E;
	border-width: 2px;
}

/* .wp-caption — WordPress core's automatic wrapper around any image
   that has a caption set in the editor. Confirmed genuinely used
   across the site. */
.wp-caption {
	background: #F8F0E3;
	border-style: solid;
	border-width: 1px;
	border-color: #36454F;
	font-size: 75%;
	line-height: 22px;
	max-width: 640px !important; /* prevent too-wide images from breaking layout */
	padding: 10px;
	text-align: center;
}

.wp-caption em {
	font-size: 100%;
}

.wp-caption img {
	margin: 0px;
	border-style: double;
	border-color: #71797E;
	border-width: 0px;
}
/****************************
    End WP Images
**********************************************/

/* #zinebg — see CSS-NOTES.md [N105] */
#zinebg  {
	background: url('/assets/images/structure/paper-tiled.gif') 0px 0;
	width: 99.8%;
}

.blogtext {
	font-family: 'traveling';
	width: 90%;
	text-align:left;
	margin-left: 35px;
	padding-bottom: 30px;
	font-size: 24px;
	line-height: 32px;
}

.blogtext p, .blogtext span {
	font-family: 'traveling';
	font-size: 24px;
}

.blogtext strong {
	font-family: 'traveling';
	font-weight: bold;
	font-size: 24px;
}

.blogtext h1 {
	font-family: 'MOM';
	text-align:center;
	text-transform:uppercase;
	font-weight: normal;
	font-size: 40px;
	line-height: 52px;
}

.blogtext h2 {
	font-family: 'MOM';
	text-align:center;
	font-weight: normal;
	font-size: 30px;
	line-height: auto;
}

/* text-transform was declared twice here — `uppercase`, then `none`.
   The later one always won, so blog h3s have never rendered uppercase;
   the dead `uppercase` declaration has been removed. */
.blogtext h3 {
	font-family: 'sears';
	font-weight: normal;
	text-align:center;
	font-size: 25px;
	line-height: auto;
	text-transform: none;
	color: #000000;
}

.blogtext h4 {
	font-family: 'scratch';
	text-transform:uppercase;
	text-align:center;
	font-size: 30px;
	line-height: auto;
	color: #ff3c00;
}

.blogtext h5 {
	font-family: 'sears';
	text-transform: none;
	text-align:center;
	font-size: 18px;
	line-height: auto;
}

.blogtext h6 {
		font-family: 'sears';
		font-size: 28px;
    text-shadow: -1.2px -1.2px 0.2px #ffffff,
             -2.4px -2.4px 0.4px #b559d0,
             -3.6px -3.6px 0.6px #d27fdb,
             -4.8px -4.8px 0.8px #7e5cc9,
             -6px -6px 1px #cd7dd3,
             -7.2px -7.2px 1.2px #9b63d4,
             -8.4px -8.4px 1.4px #9577d5,
             -9.6px -9.6px 1.6px #c164ca,
             -10.8px -10.8px 1.8px #bb7dd1,
             -12px -12px 2px #a155c4;
	text-align:center;
}

.blogtext img {
	padding: .2rem;
}

.blogtext a {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

.blogtext a:visited {
	color: #808080;
}


/* ==========================================================================
   SECTION 11 — Gallery systems
   -----------------------------------------------------------------------
   Masonry, lightbox button, carousel, grid and the hoofsip post grid.
   ========================================================================== */

/* .masonry-item — see CSS-NOTES.md [N119] */
.masonry-item {
	margin: 0 0 13px 0;
	break-inside: avoid;
}

.masonry-item a {
	display: block;
}

.masonry-item img {
	width: 100%;
	display: block;
	transition: filter 0.15s ease-in-out;
}

/* =Gallery Lightbox permalink button
   see CSS-NOTES.md [N121]
*/
.gallery-permalink-btn {
	position: absolute;
	z-index: 99999;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.32);
	cursor: pointer;
}

/* Inline SVG injected by gallery-lightbox-init.js, sourced from
   assets/images/glyphs/link-icon.svg. */
.gallery-permalink-btn__icon {
	width: 28px;
	height: auto;
	color: #fff;
}

.gallery-permalink-btn:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

/* =Gallery Carousel
   see CSS-NOTES.md [N123]
*/
.wahnsinn-carousel {
	margin: 20px 0;
}

.wahnsinn-carousel .splide__slide img {
	width: 100%;
	display: block;
	transition: filter 0.15s ease-in-out;
}

.wahnsinn-carousel .splide__arrow {
	background: rgba(0, 0, 0, 0.32);
	opacity: 1;
}

.wahnsinn-carousel .splide__arrow svg {
	fill: #fff;
}

.wahnsinn-carousel .splide__arrow:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.7);
}

.wahnsinn-carousel .splide__pagination__page {
	background: rgba(0, 0, 0, 0.32);
}

.wahnsinn-carousel .splide__pagination__page.is-active {
	background: rgba(0, 0, 0, 0.7);
}

/* =Gallery Grid
   see CSS-NOTES.md [N124]
*/
.wahnsinn-grid {
	display: grid;
	grid-template-columns: repeat(var(--wahnsinn-grid-cols, 6), 1fr);
	gap: 4px;
}

.wahnsinn-grid a {
	position: relative;
	display: block;
}

.wahnsinn-grid img {
	width: 100%;
	display: block;
	aspect-ratio: var(--wahnsinn-grid-aspect-ratio, 17 / 22);
	object-fit: cover;
	padding: 0;
}

/* .wahnsinn-grid a::after — see CSS-NOTES.md [N125] */
/* .wahnsinn-grid a::after inset fix — see CSS-NOTES.md [N300] */
.wahnsinn-grid a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #333333;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.wahnsinn-grid a:hover::after {
	opacity: 0.15;
}

/* =Hoofsip Grid
   see CSS-NOTES.md [N126]
*/
.wahnsinn-hoofsip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.wahnsinn-hoofsip-grid-item {
	display: flex;
	flex-direction: column;
	background: url('/assets/images/structure/paper-tiled.gif') 0px 0;
}

.wahnsinn-hoofsip-grid-cover {
	position: relative;
	display: block;
	overflow: hidden;
}

.wahnsinn-hoofsip-grid-cover img {
	width: 100%;
	display: block;
	aspect-ratio: 17 / 22;
	object-fit: cover;
}

/* .wahnsinn-hoofsip-grid-cover::after inset fix — see CSS-NOTES.md [N301] */
.wahnsinn-hoofsip-grid-cover::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #333333;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.wahnsinn-hoofsip-grid-cover:hover::after {
	opacity: 0.3;
}

.wahnsinn-hoofsip-grid-title {
	display: block;
	font-size: 14px;
	line-height: 16px; /* the ambient inherited line-height here is ~29px for a 14px font — nearly all the visible space above/below this single line was that, not padding */
	color: #000000;
	text-align: center;
	padding: 3px 6px;
}

.wahnsinn-hoofsip-grid-title:visited {
	color: #000000;
}

.wahnsinn-hoofsip-grid-title:hover {
	color: #E00000;
}

.wahnsinn-hoofsip-grid-summary {
	display: block;
	overflow: hidden;
	height: 84px; /* 80px text area (5 lines at 16px line-height) + 4px bottom padding — this theme is sitewide box-sizing:border-box, so height has to include padding or it eats into the text area */
	font-size: 12px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	padding: 0 6px 4px;
}


/* ==========================================================================
   SECTION 12 — Footer
   -----------------------------------------------------------------------
   Site footer and its copyright line.
   ========================================================================== */

/****************************
    Footer
   see CSS-NOTES.md [N097]
**********************************************/
#footer {
	position: relative;
	background-image: url(/assets/images/structure/footer.png);
	background-repeat: no-repeat;
	height: 46px;
	width: 1100px;
	margin-bottom: 0px;
	text-align: center;
}

/* #footer p — see CSS-NOTES.md [N098] */
#footer p {
	font-family: 'quanta', monospace;
	color: #ff3c00;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform:uppercase;
	text-shadow: 1px 1px 4px #ff3c00, -1px -1px 4px #ff3c00;
	line-height: 46px;
	margin: 0px;
}

/* #footer .cg-footer — see CSS-NOTES.md [N099] */
/* #footer .cg-footer inset fix — see CSS-NOTES.md [N296] */
#footer .cg-footer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
	white-space: pre;
	/* .cg's own cg-colordrift animation carries a constant filter: — see CSS-NOTES.md [N100] */
	--cg-blur: 0.0875em;
	/* align-items:center above centers the LINE BOX, not the visib — see CSS-NOTES.md [N101] */
	padding-bottom: 0.2em;
}
/****************************
    End Footer
**********************************************/


/* ==========================================================================
   SECTION 13 — Animations (@keyframes)
   -----------------------------------------------------------------------
   Shared keyframes referenced by name from the sections above.
   ========================================================================== */

/* @keyframes glower — see CSS-NOTES.md [N054] */
@keyframes glower {
  from { text-shadow: 0 0 9px red; }
  50% { text-shadow: 0 0 7px #cc3300; }
  to { text-shadow: 0 0 9px red; }
}

/* @keyframes facebreathe — see CSS-NOTES.md [N055] */
@keyframes facebreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/****************************
    end update glow text elements
**********************************************/

/* Make the element rotate infinitely. */

/* This comment block (and the vendor-prefixed -ms-/-moz-/-webk — see CSS-NOTES.md [N056] */

/* @keyframes rotating — see CSS-NOTES.md [N057] */
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* ==========================================================================
   SECTION 14 — Quanta Microgen 100 character generator
   -----------------------------------------------------------------------
   A self-contained CRT/broadcast text effect. Its own custom properties and keyframes.
   ========================================================================== */

/* Quanta Microgen 100 Character Generator. Single-element usag — see CSS-NOTES.md [N295] */

/* =========================================
   Alignment
========================================= */
.cg-align-left {
  text-align: left;
  justify-content: flex-start;
}

.cg-align-center {
  text-align: center;
  justify-content: center;
}

.cg-align-right {
  text-align: right;
  justify-content: flex-end;
}

/* =========================================
   Base CG Effect
========================================= */
.cg {
  -webkit-text-size-adjust: 100%;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  isolation: isolate;
  box-sizing: border-box;
  background: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;

  text-shadow:
    0 0 0.25px rgba(255, 255, 255, 0.35),
    0 0 0.5px rgba(255, 255, 255, 0.21),
    0 0 1.1px rgba(255, 255, 255, 0.105),
    0 1.5px 0 #000,
    0 -1.5px 0 #000,
    1.5px 0 0 #000,
    -1.5px 0 0 #000,
    -1.25px 0 0 rgba(255, 42, 42, 0.05),
    1.25px 0 0 rgba(42, 212, 255, 0.05),
    3.6px 0 2.7px rgba(255, 0, 60, 0.27),
    -3.6px 0 2.7px rgba(0, 200, 255, 0.27),
    -5.6px 0.8px 1.2px rgba(255, 255, 255, 0.14);

  animation:
    cg-jitter 0.15s steps(2, jump-none) infinite,
    cg-flicker 4s linear infinite,
    cg-tracking-clip 2.5s steps(1) infinite,
    cg-colordrift 6s ease-in-out infinite;
}

/* .cg::before inset fix — see CSS-NOTES.md [N297] */
.cg::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: inherit;
  box-sizing: border-box;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;

  --d1: 0;
  --d2: 0;

  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, var(--d1)) 0px,
      rgba(255, 255, 255, var(--d1)) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, var(--d2)) 0px,
      rgba(255, 255, 255, var(--d2)) 1px,
      transparent 1px,
      transparent 77px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 5px
    );

  background-blend-mode: screen, screen, overlay, multiply;

  animation:
    cg-noise-shift 0.4s steps(4) infinite,
    cg-dropout-flicker 2s steps(1) infinite;
}

/* =========================================
   Typography Presets
========================================= */
.cg-sidebar {
  font-family: 'quanta', monospace;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  padding: 24px 0 24px 0;
  color: #fe3527;
}

.cg-footer {
  font-family: 'quanta', monospace;
  font-weight: 400;
  font-size: 16px;
  color: #fe3527;
}

/* =========================================
   Animations
========================================= */
@keyframes cg-jitter {
  0%, 100% { transform: translate(0, 0); }
  8%  { transform: translate(0, 1.8px); }
  50% { transform: translate(0, 1.8px); }
  95% { transform: translate(0, 1.8px); }
  96% { transform: translate(0, 0); }
  97% { transform: translate(0, 1.8px); }
  98% { transform: translate(0, 0); }
}

@keyframes cg-tracking-clip {
  0%, 94%, 98%, 100% { clip-path: none; }
  95% { clip-path: inset(0 0 0 0); }
  96% { clip-path: inset(0 0 0 0); }
  97% { clip-path: inset(0 0 0 0); }
}

@keyframes cg-flicker {
  0%, 100% { opacity: 1; }
  55% { opacity: 0.99; }
  92% { opacity: 1; }
  93% { opacity: 0.98; }
  94% { opacity: 1; }
}

@keyframes cg-colordrift {
  0%, 100% {
    filter:
      contrast(0.963)
      saturate(0.933)
      blur(0.075px)
      blur(var(--cg-blur, 1.4px))
      hue-rotate(0deg);
  }

  50% {
    filter:
      contrast(0.963)
      saturate(1.296)
      blur(0.075px)
      blur(var(--cg-blur, 1.4px))
      hue-rotate(13deg);
  }
}

@keyframes cg-noise-shift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }

  25% {
    background-position: 0 0, 0 0, -20px 10px, 0 0;
  }

  50% {
    background-position: 0 0, 0 0, 15px -15px, 0 0;
  }

  75% {
    background-position: 0 0, 0 0, -10px -10px, 0 0;
  }

  100% {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes cg-dropout-flicker {
  0%, 80% {
    --d1: 0;
    --d2: 0;
  }

  81% {
    --d1: 0.5;
    --d2: 0;
  }

  83% {
    --d1: 0;
    --d2: 0;
  }

  84% {
    --d1: 0;
    --d2: 0.35;
  }

  86%, 100% {
    --d1: 0;
    --d2: 0;
  }
}


/* ==========================================================================
   SECTION 15 — RESPONSIVE — tablet (768–1024px)
   -----------------------------------------------------------------------
   Everything scoped to the tablet range, consolidated from 2 scattered blocks.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	/****************************
	    /vault + /blog Tablet Layout (768px-1024px — see Vault Work/
	    HANDOVER.md for the full rollout history)
	   see CSS-NOTES.md [N232]
	****************************/

	.mobile-shell #wrapper {
		position: relative;
		width: 100%;
		background-image: none;
	}

	/* .mobile-shell #wrapper::before (+1 more) — see CSS-NOTES.md [N233] */
	.mobile-shell #wrapper::before,
	.mobile-shell #wrapper::after {
		content: '';
		position: absolute;
		top: 0;
		width: 44px;
		height: 100%;
		background-image: url('/assets/images/structure/rackbars.png');
		background-repeat: repeat-y;
		z-index: -1;
		pointer-events: none;
	}

	.mobile-shell #wrapper::before {
		left: 0;
		background-position: left top;
	}

	.mobile-shell #wrapper::after {
		right: 0;
		background-position: right top;
	}

	/* .mobile-shell .single-30mom #content — see CSS-NOTES.md [N234] */
	.mobile-shell .single-30mom #content {
		width: calc(100% - 24px);
		margin: 0 auto;
	}

	/* .mobile-shell .rack-screen — see CSS-NOTES.md [N235] */

	.mobile-shell .rack-screen {
		width: 100%;
		margin: 0 auto;
		background-size: 100% auto;
	}

	.mobile-shell .rack-screen__inner {
		width: 60.0559%; /* 645/1074 */
		margin-left: 20.0186%; /* 215/1074 */
	}

	.mobile-shell .rack-cap--narrow {
		width: 100%;
		margin: 0 auto;
	}

	.mobile-shell .rack-cap--top.rack-cap--narrow {
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 2.7003%; /* 29/1074 */
	}

	.mobile-shell .rack-cap--bottom.rack-cap--narrow {
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 4.2831%; /* 46/1074 */
	}

	.mobile-shell .rack-paper--narrow {
		background-size: 100% auto;
		width: 100%;
		margin: 0 auto;
	}

	.mobile-shell .rack-paper--narrow .rack-content {
		width: 58.2867%; /* 626/1074 */
		margin-left: 20.7635%; /* 223/1074 */
	}

	/* .mobile-shell .rack-cap--wide — see CSS-NOTES.md [N236] */
	.mobile-shell .rack-cap--wide {
		width: 100%;
		margin: 0 auto;
	}

	.mobile-shell .rack-cap--top.rack-cap--wide {
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 4.5623%; /* 49/1074 */
	}

	.mobile-shell .rack-cap--bottom.rack-cap--wide {
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 7.1704%; /* 77/1074 */
	}

	.mobile-shell .rack-paper--wide {
		background-size: 100% auto;
		width: 100%;
		margin: 0 auto;
	}

	/* .mobile-shell .rack-paper--wide .rack-content — see CSS-NOTES.md [N237] */
	.mobile-shell .rack-paper--wide .rack-content {
		width: 97.3184%; /* 1045/1074 */
		margin-left: 1.2104%; /* 13/1074 */
	}

	/* .mobile-shell .rack-content--img img — see CSS-NOTES.md [N238] */
	.mobile-shell .rack-content--img img {
		width: 100%;
	}

	/* .mobile-shell .rack-content--text img — see CSS-NOTES.md [N239] */
	.mobile-shell .rack-content--text img {
		max-width: 100%;
		height: auto;
	}

	/* .blogtext's fixed margin-left:35px, same fix/reasoning as the
	   mobile block above — needs its own copy since this is a separate
	   media query. */
	.mobile-shell .rack-content--blog .blogtext {
		margin-left: 3.3493%;
	}

	/* .mobile-shell .rack-content--credits .notepaper (+1 more) — see CSS-NOTES.md [N240] */
	.mobile-shell .rack-content--credits .notepaper,
	.mobile-shell .rack-content--blog .notepaper {
		width: 100%;
		max-width: 31.25rem;
	}

	/* .mobile-shell .rack-content--blog .widestreamingbuttons — see CSS-NOTES.md [N241] */
	.mobile-shell .rack-content--blog .widestreamingbuttons {
		width: 100%;
		margin-left: 0;
	}

	.mobile-shell .rack-content--blog .widestreamingbuttons img {
		width: 30%;
	}

	/* .mobile-shell #fulltray — see CSS-NOTES.md [N242] */
	.mobile-shell #fulltray {
		background-size: 100% 100%;
		width: 100%;
		height: 0;
		padding-bottom: 7.3557%; /* 79/1074 */
		padding-left: 0;
		margin: 0 auto;
		position: relative;
	}

	.mobile-shell .fingerbuttonleft,
	.mobile-shell .fingerbuttonright {
		position: absolute;
		padding-top: 0;
		margin-left: 0;
		width: 8.9385%; /* 96/1074 */
		height: 89.8734%; /* 71/79 */
		bottom: 0;
	}

	.mobile-shell .fingerbuttonleft {
		left: 26.4432%; /* 284/1074 */
	}

	.mobile-shell .fingerbuttonright {
		left: 64.0596%; /* 688/1074 */
	}

	/* .mobile-shell .fingerbuttonleft a:link (+1 more) — see CSS-NOTES.md [N243] */
	.mobile-shell .fingerbuttonleft a:link,
	.mobile-shell .fingerbuttonleft a:visited {
		background-image: url('/assets/images/structure/fingerbuttonleft.png');
		background-repeat: no-repeat;
		background-size: 300% 100%;
		background-position: 0% 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.mobile-shell .fingerbuttonleft a:hover {
		background-position: 50% 0;
	}

	.mobile-shell .fingerbuttonleft a:active {
		background-position: 100% 0;
	}

	.mobile-shell .fingerbuttonright a:link,
	.mobile-shell .fingerbuttonright a:visited {
		background-image: url('/assets/images/structure/fingerbuttonright.png');
		background-repeat: no-repeat;
		background-size: 300% 100%;
		background-position: 0% 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.mobile-shell .fingerbuttonright a:hover {
		background-position: 50% 0;
	}

	.mobile-shell .fingerbuttonright a:active {
		background-position: 100% 0;
	}

	/* .mobile-shell #footer — see CSS-NOTES.md [N244] */
	.mobile-shell #footer {
		width: 100%;
		height: 0;
		padding-bottom: 4.1818%;
		background-size: 100% 100%;
		position: relative;
	}

	/* .mobile-shell #footer .cg-footer — see CSS-NOTES.md [N245] */
	.mobile-shell #footer .cg-footer {
		font-size: 1.4545vw;
	}

	/* .mobile-shell #hed (+1 more) — see CSS-NOTES.md [N246] */
	.mobile-shell #hed,
	.mobile-shell #hedsingle {
		width: 100%;
		height: auto;
	}

	.mobile-shell #hed img,
	.mobile-shell #hedsingle img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* ===== Nav bar: same #mobiletopmenu/#mobilenavlisttop bar the — see CSS-NOTES.md [N247] */

	/* 5 columns x 2 rows, matching the item count (10) and the — see CSS-NOTES.md [N248] */
	/* .mobile-shell #mobiletopmenu — see CSS-NOTES.md [N249] */
	.mobile-shell #mobiletopmenu {
		width: 100%;
		margin: 0;
		height: 0;
		padding-bottom: 19.0909%;
		background-image: url('/assets/images/structure/mobiletopmenu.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	/* .mobile-shell #mobilenavlisttop — see CSS-NOTES.md [N250] */
	.mobile-shell #mobilenavlisttop {
		position: absolute;
		top: 0;
		left: 1.1818%;
		right: 1%;
		bottom: 4.7619%;
		/* The unscoped base rule (search "#mobilenavlisttop{" above) — see CSS-NOTES.md [N251] */
		width: auto;
		height: auto;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: 1.7658%;
		row-gap: 0;
		margin: 0;
	}

	/* .mobile-shell #mobilenavlisttop .mobilebutton (+3 more) — see CSS-NOTES.md [N252] */
	.mobile-shell #mobilenavlisttop .mobilebutton,
	.mobile-shell #mobilenavlisttop .currentmobilebutton,
	.mobile-shell #mobilenavlisttop .epmobilebutton,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton {
		float: none;
		width: 100%;
		height: 0;
		padding-bottom: 50%;
		margin: 0;
		position: relative;
		background-repeat: no-repeat;
		background-size: 300% 100%;
	}

	/* .mobile-shell #mobilenavlisttop .mobilebutton a (+3 more) — see CSS-NOTES.md [N253] */
	.mobile-shell #mobilenavlisttop .mobilebutton a,
	.mobile-shell #mobilenavlisttop .currentmobilebutton a,
	.mobile-shell #mobilenavlisttop .epmobilebutton a,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton a {
		position: absolute;
		inset: 0;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .mobile-shell .mobilebutton — see CSS-NOTES.md [N254] */
	.mobile-shell .mobilebutton {
		background-image: url('/assets/images/structure/mobilebutton.png');
		background-position: 0% 0;
	}

	.mobile-shell .currentmobilebutton {
		background-image: url('/assets/images/structure/mobilebutton.png');
		background-position: 100% 0;
	}

	.mobile-shell .epmobilebutton {
		background-image: url('/assets/images/structure/epbutton.png');
		background-position: 0% 0;
	}

	.mobile-shell .currentepmobilebutton {
		background-image: url('/assets/images/structure/epbutton.png');
		background-position: 50% 0;
	}

	/* .mobile-shell .mobilebutton a:hover (+7 more) — see CSS-NOTES.md [N255] */
	.mobile-shell .mobilebutton a:hover,
	.mobile-shell .mobilebutton a:active,
	.mobile-shell .currentmobilebutton a:hover,
	.mobile-shell .currentmobilebutton a:active,
	.mobile-shell .epmobilebutton a:hover,
	.mobile-shell .epmobilebutton a:active,
	.mobile-shell .currentepmobilebutton a:hover,
	.mobile-shell .currentepmobilebutton a:active {
		background-size: 300% 100%;
		background-position: 50% 0;
	}

	/* .mobile-shell #mobilenavlisttop .mobilebutton (+7 more) — see CSS-NOTES.md [N256] */
	.mobile-shell #mobilenavlisttop .mobilebutton,
	.mobile-shell #mobilenavlisttop .currentmobilebutton,
	.mobile-shell #mobilenavlisttop .epmobilebutton,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton,
	.mobile-shell #mobilenavlisttop .mobilebutton a,
	.mobile-shell #mobilenavlisttop .currentmobilebutton a,
	.mobile-shell #mobilenavlisttop .epmobilebutton a,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton a {
		font-size: 2.764vw;
	}

	/* .category-vault .vault3 — see CSS-NOTES.md [N257] */
	.category-vault .vault3 {
		float: left;
		clear: none;
		padding: 0;
		margin: 0;
		width: 50%;
	}

	/* .category-vault .preview — see CSS-NOTES.md [N258] */
	.category-vault .preview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1%;
		position: relative;
		margin: 0;
	}

	.category-vault .preview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-vault .preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* .category-vault .vhssm — see CSS-NOTES.md [N259] */
	.category-vault .vhssm {
		width: 100%;
		height: 0;
		padding-bottom: 19.13%;
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		padding-left: 0;
		font-size: 3vw;
		word-spacing: -0.145vw;
	}

	.category-vault .vhssm a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: normal;
	}

	/* .category-blog .micro — see CSS-NOTES.md [N260] */
	.category-blog .micro {
		float: left;
		clear: none;
		margin: 0;
		width: 50%;
	}

	.category-blog .cart {
		width: 100%;
		height: 0;
		padding-bottom: 25.94%; /* 138/532, same ratio as mobile - unchanged by box width */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
	}

	.category-blog .cart a {
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		padding: 0;
	}

	/* .category-blog .cartspine — see CSS-NOTES.md [N261] */
	.category-blog .cartspine {
		top: 0;
		height: 50%; /* 69/138 */
		align-items: flex-end;
		font-size: 2.14vw; /* 4.5 * 0.474609375, not a naive half - see comment above */
		word-spacing: -0.09vw; /* -0.19 * 0.474609375 */
		letter-spacing: 0.018vw; /* 0.038 * 0.474609375 */
	}

	.category-blog .cart a:not(.cartspine) {
		top: 50%; /* 69/138 */
		height: 13.77%; /* 19/138 */
		align-items: flex-start;
	}

	/* .category-blog .cart p — see CSS-NOTES.md [N262] */
	.category-blog .cart p {
		width: 100%;
		padding: 0 6.58%; /* 35/532, relative to .cart's own width - unchanged by box width */
		margin: 0;
		font-size: 1.23vw; /* 2.6 * 0.474609375, not a naive half - see .cartspine's comment above */
		word-spacing: -0.09vw; /* -0.19 * 0.474609375 */
		letter-spacing: 0.018vw; /* 0.038 * 0.474609375 */
		line-height: normal;
		text-align: center;
		overflow-wrap: break-word; /* same narrow safety net as the mobile block above - see that rule's own comment for exactly what this does and doesn't do */
	}

	/* .category-episodes .epcon — see CSS-NOTES.md [N263] */
	.category-episodes .epcon {
		float: none;
		clear: both;
		margin: 0;
		width: 100%;
	}

	.category-episodes .vhsl {
		width: 100%;
		height: 0;
		padding-bottom: 17.78%; /* 191/1074, unchanged by box width */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		font-size: 5.59vw; /* 5.77 * 0.96875 */
		word-spacing: -0.090vw; /* -0.093 * 0.96875 */
		line-height: normal;
	}

	.category-episodes .vhsl a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ===== /music archive: .musicplayer's own aspect-ratio box (same
   see CSS-NOTES.md [N264]
*/
	.category-music .musicplayer {
		width: 100%;
		height: 0;
		padding-bottom: 24.68%; /* 270/1094, unchanged by box width */
		background-size: 100% 100%;
		margin: 0;
	}

	.category-music .musicshelf,
	.category-music .rackmountplacer {
		width: 100%;
		margin: 0;
	}

	.category-music .rackmountplacer img {
		width: 50%;
	}

	/* .mobile-shell .albumgallery — see CSS-NOTES.md [N265] */
	.mobile-shell .albumgallery {
		margin: 0;
	}

	/* .albumgallery .albums — same rescope and same reasoning as the
	   Mobile Layout block's own copy of this fix above. */
	.mobile-shell .albumgallery .albums {
		display: block;
		width: 100%;
	}

	.mobile-shell .albumgallery .albums img {
		width: 100%;
		height: auto;
	}

	/* :nth-child(N of .albums), not :nth-of-type(N) — counts position
	   among .albums siblings specifically, same defensive reasoning as
	   /Main Tablet Layout's .thevault rule further down. */
	.mobile-shell .albumgallery .albums:nth-child(2 of .albums) img {
		margin-top: -1.1483%; /* -12/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(3 of .albums) img {
		margin-top: -1.6268%; /* -17/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(4 of .albums) img {
		margin-top: -0.9569%; /* -10/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(1 of .albums) img {
		margin-top: -0.6699%; /* -7/1045 */
		clip-path: inset( 4.7619% 0 0 0 ); /* 7/147 */
	}
	.mobile-shell .albumgallery .albums:nth-child(5 of .albums) img {
		margin-top: -0.8612%; /* -9/1045 */
		margin-bottom: -0.5742%; /* -6/1045 */
		clip-path: inset( 0 0 4.0816% 0 ); /* 6/147 */
	}

	/* .category-merch .rackmountmerch — see CSS-NOTES.md [N266] */
	.category-merch .rackmountmerch {
		padding: 0;
	}

	.category-merch .rackmountmerch img {
		width: 50%;
	}

	/* ===== /photos archive: 3 columns at tablet (down from desktop's
   see CSS-NOTES.md [N267]
*/
	.mobile-shell .rack-content--gallery {
		column-count: var(--wahnsinn-gallery-cols-tablet, 3);
		column-gap: 1.2440%; /* 13/1045 */
		padding: 1.2440% 0;
	}

	.mobile-shell .masonry-item {
		margin: 0 0 1.2440% 0;
	}

	/* ===== /gifs archive: 2 columns at tablet (down from desktop's
   see CSS-NOTES.md [N268]
*/
	.category-gifs .vault3 {
		float: left;
		clear: none;
		padding: 0;
		margin: 0;
		width: 50%;
	}

	.category-gifs .gifpreview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1571%; /* 263.2/350.2 */
		position: relative;
		margin: 0;
	}

	.category-gifs .gifpreview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-gifs .gifpreview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* ===== /zines archive: 2 columns at tablet (down from desktop's
   see CSS-NOTES.md [N269]
*/
	.category-zines .vault3 {
		float: left;
		clear: none;
		padding: 0;
		margin: 0 0 2.1416% 0; /* row gap — half of the mobile block's 4.2833%, per the owner's 2026-07-31 ask; unaffected by the column-width change above since it's independent of the gutter's own placement */
		width: 48.9292%; /* (100% - 2.1416% gutter) / 2 — NOT a plain 50%, so a real gutter fits between columns with both outer edges still flush */
	}

	/* .category-zines .vault3:nth-child(2n of .vault3) — see CSS-NOTES.md [N270] */
	.category-zines .vault3:nth-child(2n of .vault3) {
		margin-left: 2.1416%; /* the actual gutter — only before the second/right column, so the first/left column stays genuinely flush against #content's own edge */
	}

	.category-zines .boxpreview {
		width: 100%;
		height: 0;
		padding-bottom: 129.0691%; /* 452/350.2 */
		position: relative;
		margin: 0;
	}

	.category-zines .boxpreview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-zines .boxpreview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* .mobile-shell .wahnsinn-hoofsip-grid — see CSS-NOTES.md [N271] */
	.mobile-shell .wahnsinn-hoofsip-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mobile-shell .wahnsinn-hoofsip-grid-title {
		font-size: 1.5595vw; /* 14/149 × 100/3 × 0.553268 × 0.90 */
		line-height: 1.7823vw; /* 16/149 × 100/3 × 0.553268 × 0.90 */
		padding: 0.3342vw 0.6684vw; /* 3/149, 6/149 × 100/3 × 0.553268 × 0.90 */
	}

	.mobile-shell .wahnsinn-hoofsip-grid-summary {
		height: 9.3573vw; /* 84/149 × 100/3 × 0.553268 × 0.90 */
		font-size: 1.3368vw; /* 12/149 × 100/3 × 0.553268 × 0.90 */
		line-height: 1.7823vw; /* 16/149 × 100/3 × 0.553268 × 0.90 */
		padding: 0 0.6684vw 0.4456vw; /* 6/149, 4/149 × 100/3 × 0.553268 × 0.90 */
	}

	/* .mobile-shell.error404 .main-columns — see CSS-NOTES.md [N272] */
	.mobile-shell.error404 .main-columns {
		flex-direction: column;
		gap: 0;
		width: calc(100% - 24px);
		margin: 0 auto;
	}

	.mobile-shell.error404 #leftmenu {
		width: 100%;
		margin-left: 0;
	}

	/* #leftmenu li img's display:block fix applies here too via the
	   plain .mobile-shell #leftmenu li img rule under "/Main Tablet
	   Layout" below — see the mobile block's own copy of this note. */

	.mobile-shell.error404 .sidebargif {
		width: 100%;
		margin-left: 0;
	}

	/* order:-1 — same reordering as the mobile block's own copy above:
	   .wrap's 404.gif renders first, sidebar gif last, right above
	   the footer. */
	.mobile-shell.error404 #container.one-column {
		flex: none;
		width: 100%;
		min-width: 0;
		order: -1;
	}

	/* .mobile-shell .artifactowrap — see CSS-NOTES.md [N273] */
	.mobile-shell .artifactowrap {
		width: 100%;
		height: auto;
		margin: 0;
	}

	/* .rack-content--img's own geometry (900/984 fixed-to-fluid) is
	   shared with mobile — see the merged @media(max-width:1024px)
	   rule after "End /404 Mobile Layout". */
	.mobile-shell .artifactowrap .rack-content--img iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/****************************
	    End /vault + /blog Tablet Layout
	**********************************************/

	/****************************
	    /Main Tablet Layout — main.php, the site's actual front page.
	   see CSS-NOTES.md [N274]
	**********************************************/

	/* .mobile-shell .mainpromo — see CSS-NOTES.md [N275] */
	.mobile-shell .mainpromo {
		width: 100%;
		height: auto;
	}

	/* .mobile-shell .main-columns — see CSS-NOTES.md [N276] */
	.mobile-shell .main-columns {
		position: relative;
		width: calc(100% - 24px);
		margin: 0 auto;
		gap: 1.1636%; /* 12.8/1100 */
	}

	/* .mobile-shell .main-columns::before — see CSS-NOTES.md [N277] */
	.mobile-shell .main-columns::before {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		left: 31.8364%; /* matches #leftmenu's width below */
		width: 1.1636%; /* matches .main-columns' own gap above */
		background-image: url('/assets/images/structure/rackbars.png');
		background-repeat: repeat-y;
		background-position: -363.2px 0;
		z-index: -1;
		pointer-events: none;
	}

	/* .mobile-shell #leftmenu — see CSS-NOTES.md [N278] */
	.mobile-shell #leftmenu {
		width: 31.8364%; /* 350.2/1100 */
		margin-left: 0;
		flex-shrink: 0;
	}

	/* Same fix and reasoning as the Mobile Layout block's own copy —
	   needs its own copy since this is a separate media query. */
	.mobile-shell #leftmenu li img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* .sidebarmiddle — same fix and reasoning as the Mobile Layout
	   block's own copy above. */
	.mobile-shell .sidebarmiddle {
		background-size: 100% 6px;
	}

	/* .mobile-shell .sidebargif (+1 more) — see CSS-NOTES.md [N279] */
	.mobile-shell .sidebargif,
	.mobile-shell .sidebarflyer {
		width: 100%;
		margin-left: 0;
	}

	/* .mobile-shell .one-column#container — see CSS-NOTES.md [N280] */
	.mobile-shell .one-column#container {
		position: relative;
		flex: 1;
		min-width: 0;
	}

	/* .mobile-shell .one-column#container::before — see CSS-NOTES.md [N281] */
	.mobile-shell .one-column#container::before {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		left: 49.1718%; /* matches .thevault's width further below */
		width: 1.6565%; /* matches .thevault:nth-child(2n of .thevault)'s margin-left further below */
		background-image: url('/assets/images/structure/rackbars.png');
		background-repeat: repeat-y;
		background-position: -726.2px 0;
		z-index: -1;
		pointer-events: none;
	}

	/* .mobile-shell .sidebarbottom — see CSS-NOTES.md [N282] */
	.mobile-shell .sidebarbottom {
		height: 0;
		padding-bottom: 11.1359%; /* 39/350.2 */
		background-size: 100% 100%;
	}

	/* .mobile-shell .thevault — see CSS-NOTES.md [N283] */
	.mobile-shell .thevault {
		float: left;
		clear: none;
		padding: 0;
		margin: 0;
		width: 49.1718%; /* (100% - 1.6565%) / 2 */
	}

	/* .mobile-shell .thevault:nth-child(2n of .thevault) — see CSS-NOTES.md [N284] */
	.mobile-shell .thevault:nth-child(2n of .thevault) {
		margin-left: 1.6565%; /* 12/724.4 */
	}

	/* .mobile-shell .thevault .preview — see CSS-NOTES.md [N285] */
	.mobile-shell .thevault .preview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1%; /* 263/350.2 */
		position: relative;
		margin: 0;
	}

	.mobile-shell .thevault .preview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.mobile-shell .thevault .preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* .mobile-shell .thevault .vhssm — see CSS-NOTES.md [N286] */
	.mobile-shell .thevault .vhssm {
		width: 100%;
		height: 0;
		padding-bottom: 19.13%; /* 67/350.2 */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		padding-left: 0;
		font-size: 1.73vw;
		word-spacing: -0.0823vw;
	}

	.mobile-shell .thevault .vhssm a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: normal;
	}

	/* .mobile-shell .vhs — see CSS-NOTES.md [N287] */
	.mobile-shell .vhs {
		width: 100%;
		height: 0;
		padding-bottom: 19.128%; /* 136/711, unchanged by box width */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		font-size: 3.465vw;
		word-spacing: -0.0824vw;
		line-height: normal;
	}

	.mobile-shell .vhs a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .mobile-shell .tray — see CSS-NOTES.md [N288] */
	.mobile-shell .tray {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 5.9072%; /* 42/711 */
		background-size: 100% 100%;
	}

	/* .mobile-shell .creditsbutton — see CSS-NOTES.md [N289] */
	.mobile-shell .creditsbutton {
		position: absolute;
		left: 41.3502%; /* 294/711 */
		top: 2.381%; /* 1/42 */
		width: 16.737%; /* 119/711 */
		height: 97.619%; /* 41/42 */
		padding: 0;
	}

	/* .mobile-shell .creditsbutton a:link (+3 more) — see CSS-NOTES.md [N290] */
	.mobile-shell .creditsbutton a:link,
	.mobile-shell .creditsbutton a:visited,
	.mobile-shell .creditsbutton a:hover,
	.mobile-shell .creditsbutton a:active {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 300% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.0725vw;
		letter-spacing: 0.0825vw;
	}
	.mobile-shell .creditsbutton a:link,
	.mobile-shell .creditsbutton a:visited {
		background-position: 0% 0;
	}
	.mobile-shell .creditsbutton a:hover {
		background-position: 50% 0;
	}
	.mobile-shell .creditsbutton a:active {
		background-position: 100% 0;
	}

	/* .mobile-shell .vaultcounter — see CSS-NOTES.md [N291] */
	.mobile-shell .vaultcounter {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 24.5714%; /* 86/350 */
		background-size: 100% 100%;
		margin-bottom: 2.8571%; /* 10/350 */
	}

	.mobile-shell .vaultbutton {
		position: absolute;
		left: 69.4286%; /* 243/350 */
		top: 50%; /* 43/86 */
		width: 18%; /* 63/350 */
		height: 33.7209%; /* 29/86 */
		padding: 0;
	}

	.mobile-shell .vaultbutton a:link,
	.mobile-shell .vaultbutton a:visited,
	.mobile-shell .vaultbutton a:hover,
	.mobile-shell .vaultbutton a:active {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 300% 100%;
	}
	.mobile-shell .vaultbutton a:link,
	.mobile-shell .vaultbutton a:visited {
		background-position: 50% 0;
	}
	.mobile-shell .vaultbutton a:hover {
		background-position: 0 0;
	}
	.mobile-shell .vaultbutton a:active {
		background-position: 100% 0;
	}

	.mobile-shell .streamingbuttons {
		width: 100%;
		margin-left: 0;
	}

	.mobile-shell .streamingbuttons img {
		width: 33.314%; /* 114.6/344 */
		height: auto;
	}

	.mobile-shell #leftmenu .albums {
		display: block;
		width: 100%;
	}

	.mobile-shell #leftmenu .albums img {
		width: 100%;
		height: auto;
	}

	.mobile-shell .sidetray {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 22.2857%; /* 78/350 */
		background-size: 100% 100%;
	}

	.mobile-shell .artibtn {
		position: absolute;
		left: 40%; /* 140/350 */
		top: 2.5641%; /* 2/78 */
		width: 20%; /* 70/350 */
		height: 94.8718%; /* 74/78 */
		padding: 0;
	}

	.mobile-shell .artibtn a:link,
	.mobile-shell .artibtn a:visited,
	.mobile-shell .artibtn a:hover,
	.mobile-shell .artibtn a:active {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 300% 100%;
	}
	.mobile-shell .artibtn a:link,
	.mobile-shell .artibtn a:visited {
		background-position: 50% 0;
	}
	.mobile-shell .artibtn a:hover {
		background-position: 100% 0;
	}
	.mobile-shell .artibtn a:active {
		background-position: 0 0;
	}

	/****************************
	    End /Main Tablet Layout
	**********************************************/
}


/* ==========================================================================
   SECTION 16 — RESPONSIVE — mobile (≤767px)
   -----------------------------------------------------------------------
   Everything scoped to mobile, consolidated from 14 scattered blocks.
   ========================================================================== */

@media (max-width: 767px) {
	.mobile-shell #wrapper {
		width: 100%;
		background-image: none;
	}

	.mobile-shell .single-30mom #content {
		width: 100%;
	}

	/* .mobile-shell .rack-screen — see CSS-NOTES.md [N141] */

	.mobile-shell .rack-screen {
		background-image: none;
		width: 100%;
		margin: 0 auto;
	}

	.mobile-shell .rack-screen__inner {
		width: 100%;
		margin-left: 0;
	}

	.mobile-shell .rack-cap--narrow,
	.mobile-shell .rack-cap--wide {
		width: 100%;
		margin: 0 auto;
	}

	/* .mobile-shell .rack-cap--top.rack-cap--narrow (+1 more) — see CSS-NOTES.md [N142] */
	.mobile-shell .rack-cap--top.rack-cap--narrow,
	.mobile-shell .rack-cap--top.rack-cap--wide {
		background-image: url(/assets/images/structure/mobile-rack-topper.png);
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 4.6178%;
	}

	.mobile-shell .rack-cap--bottom.rack-cap--narrow,
	.mobile-shell .rack-cap--bottom.rack-cap--wide {
		background-image: url(/assets/images/structure/mobile-rack-bottom.png);
		background-size: 100% 100%;
		height: 0;
		padding-bottom: 7.3248%;
	}

	/* .mobile-shell .rack-paper--narrow (+1 more) — see CSS-NOTES.md [N143] */
	.mobile-shell .rack-paper--narrow,
	.mobile-shell .rack-paper--wide {
		background-image: url(/assets/images/structure/mobile-rack-label.png);
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
		margin: 0 auto;
	}

	.mobile-shell .rack-paper--narrow .rack-content,
	.mobile-shell .rack-paper--wide .rack-content {
		width: 100%;
		margin-left: 0;
	}

	/* .mobile-shell .rack-content--blog .blogtext — see CSS-NOTES.md [N144] */
	.mobile-shell .rack-content--blog .blogtext {
		margin-left: 3.3493%;
	}

	/* .mobile-shell .rack-content--img img — see CSS-NOTES.md [N145] */
	.mobile-shell .rack-content--img img {
		width: 100%;
	}

	/* .mobile-shell .rack-content--blog img.alignleft (+1 more) — see CSS-NOTES.md [N146] */
	.mobile-shell .rack-content--blog img.alignleft,
	.mobile-shell .rack-content--blog img.alignright {
		max-width: 42%;
		height: auto;
	}

	/* .mobile-shell .rack-content--blog .wp-caption — see CSS-NOTES.md [N147] */
	.mobile-shell .rack-content--blog .wp-caption {
		display: block;
	}

	/* Centered (or unclassed) captions: treated as a full-width,
	   non-floating block — these read fine as a bigger, standalone
	   photo at any width, confirmed live on real posts. */
	.mobile-shell .rack-content--blog .wp-caption:not(.alignleft):not(.alignright) {
		width: 100% !important;
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* .mobile-shell .rack-content--blog .wp-caption.alignleft (+1 more) — see CSS-NOTES.md [N148] */
	.mobile-shell .rack-content--blog .wp-caption.alignleft,
	.mobile-shell .rack-content--blog .wp-caption.alignright {
		max-width: 42% !important;
	}

	/* .mobile-shell .rack-content--blog .widestreamingbuttons — see CSS-NOTES.md [N149] */
	.mobile-shell .rack-content--blog .widestreamingbuttons {
		width: 100%;
		margin-left: 0;
	}

	.mobile-shell .rack-content--blog .widestreamingbuttons img {
		width: 30%;
	}

	/* .mobile-shell .rack-content--blog div[style*="display: flex"] — see CSS-NOTES.md [N150] */
	.mobile-shell .rack-content--blog div[style*="display: flex"] {
		flex-direction: column;
	}

	.mobile-shell .rack-content--blog div[style*="display: flex"] > div:has(> iframe) {
		flex: 0 0 auto;
	}

	/* .mobile-shell #fulltray — see CSS-NOTES.md [N151] */
	.mobile-shell #fulltray {
		background-image: url(/assets/images/structure/mobile-tray.gif);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 0;
		padding-bottom: 12.5796%;
		padding-left: 0;
		margin: 0 auto;
		position: relative;
	}

	.mobile-shell .fingerbuttonleft,
	.mobile-shell .fingerbuttonright {
		position: absolute;
		padding-top: 0;
		margin-left: 0;
		width: 15.2866%;
		height: 89.87%;
		bottom: 0;
	}

	.mobile-shell .fingerbuttonleft {
		left: 13.7739%;
	}

	.mobile-shell .fingerbuttonright {
		left: 70.9554%;
	}

	/* .mobile-shell .fingerbuttonleft a:link (+1 more) — see CSS-NOTES.md [N152] */
	.mobile-shell .fingerbuttonleft a:link,
	.mobile-shell .fingerbuttonleft a:visited {
		background-image: url('/assets/images/structure/fingerbuttonleft.png');
		background-repeat: no-repeat;
		background-size: 300% 100%;
		background-position: 0% 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.mobile-shell .fingerbuttonleft a:hover {
		background-position: 50% 0;
	}

	.mobile-shell .fingerbuttonleft a:active {
		background-position: 100% 0;
	}

	.mobile-shell .fingerbuttonright a:link,
	.mobile-shell .fingerbuttonright a:visited {
		background-image: url('/assets/images/structure/fingerbuttonright.png');
		background-repeat: no-repeat;
		background-size: 300% 100%;
		background-position: 0% 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.mobile-shell .fingerbuttonright a:hover {
		background-position: 50% 0;
	}

	.mobile-shell .fingerbuttonright a:active {
		background-position: 100% 0;
	}

	/* .mobile-shell .rack-content--credits .notepaper (+1 more) — see CSS-NOTES.md [N153] */
	.mobile-shell .rack-content--credits .notepaper,
	.mobile-shell .rack-content--blog .notepaper {
		width: 100%;
		max-width: 31.25rem;
	}

	/* .mobile-shell #footer — see CSS-NOTES.md [N154] */
	.mobile-shell #footer {
		width: 100%;
		height: 0;
		padding-bottom: 8.3333%; /* 64/768 */
		background-image: url(/assets/images/structure/mobile-footer.png);
		background-size: 100% 100%;
		position: relative;
	}

	/* mobile-footer.png went through one height revision after thi — see CSS-NOTES.md [N155] */

	/* The copyright line was wrapping onto a second line at phone — see CSS-NOTES.md [N156] */
	/* .mobile-shell .cg-footer — see CSS-NOTES.md [N157] */
	.mobile-shell .cg-footer {
		font-size: clamp(8px, 2.4vw, 16px);
	}

	/* .mobile-shell #hed (+1 more) — see CSS-NOTES.md [N158] */
	.mobile-shell #hed,
	.mobile-shell #hedsingle {
		display: none;
	}

	.mobile-shell #hedmobile {
		display: block;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	/* .mobile-shell #hedmobile #vaultHeaderBg — see CSS-NOTES.md [N159] */
	.mobile-shell #hedmobile #vaultHeaderBg {
		width: 100%;
		height: auto;
		display: block;
	}

	/* .mobile-shell #vaultNavToggle — see CSS-NOTES.md [N160] */
	.mobile-shell #vaultNavToggle {
		display: block;
		position: absolute;
		left: 81.51%;
		top: 9.22%;
		width: 16.67%;
		height: 81.56%;
		/* Higher than the nav panel's z-index:30 as a safety margin — — see CSS-NOTES.md [N161] */
		z-index: 40;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	/* .mobile-shell #hedmobile #vaultNavToggleActive — see CSS-NOTES.md [N162] */
	.mobile-shell #hedmobile #vaultNavToggleActive {
		display: none;
		position: absolute;
		left: 81.51%;
		top: 9.22%;
		width: 16.67%;
		height: 81.56%;
		z-index: 41;
		pointer-events: none;
	}

	/* .mobile-shell #vaultHeaderTvLink — see CSS-NOTES.md [N163] */
	.mobile-shell #vaultHeaderTvLink {
		display: block;
		position: absolute;
		left: 1.69%;
		top: 9.22%;
		width: 20.44%;
		height: 80.85%;
		z-index: 15;
	}

	.mobile-shell #vaultHeaderTvLink img {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* .mobile-shell #vaultHeaderCategoryLabel — see CSS-NOTES.md [N164] */
	.mobile-shell #vaultHeaderCategoryLabel {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 28.91%;
		top: 22.70%;
		width: 41.15%;
		height: 53.19%;
		z-index: 15;
		/* Don't add text-shadow/animation here — this element also — see CSS-NOTES.md [N165] */
		font-family: 'quanta', monospace;
		font-size: 4vw;
		color: #fe3527;
		font-weight: 700;
		letter-spacing: .7px;
		text-transform: uppercase;
		text-decoration: none;
	}

	/* .mobile-shell #vaultHeaderCategoryLabel.cg — see CSS-NOTES.md [N166] */
	.mobile-shell #vaultHeaderCategoryLabel.cg {
		animation:
			cg-flicker 4s linear infinite,
			cg-tracking-clip 2.5s steps(1) infinite,
			cg-colordrift 6s ease-in-out infinite;
	    	--cg-blur: 0.05em;
	}

	/* .mobile-shell #vaultHeaderCategoryLabel.cg::before — see CSS-NOTES.md [N167] */
	.mobile-shell #vaultHeaderCategoryLabel.cg::before {
		display: flex;
		align-items: center;
		justify-content: center;
		mix-blend-mode: luminosity;
	}

	.mobile-shell #vaultHeaderCategoryLabel:link,
	.mobile-shell #vaultHeaderCategoryLabel:visited,
	.mobile-shell #vaultHeaderCategoryLabel:hover,
	.mobile-shell #vaultHeaderCategoryLabel:active {
		color: #fe3527;
		text-decoration: none;
	}

	.mobile-shell #vaultNavToggle[aria-expanded="true"] + #vaultNavToggleActive {
		display: block;
	}

	/* .mobile-shell #vaultScrollTopToggle — see CSS-NOTES.md [N168] */
	.mobile-shell #vaultScrollTopToggle {
		display: block;
		position: absolute;
		left: 73.05%;
		top: 30.50%;
		width: 5.08%;
		height: 36.88%;
		z-index: 16;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		pointer-events: none;
		cursor: default;
	}

	.mobile-shell #vaultScrollTopToggle.vault-scroll-top-open {
		pointer-events: auto;
		cursor: pointer;
	}

	.mobile-shell #vaultScrollTopArt {
		display: block;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	/* .mobile-shell #vaultScrollTopArt:not([src]) — see CSS-NOTES.md [N169] */
	.mobile-shell #vaultScrollTopArt:not([src]) {
		visibility: hidden;
	}

	/* .mobile-shell #mobiletopmenu — see CSS-NOTES.md [N170] */
	.mobile-shell #mobiletopmenu {
		display: block !important;
		position: fixed;
		/* Starts at the header's own bottom edge (18.36vw = 141/768 — see CSS-NOTES.md [N171] */
		top: var(--vault-header-bottom, 18.36vw);
		left: 0;
		/* Must stay below #hedmobile's own z-index so the header's — see CSS-NOTES.md [N172] */
		z-index: 5;
		width: 100%;
		/* height:auto is load-bearing: an old, unscoped — see CSS-NOTES.md [N173] */
		height: auto;
		background: transparent;
		background-image: none;
		padding: 0;
		box-sizing: border-box;
		/* Caps the panel to the room actually left below the header; — see CSS-NOTES.md [N174] */
		max-height: calc(100vh - var(--vault-header-bottom, 18.36vw));
		overflow-y: auto;
		/* Rigid translateY, not height/max-height — a compositor-only — see CSS-NOTES.md [N175] */
		transform: translateY(-100%);
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
	}

	.mobile-shell #mobiletopmenu.vault-nav-open {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.25s ease-out;
	}

	/* .mobile-shell #mobilenavlisttop .nav-item-main — see CSS-NOTES.md [N176] */
	.mobile-shell #mobilenavlisttop .nav-item-main {
		display: none;
	}

	.mobile-shell:not(.page-id-44) #mobilenavlisttop .nav-item-main {
		display: block;
	}
	.mobile-shell:not(.page-id-44) #mobilenavlisttop .nav-item-contact {
		display: none;
	}

	.mobile-shell #mobilenavlisttop {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* --vault-row-h is set by assets/js/mobile-nav.js's — see CSS-NOTES.md [N177] */
		grid-template-rows: repeat(3, var(--vault-row-h, 13vw));
		gap: 0;
		width: 100%;
		height: auto;
		margin: 0;
	}

	/* .mobile-shell #mobilenavlisttop::after — see CSS-NOTES.md [N178] */
	.mobile-shell #mobilenavlisttop::after {
		content: "";
		display: block;
		grid-column: 1 / -1;
		width: 100%;
		height: 1.0417vw;
		background: url('/assets/images/structure/nav-drawer-btm.png') center / 100% 100% no-repeat;
	}

	/* Buttons are fully fluid — width:100% of their grid cell, hei — see CSS-NOTES.md [N179] */
	/* .mobile-shell #mobilenavlisttop .mobilebutton (+3 more) — see CSS-NOTES.md [N180] */
	.mobile-shell #mobilenavlisttop .mobilebutton,
	.mobile-shell #mobilenavlisttop .currentmobilebutton,
	.mobile-shell #mobilenavlisttop .epmobilebutton,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton {
		float: none;
		width: 100%;
		/* height:100% fills whatever the grid-template-rows track abov — see CSS-NOTES.md [N181] */
		height: 100%;
		min-height: 0;
		overflow: hidden;
		position: relative;
		margin: 0;
		background-size: 300% 100%;
	}

	/* .mobile-shell #mobilenavlisttop .mobilebutton a (+3 more) — see CSS-NOTES.md [N182] */
	.mobile-shell #mobilenavlisttop .mobilebutton a,
	.mobile-shell #mobilenavlisttop .currentmobilebutton a,
	.mobile-shell #mobilenavlisttop .epmobilebutton a,
	.mobile-shell #mobilenavlisttop .currentepmobilebutton a {
		position: absolute;
		inset: 0;
		/* The old unscoped rule also sets this anchor's height to a — see CSS-NOTES.md [N183] */
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .mobile-shell .mobilebutton — see CSS-NOTES.md [N184] */
	.mobile-shell .mobilebutton {
		background-image: url('/assets/images/structure/thin-button.png');
		background-position: 0% 0;
	}

	.mobile-shell .currentmobilebutton {
		background-image: url('/assets/images/structure/thin-button.png');
		background-position: 100% 0;
	}

	.mobile-shell .epmobilebutton {
		background-image: url('/assets/images/structure/thin-epbutton.png');
		background-position: 0% 0;
	}

	.mobile-shell .currentepmobilebutton {
		background-image: url('/assets/images/structure/thin-epbutton.png');
		background-position: 50% 0;
	}

	/* .mobile-shell .mobilebutton a:hover (+7 more) — see CSS-NOTES.md [N185] */
	.mobile-shell .mobilebutton a:hover,
	.mobile-shell .mobilebutton a:active,
	.mobile-shell .currentmobilebutton a:hover,
	.mobile-shell .currentmobilebutton a:active,
	.mobile-shell .epmobilebutton a:hover,
	.mobile-shell .epmobilebutton a:active,
	.mobile-shell .currentepmobilebutton a:hover,
	.mobile-shell .currentepmobilebutton a:active {
		background-image: none;
		background-repeat: no-repeat;
		background-size: 300% 100%;
		/* background-position lived in a second rule immediately below this
		   one, carrying this exact same eight-selector list — an accidental
		   split rather than a deliberate one, so it has been folded in. */
		background-position: 50% 0;
	}

	/* .mobile-shell .mobilebutton:hover (+7 more) — see CSS-NOTES.md [N186] */
	.mobile-shell .mobilebutton:hover,
	.mobile-shell .mobilebutton:active,
	.mobile-shell .currentmobilebutton:hover,
	.mobile-shell .currentmobilebutton:active,
	.mobile-shell .epmobilebutton:hover,
	.mobile-shell .epmobilebutton:active,
	.mobile-shell .currentepmobilebutton:hover,
	.mobile-shell .currentepmobilebutton:active {
		background-size: 300% 100%;
		background-position: 50% 0;
	}

	/* .mobile-shell #mobilenavlisttop li (+1 more) — see CSS-NOTES.md [N187] */
	.mobile-shell #mobilenavlisttop li,
	.mobile-shell #mobilenavlisttop li a {
		font-size: 5.33vw;
	}

	/* .category-vault .vault3 — see CSS-NOTES.md [N188] */
	.category-vault .vault3 {
		float: none;
		clear: both;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	/* .category-vault .preview — see CSS-NOTES.md [N189] */
	.category-vault .preview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1%;
		position: relative;
		margin: 0;
	}

	.category-vault .preview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-vault .preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* .category-vault .vhssm — see CSS-NOTES.md [N190] */
	.category-vault .vhssm {
		width: 100%;
		height: 0;
		padding-bottom: 19.13%;
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		padding-left: 0;
		font-size: 6vw;
		word-spacing: -0.29vw;
	}

	.category-vault .vhssm a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: normal;
	}

	/****************************
	    End /vault Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N191] */

	.category-blog .micro {
		float: none;
		clear: both;
		margin: 0;
		width: 100%;
	}

	.category-blog .cart {
		width: 100%;
		height: 0;
		padding-bottom: 25.94%; /* 138/532 */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
	}

	.category-blog .cart a {
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		padding: 0;
	}

	/* .category-blog .cartspine — see CSS-NOTES.md [N192] */
	.category-blog .cartspine {
		top: 0;
		height: 50%; /* 69/138 */
		align-items: flex-end;
		font-size: 4.14vw; /* 4.5 * 0.92 safety factor - see comment above */
		word-spacing: -0.175vw; /* -0.19 * 0.92 */
		letter-spacing: 0.035vw; /* 0.038 * 0.92 */
	}

	/* .category-blog .cart a:not(.cartspine) — see CSS-NOTES.md [N193] */
	.category-blog .cart a:not(.cartspine) {
		top: 50%; /* 69/138 */
		height: 13.77%; /* 19/138 */
		align-items: flex-start;
		padding-top: .8vw;
	}

	/* .category-blog .cart p — see CSS-NOTES.md [N194] */
	.category-blog .cart p {
		width: 100%;
		padding: 0 6.58%; /* 35/532, matching .cart p's desktop side padding */
		margin: 0;
		font-size: 2.39vw; /* 2.6 * 0.92 safety factor - see .cartspine's comment above */
		word-spacing: -0.175vw; /* -0.19 * 0.92 */
		letter-spacing: 0.035vw; /* 0.038 * 0.92 */
		line-height: normal;
		text-align: center;
		overflow-wrap: break-word;
	}

	/****************************
	    End /blog Mobile Layout
	**********************************************/

	/****************************
	    /episodes Mobile Layout (Phase 1, reusing the shared mobile-shell
	    header/hamburger from the section above — see functions.php
	    section 26 for the .mobile-shell body class /vault, /blog, and
	   see CSS-NOTES.md [N195]
	**********************************************/

	.category-episodes .epcon {
		float: none;
		clear: both;
		margin: 0;
		width: 100%;
	}

	.category-episodes .vhsl {
		width: 100%;
		height: 0;
		padding-bottom: 17.78%; /* 191/1074 */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		font-size: 5.77vw; /* 62/1074 */
		word-spacing: -0.093vw; /* -1px/1074 */
		line-height: normal;
	}

	.category-episodes .vhsl a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/****************************
	    End /episodes Mobile Layout
	**********************************************/

	/****************************
	    /music Mobile Layout (Phase 1, reusing the shared mobile-shell
	    header/hamburger from the /vault Mobile Layout section above — see
	    functions.php's wahnsinn_add_mobile_shell_body_class() for the
	   see CSS-NOTES.md [N196]
	*/

	.category-music .musicplayer {
		width: 100%;
		height: 0;
		padding-bottom: 24.68%; /* 270/1094 */
		background-size: 100% 100%;
		margin: 0;
	}

	.category-music .musicshelf,
	.category-music .rackmountplacer {
		width: 100%;
		margin: 0;
	}

	.category-music .rackmountplacer img {
		float: none;
		width: 100%;
		/* Desktop's float:left implicitly blockifies the img per spec — see CSS-NOTES.md [N197] */
		display: block;
	}

	/****************************
	    End /music Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N198] */

	.mobile-shell .albumgallery {
		margin: 0;
	}

	/* .mobile-shell .albumgallery .albums — see CSS-NOTES.md [N199] */
	.mobile-shell .albumgallery .albums {
		display: block;
		width: 100%;
	}

	.mobile-shell .albumgallery .albums img {
		width: 100%;
		height: auto;
	}

	/* :nth-child(N of .albums), not :nth-of-type(N) — counts position
	   among .albums siblings specifically, same defensive reasoning as
	   /Main Tablet Layout's .thevault rule further down. */
	.mobile-shell .albumgallery .albums:nth-child(2 of .albums) img {
		margin-top: -1.1483%; /* -12/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(3 of .albums) img {
		margin-top: -1.6268%; /* -17/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(4 of .albums) img {
		margin-top: -0.9569%; /* -10/1045 */
	}
	.mobile-shell .albumgallery .albums:nth-child(1 of .albums) img {
		margin-top: -0.6699%; /* -7/1045 */
		clip-path: inset( 4.7619% 0 0 0 ); /* 7/147 */
	}
	.mobile-shell .albumgallery .albums:nth-child(5 of .albums) img {
		margin-top: -0.8612%; /* -9/1045 */
		margin-bottom: -0.5742%; /* -6/1045 */
		clip-path: inset( 0 0 4.0816% 0 ); /* 6/147 */
	}

	/****************************
	    End /gallery Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N200] */

	.category-merch .rackmountmerch {
		padding: 0;
		margin: 0;
	}

	.category-merch .rackmountmerch img {
		float: none;
		width: 100%;
		height: auto;
		/* Desktop's float:left implicitly blockifies the img per spec — see CSS-NOTES.md [N201] */
		display: block;
	}

	/****************************
	    End /merch Mobile Layout
	**********************************************/

	/* /merch SINGLES: almost no new rules needed anywhere in this  — see CSS-NOTES.md [N202] */

	/* @media (max-width: 767px) — see CSS-NOTES.md [N203] */

	.mobile-shell .wahnsinn-grid {
		grid-template-columns: repeat(var(--wahnsinn-grid-cols-mobile, 3), 1fr);
	}

	/* @media (max-width: 767px) — see CSS-NOTES.md [N204] */

	.mobile-shell .rack-content--gallery {
		column-count: 2;
		column-gap: 1.2440%; /* 13/1045 */
		padding: 1.2440% 0;
	}

	.mobile-shell .masonry-item {
		margin: 0 0 1.2440% 0;
	}

	/****************************
	    End /photos Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N205] */

	.category-gifs .vault3 {
		float: none;
		clear: both;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	/* .category-gifs .gifpreview — see CSS-NOTES.md [N206] */
	.category-gifs .gifpreview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1571%; /* 263.2/350.2 */
		position: relative;
		margin: 0;
	}

	.category-gifs .gifpreview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-gifs .gifpreview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/****************************
	    End /gifs Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N207] */

	.category-zines .vault3 {
		float: none;
		clear: both;
		padding: 0;
		margin: 0 0 4.2833% 0; /* 15/350.2 — row-to-row gap, on .vault3 itself (not .boxpreview) so it always shares .vault3's own containing block, see the block comment above */
		width: 100%;
	}

	.category-zines .boxpreview {
		width: 100%;
		height: 0;
		padding-bottom: 129.0691%; /* 452/350.2 — image-content-area ratio only, the row gap lives on .vault3 now */
		position: relative;
		margin: 0;
	}

	.category-zines .boxpreview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.category-zines .boxpreview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* .mobile-shell .wahnsinn-hoofsip-grid — see CSS-NOTES.md [N208] */
	.mobile-shell .wahnsinn-hoofsip-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mobile-shell .wahnsinn-hoofsip-grid-title {
		font-size: 4.2282vw; /* 14/149 × 100/2 × 0.90 safety factor */
		line-height: 4.8322vw; /* 16/149 × 100/2 × 0.90 */
		padding: 0.906vw 1.8121vw; /* 3/149, 6/149 × 100/2 × 0.90 */
	}

	.mobile-shell .wahnsinn-hoofsip-grid-summary {
		height: 25.3691vw; /* 84/149 × 100/2 × 0.90 */
		font-size: 3.6242vw; /* 12/149 × 100/2 × 0.90 */
		line-height: 4.8322vw; /* 16/149 × 100/2 × 0.90 */
		padding: 0 1.8121vw 1.2081vw; /* 6/149, 4/149 × 100/2 × 0.90 */
	}

	/****************************
	    End /zines Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N209] */

	.mobile-shell .rack-content--text img {
		max-width: 100%;
		height: auto;
	}

	/****************************
	    End /Contact Mobile Layout
	**********************************************/

	/* @media (max-width: 767px) — see CSS-NOTES.md [N210] */

	/* .mobile-shell.error404 .main-columns — see CSS-NOTES.md [N211] */
	.mobile-shell.error404 .main-columns {
		flex-direction: column;
		gap: 0;
	}

	.mobile-shell.error404 #leftmenu {
		width: 100%;
		margin-left: 0;
	}

	/* .mobile-shell.error404 .sidebargif — see CSS-NOTES.md [N212] */

	.mobile-shell.error404 .sidebargif {
		width: 100%;
		margin-left: 0;
	}

	/* .mobile-shell.error404 #container.one-column — see CSS-NOTES.md [N213] */
	.mobile-shell.error404 #container.one-column {
		flex: none;
		width: 100%;
		min-width: 0;
		order: -1;
	}

	/****************************
	    End /404 Mobile Layout
	**********************************************/

	/****************************
	    /Artifacto Mobile Layout — artifacto.php has no get_header(), so
	   see CSS-NOTES.md [N215]
	*/

	.mobile-shell .artifactowrap {
		width: 100%;
		height: auto;
		margin: 0;
		/* Extra breathing room before the footer, mobile only (tablet — see CSS-NOTES.md [N216] */
		margin-bottom: 36.5854%;
	}

	/* .mobile-shell .artifactowrap .rack-content--img iframe — see CSS-NOTES.md [N217] */
	.mobile-shell .artifactowrap .rack-content--img iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/****************************
	    End /Artifacto Mobile Layout
	**********************************************/

	/****************************
	    /Main Mobile Layout — main.php, the site's actual front page
	   see CSS-NOTES.md [N218]
	**********************************************/

	/* .mobile-shell .mainpromo — see CSS-NOTES.md [N219] */
	.mobile-shell .mainpromo {
		width: 100%;
		height: auto;
	}

	.mobile-shell .main-columns {
		flex-direction: column;
		gap: 0;
	}

	/* .mobile-shell .one-column#container — see CSS-NOTES.md [N220] */
	.mobile-shell .one-column#container {
		flex: none;
		width: 100%;
		min-width: 0;
		order: -1;
	}

	.mobile-shell #leftmenu {
		width: 100%;
		margin-left: 0;
	}

	/* .mobile-shell #leftmenu li img — see CSS-NOTES.md [N221] */
	.mobile-shell #leftmenu li img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* .mobile-shell .sidebarmiddle — see CSS-NOTES.md [N222] */
	.mobile-shell .sidebarmiddle {
		background-size: 100% 6px;
	}

	/* .tray/.creditsbutton — the >>VAULT<< button — dropped entirely
	   per the owner's ask, not made fluid like everything else on this
	   page. */
	.mobile-shell .tray {
		display: none;
	}

	/* .thevault — single column, no pairing: float:none/clear:both,
	   the same shape /vault's own mobile grid uses for the identical
	   ".preview + .vhssm sibling pair" component. */
	.mobile-shell .thevault {
		float: none;
		clear: both;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	/* .mobile-shell .thevault ~ .thevault ~ .thevault ~ .thevault — see CSS-NOTES.md [N223] */
	.mobile-shell .thevault ~ .thevault ~ .thevault ~ .thevault {
		display: none;
	}

	.mobile-shell .thevault .preview {
		width: 100%;
		height: 0;
		padding-bottom: 75.1%; /* 263/350.2 — same box /vault's own .preview uses */
		position: relative;
		margin: 0;
	}

	.mobile-shell .thevault .preview a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.mobile-shell .thevault .preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.mobile-shell .thevault .vhssm {
		width: 100%;
		height: 0;
		padding-bottom: 19.13%; /* 67/350.2 — same box /vault's own .vhssm uses */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		padding-left: 0;
		font-size: 6vw; /* 21/350.2, same ratio and same full-width-column shape as /vault's own mobile .vhssm */
		word-spacing: -0.29vw;
	}

	.mobile-shell .thevault .vhssm a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: normal;
	}

	/* .mobile-shell .vhs — see CSS-NOTES.md [N224] */
	.mobile-shell .vhs {
		width: 100%;
		height: 0;
		padding-bottom: 19.128%; /* 136/711 */
		position: relative;
		background-size: 100% 100%;
		margin: 0;
		font-size: 5.9072vw; /* 42/711 */
		word-spacing: -0.1406vw; /* -1/711 */
		line-height: normal;
	}

	.mobile-shell .vhs a {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .mobile-shell .vaultcounter — see CSS-NOTES.md [N225] */
	.mobile-shell .vaultcounter {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 24.5714%; /* 86/350 */
		background-size: 100% 100%;
		margin-bottom: 2.8571%; /* 10/350 — the original blank gap, now a margin since height:0 holds no content-box room for it */
	}

	/* .mobile-shell .vaultbutton — see CSS-NOTES.md [N226] */
	.mobile-shell .vaultbutton {
		position: absolute;
		left: 69.4286%; /* 243/350 */
		top: 50%; /* 43/86 */
		width: 18%; /* 63/350 */
		height: 33.7209%; /* 29/86 */
		padding: 0;
	}

	/* .mobile-shell .vaultbutton a:link (+3 more) — see CSS-NOTES.md [N227] */
	.mobile-shell .vaultbutton a:link,
	.mobile-shell .vaultbutton a:visited,
	.mobile-shell .vaultbutton a:hover,
	.mobile-shell .vaultbutton a:active {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 300% 100%;
	}
	.mobile-shell .vaultbutton a:link,
	.mobile-shell .vaultbutton a:visited {
		background-position: 50% 0;
	}
	.mobile-shell .vaultbutton a:hover {
		background-position: 0 0;
	}
	.mobile-shell .vaultbutton a:active {
		background-position: 100% 0;
	}

	.mobile-shell .streamingbuttons {
		width: 100%;
		margin-left: 0;
	}

	.mobile-shell .streamingbuttons img {
		width: 33.314%; /* 114.6/344 — unchanged ratio, still 3-per-row */
		height: auto;
	}

	/* .mobile-shell #leftmenu .albums — see CSS-NOTES.md [N228] */
	.mobile-shell #leftmenu .albums {
		display: block;
		width: 100%;
	}

	.mobile-shell #leftmenu .albums img {
		width: 100%;
		height: auto;
	}

	/* .sidetray/.artibtn — the Artifacto button tray, same shape as
	   .vaultcounter/.vaultbutton above (a real background-image tray
	   plus a normal-flow, offset sprite button on top). */
	.mobile-shell .sidetray {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 22.2857%; /* 78/350 */
		background-size: 100% 100%;
	}

	.mobile-shell .artibtn {
		position: absolute;
		left: 40%; /* 140/350 */
		top: 2.5641%; /* 2/78 */
		width: 20%; /* 70/350 */
		height: 94.8718%; /* 74/78 */
		padding: 0;
	}

	/* .mobile-shell .artibtn a:link (+3 more) — see CSS-NOTES.md [N229] */
	.mobile-shell .artibtn a:link,
	.mobile-shell .artibtn a:visited,
	.mobile-shell .artibtn a:hover,
	.mobile-shell .artibtn a:active {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 300% 100%;
	}
	.mobile-shell .artibtn a:link,
	.mobile-shell .artibtn a:visited {
		background-position: 50% 0;
	}
	.mobile-shell .artibtn a:hover {
		background-position: 100% 0;
	}
	.mobile-shell .artibtn a:active {
		background-position: 0 0;
	}

	/* .mobile-shell:not(.error404) .sidebargif — see CSS-NOTES.md [N230] */
	.mobile-shell:not(.error404) .sidebargif {
		display: none;
	}
	.mobile-shell .sidebarflyer {
		display: none;
	}
	.mobile-shell .sidebarbottom {
		display: none;
	}

	/* .mobile-shell .cg-sidebar — see CSS-NOTES.md [N231] */
	.mobile-shell .cg-sidebar {
		--cg-blur: 0.045em;
	}

	/****************************
	    End /Main Mobile Layout
	**********************************************/
}


/* ==========================================================================
   SECTION 17 — RESPONSIVE — other breakpoints & preferences
   -----------------------------------------------------------------------
   The ≤1024px and ≤768px blocks, hover/pointer capability gates, and reduced-motion.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	/* @media (hover: hover) and (pointer: fine) — see CSS-NOTES.md [N120] */

	.masonry-item a:hover img {
		filter: brightness(1.08);
	}

	.wahnsinn-carousel .splide__slide a:hover img {
		filter: brightness(1.08);
	}
}

/* @media (max-width: 768px) — see CSS-NOTES.md [N122] */
@media (max-width: 768px) {
	.gallery-permalink-btn {
		opacity: 0.5;
	}
}

/* @media screen and (max-width: 1024px) — see CSS-NOTES.md [N138] */
@media screen and (max-width: 1024px) {

    #topmenu {
        display:none !important;
    }

    #mobiletopmenu {
        display:block !important;
    }

    /* This block used to also force-zero margin-top on — see CSS-NOTES.md [N139] */
}

@media (max-width: 1024px) {
	/* @media (max-width: 1024px) — see CSS-NOTES.md [N214] */

	.mobile-shell.error404 .sidebarbottom {
		display: none;
	}

	.mobile-shell.error404 .wrap {
		width: 100%;
		height: 0;
		padding-bottom: 70.4225%; /* 500/710 */
	}

	.mobile-shell .artifactowrap .rack-content--img {
		width: 100%;
		margin-left: 0;
		position: relative;
		height: 0;
		padding-bottom: 91.4634%; /* 900/984 */
	}

	/* @media (max-width: 1024px) — see CSS-NOTES.md [N294] */

	.mobile-shell .archive-load-more-wrap {
		width: 100%;
		margin: 0;
	}

	/****************************
	    End /vault + /blog Load More
	**********************************************/
}

/* =========================================
   Accessibility
========================================= */
@media (prefers-reduced-motion: reduce) {
  .cg {
    animation: none;
    filter:
      contrast(0.963)
      saturate(1.0)
      blur(var(--cg-blur, 1.4px));
  }

  .cg::before {
    animation: none;

    /* Keep a subtle static texture */
    --d1: 0.12;
    --d2: 0.08;
  }
}