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


/* ======================= */
/* Custom Fonts */
/* ------------------------------------------------------------
   Each @font-face block below registers one custom font-family
   name and points it at the actual font files in /assets/fonts/. After
   that, any rule elsewhere in this file — OR an inline style typed
   directly into a post's content via the editor — can use that
   name in a font-family declaration (e.g. font-family: 'MOM',
   monospace;) to apply it. Browsers don't download a font file
   until some actually-rendered text needs it, so an @font-face rule
   that nothing ever uses costs nothing at runtime — it's just dead
   weight in the code, not a performance problem.

   "Usage" below is checked two ways for every font: (1) every
   selector in this stylesheet, and (2) an inline-style scan across
   every published page — a font can be applied directly in post
   content without any theme CSS rule at all (the same trap that
   almost cost .notepaper and .goleft, see their own comments). Two
   fonts ('vcr' and 'Victoria') came up with zero usage by either
   measure and were removed (their woff/woff2 files deleted too); the
   five that remain below are all in genuine use. */
   /* ======================= */

/* 'MOM' Font — the workhorse font. Used 17 times across the file:
   the base body/input/textarea text, the main nav (#navlisttop),
   mobile nav, credits buttons, and several "tape rack" components
   (.vidframe, .perma, .notepaper .quote-by, etc). If you only
   remember one font name in this file, it's this one. */
@font-face {
  font-family: 'MOM';
  src: url('/assets/fonts/moms-typewriter-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 'scratch' Font — the "handwritten label" font. Used 12 times:
   some heading levels (h3, h6), and the whole VHS-tape-spine
   family (.vhsl, .vhs, .vhssm, .vhs_sidebar, .vidspine, .30yom) —
   this is the font that actually renders the show-title text
   layered on top of the per-post "vhs" custom-field background
   image on vault/episode listings. */
@font-face {
  font-family: 'scratch';
  src: url('/assets/fonts/scratch-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@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/travelingtypewriter-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* 'Sears' Font — the "blog heading" font. Used 6 times, exclusively
   on .blogtext heading levels (h1, h2, h3, h5, h6) — pairs with
   'traveling' above to give blog/zine posts their own typographic
   identity, separate from the rest of the site. */
@font-face {
  font-family: 'Sears';
  src: url('/assets/fonts/sears-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/****************************
    End Custom Fonts
**********************************************/ 

/* ============================================================
   SITE-WIDE RESET & BASE STYLES
   ------------------------------------------------------------
   These four rules apply to literally every element on every page
   before anything else in this file runs. They're the foundation
   everything else builds on, which also means they're the most
   overridden rules in the whole stylesheet by design — that's not
   redundancy, it's how a CSS reset is supposed to work: zero
   everything out globally, then let each component opt back into
   the specific spacing/sizing/color it actually needs.
   ============================================================ */

/* The universal reset. `* {}` matches every single element on the
   page. Two things happen here:
   1. margin/padding zeroed out everywhere — browsers ship with
      inconsistent built-in spacing on things like <p>, <ul>, <h1>,
      etc.; zeroing it all out means every bit of spacing you see
      anywhere on the site was deliberately added by a rule further
      down the file, not left over from a browser default.
   2. box-sizing: border-box — changes how width/height math works.
      Without this, adding padding or a border to an element makes
      it visually BIGGER than the width you set (padding/border get
      added on top). With border-box, padding and border are
      included inside the width/height you declare instead, so
      "width: 200px" always means 200px on screen, full stop. This
      is why so many rules elsewhere in this file can set a precise
      width/height and padding together without the math going
      wrong — they're all relying on this one line.
   Practically every component rule below this point overrides
   margin/padding/width for its own purposes — that's expected, not
   a conflict with this rule. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The page-wide defaults: black background, dark-gray base text
   color, the 'MOM' font (see Custom Fonts above) as the fallback
   typeface for any text that isn't more specifically styled.
   Cross-reference for where this gets overridden: the black
   background here is the "canvas" behind everything — most of the
   site's visible structure (#wrapper, #header, the rack-mount
   components throughout this file) sits on top of it with their
   own background-image PNGs, so you mostly only SEE this black
   body background in the margins/gutters around those components.
   The 'MOM' font fallback gets overridden constantly too — h3/h6
   swap to 'scratch', .blogtext swaps to 'traveling'/'Sears', and so
   on (see Custom Fonts above for the full breakdown) — 'MOM' is
   what renders for any plain text that no other rule has claimed. */
body {
  font-family: 'MOM', monospace;
  color: #282828;
  background: #000;
  line-height: 1.5;
  vertical-align: baseline;
}

/* Images — removes the border some very old browsers used to draw
   around <img> elements (especially when wrapped in a link, which
   `a img` handles separately). No current browser does this by
   default, so these two rules are mostly legacy/harmless at this
   point — not actively overridden anywhere because there's nothing
   left to override; just a leftover safety net from an earlier
   browser era. */

img {
  border: 0;
}


a img {
  border: none;
}


/****************************
    Text Elements (Modernized)
    This section looks newer/cleaner than most of the file (rem
    units, grouped comments) — it's a base-level reset/defaults
    layer for plain HTML text elements (h1-h6, a, p, blockquote,
    ul/li) that applies everywhere, before any of the site's
    specific components (rack mounts, tape spines, etc.) add their
    own overrides on top further down the file.
**********************************************/


/* Headings - Consolidated styles
   One shared rule sets defaults for ALL heading levels (no margin,
   bold, all-caps), then each level below overrides just the size/
   spacing it needs to differ. h3 and h6 go further and swap in the
   'scratch' handwritten-label font (see Custom Fonts above) with
   custom color/spacing — those two heading levels are the ones
   actually used as stylized section titles around the site;
   h1/h2/h4/h5 stay plain. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
}

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

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

h3, h3 a {
  font-family: 'scratch', monospace;
  color: #ff3c00;
  font-size: 2.6rem;
  line-height: 0.6;
  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;
}

/* Links - Consolidated states
   Sets the default look for every link site-wide (orange, no
   underline) plus its visited/hover/active color variants. Any
   component-specific class further down the file that sets its own
   link colors (e.g. .vhsl a:hover) is overriding this baseline
   for that specific component — this is the fallback for plain
   links that don't have a more specific rule. */
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 */

/* Paragraphs — default spacing for any plain <p> on the site.
   (Note: inside #content, the margin-bottom here is overridden to
   `auto` by the #content p rule further down — an ID selector
   outranks this bare element rule. The rack-mount components'
   paragraph rhythm lives with the rest of the rack system in the
   =Rack Frame section at the bottom of the file: .rack-content p
   and its per-family overrides.) */
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.) */

/* Blockquotes — plain <blockquote> default styling. Note this is
   separate from .notepaper (further down the file), which is the
   site's other, much more elaborate blockquote-style component
   used for fan testimonials/quotes — this rule here is just the
   plain, undecorated fallback for any blockquote that isn't
   wrapped in .notepaper. */
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;
}

/* Lists — deliberately strips ALL default list styling (bullets,
   indent, spacing) from every <ul> and <li> on the entire site.
   This matters to understand: most <ul>/<li> elements in this
   theme's templates aren't being used as actual bulleted lists —
   they're used as generic layout/grouping wrappers (nav menus,
   image grids, sidebar items), the same way a lot of older sites
   leaned on <ul><li> for structure before flexbox/grid were common.
   This reset is what makes that possible without bullets showing
   up everywhere; any *real* list that wants bullets back would need
   its own override (none currently do, as far as this audit found). */
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}


/****************************
    End Text Elements
**********************************************/

/****************************
    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 — the shorter header band used on single-item pages.
   Used by header-single.php and artifacto.php. Note it's visually
   much shorter (174px vs #hed's 461px) — this is the "compact"
   header variant for pages that aren't the homepage. */
#hedsingle {
	padding: 0;
	margin-top: 0px;
	height: 174px;
	width: 1100px;
	text-align:center;
}

/****************************
    End Header
**********************************************/

/****************************
    Top Nav Menu
    Used by header.php, 404.php, and artifacto.php — the three
    templates that each hand-roll their own full <head>+nav markup
    instead of sharing one nav partial (404.php and artifacto.php
    don't call get_header()). Worth knowing if this nav ever needs
    a structural change: it has to be edited in three places.

    The .button/.currentbutton (and .epbutton/.currentepbutton) pair
    is a recurring pattern here: header.php picks which class to
    echo per nav item with PHP conditionals like
    `if (in_category('vault')) echo "currentbutton"; else echo "button";`
    — i.e. "current" is the highlighted/active state for whichever
    page you're actually on, "button" is the plain inactive state for
    every other nav item. Note when checking PHP source for class
    usage: search for the bare class name, not a literally-quoted
    attribute string. A search for the literal text `class="button"`
    misses it, since the PHP source writes it as
    `echo " class=\"button\""` — PHP's own string escaping can
    disguise it.
**********************************************/

/* Normal flow, not position:absolute (same change applies to #leftmenu
   and #main below — see the =Main Content Area section's #main rule
   for the full explanation of what this replaced: a chain of
   hand-tuned margin-top:61px values scattered across four different
   selectors, all silently depending on this element's height).
   Letting #topmenu sit in real document flow means it pushes whatever
   comes after it down by its own actual height, automatically — the
   same thing #mobiletopmenu already relied on via its own
   position:static !important override below 1024px width. */
#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;
}

#navlisttop li img {
	padding-top:22px;
	width: 85px;
}

/* .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;
}

/* Sprite-sheet button technique: creditsbutton.png contains all
   three visual states side by side (normal, hover, active) in one
   image, and each state just shifts the visible window sideways
   with background-position (0, -117px, -234px) instead of swapping
   to a different image file — one fewer image request, and no flash
   of a blank image while a second file loads on hover. A subtle
   static green box-shadow (matching creditsbutton.png's own green)
   is repeated in all three state rules below so the glow never
   flickers off between states — replaces the old pulsing
   text-shadow animation (former "glowell" keyframes).
   "facebreathe" (search "@keyframes facebreathe") is a slow
   brightness pulse so the button face itself (and
   its box-shadow halo, since `filter` composites the whole element)
   reads as gently humming/glowing rather than flat and static. */
.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 — the "you are here" highlighted state for a main
   nav item (see the PHP-conditional explanation in the section
   banner above). Same sprite-sheet technique as .creditsbutton:
   button.png holds normal/hover/active side by side, this rule
   starts at the "current page" frame (-200px) since it's always
   shown as already-active, then shifts to the hover frame on
   hover/active interaction. */
.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 — the plain/inactive state of a main nav item (the "else"
   branch of the same PHP conditional that picks .currentbutton for
   whichever page is actually active). Starts at the sprite's first
   frame (0,0) since there's no "current" highlight to show. A static
   yellow box-shadow (matching button.png's own color) sits on the
   container so it holds steady across hover/current state changes,
   instead of the old pulsing text-shadow animation (former "glowell"
   keyframes, now removed). */
.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 / .epbutton below are the exact same pattern as
   .currentbutton / .button above, just for the "Episodes" nav item
   specifically — it gets its own sprite (epbutton.png) and its own
   pair of classes rather than reusing .button/.currentbutton. Not
   an accident or duplication to "fix"; it's how header.php's
   conditional picks between them for that one nav item. Box-shadow
   color matches epbutton.png's red rather than the yellow used above. */
.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
**********************************************/

/****************************
    Mobile Top Nav Menu
    This section only defines what the mobile nav LOOKS like (sized,
    positioned, sprite-button styling) — it does NOT control when
    it's actually visible. That's a separate, real, intentional split:
    a rule far down this file (search "#mobiletopmenu" again, inside
    "@media screen and (max-width: 1024px)") hides the desktop
    #topmenu and shows this #mobiletopmenu once the screen narrows
    past 1024px. So #mobiletopmenu appears twice in this file on
    purpose — once here for appearance, once there for visibility —
    not an accidental duplicate. Used by header.php only.
**********************************************/


/* Normal flow, not position:absolute (see the matching note on
   #topmenu above). This was already effectively
   static whenever actually visible, via the position:static !important
   override below 1024px width (search "#mobiletopmenu" further down,
   inside the visibility-swap section) — that override is now
   redundant and has been removed too, since static is the default. */
#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:46px;
}

#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;
}

#mobilenavlisttop li img {
	padding-top:22px;
	width: 170px;
}

/* .mobilebutton / .currentmobilebutton — the exact same
   plain/"current page" pattern as .button/.currentbutton in the
   desktop nav above (same PHP-conditional technique in header.php,
   confirmed directly: `echo "currentmobilebutton"` vs
   `echo "mobilebutton"` per nav item), just using mobilebutton.png
   as its own 3-frame sprite sheet instead of button.png. */
.mobilebutton{
	background-repeat: no-repeat;
	height:100px;
	width:200px;
	margin-left:1px;
	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:1px;
	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 / .currentepmobilebutton — the mobile Episodes
   button. Desktop has its own red epbutton.png sprite (see .epbutton
   above); mobile reuses that exact same image rather than shipping a
   second one, just scaled 2x via background-size (300x50 -> 600x100)
   to match mobilebutton.png's native 200x100-per-frame size. The
   background-position values are epbutton's desktop offsets (0,
   -100px) doubled to match. */
.epmobilebutton{
	background-repeat: no-repeat;
	height:100px;
	width:200px;
	margin-left:1px;
	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:1px;
	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
**********************************************/


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

/* Same stale #topmenu-clearance hack as everywhere else in this file
   (see #topmenu/#leftmenu/#main above) has been removed — no longer
   needed now that #topmenu is real document flow. Used on main-im.php
   (the /im sandbox) as a plain block sitting BEFORE .main-columns (the
   #leftmenu/#container flex row) — a flex-basis:100% + #main
   flex-wrap:wrap approach was tried and reverted (see .main-columns
   below for why); as a plain block this just stacks above
   .main-columns via ordinary document flow, no flex participation
   needed at all. */
.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
    Used by main.php, loop-customcat.php, and catsingle.php to lay
    out episodes and vault entries inside the "VCR rack" visual
    (video trays, rack-mount frames, wide/blog/zine variants).
**********************************************/ 

/* .rackvidtray — used once, in main.php, wrapping the homepage's
   promo-trailer <video> embed (the archive.org-hosted video flagged
   in the static-flattening to-do — this is its CSS frame).
   margin:0 cancels the browser's default <figure> margin (1em 40px)
   so nothing shifts. */
.rackvidtray {
	margin: 0;
	height: 533px;
	width: 711px;
   	text-align: center;
}

.rackvidtray img {
        width: 711px;
}

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

.rackvidtray:active img {
	opacity:1.0;
}


/* .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 normal
	   baseline alignment, which leaves a small gap below each one —
	   block kills that so the stacked album spines sit flush, same
	   fix .rack-content--img img uses for the same reason. */
	display: block;
}

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

.albums:active img {
	opacity:1.0;
}

/* #topper/#botter (standard-width rack end-caps) replaced by
   .rack-cap--narrow (see =Rack Frame). The wider
   variant (#topperwide/#botterwide/.fullwrapwide/.blogwrapwide,
   which used to live here) was replaced by .rack-cap--wide/
   .rack-paper--wide — see =Rack Frame at the bottom
   of this file for the whole system. */

/* .picswrapwide — used only in pics.php (the Gallery template). */
.picswrapwide {
	width: 1100px;
	height: 690px;
	margin: 0px 0px -12px 12px;
	text-align:center;
}

/* .artifactowrap — used only in artifacto.php (the Flash-emulator
   page). Plain black background, no rack-mount image — this page's
   visual is the embedded Ruffle/Flash player, not the rack imagery
   used by the rest of these wrap classes. */
.artifactowrap {
	background-color: #000000;
	width: 1074px;
	height: 782px;
	margin: 0px 0px -12px 12px;
	text-align:center;
}

/* The player <iframe> (post content, artifacto.php) has no
   frameborder/border attributes of its own, so two browser UA
   defaults were showing against the black void behind it: a 2px
   inset border, and the few px of baseline whitespace every inline
   replaced element (iframe's default display) leaves below itself.
   Neither is related to Ruffle — reset here so the player sits flush
   and seamless. */
.artifactowrap iframe {
	display: block;
	border: 0;
}

/* .fullwrap — replaced by .rack-paper--narrow (see =Rack Frame).
   The loop-customcat.php "xzines" branch's
   `id="fullwrap"` doesn't count as a reference — that branch is
   unreachable dead code (no "xzines" category exists). */

/* #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 — used in loop-customcat.php, specifically for
   the music-category thumbnail (the .musicshelf branch a bit above
   this) and also the now-confirmed-dead xzines branch. Stays active
   thanks to the live music-category usage. */
.rackmountplacer {
	text-align:center;
	width:1074px;
}

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


/* .vidscreen — replaced by .rack-screen__inner (see =Rack Frame). */

/* .invid — removed. Was a manual per-post -3px nudge,
   pasted into 8 posts' content, compensating for the old #vidbox/
   .vidscreen system rendering video ~2px too far right. Now that
   .rack-screen__inner positions video precisely (see =Rack Frame),
   the -3px nudge would overshoot in the other direction, so it was
   removed from class="invid" wrappers in all 8 live posts (4 Episodes:
   Episode One/Six/Fourteen/Fifteen; 4 Vault: Intro 6, Suburban Legend,
   Dick Fishin', Chocolate Milk). Confirmed via a wp_posts query, not
   just a template grep — post-content classes don't show up in a
   theme-file search. */
/* .blurb — used directly in post content, not any template:
   confirmed on /blog/20-years-of-madness, /updates, and the
   /20yearsofmadness redirect target. Same "pasted into specific
   posts" pattern as .then/.now/.credits, just spread across a
   handful of related pages instead of just one. */
.blurb {
	width: 95%;
	text-align:left;
	margin-left: 25px;
	margin-bottom: 15px;
}


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

/* WordPress auto-wraps this page's content in a <p>, which otherwise
   picks up the sitewide p { margin: 0 0 1.5rem; } rule and leaves a
   large gap below the last album spine — zeroed here the same way
   .rack-content--img p does for the same reason. */
.albumgallery p {
	margin: 0;
}

/* The album spines are separated by literal <br> tags in the page's
   own content (WordPress wraps them all in one <p>). Now that
   .albums img is display:block, each image already starts its own
   line on its own — the <br> tags are redundant, but don't just
   disappear: left alone, each one still renders as its own empty
   line between the images. Hidden here rather than removed from the
   page content itself, since this is a rendering fix, not a content
   edit. */
.albumgallery br {
	display: none;
}

/* Even with the images genuinely flush (no layout gap at all), a
   visible seam still showed between each one — traced to each spine
   PNG (photos.png, flyers-1.png, artwork-1.png, gifs-lg.png,
   20yom-pics.png) having its own soft, partially-transparent fade at
   its top/bottom edge, not a hard opaque border. Two faded edges
   sitting exactly flush both read as faint right at the seam,
   letting the black page background show through as a band. Pulling
   each image up to overlap the opaque part of the one above hides
   the fade; the exact px values below were measured per image pair
   (each spine's own fade depth, read from its real alpha channel),
   not guessed — if any of these five images are ever replaced, these
   numbers may need re-measuring against the new file. */
.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;
}

/* The first and last images have the same soft faded edge as the
   others, but there's no neighboring image to overlap it into at the
   very top/bottom of the whole stack. Two things have to happen
   together: the margin shift moves each image's own already-opaque
   content up/down to sit right at the rack's edge (same idea as the
   overlap trick above, just with nothing to overlap onto), and
   clip-path then hides the strip that shift pushes out past the
   image's own box — clip-path alone wouldn't be enough, since
   clipping without also shifting just turns a soft fade into an
   equally-sized hard-edged gap instead of removing it. Deliberately
   not handled via overflow:hidden on .albumgallery itself — these
   images can end up wider than their container depending on layout,
   and a container-level overflow:hidden would clip that horizontal
   bleed too; clip-path scoped to just these two images avoids that
   entirely regardless of container width. */
.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 —
   replaced by .rack-content--text and .rack-content--img
   in the =Rack Frame section at the bottom of the file. The old
   `img { text-align: center }` declarations they carried were
   no-ops — text-align does nothing on an img itself — and were
   dropped rather than carried over.) */

/* .picswideimg — used only in pics.php (the Gallery template). */
.picswideimg {
	text-align: center;
	width: 1080px;
	height: 575px;
}

.picswideimg img {
	text-align: center;
	width: 1080px;
	margin-bottom:-20px;
}


/* (.rackmountwideblog used to live here — replaced by
   .rack-content--blog in the =Rack Frame section at the bottom of
   the file, 'traveling' font rhythm and all. Its old
   `padding-bottom: 32px !important` didn't actually need the
   !important — nothing else sets padding on those paragraphs — so
   the new rule drops it.) */

/* .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;
}

/* This is an example of the OTHER kind of duplicate in this file —
   not the intentional #mobiletopmenu-style split, just the same
   rule pasted twice in a row with identical properties. The second
   copy below does nothing; everything is already set by the first
   one. Safe to remove in a future cleanup pass. */
.rackmountmerch img{
	width: 538px;
	height: auto;
	float: left;
}

.rackmountmerch img{
	width: 538px;
	height: auto;
	float: left;
}

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

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


/****************************
    Left Sidebar Menu
    This is the shared visual layer for the site's various sidebar
    partials — eps.php, 404.php, sidebar-custom.php,
    sidebar-episodes.php, sidebar-vault.php. Only one of those is
    ever included on a given page (WordPress picks the right sidebar
    per page type), so even though #leftmenu/.sidebarmiddle/
    .sidebarbottom show up in five different template files, they're
    never rendered together — these rules just need to look right
    no matter which sidebar partial happens to be using them.

    Like #mobiletopmenu earlier, #leftmenu also has a second,
    intentional definition further down this file: search
    "#leftmenu" again inside the same mobile @media block — it
    zeroes out the margin-top set here once the mobile nav takes
    over (that margin exists to clear the desktop nav's height,
    which no longer applies on mobile). Same "split on purpose"
    pattern, not a duplicate to merge.
**********************************************/

/* Normal flow, not position:absolute + a hand-tuned margin-top
   (see #main below, which now lays #leftmenu and
   #container side by side with display:flex instead). flex-shrink:0
   keeps this column at its true 350.2px width no matter how wide its
   flex sibling's content gets. */
#leftmenu {
	width:350.2px;
	margin-left:13px;
	flex-shrink: 0;
	text-align:center;
}

#leftmenu ul li {
	padding: 0;

}

#leftmenu li img {
        width: 344px;
}


/* .sidebarmiddle / .sidebarbottom — the repeating background-image
   strips that make up the rest of the sidebar's visual frame
   (middle section repeats vertically to fit any amount of sidebar
   content, bottom caps it off). Used by the same five templates as
   #leftmenu above. */
.sidebarmiddle {
	background-image: url(/assets/images/structure/sidebarmiddle.png);
	background-repeat: repeat-y;
	height: auto;
}

/* li a:hover, not li:hover a — deliberate: with the selector
   triggering off the <li>'s own hover state, any <li> holding more
   than one link (e.g. .sidebargif and .sidebarflyer, each now one
   image) would dim ALL of its links together whenever the mouse was
   anywhere over that <li>, not just the one actually being pointed
   at. Scoping :hover to the anchor itself instead means each link
   dims independently, and is identical in effect everywhere else in
   this sidebar where each <li> only ever held one link. */
.sidebarmiddle li a:hover {
	opacity:.93;
}

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


/* .vaultcounter / .vaultbutton below — used only in
   sidebar-custom.php (the homepage's sidebar), not the other four
   sidebar templates. This is the "Vault counter" button/link block
   specifically, a one-off component within the shared sidebar
   frame above, not part of every sidebar. */
.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 — used only in sidebar-custom.php (homepage
   sidebar) — the row of streaming-service logos (Apple TV, Amazon,
   etc). .widestreamingbuttons below is its wider sibling, used
   directly in post content instead (see its own comment). */
.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 / .artibtn below — used only in sidebar-custom.php
   (homepage sidebar): the "Artifacto" link button at the bottom of
   the sidebar, .sidetray being its background tray and .artibtn the
   clickable button on top of it. */
.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
    This section is two things bundled together: the ".updated"
    component (the sidebar "Updates" link/button — see sidebar-
    custom.php), and four @keyframes animations that get reused by
    name from all over this file, not just by .updated.
**********************************************/

/* .updated — the "Updates" link in the homepage sidebar
   (sidebar-custom.php: `<div class="updated"><a href="...">...`).
   Uses the 30MOMRegular font via the `font:` SHORTHAND property —
   see the note on '30MOMRegular' in Custom Fonts at the top of this
   file for the story of how an earlier search missed this usage by
   only checking for `font-family:` and not the shorthand form. */

.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;
	line-height: 42px;
	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;
}

/* Pulsing text-glow animations, named/colored separately so
   different components can each have their own glow color. Like
   @font-face, an unused @keyframes definition costs nothing at
   runtime (browsers don't do anything with it until something
   actually references it by name in an `animation:` property) —
   it's dead weight in the code, not a performance issue.

     - glower  — used by .updated above (red glow). */

@keyframes glower {
  from { text-shadow: 0 0 9px red; }
  50% { text-shadow: 0 0 7px #cc3300; }
  to { text-shadow: 0 0 9px red; }
}

/* "facebreathe" — a slow brightness pulse (not a color/text-shadow
   effect like the ones above) used for every nav button
   (.creditsbutton, .button/.currentbutton, .epbutton/.currentepbutton,
   .mobilebutton/.currentmobilebutton, .epmobilebutton/
   .currentepmobilebutton). `filter: brightness()` composites the
   whole element as rendered — background sprite AND the box-shadow
   halo together — so the button face and its outer glow brighten and
   dim as one unit, reading as a gently humming light rather than a
   static rectangle with a static halo around it. One shared keyframe
   works for all three button colors (yellow/red/green) since
   brightness is a multiplier, not a hue. */
@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-/-webkit-/
   -o-transform lines below) reads like a generic snippet pasted in
   from somewhere else, not custom-written for this site — those
   vendor prefixes were needed for CSS transforms/animations around
   2010-2012; no current browser needs any of them anymore, they're
   just harmless leftovers alongside the modern unprefixed
   `transform`/`@keyframes` that actually do the work today. */
/*
Usage
    .myElement {
        animation: rotating 3s linear infinite;
    }
*/
@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);
  }
}

/* .rotating-css — despite the "Usage" example above describing an
   infinite 3s spin, this is actually applied as a quick 5-spin
   burst (0.1s × 5 iterations), not infinite rotation — the comment
   above is generic/borrowed documentation, not a description of
   how this specific class behaves. Used directly in post content,
   not any template: confirmed only on /contact, wrapping a spinning
   smiley-face image next to the email address. Single-post usage,
   same pattern as .then/.now/.credits/.blurb earlier in this file. */
.rotating-css {
    animation: rotating .1s linear;
    animation-iteration-count: 5;
}

/****************************
    End Rotate
**********************************************/

/****************************
    Tape-Spine & Thumbnail Components
    The .vhs/.vhssm/.vhs_sidebar/.vidspine family renders the
    VHS-spine-style links seen on the homepage and vault/episode
    sidebars; the per-post artwork comes from the "vhs" custom
    field (see main.php, sidebar-vault.php), not a fixed image set.
    .preview/.sidebargif/.boxpreview/.gifpreview are thumbnail
    frames used across the gallery/gifs/flyers listing templates.
**********************************************/ 

/* .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 — used in 404.php and sidebar-custom.php (homepage
   sidebar). height:auto (rather than a fixed 258px, a single 640x480
   gif's natural size at this box's 344px width) lets the box grow to
   fit whatever image renders — a leftover from when this box briefly
   held two stacked images at once, kept since it's harmless for a
   single image and one less thing to revert if a second image ever
   ends up here again. wahnsinn_render_daily_pick_image() (functions.php
   section 19) now renders exactly one image per box. Also harmless on
   404.php's single static image, since that gif's own 640x480 ratio
   already matches 344x258 exactly. */
.sidebargif {
	height:auto;
	width:344px;
	margin-left: 3.4px;
}

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

/* #leftmenu #widget-area p — now dead for the homepage sidebar
   specifically: wahnsinn_render_daily_pick_image() replaced both
   "Recent Posts Widget Extended" instances with plain PHP output (no
   #widget-area, no <p> wrapper at all), so neither .sidebargif nor
   .sidebarflyer can ever match this selector anymore. Left in place
   since sidebar.php still reuses the bare #widget-area id for its own
   (currently inactive) sidebar-2 widget area — this rule may still
   matter there if that's ever reactivated. */
#leftmenu #widget-area p {
	margin: 0;
}

/* .sidebarflyer — used only in sidebar-custom.php. Holds its own
   flyer image now that it has its own home instead of sharing
   .sidebargif with the gif image. height:auto for the same reason
   .sidebargif is: let the box grow to fit whatever the day's random
   flyer image's aspect ratio actually turns out to be. */
.sidebarflyer {
	height:auto;
	width:344px;
	margin-left: 3.4px;
}

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

/* .boxpreview — used in loop-customcat.php's final generic
   `is_category()` branch — the catch-all thumbnail card for any
   category that doesn't have its own dedicated branch (vault,
   episodes, music, xzines, blog, merch, gifs all have their own;
   everything else falls through to this). This is also what zine
   posts actually render as right now, since the "xzines" typo
   means they fall through to here instead of their intended
   #fullwrap layout — see the to-do doc for that whole story. */
.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;
}

/* .thevault — layout wrapper used only in main.php (homepage vault
   listing). .vault3 / .epcon below are the equivalent wrappers for
   loop-customcat.php's category-archive listings — three similar
   "float-left list item" wrappers, one per template/context rather
   than one shared between them.
   margin:0 cancels the browser's default <figure> margin (1em 40px)
   so nothing shifts. */
.thevault {
	margin: 0;
	float: left;
	clear: right;
	padding: 0px 12px 0px 0px;
}

/* .vault3 and .epcon are <figure> elements (see
   loop-customcat.php) — margin:0 cancels the browser's default figure
   margin (1em 40px); .epcon's own margin-left:12.5px still wins for
   that one side since it's declared after (same rule, later
   declaration for the same longhand overrides the shorthand). */
.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 — the largest tape-spine size, used in loop-customcat.php's
   "episodes" category-archive branch (the wide single-column
   listing). 'scratch' font (see Custom Fonts above) renders the
   show-title text directly on top of each post's "vhs" custom-field
   background image. */
.vhsl {
	background-repeat: no-repeat;
	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 — the medium/standard tape-spine size, used in main.php
   (homepage episode listing). (eps.php, formerly also a consumer,
   has since been deleted as an orphaned template.)
   margin:0 cancels the browser's default <figure> margin (1em 40px)
   so nothing shifts. */
.vhs {
	margin: 0;
	background-repeat: no-repeat;
	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;
	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;
}


/* .vhs_sidebar — the sidebar-specific tape-spine size, used in
   sidebar-episodes.php and sidebar-vault.php (the spine thumbnails
   in the episode/vault sidebar lists, distinct from .vhssm which is
   the grid/listing version of a similarly small spine). */
.vhs_sidebar {
	background-repeat: no-repeat;
	padding-left:6px;
	margin-left:4px;
	height: 68px;
	width: 351px;
	font-family: 'scratch', monospace;
	letter-spacing:0px;
	color: #303030;
	font-size:80%;
	text-transform:uppercase;
	letter-spacing:-3px;
	word-spacing:-9px;
	line-height:68px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
	display: block;
}

/* .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 / .cart below — the cassette-tape-style spine used for
   blog posts (loop-customcat.php's "blog" branch). The per-post
   artwork comes from a "cart" custom field (get_post_meta($post->ID,
   'cart', true)) — same per-post-image technique as the "vhs" field
   drives the .vhs/.vhssm/.vhs_sidebar family above, just for a
   different content type and a different field name. Unlike the much
   older "vhs"/"preview_img" fields, "cart" is a more recent addition
   and still the current, intentional way blog-post cassette art
   works — not a legacy leftover. */
.cartspine {
	font-family: 'MOM', monospace;
	background-repeat: no-repeat;
	text-decoration:none;
	display: block;
}

/* (Four `.cartspine a:*` link-color rules used to live here. They
   targeted an <a> INSIDE .cartspine — a structure that has never
   existed in the rendered DOM: .cartspine IS the anchor (and always
   was, even back when the old malformed markup was being auto-
   repaired by the browser). The colors that actually render come
   from `.cart a` below and the global link colors. Removed as
   confirmed-dead. */

.cart {
	background-repeat: no-repeat;
	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;
}

/* Stray: this is .vhs_sidebar's hover state, but the rest of
   .vhs_sidebar lives much further up this section (search for the
   main .vhs_sidebar rule above) — it got separated from its own
   block at some point and ended up sitting here instead, in between the
   .cart family and .30yom below. Doesn't cause any visual problem
   (CSS doesn't care where in the file a rule for the same selector
   lives), just an example of the kind of organizational drift this
   file has accumulated — a candidate to relocate next to its parent
   rule whenever a reordering pass happens. */
.vhs_sidebar a:hover {
	color: #851f00;
}

/* .30yom — checked carefully: appears unused. A first pass looked
   promising (matched "30yom" on 3 pages) but every match turned out
   to be a coincidence — an uploaded file literally named
   "30yom.jpg" showing up in unrelated og:image tags and post-nav
   background styles, not this class being applied anywhere. No
   template references it either. Also worth knowing as a quirk:
   CSS class names aren't technically supposed to start with a
   digit per spec (it should be escaped, e.g. `.\33 0yom`) — browsers
   parse it leniently anyway, so this works today, but it's
   non-standard syntax, not just an unusual name. */
.30yom {
	background-repeat: no-repeat;
	height: 117px;
	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;
}

/* .vidspine — the most widely-used tape-spine wrapper class on the
   site: main.php, loop-customcat.php, eps.php, sidebar-vault.php,
   and sidebar-episodes.php all use it. It only handles the link/
   font behavior; the actual visual size comes from whichever of
   .vhsl/.vhs/.vhssm/.vhs_sidebar wraps it in a given template (see
   those above) — .vidspine and the size class work together on the
   same element. This class used to also come in
   15 numbered variants (.vidspine1 through .vidspine15) with fixed
   tape-brand background images — that whole numbered system was
   confirmed dead and removed, superseded by the per-post
   "vhs" custom-field image system these size classes now use instead. */
.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
   colors — targeting an <a> inside .vidspine, a structure that has
   never existed in the rendered DOM, since .vidspine IS the anchor —
   and two `.vidspine:hover/:active img` opacity rules, though no
   image ever sits inside a spine link (the hover-preview images live
   in .preview/.gifpreview/.boxpreview, which have their own hover
   rules). The colors that actually render on spine titles come from
   `.vhsl a` / `.vhssm a` above. Removed as
   confirmed-dead. */


/* .30yomspine — same situation as .30yom above: no template
   references it, and no genuine inline usage found across the full
   site crawl either (this one didn't even have a coincidental
   filename match). Appears unused. Also has the same "class name
   starting with a digit" non-standard-but-browser-tolerated quirk
   as .30yom. */
.30yomspine{
	background-repeat: no-repeat;
	height: 117px;
	width: 711px;
	font-family: 'scratch', monospace;
	letter-spacing:0px;
	color: #303030;
	font-size:24px;
	text-transform:uppercase;
	letter-spacing:-2px;
	word-spacing:-9px;
	line-height:133px;
	vertical-align:text-middle;
	text-align:center;
	text-decoration:none;
}

/* .tray — used only in main.php (homepage). #fulltray below is a
   different, wider tray background used only in catsingle.php (the
   single vault/episode page) — similar concept, different template,
   different size, intentionally separate rather than shared. */
.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 — used only in 404.php. This needs an aesthetic makeover. */

.wrap {


	height: 810px;
	width: 800px;
  }


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

}

/* .fingerbuttonleft / .fingerbuttonright below — the prev/next
   navigation buttons on catsingle.php (single vault/episode pages),
   sitting inside #fulltray above. These are the ones that used to
   point at a hardcoded production image URL
   (https://30mom.com/exim/fingerbutton*.png) before the CDN/
   self-hosting cleanup — now self-hosted in this theme's own
   images/ folder. */
.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;
}

/* =Layout
   ------------------------------------------------------------
   Important to understand these four rules: `.one-column #content`
   etc. is NOT one element with both a class and an id. It's a
   descendant selector — two separate elements. It means "find the
   element with id="content", wherever it is, as long as it's nested
   somewhere inside an element with class="one-column"". So #content
   gets styled differently depending on which page-layout class its
   container happens to have — that's how one page can be a single
   centered column while another is full-width, using the same
   #content id everywhere but a different wrapper class around it.
-------------------------------------------------------------- */
/*
LAYOUT: Main Page
DESCRIPTION: One centered column a sidebar
*/

/* .one-column — set on #container by 404.php and main.php (the
   homepage), the two pages with a real sidebar (#leftmenu).
   #container itself (not #content) is the flex item here — see #main
   above — so it just needs to claim the row's remaining width after
   #leftmenu's own fixed width; #content inside it is then free to be
   plain width:auto (its default), no hardcoded number needed.
   This used to be a hardcoded `margin:61px 0 0 376px; width:752px` on
   #content instead — two numbers that had to be manually kept in sync
   with #topmenu's height and #leftmenu's width/position, and that had
   actually drifted out of sync (752px overflowed #main's 1100px box
   by 28px, silently clipped by #main's overflow:hidden — invisible,
   but that overflow was quietly giving floated content inside
   #content more width than #main's box itself ever showed).

   min-width:725px matters: flex:1 alone causes a real regression —
   main.php's paired vault-tape .thevault previews, two 362.2px-wide
   floats per row, need 724.4px to sit side by side, but flex:1's
   exact computed width (724.0px, confirmed via getBoundingClientRect)
   falls short by under half a pixel, just enough to push every one of
   them onto its own row instead of pairing up. 725px is that measured
   floor plus a hair of rounding margin, not an arbitrary guess —
   flex:1 still governs everything above that floor, so this only
   matters if the row ever gets this tight again. min-width:0
   (flexbox's own escape hatch from its default min-width:auto, which
   refuses to shrink a flex item below its content's natural width) is
   superseded by this explicit floor. */
.one-column#container {
	flex: 1;
	min-width: 725px;
}

/*
LAYOUT: Full Page
DESCRIPTION: One centered column a sidebar
*/

/* .full-page — set on #container only by full-page.php. margin-top
   used to be 61px, hand-tuned to clear #topmenu back when it was
   position:absolute and didn't push #main down on its own — removed
   now that #topmenu is real document flow (see above). */
.full-page #content {
	background: #0F0F0F;
	margin: 0px 0px 0px 13px;
	padding: 20px;
	width: 1034px;
	text-align: center;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

/* .single-attachment — different from the other three: this one
   isn't written anywhere in this theme's templates at all. It's a
   WordPress-core body class, added automatically to <body> when
   viewing an image attachment page. Since #content sits somewhere
   inside <body> on every page, it's automatically "inside"
   .single-attachment whenever WordPress decides this is an
   attachment page — no theme code has to add the class itself. */
.single-attachment #content {
	margin: 0 auto;
	width: 702px;
}

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

/* .single-30mom — the most widely-applied layout class: set on
   #container by category.php, narrow-text.php, artifacto.php,
   pics.php, single.php, and text.php. margin-top used to be 61px,
   same hand-tuned #topmenu-clearance hack as .full-page above —
   removed, no longer needed. */
.single-30mom #content {
	margin: 0;
	width: 1100px;
}

/* =Fonts
   ------------------------------------------------------------
   This section is a leftover stock-Twenty-Fifteen pattern: a big
   batch of selectors all set to one font, mixing genuinely-used
   selectors with several that don't exist anywhere in this
   theme's actual output. One confirmed-dead entry has already been
   removed from the list below (#site-info) — here's the full picture
   of what's left,
   checked against every top-level template, inc/template-tags.php
   (where several of these are generated by PHP functions rather
   than written as literal markup), and the full site crawl:

   Genuinely used: .entry-content/.entry-meta/.entry-title/
   .entry-utility (content.php, content-page.php, content-link.php,
   content-search.php, loop.php, image.php), .page-title (archive.php,
   content-none.php, search.php), .navigation (archive.php, search.php,
   loop.php, sidebar.php, image.php), .reply (404.php, artifacto.php —
   comment-reply links), .widget-title (generated by register_sidebar()
   in functions.php — real whenever any sidebar widget has a title).

   Real, but content/state-dependent (won't show up in a static crawl
   unless the right condition is true on the page you happen to
   check): #respond and .form-allowed-tags (both part of comment_form()'s
   default output in comments.php — only render when comments are
   open), .pingback (wp_list_comments() could render this, but only
   if a post actually has a pingback).

   Appears genuinely unused — no matching markup anywhere, not even
   inside customizer.php's generic boilerplate: #access (this theme's
   custom header.php never uses the stock #access nav wrapper),
   #cancel-comment-reply-link, #site-title (no element with this id
   exists in this theme's header.php). .wp-caption-text is the one
   genuine unknown — only appears in customizer.php boilerplate, would
   need an actual image-caption block in post content to confirm
   either way (same bucket as the other "WP-core, content-dependent"
   classes noted in the to-do doc). */
body,
input,
textarea,
.page-title span,
.pingback {
	font-family: 'MOM', monospace;
	color: #282828;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.526em;
}

#cancel-comment-reply-link,
.form-allowed-tags,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text {
	font-family: 'traveling';
}
input[type=submit] {
	font-family: 'MOM', monospace;
}
pre {
	font-family: 'MOM', monospace;
}
code {
	font-family: 'MOM', monospace;
}


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

/* The main theme structure — #wrapper is the outermost page
   container, written in header.php/artifacto.php/404.php as
   `<div id="wrapper" class="hfeed">`. That's one element with both
   an id (this CSS hook) and a class (hfeed — a now-mostly-obsolete
   "this page is a feed of entries" microformat marker from the
   2008-2012 era, harmless, does nothing visually, not styled by
   anything here).

   This rule was two separate, adjacent #wrapper declarations (the
   plain accidental kind of duplicate, not the intentional
   #mobiletopmenu-style split) — merged into one.
   The old second rule's margin-top/margin-bottom: 0 were redundant
   (margin: 0 auto already zeroes top/bottom), and its `padding: 0 0px`
   is just `padding: 0` — so the merge changed no computed value. */
#wrapper {
	margin: 0 auto;
	width: 1100px;
	background-image:url('/assets/images/structure/rackbars.png');
	background-repeat:repeat-y;
	padding: 0;
}


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

/* (Removed a redundant second `body { background: #000000 url('') repeat; }`
   rule that used to be here. The black background is already set by
   the primary body rule in the SITE-WIDE RESET & BASE STYLES section up
   top; `repeat` is the CSS default and the empty `url('')` loads no image,
   so this rule set nothing the first one didn't — its removal is a no-op.) */

hr {
	background-color: #585858;
	border: 0;
	clear: both;
	height: 1px;
	width: 90%;
}

/* ======================= */
/* Notepaper */
/* Used directly in post content, not applied by any template — one
   of the most-used custom classes on the site (50+ matches across
   vault posts). Renders as a handwritten-note/
   blockquote card for fan testimonials and quotes; .quote-by below
   is the attribution line inside it. Do not flag as dead without
   re-crawling every published post first. */
/* ======================= */
.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;
}
/* =Content
   ------------------------------------------------------------
   Stock Twenty-Fifteen "blog content area" styling — generic
   typography defaults for anything inside #content (which exists
   on every page), plus the .entry-title/.entry-meta/.page-title/
   .hentry family already confirmed genuinely used back in the
   =Fonts section above (content.php, content-page.php, loop.php,
   archive.php, search.php, etc). One content-dependent exception
   worth knowing: .home .sticky only ever matters if a "sticky" post
   exists and the homepage is showing the blog index — a real
   WordPress core feature, just not something a static crawl can
   confirm without an actual sticky post to find.
-------------------------------------------------------------- */

/* #main is a plain block — it used to be display:flex itself
 * briefly, but that broke as soon as a third element needed to stack
 * above the sidebar+content pair (see .main-columns below for the
 * full story and why that responsibility moved to a dedicated
 * wrapper instead of living here). Keep it plain; put layout logic
 * for #main's *children* in their own rules, not here.
 */
#main {
	clear: both;
	overflow: hidden;
	padding: 0 0 0 0;
}

/* .main-columns — wraps #leftmenu + #container on the pages that have
 * a real sidebar (main.php, main-im.php, 404.php) and is what
 * actually lays them out side by side. This used to be display:flex
 * directly on #main — moved to its own wrapper after a real,
 * live-caught bug: main-im.php needs a third block
 * (.flex-im, the Infinite M/IMC iframes) to stack ABOVE this pair, and
 * making #main itself flex+flex-wrap:wrap to accommodate that broke
 * something unrelated and much worse — #container's floated vault-tape
 * previews (.thevault) stopped pairing up two-per-row and collapsed
 * into a single long column, because flex-wrap's line-fitting
 * calculation used #container's floated content's own intrinsic width
 * rather than respecting its resolved flex size. Confirmed by testing
 * flex-wrap:nowrap in isolation, which immediately fixed it. Rather
 * than fight that interaction, .flex-im now just sits BEFORE this
 * wrapper as a plain block (no flex-basis needed either — see its own
 * rule) and stacks above it via ordinary document flow, the same way
 * #topmenu pushes #main down: no wrapping, no competing flex line,
 * nothing left to interact badly.
 *
 * align-items:flex-start (rather than flex's stretch default) keeps
 * each child only as tall as its own content — #leftmenu and
 * #container are rarely the same height, and stretching one to match
 * the other would just be a new kind of magic-number-free but still
 * unintended coupling.
 *
 * gap:12.8px reproduces a real visual detail, not just spacing for
 * its own sake: #wrapper's background (/assets/images/structure/rackbars.png, a 1100px-
 * wide strip of rack-mount bolt/rail art tiled vertically) is mostly
 * hidden behind opaque foreground content, but a sliver of one bar
 * has always shown through right in the seam between #leftmenu and
 * #container, working as a visual divider between them. That sliver
 * used to be a side effect of #leftmenu's box (ending at 13px +
 * 350.2px = 363.2px) and #content's old hardcoded margin-left:376px
 * landing 12.8px apart — 12.8px reproduced here exactly, on purpose.
 * #container's own flex:1 (see .one-column#container below) already
 * fills 100% of whatever's left after this gap, which is also what
 * fixes the page's right edge automatically: the old hardcoded
 * width:752px on #content drifted the whole block 28px past this
 * row's actual 1100px width, invisibly clipped by #main's
 * overflow:hidden — a well-hidden bug this incidentally corrects.
 */
.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;
	font-weight: bold;
	line-height: 18px;
	padding: 9px 24px;
}
#content tr td {
	border-top: 1px solid #e7e7e7;
}
#content tr.odd td {
	background: #f2f7fc;
}
.hentry {
	margin: 0 0 48px 0;
}

/* WordPress's post_class() always adds "hentry" on a singular page,
   so /gallery's <article> picks up the generic 48px post-spacing
   above meant for actual blog posts — not wanted on this page, whose
   .albumgallery content is meant to sit flush against the rack's
   bottom edge. Scoped to articles wrapping .albumgallery specifically
   so search results and ordinary posts/pages keep their real 48px
   .hentry spacing (confirmed live on /?s= search results). */
article:has(> .albumgallery) {
	margin-bottom: 0;
}
.home .sticky {
	background: #f2f7fc;
	border-top: 4px solid #000;
	margin-left: -20px;
	margin-right: -20px;
	padding: 18px 20px;
}
.single .hentry {
	margin: 0 0 36px 0;
}
.page-title {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 36px 0;
}
.page-title span {
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}
.page-title a:link,
.page-title a:visited {
	color: #ff3c00;
	text-decoration: none;
}
.page-title a:active,
.page-title a:hover {
	color: #ff4b33;
}
#content .entry-title {
	color: #000;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 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-meta {
	color: #888;
	font-size: 12px;
}
.entry-meta abbr,
.entry-utility abbr {
	border: none;
}
.entry-meta abbr:hover,
.entry-utility abbr:hover {
	border-bottom: 1px dotted #666;
}
/* .entry-content fieldset/input/select/label etc. below — generic
   styling for any HTML form that ends up inside post content (the
   comment form is the realistic case here, via comments.php's
   comment_form() call — content/state-dependent like .entry-meta
   above, only renders when comments are open on a page you check).
   .entry-content blockquote.left/.right are a WP-core convention
   for floating a blockquote left/right within post content via the
   "Left"/"Right" alignment option some editors expose — would only
   appear if a post actually used that option. */
.entry-content,
.entry-summary {
	clear: both;
	padding: 24px 0 0 0;
}
#content .entry-summary p:last-child {
	margin-bottom: 12px;
}
.entry-content fieldset {
	border: 1px solid #e7e7e7;
	margin: 0 0 24px 0;
	padding: 24px;
}
.entry-content fieldset legend {
	background: #fff;
	color: #000;
	font-weight: bold;
	padding: 0 24px;
}
.entry-content input {
	margin: 0 0 24px 0;
}
.entry-content input.file,
.entry-content input.button {
	margin-right: 24px;
}
.entry-content label {
	color: #888;
	font-size: 12px;
}
.entry-content select {
	margin: 0 0 24px 0;
}
.entry-content sup,
.entry-content sub {
	font-size: 10px;
}
.entry-content blockquote.left {
	float: left;
	margin-left: 0;
	margin-right: 24px;
	text-align: right;
	width: 33%;
}
.entry-content blockquote.right {
	float: right;
	margin-left: 24px;
	margin-right: 0;
	text-align: left;
	width: 33%;
}
/* .page-link — WordPress's built-in post-pagination links (the
   "1 2 3 Next" style navigation that appears when a post uses the
   <!--nextpage--> tag to split across multiple pages). Real core
   feature, content-dependent — only shows up if a post actually
   uses page-splitting, which none of the crawled pages happened to. */
.page-link {
	clear: both;
	color: #000;
	font-weight: bold;
	margin: 0 0 22px 0;
	word-spacing: 0.5em;
}
.page-link a:link,
.page-link a:visited {
	background: #f1f1f1;
	color: #ff3c00;
	font-weight: normal;
	padding: 0.5em 0.75em;
	text-decoration: none;
}
.home .sticky .page-link a {
	background: #d9e8f7;
}
.page-link a:active,
.page-link a:hover {
	color: #ff4b33;
}
/* body.page .edit-link — WordPress core's "Edit" link that appears
   on pages, but only to logged-in users with edit permission.
   Invisible to a logged-out crawl by design, not a sign it's
   missing or broken. */
body.page .edit-link {
	clear: both;
	display: block;
}

.entry-utility {
	clear: both;
	color: #888;
	font-size: 12px;
	line-height: 18px;
}
.entry-meta a,
.entry-utility a {
	color: #888;
}
.entry-meta a:hover,
.entry-utility a:hover {
	color: #ff4b33;
}
/* =Asides
   ------------------------------------------------------------
   WordPress's "Aside" post format and a hypothetical "asides"
   category — both core/theme features that only render this
   specific markup if a post actually uses the Aside post format,
   or a category literally named "asides" exists and is being
   viewed on the homepage. Neither has shown up in the full site
   crawl, but that only proves no such content was crawled, not
   that the feature is dead — same unresolved bucket as the other
   WP-core content-dependent classes noted in the to-do doc.
-------------------------------------------------------------- */

.home #content .format-aside p,
.home #content .category-asides p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	margin-top: 0;
}
.home .hentry.format-aside,
.home .hentry.category-asides {
	padding: 0;
}
.home #content .format-aside .entry-content,
.home #content .category-asides .entry-content {
	padding-top: 0;
}


/* =Gallery listing
   Same situation as Asides above — WordPress's "Gallery" post
   format / a hypothetical "gallery" category. Don't confuse this
   WP-core .format-gallery/.category-gallery pair with this site's
   own custom .gifpreview/.boxpreview thumbnail system (Tape-Spine
   & Thumbnail Components section, much earlier in this file) — that
   custom system is what loop-customcat.php actually uses for the
   real gallery/gifs archive listings on this site; these WP-core
   classes are a separate, unconfirmed, possibly-unused layer.
-------------------------------------------------------------- */

.format-gallery .size-thumbnail img,
.category-gallery .size-thumbnail img {
	border: 10px solid #f1f1f1;
	margin-bottom: 0;
}
.format-gallery .gallery-thumb,
.category-gallery .gallery-thumb {
	float: left;
	margin-right: 20px;
	margin-top: -4px;
}
.home #content .format-gallery .entry-utility,
.home #content .category-gallery .entry-utility {
	padding-top: 4px;
}


/* =Attachment pages
   Styling for WordPress's built-in attachment pages (the dedicated
   page WordPress generates for a single uploaded image) — the
   `\2190`/`\2192` are literal left/right arrow characters for the
   prev/next image navigation links. Real core feature; only
   renders when viewing an attachment page directly, which the
   site's own templates don't appear to link to anywhere obvious
   (this site uses its own custom gallery/thumbnail system instead,
   see the note above) — likely rarely if ever hit by a real visitor.
-------------------------------------------------------------- */

.attachment .entry-content .entry-caption {
	font-size: 50%;
	margin-top: 14px;
}
.attachment .entry-content .nav-previous a:before {
	content: '\2190\00a0';
}
.attachment .entry-content .nav-next a:after {
	content: '\00a0\2192';
}


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

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/

/* img.attachment-full — checked templates and the full crawl: no
   match anywhere. Appears unused (the attachment template,
   image.php, doesn't output this class). */
img.attachment-full {
	margin:0;
	display: block;
}


/* size-auto/size-full/size-large/size-medium are WordPress's
   automatic image-size classes, added to <img> tags based on which
   size an editor picked when inserting an image. size-full/large/
   medium are confirmed genuinely used across the site (real,
   common WordPress behavior for any inserted image); size-auto
   specifically — checked everywhere, no match — appears unused. */
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	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. */
}

/* .alignleft/.alignright/.aligncenter below — WordPress's automatic
   image-alignment classes (added based on the alignment an editor
   picks when inserting an image). All three confirmed genuinely
   used across the site — these are about as fundamental to WP
   image handling as it gets. */
.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;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 5px;
}

/* 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;
}

/* .caption — checked templates and the full crawl (the one "caption"
   match in the raw crawl turned out to be an unrelated JSON key
   inside embedded audio-player data, not this class): appears
   unused. Not to be confused with .wp-caption right below, which is
   the real, active WordPress-core caption wrapper and is a
   completely separate class despite the similar name. */
.caption {
	font-family: 'traveling';
}

/* .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;
}

.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 50%;
	margin: 5px;
}

/* .wp-smiley — WordPress core's auto-converted smiley images (when
   text like ":)" gets turned into an emoji image). Content-
   dependent, no template reference expected; didn't show up in the
   crawl, can't confirm either way without a post that uses one. */
.wp-smiley {
	margin: 0;
}
/* .gallery and its descendants below — WordPress's built-in
   [gallery] shortcode output. Content-dependent like .wp-smiley
   above (no template generates this, only the shortcode does) —
   and worth noting this site has its own separate custom gallery
   system (.gifpreview/.boxpreview, see Tape-Spine & Thumbnail
   Components much earlier in this file) that loop-customcat.php
   actually uses for real archive listings, so even if some posts
   do use the [gallery] shortcode in-content, it's not the site's
   primary gallery mechanism. */
.gallery {
	margin: 0 auto 18px;
}
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 10px;
	margin: 0 0 12px;
}
.gallery dl {
	margin: 0;
}
/* Border on WP gallery-shortcode images. (There used to be a second,
   earlier `.gallery img` rule with a 2px #cfcfcf border that this one
   silently overrode — same specificity, later rule wins — so it had
   zero visual effect; it was removed in the 2026 cleanup. This 10px
   #f1f1f1 border is and always was the one that actually rendered.) */
.gallery img {
	border: 10px solid #f1f1f1;
}
.gallery br+br {
	display: none;
}
#content .attachment img {/* single attachment images should be centered */
	display: block;
	margin: 0;
}

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


/****************************
    WP Navigation
    .navigation (confirmed used: archive.php, search.php, loop.php,
    sidebar.php, image.php — see =Fonts section earlier for the
    full check) is the older/more confusing styling for post
    pagination — #nav-above/#nav-below below are the wrapper ids
    around it, both confirmed real via loop.php.
**********************************************/

.navigation {
	color: #888;
	font-size: 12px;
	line-height: 18px;
	overflow: hidden;
}
.navigation a:link,
.navigation a:visited {
	color: #ff3c00;
	text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
	color: #ff4b33;
}
.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
/* #nav-above's two rules here are intentional, not a conflicting
   duplicate like .gallery img above — the properties don't overlap
   (margin in the first, display in the second), and the third rule
   right after conditionally flips display back to visible (.paged/
   .single body classes — i.e. only show this nav block on a
   paginated archive or a single post, hidden everywhere else by
   default). Three cooperating rules, not redundant ones. */
#nav-above {
	margin: 0 0 18px 0;
}
#nav-above {
	display: none;
}
.paged #nav-above,
.single #nav-above {
	display: block;
}
#nav-below {
	margin: -18px 0 0 0;
}

/****************************
    End WP Navigation
**********************************************/ 

/****************************
    not sure, don't remember, or don't care
    Despite the name, this section makes sense once you look at it:
    it's plain default styling for standard HTML content elements
    (tables, ordered/definition lists, <strong>/<del>) that could
    show up in any post's body copy. None of it is theme-custom —
    every selector here is a bare HTML tag, the kind of thing that
    only matters if a post actually contains a real table or a real
    numbered list, which is genuinely hard to verify without finding
    the specific post that uses one. Doesn't conflict with the
    `ul, li { list-style: none }` reset in Text Elements near the
    top of this file — that reset only zeroes out <ul>/<li>
    (used as layout wrappers all over this site's templates); <ol>
    here gets its bullet-numbering restored on purpose, since a real
    numbered list in post content should still look like one.
**********************************************/

/* Old reminder note: border-collapse/border-spacing here is the
   CSS-only way to remove table cell spacing, but the original
   author also noted the HTML markup itself still needs a literal
   cellspacing="0" attribute as a fallback — a leftover concern
   from much older email-client/browser compatibility, not relevant
   to any current browser, but harmless to leave as a note. */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Nested ordered-list numbering style: top level uses 1,2,3 (decimal),
   then A,B,C, then i,ii,iii, then a,b,c for each deeper level of
   nesting — a classic outline-numbering convention, applied here in
   case any post content uses a real multi-level numbered list. */
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;
}

/****************************
    end NSDRODC
**********************************************/

/****************************
    Footer
    #footer is written in footer.php — a short, fully custom footer
    (just the copyright line), nothing like the original Twenty
    Fifteen footer this theme was based on. This is the site-wide
    "30 MINUTES OF MADNESS AND 30MOM © LETHAL FINGER LLC, 1992-..."
    line that appears on every single page — and the rule that uses
    the '30MOMRegular' font (see Custom Fonts at the top of this
    file for the full story of confirming this usage).
**********************************************/

#footer {
	background-image: url(/assets/images/structure/footer.png);
	background-repeat: no-repeat;
	height: 46px;
	width: 1100px;
	margin-bottom: 0px;
	text-align: center;
}

#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;
}

/****************************
    End Footer
**********************************************/ 

/****************************
    Widget Areas
    .widget-area here styles WordPress's real, native widget-area
    system (register_sidebar() + dynamic_sidebar()), as opposed to
    this site's other, much more common pattern of hand-coded
    sidebar partials like sidebar-custom.php.

    Sidebars are deliberately disabled site-wide except on the
    homepage ("Main" page). The intended mechanism was a
    category-based switcher in single.php
    (`get_sidebar('episodes')`/`get_sidebar('vault')`/
    `get_sidebar('custom')`), but instead of being cleanly removed,
    every branch was just commented out, leaving execution to fall
    through to a bare `get_sidebar();` that loads the stock
    sidebar.php and calls `dynamic_sidebar('sidebar-2')` — a sidebar
    ID that was never registered (only 'sidebar-1' was, in
    functions.php), so it silently renders nothing. Net effect: every
    single post page (vault, episodes, blog, zines, gifs, flyers,
    merch, music) shows an empty, non-functional widget-area wrapper
    — not a bug, just an intentional feature disabled in a kludgey
    rather than clean way.

    sidebar-vault.php and sidebar-episodes.php — both fully written,
    complete files with real content (vault counter, episode list +
    Facebook widget) — are the leftover sidebars from that original
    plan. Kept in case sidebars come back for specific sections, with
    no current plan to reactivate them. Candidates for a future
    cleanup pass (either delete for good, or move to a clearly marked
    "kept just in case" location) — not something to act on now.
**********************************************/

.widget-area ul {
	list-style: none;
	margin-left: 0;
}
.widget-area ul ul {
	list-style: square;
	margin-left: 1.3em;
}
.widget-area select {
	max-width: 100%;
}
.widget_search #s {/* This keeps the search inputs in line */
	width: 60%;
}
.widget_search label {
	display: none;
}
.widget-container {
	margin: 0 0 18px 0;
}

/* .widget_rss / .widget_search above and below — styling for
   specific widget TYPES (an RSS-feed widget, the search widget).
   Since the only reachable widget area (main.php's sidebar-custom.php,
   via the real `register_sidebar('sidebar-1')`) is hand-coded HTML
   rather than a true dynamic_sidebar() output, these widget-type
   classes would only ever apply if sidebar-1 actually had an RSS or
   Search widget assigned to it in wp-admin — unconfirmed either way
   from code alone. */
.widget_rss a.rsswidget {
	color: #000;
}
.widget_rss a.rsswidget:hover {
	color: #ff4b33;
}
.widget_rss .widget-title img {
	width: 11px;
	height: 11px;
}

/* Main sidebars */
#main .widget-area ul {
	margin-left: 0;
	padding: 0 20px 0 0;
}
#main .widget-area ul ul {
	border: none;
	margin-left: 1.3em;
	padding: 0;
}

/****************************
    End Widget Areas
**********************************************/ 

/* Tumblr-only styles removed — they served an external
   spinoff Tumblr blog, not this site. Full copy preserved in
   tumblr/style.css for reference until that's relocated out of the
   theme entirely. */

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
   ------------------------------------------------------------
   -webkit-text-size-adjust is an old iOS-Safari-specific property:
   without it, mobile Safari auto-boosts font sizes on certain text
   blocks to make them more readable when a page is zoomed out
   (exactly the "shrink the whole desktop layout to fit" behavior
   this site relies on instead of a viewport tag — see the
   #mobiletopmenu note further down). These rules dial that
   auto-boost up or down per element so the auto-resizing doesn't
   make things look wrong. (#access and #site-description — stock
   Twenty Fifteen header ids this theme's customized header.php never
   outputs — were trimmed from this cluster.)
   .entry-meta/.entry-utility/.navigation/.widget-area are all
   confirmed real elsewhere in this file.

   Section name aside, most of what follows below this banner isn't
   actually Mobile-Safari-specific — it's just where the
   #mobiletopmenu visibility-toggle and the zinebg/blogtext
   restoration (see their own comments) ended up appended over time.
-------------------------------------------------------------*/

/* 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%;
}
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
	-webkit-text-size-adjust: 120%;
}
/* (#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.) */

/* Text meant only for screen readers — a real, important
   accessibility class, confirmed genuinely used across many
   templates (functions.php, archive.php, content*.php, search.php,
   image.php, sidebar.php, inc/template-tags.php). Visually hides
   text (pushed far off-screen) while keeping it available to
   screen readers — e.g. labels that sighted users don't need to
   see but screen-reader users do. */

.screen-reader-text {
	position: absolute;
	left: -9000px;
}

/* #zinebg and the .blogtext family below are used directly in post
   content, not applied by any template — the zine-formatted-post
   layout (tiled paper background + typeset text styles). A full-site
   crawl showed they're genuinely in use; don't flag as dead from
   template-source checks alone. */
#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;
}

/* NOT scoped to .blogtext, unlike its siblings above — this used to be
   part of a broken selector list (`.blogtext p, span, em`, missing the
   .blogtext qualifier on span AND em) that accidentally matched every
   <em> on the entire site. A full-site content crawl found
   ~58 real italicized captions/dates/quote-attributions across vault,
   episodes, zines, music, and blog posts that genuinely render in this
   font today because of that bug — unlike span (nothing outside
   .blogtext turned out to depend on it), so em is kept sitewide on
   purpose here, pixel-identical to before, just no longer accidental. */
em {
	font-family: 'traveling';
	font-size: 24px;
}

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

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

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

.blogtext h3 {
	font-family: 'Sears';
	font-weight: bold;
	text-transform:uppercase;
	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;
}

/* =Rack Frame
   ------------------------------------------------------------
   The "rack mount" display frame system — the repeated cap/paper/
   content stack used throughout catsingle.php and elsewhere. The old
   version spread the same idea across many separately-tuned classes
   (#topper, .fullwrap, .rackmountlabel, #botter, plus the *wide
   variants .fullwrapwide, .blogwrapwide, .rackmountwideimg,
   .rackmountwideblog, .rackmountwidetext, and the related
   .musicshelf/#vidbox), each hand-padding its own box to line up
   with a background image, often by splitting one inset across a
   parent's padding-left AND a child's padding-left (e.g.
   .fullwrap's 217px + .rackmountlabel's old 6px = 223px) — fragile,
   since changing either number on its own silently breaks alignment,
   and it's how several real bugs slipped in (gaps between content
   and the printed label artwork, a cropped rainbow cap from a stray
   negative margin).

   Convention here: one inset, expressed once, as margin-left, on
   the single element that holds real content — never padding,
   never split across nesting levels. Box width is always set to
   match the artwork's printed area exactly (measured by sampling
   the PNG, not eyeballed).

   Converted, all using .rack-cap/.rack-paper/.rack-content below:
   the `music`/`photos`/`vidlings`, `vault`/`episodes`, and
   `zines`/`hoofsip` branches of catsingle.php; the standalone
   `narrow-text.php` page template (used by exactly one live page,
   /updates — confirmed via a wp_postmeta query, not assumed dead
   just because it's an unusual setup: most of this site is posts,
   not pages, so a page template is rare but real); and the wide
   family (`flyers`/`gifs` and `blog`/`merch` branches of
   catsingle.php, plus text.php's six pages: CONTACT, 20 YEARS OF
   MADNESS, PHOTOS, No Access, 20YOM Pics, ARTWORK — confirmed via
   wp_postmeta). vault/episodes also adds .rack-screen for its
   video-excerpt block, replacing #vidbox/.vidscreen.

   Deleted, confirmed dead by a theme-wide grep (not just
   catsingle.php — narrow-text.php also referenced
   .rackmountcredits): #topper, .fullwrap, #botter,
   .rackmountcredits, .rackmountzines, #vidbox, .vidscreen,
   #topperwide, #botterwide, .fullwrapwide, .blogwrapwide,
   .rackmountwideimg, .rackmountwideblog, .rackmountwidetext.

   Two long-standing alignment quirks were fixed (not preserved) in
   the wide-family conversion:
   - the old paper sheet sat at margin-left 12px while the caps sat
     at 13px, so the paper poked 1px past the cap on the left and
     fell 1px short on the right. Everything between the caps
     (paper + content together) now sits 1px further right, centered
     exactly like the caps — content stays exactly on the printed
     area of the artwork, because they moved together.
   - .blogwrapwide had a stray `padding: 2px` meant for vertical
     breathing room (the site-wide border-box sizing kept it from
     changing the box's outer width; its content wrapper compensated
     for the 2px left inset with margin-left 11 instead of 13). The
     2px vertical rhythm is preserved on .rack-content--blog below;
     the compensation dance is gone.

   Audited and left unconverted, on purpose:
   - pics.php (.picswrapwide/.picswideimg) and artifacto.php
     (.artifactowrap) don't use the cap/paper artwork stack (pics is
     a fixed-height gallery box, artifacto is a plain black
     Flash-player box). artifacto's INNER wrapper, though, was
     .rackmountwideimg — it now uses .rack-content--img like the
     flyers/gifs pages (the geometry rule below is scoped to both
     .rack-paper--wide and .artifactowrap for exactly this reason).
     .artifactowrap itself keeps its old 12px margin on purpose:
     there's no cap artwork on that page to align with.
   - loop-customcat.php's `music` archive listing (.musicshelf) has
     no split-inset bug — its wrapper already sits at the correct
     13px (aligned with the caps' centered position).
   - pics.php (.picswrapwide/.picswideimg) is a fixed-height box
     (1100x690 / 1080x575) sized around the go_portfolio gallery
     embed on /gallery, with a -12px bottom margin pulling the
     footer up. Kludgey, but it has no artwork to misalign against;
     reworking it now risks the gallery layout for zero
     visitor-visible benefit. TEMPORARY: left as-is until the
     go_portfolio replacement project (see the to-do doc) makes this
     template's future clear — still an open item.

   Only delete an old selector once every template/branch that
   referenced it has been converted — several of these are shared
   across multiple templates, so one branch moving to the new markup
   does not make the old CSS rule dead yet. Before deleting anything,
   grep the WHOLE theme directory, not just catsingle.php. */

.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 — used by the `vault`/`episodes` branch.
   That content starts/ends with headings (h3/h4), not <p> tags, so
   it can't rely on .rack-content p's per-paragraph padding below
   for top/bottom breathing room the way the music branch's
   p-wrapped embed can. Matches the old .rackmountcredits container
   padding exactly. */
.rack-content--credits {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* .rack-content--zines — used by the `zines`/`hoofsip` branch.
   Content always leads with a zine-cover image (no top padding
   wanted — already handled by the p:first-child:has(img) rule
   above) but ends with a non-<p> related-issues block, so it still
   needs its own bottom breathing room. Matches the old
   .rackmountzines container padding-bottom exactly. */
.rack-content--zines {
	padding-bottom: 15px;
}

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

/* A leading media embed never needs the paragraph breathing room
   that real body-text paragraphs need above/below them. Scoped to
   "paragraph that contains a media embed" rather than just
   ":first-child" — vault/episodes posts start .rack-content with a
   genuine title/credits paragraph, which still needs its padding.
   The --text family is excluded: text.php's pages (contact etc.)
   have always rendered their leading image WITH the paragraph
   padding above it, and stripping it would raise everything on
   those pages by ~11px. */
.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, which
	   re-declares it anyway) on purpose: some older posts' pasted
	   content contains an unbalanced </div> that closes .rack-content
	   early, spilling the rest of the post directly into this element.
	   The old .fullwrapwide/.blogwrapwide centered that spilled content;
	   dropping this would left-align it (found the hard way on
	   /blog/20-years-of-madness's streaming-button row). */
	text-align: center;
}

/* Same "one inset, expressed once" rule as the narrow system:
   width matched exactly to the printed paper area measured off the
   artwork (fullrack-paperwide.png: cream zone runs x=13 to x=1057,
   1045px wide). Also scoped to .artifactowrap — artifacto.php's
   inner content wrapper shares this geometry without using the
   cap/paper artwork (see the roadmap comment above). */
.rack-paper--wide .rack-content,
.artifactowrap .rack-content {
	width: 1045px;
	margin-left: 13px;
	text-align: center;
}

/* .rack-content--text — used by text.php. Its paragraphs get the
   standard .rack-content p prose rhythm above; the wrapper itself
   needs the same bottom breathing room as the zines variant, PLUS
   a narrower content box: the old .rackmountwidetext declared
   width:1045 with padding-left:13, and under the site-wide
   border-box sizing that shoved the padding INSIDE the width,
   leaving a 1032px text column. Kept at 1032px on purpose — the
   six text.php pages' line wrapping depends on it, so "correcting"
   it to the full 1045px printed area would re-flow their text. */
.rack-content--zines,
.rack-content--text {
	padding-bottom: 15px;
}

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

/* .rack-content--img — used by the `flyers`/`gifs` branch of
   catsingle.php and by artifacto.php's player box. This content is
   full-bleed artwork scans, not prose: every image is forced to the
   full printed-area width, and paragraphs get NO prose rhythm (the
   old .rackmountwideimg had no paragraph styling at all — adding
   the .rack-content p padding here would push the images around). */
.rack-content--img p {
	padding: 0;
	margin: 0;
}

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

/* WordPress's base img.aligncenter/left/right rules (see =WP Images
   further up) add a 5px bottom margin — full-bleed scans stack edge
   to edge, so that margin is zeroed here. Same override the old
   .rackmountwideimg/.rackmountwideblog carried. */
.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 — used by the `blog`/`merch` branch of
   catsingle.php. The 2px top/bottom padding preserves the vertical
   rhythm the old .blogwrapwide got from its accidental
   `padding: 2px` (see the alignment-fix note in the roadmap comment
   above). Blog paragraphs use the 'traveling' typewriter face with
   a fixed 32px rhythm instead of the standard .rack-content p
   prose padding — this rule sits after .rack-content p in the file
   specifically so it wins that cascade tie. */
.rack-content--blog {
	padding-top: 2px;
	padding-bottom: 2px;
}

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

/* =Gallery Masonry
   .rack-content--gallery / .masonry-item — the category-archive
   counterpart to .rack-content--img: used by category.php's
   rack-frame-wrapped archive view (currently just `artwork`, the
   go_portfolio-replacement test case — see the 30MOMeval
   gallery-restructure docs). Still gets the shared
   `.rack-paper--wide .rack-content` width/margin-left from the rule
   above; text-align:center from that same rule is harmless here
   (doesn't affect a column layout).

   Deliberately NOT a fixed-box grid like .boxpreview/.gifpreview:
   those exist because flyers/gifs scans are consistently shaped.
   Artwork images vary wildly (portrait, landscape, square), so
   forcing them into identical boxes would mean heavy letterboxing or
   cropping. CSS multi-column masonry instead: fixed column count,
   each image keeps its own natural aspect ratio, items just pack
   into whichever column has room next. No JS masonry library needed,
   and — unlike go_portfolio's admin-ajax-dependent version — this
   survives static flattening since it's pure CSS. */
.rack-content--gallery {
	column-count: 4;
	column-gap: 13px;
	padding: 13px 0;
}

/* .masonry-item is a <figure> element — margin:0 cancels the
   browser's default figure margin (1em 40px); margin-bottom:13px
   still wins for that one side since it's declared after (same rule,
   later declaration for the same longhand overrides the shorthand).
   Left/right must land at exactly 0 here — this sits inside a CSS
   multi-column layout (.rack-content--gallery, column-count:4), where
   any nonzero side margin would throw off column width. */
.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;
}

/* Hover hint that these images are clickable (same filter:brightness()
   technique the nav buttons' facebreathe animation uses elsewhere in
   this file, just triggered by :hover instead of looping). Scoped to
   (hover: hover) and (pointer: fine) — real mouse input only — so
   touch devices don't get a "stuck" brightened image after a tap. */
@media (hover: hover) and (pointer: fine) {
	.masonry-item a:hover img {
		filter: brightness(1.08);
	}
}

/* =Gallery Lightbox permalink button
   .gallery-permalink-btn — a single shared element, created once by
   gallery-lightbox-init.js and appended directly into GLightbox's own
   .gcontainer (the same fixed, full-viewport element .gnext/.gprev/
   .gclose anchor to — see glightbox.css), not into any per-slide
   description area. A per-slide description shrink-wraps to that
   slide's own image height, so it can never hold a consistent screen
   position independent of the image's aspect ratio; anchoring to
   .gcontainer instead means this button sits at the same fixed spot
   near the bottom of the viewport on every slide — overlapping a
   portrait/square image that fills that space, and floating in the
   empty area below a landscape image that doesn't. Styled to echo
   the built-in nav arrows (circle instead of their rounded rectangle,
   slightly larger; background/hover match the arrows' own desktop
   values exactly — `.glightbox-clean .gprev/.gnext/.gclose` inside
   glightbox.css's `@media (min-width: 769px)` block — not their
   <769px default, which is a different, more opaque value). Icon
   rotated 90deg since Genericons' link glyph draws vertically by
   default. Below GLightbox's own 768px mobile breakpoint the built-in
   nav arrows are effectively swipe-only at that point, so this button
   drops to 50% opacity there too rather than compete for attention.
   `bottom: 24px` deliberately matches the arrows' own
   `left: 30px` / `right: 30px` side margin (glightbox.css's
   `.glightbox-clean .gprev/.gnext` — fixed px, unchanged across every
   breakpoint, confirmed by reading the source), nudged a further 6px
   closer to the edge since a circle's visual weight sits differently
   than the arrows' rectangles. Matches the arrows' actual fixed value
   directly rather than an earlier vh-based proportional guess. Live
   on Artwork, Photos, and doc — see loop-customcat.php / functions.php
   section 15. */
.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;
}

/* Genericons' link glyph draws as a vertical chain link by default;
   rotated flat to read correctly at a glance. */
.gallery-permalink-btn .genericon-link {
	font-size: 28px;
	color: #fff;
	transform: rotate(90deg);
}

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

/* GLightbox's own prev/next/close controls are effectively unusable
   below its own mobile breakpoint (768px) — swipe takes over instead.
   The permalink button still works via tap, so it stays, just
   quieted down to half-opacity to match how secondary the nav
   controls become at this size. */
@media (max-width: 768px) {
	.gallery-permalink-btn {
		opacity: 0.5;
	}
}

/* =Gallery Carousel
   .wahnsinn-carousel — the [wahnsinn_carousel] shortcode's own inline
   Splide carousel (functions.php section 17), for a one-off image set
   embedded in a single post's content rather than a full gallery
   category archive (see .rack-content--gallery/.masonry-item above for
   that pattern). First used on the "30MOM Black on Red T-shirt" merch
   post replacing go_portfolio's "slider" layout-type. Sits inside
   .blogtext/.rack-content--blog's 1045px column, so no width rule is
   needed here — Splide's own .splide__track already fills its
   container. Arrow/pagination colors echo the grey-circle language
   .gallery-permalink-btn already established for lightbox controls
   elsewhere on the site, rather than introducing a new visual style
   just for this one carousel. */
.wahnsinn-carousel {
	margin: 20px 0;
}

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

@media (hover: hover) and (pointer: fine) {
	.wahnsinn-carousel .splide__slide a:hover img {
		filter: brightness(1.08);
	}
}

.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
   .wahnsinn-grid — the [wahnsinn_grid] shortcode's static CSS grid
   (functions.php section 18), for a one-off fixed-order image set
   embedded in a single post (first used for the HOOFSIP 1-36 cover
   grid on the "Hoofsip Subscriptions" merch post, replacing
   go_portfolio's "grid" layout-type). No JS layout library — plain
   CSS grid, --wahnsinn-grid-cols set inline per shortcode call
   (defaults to 6, matching this gallery's original column-layout).
   4px gap (go_portfolio's own 5px h-space/v-space looked tighter than
   this grid's first pass at that value — root cause turned out to be
   .blogtext img's sitewide `padding:
   .2rem` (below) leaking onto these images too, adding 3.2px on
   every side INSIDE each border-box image and stacking with the grid
   gap for an effective ~11px gap instead of 5px; reset to 0 below).
   aspect-ratio 17/22 approximates the covers' real ~8.5x11" scan
   proportions (measured ~1274x1649px) so slightly-inconsistent scan
   crops still sit in a uniform grid; object-fit:cover crops the
   small overflow rather than letterboxing or stretching. */
.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: 17 / 22;
	object-fit: cover;
	padding: 0;
}

/* Hover-dim, values matched directly to go_portfolio's own CSS for
   this exact gallery rather than approximated: overlay-color #333333
   and overlay-opacity 15 (this gallery's inline
   .gw-gopf-post-overlay-bg background-color/opacity), fading in via
   the same `transition: opacity 0.3s ease-in-out` go_portfolio_
   styles.css uses on .gw-gopf-post-overlay-hover:hover .gw-gopf-post-
   overlay. */
.wahnsinn-grid a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #333333;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

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

/* =Hoofsip Grid
   .wahnsinn-hoofsip-grid — the [wahnsinn_hoofsip_grid] shortcode's
   static post-card grid (functions.php section 21), replacing
   go_portfolio's "HOOFSIP" gallery on the HOOFSIP hub post and every
   individual issue post that embeds it. Unlike .wahnsinn-grid (above)
   this is a grid of real WordPress posts, not attachments, so each
   card carries a title + summary under the cover, not just an image.

   Cover images reuse .wahnsinn-grid's exact aspect-ratio/object-fit
   treatment (17/22, cover) for the same reason: these are the same
   HOOFSIP cover scans, already confirmed close enough to uniform that
   cropping the small overflow reads better than letterboxing.

   Gap (10px) and hover-dim (#333333 at 30% opacity) were measured
   directly off go_portfolio's own live rendering of this exact gallery
   and matched, not approximated — h-space/v-space and overlay-
   color/overlay-opacity in its own config. The hover-dim reuses
   .wahnsinn-grid's ::after technique above rather than go_portfolio's
   fancier slide-reveal animation (same visual result, simpler), scoped
   to .wahnsinn-hoofsip-grid-cover itself so only hovering the actual
   image dims it — hovering the title or summary does nothing to it.

   The card background reuses the same tiled paper texture as #zinebg
   (see that rule below, "used directly in post content" — this is the
   same /assets/images/structure/paper-tiled.gif image, just applied via a class instead
   of that specific id, since a background-image can be shared across
   any number of selectors without needing to share the element itself).
   Title size/color/hover and the summary's spacing are deliberate
   choices, not a go_portfolio match.

   .wahnsinn-hoofsip-grid-summary is the one element given a genuinely
   fixed height (the cover is only *consistent*, via aspect-ratio, not
   fixed to a literal px value) — text comes straight from each post's
   real post_excerpt now (get_the_excerpt(), functions.php section 21),
   pre-written to fit this exact box rather than trimmed at render time
   (an earlier version regex-extracted a summary from post_content and
   trimmed it client-side against the live box; once that settled on
   good text it was copied into post_excerpt for real and both of those
   were deleted — see functions.php section 21's comment). overflow:
   hidden here is just a safety net in case a future excerpt is written
   longer than this box actually holds. */
.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 {
	content: "";
	position: absolute;
	inset: 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;
}

/* .rack-screen — used by the `vault`/`episodes` branch of
   catsingle.php for the excerpt-field video embed, which renders
   before the cap/paper/content stack above. Replaces #vidbox/
   .vidscreen. */
.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;
}

/* This is the visibility half of the desktop/mobile nav swap — the
   appearance rules for #mobiletopmenu live up near the top of this
   file in the "Mobile Top Nav Menu" section; this is the other,
   intentional half. Hidden by default... */
#mobiletopmenu {
    display:none;
}

/* ...and swapped on below 1024px screen width: desktop #topmenu
   hides, #mobiletopmenu (styled up top) shows. This swap is based
   purely on CSS media-query width, not on a <meta name="viewport">
   tag — there isn't one on this site (confirmed intentional, the
   site owner relies on mobile browsers shrinking/zooming the whole
   desktop layout to fit). Worth knowing if you ever test this nav
   swap on a real phone and it behaves inconsistently across
   browsers: without a viewport tag, different mobile browsers can
   disagree about what "screen width" even means for this query. */
@media screen and (max-width: 1024px) {

    #topmenu {
        display:none !important;
    }

    #mobiletopmenu {
        display:block !important;
    }

    /* This block used to also force-zero margin-top on
     * #leftmenu, .one-column #content, .full-page #content, and
     * .single-30mom #content — undoing four separate hand-tuned
     * margin-top:61px values that existed only to compensate for
     * #topmenu being position:absolute on desktop. Now that #topmenu
     * (and #mobiletopmenu, hence the removed position:static
     * !important above) are both real document flow at every width,
     * nothing needs correcting here at all. */
}


 /*
  Quanta Microgen 100 Character Generator. Single-element usage:

<div class="cg">...</div> or restyle h1 for <h1 class="cg>"

*/

/* =========================================
   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 {
  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 {
  content: attr(data-text);
  position: absolute;
  inset: 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: 70px;
  color: #fe3527;
}

.cg-footer {
  font-family: 'quanta', monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 44px;
  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(1.4px)
      hue-rotate(0deg);
  }

  50% {
    filter:
      contrast(0.963)
      saturate(1.296)
      blur(0.075px)
      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;
  }
}


/* =========================================
   Accessibility
========================================= */

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

  .cg::before {
    animation: none;

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