@font-face {
    font-family: "Archivo Narrow";
    src: url(../fonts/archivo_narrow_regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Archivo Narrow";
    src: url(../fonts/archivo_narrow_bold.woff2) format("woff2");
    font-weight: bold;
}

@font-face {
    font-family: "Libre Franklin";
    src: url(../fonts/libre_franklin_regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Libre Franklin";
    src: url(../fonts/libre_franklin_medium.woff2) format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Libre Franklin";
    src: url(../fonts/libre_franklin_semibold.woff2) format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "Libre Franklin";
    src: url(../fonts/libre_franklin_bold.woff2) format("woff2");
    font-weight: bold;
}

@font-face {
    font-family: "Space Mono";
    src: url(../fonts/space_mono_regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Space Mono";
    src: url(../fonts/space_mono_bold.woff2) format("woff2");
    font-weight: bold;
}

@font-face {
    font-family: "Alfa Slab One";
    src: url(../fonts/alfa_slab_one_regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Anton";
    src: url(../fonts/anton_regular.woff2) format("woff2");
    font-weight: normal;
}

html {
    height: 100%;
}

body {
    background: #fff;
    height: 100%;
    font-family: "Archivo Narrow";
}

a {
    text-decoration: none;
    color: #F7F5EF;
}

a:hover {
    color: #928A83;
}

#site-wrapper {
    background: #292526;
    margin: 20px;
    min-height: 100%;
    padding-bottom: 110px;
}

#grid {
    display: none;
}

/* In a positioned container
   move the text to the bottom
   of the container
*/

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* --- site nav: seal + wordmark (home link), top-row nav words ---
   Replaces the old click-to-open seal dropdown (2026-07-15) — Jeff wanted
   the two sites' nav systems harmonized rather than sonsofsound using a
   hidden dropdown and meatpackingmusic.com using always-visible top-row
   words; words won out (simpler, no toggle state, and it's what
   meatpackingmusic.com already had). "News" is deliberately not one of
   these words — it's discoverable via the news boxes on the home page and
   elsewhere, same as meatpackingmusic.com already does, not a persistent
   nav item on either site. */

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #2f52ad;
}

/* legacy catalog (blue "97", default site identity) vs new work (white "26",
   the go-forward brand) - reflects the current artist/recording's own flag.
   Colors match assets/seal-97-blue.svg and assets/seal-26-white.svg exactly. */
.site-brand.new-work {
    color: #F7F5EF;
}

/* Explicit hover state for both seal colors (2026-07-17) — the blue "97"
   seal was ALREADY visibly turning grey on hover, but only by accident: the
   generic `a:hover` rule above (line 76) is specific enough to beat bare
   .site-brand, but not specific enough to beat .site-brand.new-work (two
   classes beats one class + one pseudo-class), so the white "26" seal never
   visibly changed on hover at all. Made explicit and identical for both
   states rather than relying on that specificity accident. */
.site-brand:hover,
.site-brand.new-work:hover {
    color: #928A83;
}

/* One-line nav treatment (2026-07-15) — the real two-line "SONS OF / SOUND"
   Anton brick (assets 2/handoff/lockups/sons-of-sound.svg) is the correct
   lockup construction and reads well as its own graphic, but doesn't fit
   this compact horizontal row; Jeff asked for a single-line version here
   specifically. Still Anton, still fixed paper white regardless of the
   seal's own legacy/new-work color (matches the source lockup's text,
   which is hardcoded white independent of the 97/26 seal swap). */
.site-brand-word {
    font-family: "Anton", sans-serif;
    font-size: 40px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #F7F5EF;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: "Space Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-nav-links a {
    color: #d8d3ce;
}

.site-nav-links a:hover {
    color: #F7F5EF;
}

/* A #site-wrapper.show-menu rule used to dim #content-wrapper AND
   #nav-explore here — a leftover from when "show-menu" was ALSO set by the
   old site-wide seal-dropdown (removed 2026-07-15). Since #nav-explore
   contains the category menu itself, and #nav-explore sits inside
   #content-wrapper in the DOM, that rule dimmed the just-opened menu along
   with the page behind it — read as "the menu comes in faded." Removed:
   the rule below (tied to show-explore-menu, the category menu's own
   toggle class) already correctly dims just the tile grid behind the menu.

   .show-explore-menu is active on #site-wrapper: the explore menu should be
   shown and all of the #explore-wrapper should be faded. */

#site-wrapper.show-explore-menu #nav-explore .explore-menu {
    display: block;
}

#nav-explore a:hover {
    color: #928A83;
}

#site-wrapper.show-explore-menu #explore-wrapper {
    opacity: .4;
}

.square {
    margin-bottom: 5px;
    position: relative;
}

.square p,
p.title,
p.sub-title {
    margin: 0;
    line-height: 1em;
}

.title {
    font-weight: bold;
}

.square-foreground {
    z-index: 1;
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.square-small {
    height: 248px;
}

.square-large {
    height: 500px;
}

.square-large .title,
.square-large .sub-title {
    font-size: 48px;
}

.square-small .title,
.square-small .sub-title {
    font-size: 18px;
}

.square a:hover {
    color: #F7F5EF;
}

.square.news {
    background: #F7F5EF;
    color: #292526;
}

.square.news a {
    color: #292526;
}

/* Fixed 2026-07-17: was `.squre.news` (typo), so this never matched
   anything — .square.news links had zero hover feedback, inconsistent
   with the dim-on-hover convention every other link on the site follows.
   Grey, not the generic `.square a:hover`'s white — this square's
   background is paper-light, so white text would be nearly invisible. */
.square.news a:hover {
    color: #928A83;
}

/* The Read More link's own higher-specificity blue (.square.news
   .news-navigation a, below) otherwise wins over the rule above on
   hover too (same 3-class specificity as a plain a:hover would need,
   but that generic rule loses to this one's own non-hover declaration) —
   needs its own explicit hover at matching specificity. */
.square.news .news-navigation a:hover {
    color: #928A83;
}

.square.album,
.square.artist {
    color: #F7F5EF;
}

/* Contact card (2026-07-17) — same content/purpose as meatpackingmusic.com's
   own home page card, ported here in this site's own .square/.square-small
   grid vocabulary. Solid ink-blue instead of a photo, so .square-foreground
   is switched to flex+centered here specifically (the news box's own
   header/body/bottom-pinned layout doesn't apply — there's no separate
   date/read-more row to anchor to the bottom). */
.square.contact .square-background {
    background: #2f52ad;
}

.square.contact .square-foreground {
    display: flex;
    align-items: center;
}

.contact-cols {
    display: flex;
    gap: 56px;
    font-family: "Space Mono";
    font-size: 13px;
    line-height: 1.7;
}

.contact-cols .col-label {
    color: rgba(247, 245, 239, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    margin-bottom: 8px;
}

.contact-cols .col-domain {
    color: #d8d3ce;
    display: block;
}

/* Explicit hover (2026-07-17) — col-domain/col-email's own 2-class
   selectors otherwise out-rank the generic `.square a:hover` (1 class +
   1 pseudo) regardless of hover state, same silent-override pattern
   fixed above for .square.news. Only the domain side that's a real link
   (`a.col-domain`) gets it — the self-referential side is a plain div,
   not a link, and shouldn't visually imply it's clickable. */
.contact-cols a.col-domain:hover {
    color: #F7F5EF;
}

.contact-cols .col-email a {
    color: #928A83;
}

.contact-cols .col-email a:hover {
    color: #F7F5EF;
}

/* .square-background never had its own sizing — it's a normal-flow div, so
   its height came from whatever the <img> inside naturally rendered at. Any
   source photo that wasn't cropped to a perfect square (the home page's
   featured squares only specify a thumbnail width, not "500x500" crop) left
   a gap at the bottom of the tile instead of filling it, and — since the
   image has no reserved space before it loads — the tile visibly "grew"
   into place as each photo arrived, rather than holding a stable box from
   first paint. Filling the fixed-height .square parent absolutely + cover
   fixes both: every tile is correctly sized immediately, regardless of the
   source photo's aspect ratio. */
.square-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.square-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Loads invisibly in its final, already-correctly-sized box and fades in
       once ready (main.js adds .loaded on the image's load/error event) —
       so a tile reads as "there the whole time, revealed" rather than
       popping into place once its photo arrives. Used on the home page's
       static featured/news squares; the catalog grid below uses its own
       scroll-triggered .explore.revealed fade instead (see below). */
    opacity: 0;
    transition: opacity 350ms ease;
}


.square-background img.loaded {
    opacity: 1;
}

.square.album .square-background,
.square.artist .square-background {
    opacity: .4;
    -webkit-transition: opacity 200ms ease-in-out;
       -moz-transition: opacity 200ms ease-in-out;
            transition: opacity 200ms ease-in-out;
}

.square.album:hover .square-background,
.square.artist:hover .square-background {
    opacity: 1;
}

#nav-explore {
    position: absolute;
    z-index: 5;
}

#nav-explore .explore-main {
    cursor: pointer;
}

#nav-explore .explore-main,
#nav-explore .explore-menu {
    background: #fff;
}

#nav-explore .explore-menu {
    display: none;
    height: auto;
    padding: 20px 20px 30px;
}

#nav-explore .explore-menu:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 5px;
    content: " ";

}

#nav-explore .explore-menu .square-header {
    border-bottom: 1px dotted #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#nav-explore .explore-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
}

#nav-explore .explore-menu a {
    color: #292526;
}

#nav-explore .explore-menu a:hover {
    color: #928A83;
}

.news-header {
    margin-bottom: 15px;
}

/* 26px matches meatpackingmusic.com's own home news teaser exactly (Jeff's
   call, 2026-07-17, ported here) — bigger than the 18px .square-small .title
   default the news box otherwise shares with featured artist/album tiles.
   Scoped to .news-header specifically so this doesn't change those tiles. */
.news-header .title {
    font-size: 26px;
}

.news-body {
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
    color: #4e4844;
}

/* Space Mono metadata treatment (2026-07-17), ported from
   meatpackingmusic.com's own news teaser — replaces the plain Libre
   Franklin date/Read More that used to match .news-body's own font
   exactly, making the two indistinguishable. */
.news-navigation {
    font-family: "Space Mono";
    font-size: 12px;
    text-transform: uppercase;
}

.news-navigation span {
    letter-spacing: 0.08em;
    color: #6d655f;
}

.square.news .news-navigation a {
    letter-spacing: 0.06em;
    color: #2f52ad;
}

#detail,
#news .article,
#information {
    color: #F7F5EF;
    border-top: 1px dotted #F7F5EF;
    padding-top: 30px;
    font-size: 14px;
}

#news .article {
    padding-bottom: 30px;
}

#detail ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#detail .left-content,
#news .left-content,
#information .left-content {
    width: 460px;
}

#detail .left-content .content-header,
#news .left-content .content-header {
    font-size: 48px;
    margin-bottom: 40px;
}

#detail .left-content .content-extra {
    margin-top: 40px;
    border-top: 1px dotted #F7F5EF;
    padding-top: 30px;
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
}

/* The Explore/Source/Related (or Explore/Follow/Discography) columns are
   3 x .span-1 (121px) inside a 460px-wide .left-content, leaving 87px of
   genuinely unused width. The last column holds the longest text (full
   recording/album titles) and wraps more than it needs to as a result -
   give it that leftover space instead of leaving it empty. */
#detail .content-extra .wide-last {
    width: 208px;
}

#detail .right-content .content-block,
#information .content-block {
    margin-bottom: 40px;
}

#detail .right-content .content-block:last-child,
#detail .right-content .content-block:last-child p:last-of-type,
#information .right-content .content-block:last-child,
#information .right-content .content-block:last-child p:last-of-type {
    margin-bottom: 0;
}

#detail .left-content .content-extra p.title,
#detail .right-content .content-block p.title {
    margin-bottom: 15px;
}

#news .author {
    margin-right: 40px;
}

#news .content-detail {
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 30px;
}

#news .article {
    border-top: 1px dotted #F7F5EF;
}

#information .title {
    font-family: "Archivo Narrow";
    font-size: 18px;
    margin-bottom: 20px;
}

#information .content-block {
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
}

#information .content-header {
    margin-bottom: 40px;
}

.pagination {
    display: none;
    margin: 0 auto;
    text-align: center;
    color: #928A83;
}

.pagination .disabled {
    display: none;
}

.pagination a {
    color: #F7F5EF;
}

.md {
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5 {
    font-size: inherit;
    line-height: 1em;
    font-weight: bold;
    color: inherit;
    margin: 0 0 15px;
}

.md p:last-child {
    margin-bottom: 0px;
}

/* Content blocks had no img rule at all until MediaAsset (2026-07-17) made
   embedding a raw image via Markdown possible — an uploaded asset otherwise
   renders at its native pixel size, blowing out the column (e.g. a 2000px
   logo). Caps to the block's own width, never upscales past the source. */
.md img {
    max-width: 100%;
    height: auto;
}

/* metadata: catalogue/date/credit text — Space Mono, per the re-skin spec */
.meta {
    font-family: "Space Mono";
}

/* Date consistency pass (2026-07-17) — the home page's own news teaser
   already got Space Mono + uppercase (.news-navigation, above); these two
   News blocks (artist/album detail pages, and the "From Meatpacking Music"
   cross-post block) were still rendering their date column in plain
   Libre Franklin, inherited from the surrounding .content-block.md, with
   no uppercase. .meta alone only fixes the font — .content-block.md's own
   uppercase comes from this same specificity trick .news-navigation used. */
.content-block.md .meta {
    text-transform: uppercase;
}

/* _news_article.html's date span (news list/detail pages) — same fix,
   different container. No prior .date rule existed at all before this. */
.content-detail .date {
    font-family: "Space Mono";
    text-transform: uppercase;
}

.empty-image {
    height: 200px;
    width: 100%;
    background-color: #222;
}

#id_email_container {
    position: relative;
    width: 248px;
}

#id_email_address {
    width: 100%;
    height: 30px;
    background: #fff;
    border: none;
}

#id_email_submit {
    position: absolute;
    right: -1px;
    top: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    width: 30px;
    height: 30px;
    background: #fff;
    line-height: 30px;
    display: none;
    cursor: pointer;
}

#footer {
    font-family: "Libre Franklin";
    font-size: 12px;
    line-height: 1.9;
    margin-top: -75px;
    border-top: 1px dotted #F7F5EF;
}

.copyright {
    margin-top: 15px;
    color: #F7F5EF;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.copyright svg {
    flex-shrink: 0;
}