/* latest.html content styles.
 *
 * EVERY rule is scoped under .latest-page. Nothing here may match the shared
 * header, footer or <body>. An unscoped `.page` rule previously matched the
 * WordPress body class `page`, clamping the whole document to 1180px and
 * hiding the piano keys.
 */
:root{--ink:#000;--ink-raised:#0b0b0d;--ink-sunken:#08080a;--line:#1e1e22;
--line-strong:#35353b;--paper:#fff;--paper-muted:#a8a8b0;--paper-faint:#6a6a72;
--font-display:"Cormorant Garamond",Times,serif;
--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;
--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:2.5rem;--text-4xl:3.5rem;
--tracking-wide:.08em;--tracking-wider:.2em;
--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-6:3rem;
--space-8:4rem;--space-12:6rem;--page-max:1180px;
--ease:cubic-bezier(.22,1,.36,1);--duration:320ms}
.latest-page{background:#000;color:#fff;font-family:var(--font-body);padding-bottom:4rem}
.latest-page h1,.latest-page h2,.latest-page h3,.latest-page h4{font-family:var(--font-display);font-weight:400;margin:0}
.latest-page a{color:inherit;text-decoration:none}
.latest-page ul{margin:0;padding:0;list-style:none}
.latest-page img{display:block;max-width:100%;height:auto}
.latest-page /* Visible to screen readers only. Used for the promo play button's label,.latest-page which would otherwise render as the word "Play" on top of the artwork. */
.sr-only{position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;}
.latest-page /* 3. Layout primitives ----------------------------------------------------- */

.page{width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-3);}
.latest-page .section{padding-block: var(--space-12);
    border-top: 1px solid var(--line);}
.latest-page .section--flush{border-top: 0;}
.latest-page .section__head{margin-bottom: var(--space-8);
    text-align: center;}
.latest-page .section__title{font-size: var(--text-3xl);
    letter-spacing: 0.02em;}
.latest-page .section__lede{margin-top: var(--space-2);
    color: var(--paper-muted);
    font-size: var(--text-lg);}
.latest-page /* Small uppercase label used above section titles and beside meta. */
.eyebrow{display: block;
    margin-bottom: var(--space-2);
    color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;}
.latest-page .button{display: inline-block;
    padding: 0.9em 2.2em;
    border: 1px solid var(--paper);
    background: transparent;
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                color var(--duration) var(--ease);}
.latest-page .button:hover,.latest-page .button:focus-visible{background: var(--paper); color: var(--ink);}
.latest-page .button--solid{background: var(--paper); color: var(--ink);}
.latest-page .button--solid:hover,.latest-page .button--solid:focus-visible{background: transparent; color: var(--paper);}
.latest-page /* Cover art. Square,.latest-page thin frame,.latest-page faint bloom so pure black art still reads
   as an object against a pure black page. */
.cover{position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--line-strong);
    background: var(--ink-raised);
    overflow: hidden;}
.latest-page .cover img{width: 100%; height: 100%; object-fit: cover;}
.latest-page .cover--hero{box-shadow: 0 0 120px -40px rgba(255, 255, 255, 0.28);}
.latest-page /* 6. Promo (latest release) ------------------------------------------------ */

/* Single video for the newest release only. Deliberately NOT a carousel:
   the old rotating version called scrollIntoView on a 5s timer,.latest-page which
   dragged the viewport back up the page while you were reading. */
/* MOBILE-FIRST, matching css/main.css.
   Originally .promo had display:grid with NO grid-template-columns, so it
   collapsed to one column and the square sleeve stretched to the full page
   width -- an 1180px cover above every release.
   My first fix declared two columns by DEFAULT and undid them in a max-width
   query; that left the sleeve at 320px on a 500px screen with 84px of text
   beside it, and the page overflowed. Defaulting to one column and adding the
   second only when there is room cannot fail that way.
   minmax(0,…): a grid item defaults to min-width:auto and would otherwise
   refuse to shrink below its content. */
.promo{display: grid;
    gap: var(--space-6);
    align-items: center;}
.latest-page .promo > .cover{max-width: 20rem; width: 100%; margin-inline: auto;}
@media (min-width: 900px){
    .promo{grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
           gap: var(--space-8);}
    .latest-page .promo > .cover{margin-inline: 0;}
}
.latest-page .promo__frame{position: relative;
    aspect-ratio: 9 / 16;
    max-height: 70vh;
    margin-inline: auto;
    border: 1px solid var(--line-strong);
    background: var(--ink-sunken);
    overflow: hidden;}
.latest-page .promo__frame img,.latest-page .promo__frame iframe{width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;}
.latest-page .promo__play{position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--paper);
    cursor: pointer;}
.latest-page .promo__play::before{content: "";
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--paper);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    transition: transform var(--duration) var(--ease),
                background var(--duration) var(--ease);}
.latest-page .promo__play::after{content: "";
    position: absolute;
    width: 0; height: 0;
    margin-left: 4px;
    border-left: 14px solid var(--paper);
    border-block: 9px solid transparent;}
.latest-page .promo__play:hover::before,.latest-page .promo__play:focus-visible::before{transform: scale(1.08);
    background: rgba(255, 255, 255, 0.14);}
.latest-page /* 7. Albums ---------------------------------------------------------------- */

.albums{display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));}
.latest-page .album{display: flex; flex-direction: column; gap: var(--space-2);}
.latest-page .album__cover{transition: opacity var(--duration) var(--ease);}
.latest-page .album:hover .album__cover{opacity: 0.82;}
.latest-page .album__title{font-size: var(--text-xl);
    letter-spacing: 0.01em;}
.latest-page .album__meta{color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;}
.latest-page .album__links{display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);}
.latest-page .album__link{color: var(--paper-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
    transition: color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);}
.latest-page .album__link:hover,.latest-page .album__link:focus-visible{color: var(--paper); border-color: var(--paper);}
.latest-page /* Marks a release that has no live link yet,.latest-page so it cannot be mistaken for one. */
.album__status{align-self: flex-start;
    padding: 0.35em 0.9em;
    border: 1px dashed var(--line-strong);
    color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;}
.latest-page /* Track listing. Two columns on wide screens to mirror the sleeve's
   Disc 1 / Disc 2 layout. */
.tracklist{display: grid; gap: var(--space-4);}
.latest-page .tracklist__disc-title{padding-bottom: var(--space-1);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--paper-faint);}
/* MOBILE-FIRST. Was a 3-column grid (number | title | tag) with the tag column
   `auto` and white-space:nowrap, so a long genre/language string such as
   "BRAZILIAN PHONK · PORTUGUESE" could not wrap and pushed the row wider than
   the screen -- the tag was sliced off at the right edge on a phone.
   Narrow: two columns, tag on its own line under the title, free to wrap.
   Wide: the original three-column row, tag right-aligned. */
.latest-page .track{display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--line);}
.latest-page .track:last-child{border-bottom: 0;}
.latest-page .track__number{color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;}
.latest-page .track__title{font-size: var(--text-sm);}
.latest-page .track__tag{color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    grid-column: 2;              /* sit under the title, not beside the number */
    white-space: normal;         /* must wrap on a phone */
    overflow-wrap: anywhere;}    /* long unbroken tokens cannot push the row */
@media (min-width: 40rem){
    .latest-page .track{grid-template-columns: 2.5rem minmax(0, 1fr) auto;}
    .latest-page .track__tag{grid-column: auto;
        white-space: nowrap;
        text-align: right;}
}
.latest-page /* 11. Motion & accessibility ----------------------------------------------- */

/* Reveal-on-scroll. The .is-visible class is added by JS; without JS the
   content must still be readable,.latest-page so the no-js state is fully opaque. */
.reveal{opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);}
.latest-page .reveal.is-visible{opacity: 1; transform: none;}
.latest-page .no-js .reveal{opacity: 1; transform: none;}
.latest-page .reveal{opacity: 1; transform: none;}
.latest-page /* Promo cards ------------------------------------------------------------- */

/* One 9:16 card per track. Fixed aspect-ratio so the grid does not reflow as
   the lazy-loaded images arrive. */
.cards{display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    margin-top: var(--space-3);}
.latest-page .card{margin: 0;}
.latest-page .card img{width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    transition: opacity var(--duration) var(--ease);}
.latest-page .card a:hover img,.latest-page .card a:focus-visible img{opacity: 0.8;}
.latest-page .card__caption{margin-top: var(--space-1);
    color: var(--paper-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.4;}

/* Kill the original teal page gradient on Latest.
   .latest-page (above) paints the CONTENT black, but the gradient lives on
   <body> — so it still showed through in the header strip, which is the teal
   line. The homepage hides it via home-theme.css, which Latest does not load.
   Scoped to this page's own body id so the tech pages (launch / sentinels /
   smart / audit / build) keep their original styling untouched.
   background-image must be cleared explicitly: an image paints OVER a colour,
   so setting background-color alone leaves the gradient visible. */
body.page-id-1229 {
    background-color: #000 !important;
    background-image: none !important;
}