/* FONTS */
@font-face {
    font-family: 'ABCFavorit';
    src: url('ABCFavorit-Regular.woff2') format('woff2'),
         url('ABCFavorit-Regular.woff') format('woff'),
         url('ABCFavorit-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'ABCFavoritMono';
    src: url('ABCFavoritMono-Regular.woff2') format('woff2'),
         url('ABCFavoritMono-Regular.woff') format('woff'),
         url('ABCFavoritMono-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  /* GLOBAL */
  
  :root {
    --color-bg: #000000;
    --color-fg: #f5f5f5;
    --color-invert: #f5f5f5;
    --color-invert-text: #000000;
    --border-thin: 1px;
    --font-body: 'ABCFavorit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'ABCFavoritMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      'Liberation Mono', 'Courier New', monospace;
    --section-padding-y: 40px;
    --page-padding-x: 16px;
    --hero-font-size: 32px;
    --transition-fast: 0.3s ease;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-fg);
    line-height: 1.125;
    -webkit-font-smoothing: antialiased;
  }
  
  .page {
    min-height: 100vh;
    padding: 16px var(--page-padding-x) 90px; /* was 80px */
  }  

/* GLOBAL LINKS */

a {
    color: var(--color-fg);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  
  a:hover,
  a:focus-visible {
    opacity: 0.8;
  }
  
  /* Places where links should NOT look like that */
  
  .btn,
  .btn:hover,
  .btn:focus-visible {
    text-decoration: none;
  }
  
  .mobile-menu-list a {
    color: var(--color-bg);
    text-decoration: none;
    opacity: 1;
  }
  
  
  /* HELPERS */
  
  .mono {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  
  /* HEADER */
  
  .site-header {
    padding-bottom: 24px;
  }
  
  .logo {
    font-size: 14px;
  }
  
  /* SECTIONS */
  
  .section {
    padding: var(--section-padding-y) 0;
  }
  
  .section:first-of-type {
    padding-top: 0;
  }
  
  /* HERO */
  
  .hero-text {
    font-size: var(--hero-font-size);
    font-weight: 400;
    margin: 0;
  }
  
  /* SERIAL CTA */
  
  .serial-title {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 8px;
  }
  
  .serial-sub {
    font-size: 14px;
    margin: 0 0 24px;
  }
  
  .serial-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .field {
    display: block;
    border: var(--border-thin) solid var(--color-fg);
    padding: 14px 16px;
    border-radius: 4px;
  }
  
  .field input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-fg);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    text-align: center;
  }
  
  .field input::placeholder {
    color: var(--color-fg);
    opacity: 1;
  }
  



  /* BUTTONS */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-color: var(--color-invert);
    color: var(--color-invert-text);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  
  .btn-full {
    margin-top: 16px;
  }
  
  .btn:hover,
  .btn:focus-visible {
    opacity: 0.9;
  }
  
  /* PROMO */
  
  .promo-text {
    font-size: var(--hero-font-size);
    margin: 0;
  }
  
  /* MOBILE NAV (STICKY BAR) */
  
  .mobile-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    background-color: var(--color-invert);
    height: 65px;
    padding: 0 var(--page-padding-x);  /* was 0 24px */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 40;
  }
  
  .mobile-nav-trigger {
    width: 100%;
    max-width: none;                  /* was 420px */
    border: none;
    background: transparent;
    display: flex;
    justify-content: space-between;   /* keeps F / + / T pushed out */
    align-items: center;
    font-size: 26px;
    padding: 0;
    color: #000000;
  }
  
  
  
  /* SLIDE-UP MENU */
  
  .mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    z-index: 30;
  }
  
  .mobile-menu-inner {
    width: 100%;
    background-color: var(--color-invert);
    transform: translateY(100%);
    transition: transform var(--transition-fast);
    padding: 16px var(--page-padding-x) 72px;
  }
  
  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 26px;              /* was 22px */
  }
  
  
  .mobile-menu-list li + li {
    margin-top: 12px;
  }
  
  .mobile-menu-list a {
    text-decoration: none;
    color: var(--color-bg);
    line-height: 1.66;
  }
  
  /* OPEN STATE */
  
  body.nav-open .mobile-menu {
    pointer-events: auto;
  }
  
  body.nav-open .mobile-menu-inner {
    transform: translateY(0);
  }
  
  
  /* ABOUT (from earlier) */
  
  .about-text p {
    margin: 0 0 24px;
    font-size: var(--hero-font-size);
    font-weight: 400;
  }
  
  .about-text p:last-child {
    margin-bottom: 24px;
  }
  
  .about-image-wrap {
    margin-top: 24px;
  }
  
  .about-image {
    display: block;
    width: 100%;
    height: auto;
  }
  

/* ORIGINAL MUSIC */

.original-music {
    padding-top: 24px;
  }
  
  /* Sticky header labels (transparent background) */
  .om-header {
    display: grid;
    grid-template-columns: 60px 120px 1fr;
    column-gap: 16px;
    font-size: 14px;
    position: sticky;
    top: 16px;               /* tweak if you want it a bit lower */
    z-index: 10;
  }
  
  .release-row {
    display: grid;
    grid-template-columns: 60px 120px 1fr;
    column-gap: 16px;
    margin-top: 32px;
    font-size: 14px;
  }
  
  /* YEAR */
  .release-year {
    align-self: flex-start;
  }
  
  /* TITLE */
  .release-title {
    align-self: flex-start;
  }
  
  .release-title a {
    color: var(--color-fg);
    text-decoration: underline;
  }
  
  .release-title span {
    display: block;
    margin-top: 2px;
    text-transform: none; /* keep as designed, but still mono font */
  }
  
  /* TRACKS */
  .release-tracks div {
    margin: 0;
    line-height: 1.4;
  }
  

/* REINTERPRETATIONS */

.reinterpretations {
    padding-top: 24px;
  }
  
  /* Sticky header (transparent) */
  .re-header {
    display: grid;
    grid-template-columns: 60px 140px 1fr;
    column-gap: 16px;
    font-size: 14px;
    position: sticky;
    top: 16px;
    z-index: 10;
  }
  
  .re-row {
    display: grid;
    grid-template-columns: 60px 140px 1fr;
    column-gap: 16px;
    margin-top: 32px;
    font-size: 14px;
  }
  
  .re-year {
    align-self: flex-start;
  }
  
  .re-artist {
    align-self: flex-start;
  }
  
  .re-track {
    align-self: flex-start;
    line-height: 1.4;
  }

/* CONTACT + LINKS */

.contact-links {
    padding-top: 24px;
    font-size: 14px;
  }
  
  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  .contact-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 24px;
  }
  
  .contact-label {
    align-self: flex-start;
  }
  
  .contact-items a {
    display: inline-block;
    margin-bottom: 4px;
  }
  
  /* FOOTER */
  
  .site-footer {
    margin-top: 80px;
    padding: 16px var(--page-padding-x) 90px; /* keep clear of bottom nav */
    display: grid;
    grid-template-columns: 1.5fr 1.5fr auto;
    column-gap: 16px;
    font-size: 9px;
  }
  
  .site-footer a {
    margin-right: 8px;
  }
  
  .footer-left div + div {
    margin-top: 2px;
  }
  
  .footer-center {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .footer-right {
    align-self: flex-start;
  }

/* PROTOMENSCH PAGE */

.protomensch-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* was flex-end */
    margin-bottom: 16px;   /* small breathing room under header */
  }
  
  .protomensch-header .logo,
  .protomensch-trailer-link {
    line-height: 1;        /* ensures clean baseline alignment */
  }
  
  
  .protomensch-header .logo {
    font-size: 32px; /* match hero / serial-title */
  }
  
  .protomensch-trailer-link {
    font-size: 10px;
    text-decoration: none;
  }
  
  .protomensch-trailer-placeholder {
    border-radius: 0;
    overflow: hidden;

  }
  
  .protomensch-trailer-placeholder img {
    display: block;
    width: 100%;
    height: auto;
  }

  .protomensch-trailer-placeholder video {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* Scroll band / marquee */
  
  .protomensch-scroll-wrap {
    padding: 2px 0;  /* was 16px 0 (and before that the 40px from .section) */
  }
  
  
  .proto-scroll {
    overflow: hidden;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
  }
  
  .proto-scroll-inner {
    display: inline-block;
    padding-right: 100%;
    animation: proto-marquee 40s linear infinite;
  }
  
  @keyframes proto-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  /* Expanded = paragraphs, no marquee */
  .proto-scroll.open {
    white-space: normal;
    overflow: visible;
  }
  
  .proto-scroll.open .proto-scroll-inner {
    display: block;
    padding-right: 0;
    animation: none;
  }
  
/* PROTOMENSCH TRACKLIST */

.tracklist {
    padding-top: 24px;
  }
  
  /* Header row */
  .tracklist-header {
    display: grid;
    grid-template-columns: 2fr 0.25fr 0.55fr; /* TITEL wide, NO narrow, LENGTH right */
    column-gap: 4px;
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  /* Align NO. and LENGTH headers with their columns */
  .tracklist-header div:nth-child(2),
  .tracklist-header div:nth-child(3) {
    justify-self: end;
    text-align: right;
  }
  
  /* Each track row + accordion trigger */
  .track {
    padding: 10px 0;
  }
  
  .track-row {
    display: grid;
    grid-template-columns: 2fr 0.25fr 0.55fr; /* match header */
    column-gap: 4px;
    align-items: baseline;
    cursor: pointer;
  }
  
  .track-title {
    font-size: 32px;
  }
  
  .track-no,
  .track-length {
    font-size: 14px;
    justify-self: end;
    text-align: right;
  }
  
  /* Details panel (shown when .track has .open) */
  
  .track-details {
    display: none;
    margin-top: 8px;
  }
  
  .track-featured {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .track-artwork img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
  }

  .track-artwork video {
    display: block;
    width: 100%;
    height: auto;
  }

  .track-artwork video.inline-loop {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    height: auto;
  }
  
  .track-links {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .track-info {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .track.open .track-details {
    display: block;
  }
  
  
  /* About / Presave */
  
  .protomensch-about {
    padding-top: 40px;
  }
  
  .protomensch-about-label {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .protomensch-about-text {
    font-size: 32px;
    margin: 0 0 24px;
  }
  
  .protomensch-presave-label {
    font-size: 14px;
    margin: 0 0 16px;
  }
  
  .protomensch-artwork img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
  }
  
  .protomensch-presave-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  

/* PROTOMENSCH: tighten header-to-trailer spacing */

.protomensch-header {
    margin-bottom: 4px; /* or 0 if you want it really tight */
  }
  
  .protomensch-hero {
    padding-top: 2px;   /* overrides the default 40px from .section */
    padding-bottom: 40px;
  }
  
/* =========================
   DESKTOP (≥1024px)
   ========================= */
@media (min-width: 1024px) {
  /* base desktop container */
  .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px 120px;
    padding-left: calc(32px + 56px);     /* leave room for collapsed rail */
  }

  /* hide mobile UI */
  .mobile-nav,
  .mobile-menu { display: none !important; }

  /* ---- Desktop Sidebar Nav ---- */
  .desk-nav {
    position: fixed;
    inset: 0 auto 0 0;     /* left, full height */
    width: 56px;
    display: flex;
    align-items: flex-start;
    background: var(--color-invert);
    border-right: 1px solid rgba(0,0,0,0.08);
    pointer-events: auto;
    z-index: 9998;         /* sits above the page */
  }

  .desk-nav-toggle {
    position: fixed;       /* sits on the rail */
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--color-invert-text);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;         /* above the panel too */
  }

  .desk-nav-panel {
    position: fixed;       /* overlay the page */
    left: 56px;            /* sits to the right of the rail */
    top: 0;
    height: 100vh;
    width: 0;              /* collapsed */
    overflow: hidden;
    background: var(--color-invert);
    color: var(--color-invert-text);
    transition: width 0.3s ease;
    z-index: 9990;         /* above the page */
  }

  body.desk-open .desk-nav-panel { width: 520px; }

  .desk-nav-list {
    list-style: none;
    margin: 0;
    padding: 24px var(--page-padding-x);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 32px;
  }
  .desk-nav-list li + li { margin-top: 28px; }
  .desk-nav-list a {
    color: var(--color-invert-text);
    text-decoration: none;
    position: relative;
    display: block;
  }
  .desk-nav-list a:hover::after,
  .desk-nav-list a:focus-visible::after {
    content: "→";
    position: absolute;
    right: 0; top: 0;
  }
}

/* Wider desktop polish (≥1440px) */
@media (min-width: 1440px) {
  .page { max-width: 1440px; }
  body.desk-open .desk-nav-panel { width: 560px; }
}



/* --- Home: desktop grid + mobile hide for teaser --- */

/* --- Home: desktop grid + mobile hide for teaser --- */

/* Mobile-first defaults */
.home-desktop-hero { display: block; }
.home-media { display: none; }              /* hide teaser on mobile */

/* Desktop (≥1024px): two columns + show teaser */
@media (min-width: 1024px) {
  .home-desktop-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 64px;                              /* adjust to increase/decrease gutter */
    align-items: start;
  }
  .home-media { display: block; }
}

/* --- Desktop menu: hover inversion --- */
@media (min-width:1024px){
  .desk-nav-list a{
    position: relative;
    display: block;
    width: 100%;
    padding: 18px 24px;
    text-decoration: none;
    background: transparent;
    color: var(--color-invert-text);        /* default: black */
    transition: background .2s ease, color .2s ease;
  }

  /* kill global link fade inside the panel */
  .desk-nav-panel a:hover,
  .desk-nav-panel a:focus-visible{
    opacity: 1 !important;
  }

  /* invert on hover */
  .desk-nav-list a:hover,
  .desk-nav-list a:focus-visible{
    background: var(--color-invert-text);   /* black */
    color: var(--color-invert);             /* white */
  }

  /* optional arrow on hover */
  .desk-nav-list a:hover::after,
  .desk-nav-list a:focus-visible::after{
    content:"→";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
  }
}

/* Inline loop video should behave like the artwork images */
.inline-loop {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;   /* match your current image style */
}


/* ---------- Desktop layout + nav behavior ---------- */
@media (min-width:1024px){
  /* Two-column home layout: ~2/3 : 1/3 */
  .home-desktop-hero{
    display:grid;
    grid-template-columns: 2fr 1fr; /* 2/3 : 1/3 feel */
    gap:64px;
    align-items:start;
  }
  .home-media{ display:block; }

  /* Use a single variable for menu open width */
  :root{
    --desk-rail: 56px;
    --desk-panel-width: 50vw;         /* expands to half screen */
  }

  /* Base page spacing with collapsed rail */
  .page{
    max-width:1280px;
    margin:0 auto;
    padding:24px 32px 120px;
    padding-left: calc(32px + var(--desk-rail));
    transition: transform .3s ease, padding-left .3s ease;
  }

  /* Rail (+) */
  .desk-nav{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--desk-rail);
    background:var(--color-invert);
    border-right:1px solid rgba(0,0,0,.08);
    z-index:1000;
  }
  .desk-nav-toggle{
    position:fixed; left:0; top:0;
    width:var(--desk-rail); height:var(--desk-rail);
    display:grid; place-items:center;
    border:0; background:transparent;
    color:var(--color-invert-text);
    font-size:40px; line-height:1; cursor:pointer;
    transition: opacity .2s ease;
    z-index:1002;
  }

  /* Sliding panel (starts collapsed) */
  .desk-nav-panel{
    position:fixed; left:var(--desk-rail); top:0; height:100vh;
    width:0; overflow:hidden;
    background:var(--color-invert); color:var(--color-invert-text);
    transition: width .3s ease;
    z-index:1001;
  }

  /* Menu list + arrow hint on hover */
  .desk-nav-list{
    list-style:none; margin:0; padding:24px var(--page-padding-x);
    font-family:var(--font-body);
    text-transform:uppercase; letter-spacing:.02em; font-size:32px;
  }
  .desk-nav-list li + li{ margin-top:28px; }
  .desk-nav-list a{
    position:relative; display:block;
    padding:18px 24px;
    text-decoration:none;
    color:var(--color-invert-text);
    transition:background .2s ease, color .2s ease;
  }
  .desk-nav-list a:hover,
  .desk-nav-list a:focus-visible{
    background:var(--color-invert-text);   /* black */
    color:var(--color-invert);             /* white */
  }
  .desk-nav-list a:hover::after,
  .desk-nav-list a:focus-visible::after{
    content:"→"; position:absolute; right:24px; top:50%;
    transform:translateY(-50%);
  }

  /* OPEN STATE (by class) */

  body.desk-open .desk-nav-toggle{
    opacity:0; pointer-events:none; /* hide + while open */
  }

  /* Remove that vertical line you saw under the panel */
  .desk-nav-panel::before{ content:none; }
}

/* =========================
   DESKTOP – OPEN MENU: 40 / 60 split
   ========================= */
@media (min-width:1024px){

  /* Panel owns the left 40% of the viewport */
  body.desk-open .desk-nav-panel{
    left: 0;                 /* start at the very left */
    width: 40vw;             /* 40% menu */
    min-width: 420px;
    max-width: none;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.06);
  }

  /* Let the panel receive hover/clicks; just hide the skinny rail visually */
body.desk-open .desk-nav{
  width: 0;
  border-right: 0;
  background: transparent;
  /* no pointer-events here */
}

/* Keep the + button hidden/unclickable while open (this one is fine) */
body.desk-open .desk-nav-toggle{
  opacity: 0;
  pointer-events: none;
}

/* Be explicit: the panel should always receive interaction */
.desk-nav-panel{ pointer-events: auto; z-index: 9990; }
  body.desk-open .desk-nav-toggle{
    opacity: 0;
    pointer-events: none;
  }

  /* CONTENT: actually become the remaining 60%,
     not just shifted. This also kills the “black bar” artifact. */
  .page{
    max-width: none;                /* unlock the desktop max */
    transition: margin-left .3s ease, width .3s ease;
  }
  body.desk-open .page{
    margin-left: 40vw;              /* sit to the right of panel */
    width: 60vw;                    /* fill the remainder */
  }

  /* Edge-to-edge hover rows inside the panel */
  .desk-nav-list{
    font-size: 36px;
    line-height: 1.2;
    margin: 0;
    padding: 24px 0;               /* no side padding → rows can fill full width */
  }
  .desk-nav-list li{ margin: 0; }

  .desk-nav-list a{
    position: relative;
    display: block;
    padding: 22px 56px 22px 28px;  /* room for arrow on the right */
    text-decoration: none;
    color: var(--color-invert-text);
    transition: background .2s ease, color .2s ease;
  }
  .desk-nav-list a:hover,
  .desk-nav-list a:focus-visible{
    background: var(--color-invert-text);   /* black strip spans full panel */
    color: var(--color-invert);             /* white text */
  }
  .desk-nav-list a:hover::after,
  .desk-nav-list a:focus-visible::after{
    content: "→";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Hide the right teaser and make the left column full width when the menu is open */
@media (min-width:1024px){
  body.desk-open .home-media{
    display: none !important;
  }
  body.desk-open .home-desktop-hero{
    grid-template-columns: 1fr; /* collapse to a single column */
  }
}



/* Hide the DESKTOP sidebar on mobile/tablet */
@media (max-width: 1023.98px) {
  .desk-nav { 
    display: none !important;
  }
}

/* Home teaser (right column): 9:16 portrait video */
.home-media .home-teaser {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;   /* keeps it portrait */
  object-fit: cover;      /* crops gracefully if the column is narrow */
  /* optional: add a subtle radius if you like
  border-radius: 4px;
  */
}

/* Make sure images (if ever used) also behave */
.home-media img {
  display: block;
  width: 100%;
  height: auto;
}