/* ============================================================
       ★★ THREE-PAGE SITE — files to upload to IONOS (same folder) ★★
         index.html  music.html  info.html   — the pages
         styles.css  script.js               — shared styles + behaviour
         logo.png  background.webp  portrait.webp
         golden.webp  mountains.webp  lovestruck.webp
         transmissions.webp  og-image.jpg
       ============================================================ */

    :root {
      /* The full-screen landscape background (local file) */
      --hero-img: url("background.webp");

      --text:        #ffffff;
      --text-dim:    rgba(255,255,255,0.72);
      --text-faint:  rgba(255,255,255,0.5);
      --glass:       rgba(20,22,20,0.34);
      --glass-brdr:  rgba(255,255,255,0.18);
      --dark-bg:     #2a2322;   /* deep brown — rgb(42,35,34), from natures.live */
      --dark-card:   #352c2b;   /* slightly lifted brown for cards */
      --beige:       #e7ded0;   /* warm beige drawn from the portrait's light tone */
      --dark-brdr:   rgba(255,255,255,0.1);
      --font: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'Space Mono', ui-monospace, 'Courier New', monospace; /* ★ swap for another mono if you prefer */
      --maxw: 1180px;
    }

    /* ---------- reset ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-family: var(--font); font-weight: 300; color: var(--text); background: var(--dark-bg); -webkit-font-smoothing: antialiased; line-height: 1.6; }
    img { display: block; max-width: 100%; }
    a   { color: inherit; text-decoration: none; }
    ul  { list-style: none; }

    /* ============================================================
       TOP BAR  (fixed; transparent over hero, frosted once scrolled)
       ============================================================ */
    .topbar {
      position: fixed; inset: 0 0 auto 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
      border-bottom: 1px solid transparent;
      /* background + blur fade in gradually with scroll (see JS) */
      will-change: background-color, backdrop-filter;
    }

    /* Your real wordmark logo image (black wordmark on transparent).
       It's inverted to white once the bar turns dark on scroll. */
    /* White wordmark — a soft shadow keeps it legible over light or dark areas */
    .logo { height: 46px; width: auto; filter: drop-shadow(0 1px 5px rgba(0,0,0,.5)); }

    .nav { display: flex; gap: 2.6rem; }
    .nav a {
      font-family: var(--font-mono);
      font-size: 1.1rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
      color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.35);
      transition: opacity .2s;
    }
    .nav a:hover { opacity: .6; }

    /* ----- Mobile: hamburger + dropdown panel ----- */
    .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px 6px; }
    .nav-toggle span {
      display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0;
      box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .25s, opacity .25s;
    }
    @media (max-width: 560px) {
      .logo { height: 33px; }
      .nav-toggle { display: block; }
      .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: rgba(42,35,34,0.97);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--dark-brdr);
        padding: .4rem 0 .8rem;
      }
      .topbar.nav-open .nav { display: flex; }
      /* While the menu is open, the bar goes solid dark brown (same as the
         inner pages) — !important beats the homepage scroll-fade inline style */
      .topbar.nav-open {
        background-color: rgba(42,35,34,0.92) !important;
        backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
        border-bottom-color: var(--dark-brdr) !important;
      }
      .nav a { font-size: .95rem; padding: .85rem clamp(1.25rem, 4vw, 3rem); text-shadow: none; }
      /* hamburger → X */
      .topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
      .topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }

    /* ============================================================
       HERO  (full-bleed landscape; cards + links overlaid)
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      padding-bottom: 3rem;
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    /* Hero photo as an <img> so it ALWAYS fills the block (no gap on any screen),
       zoomed in a touch and lifted so the motif sits higher. */
    .hero-bg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      transform: translateY(-40px) scale(1.1); /* ★ lift + zoom: more negative = higher; bigger scale = more zoom */
      will-change: transform;                   /* JS adds a slow-drift parallax on scroll */
      z-index: 0;
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.72) 100%);
    }
    /* iOS doesn't support fixed attachment well */
    @media (max-width: 820px) { .hero { background-attachment: scroll; } }
    /* Phones: the taller image (extra green at the bottom) is anchored to the
       hero's bottom edge and rendered 108% tall — the overflow crops the sky
       at the top, and the wider aspect shows more of the mountains. */
    @media (max-width: 700px) {
      .hero-bg { top: auto; bottom: 0; height: 104%; transform: none; }
      .hero { padding-bottom: 1.1rem; }   /* cards sit a bit lower over the image */
    }

    .hero-spacer { flex: 1 1 auto; }

    /* ----- release cards row ----- */
    .releases {
      position: relative; z-index: 2;
      width: 100%; max-width: var(--maxw); margin: 0 auto;
      padding: 0 clamp(1rem, 4vw, 2.5rem);
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    }

    /*  ★ TO ADD A RELEASE CARD HERE: copy one .card block, paste it,
        update the thumbnail, the text, and the VIEW link (#anchor). */
    .card {
      display: flex; flex-direction: column; gap: .6rem;
      padding: .9rem; border-radius: 10px;
      background: var(--glass);
      border: 1px solid var(--glass-brdr);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      transition: transform .25s ease, background .25s ease;
    }
    .card:hover { transform: translateY(-4px); background: rgba(20,22,20,0.5); }
    .card-row { display: flex; align-items: center; gap: .9rem; }
    .card-thumb { width: 72px; height: 72px; flex: none; border-radius: 6px; object-fit: cover; }
    .card-body { min-width: 0; }
    .card-kicker {
      display: block; text-align: left;
      font-family: var(--font-mono);
      font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-dim);
    }
    .card-text {
      font-size: .95rem; font-weight: 300; line-height: 1.4;
      text-shadow: 0 1px 8px rgba(0,0,0,.4);
    }
    .card-view {
      display: inline-block; margin-top: .45rem;
      font-family: var(--font-mono);
      font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-dim); transition: color .2s;
    }
    .card-view:hover { color: #fff; }

    /* ----- bottom strip: streaming text links + subscribe ----- */
    .hero-foot {
      width: 100%; max-width: var(--maxw); margin: 2.5rem auto 0;
      padding: 1.6rem clamp(1rem, 4vw, 2.5rem) 2.2rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
    }
    .stream-links { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
    .stream-links a {
      font-size: .85rem; font-weight: 400; color: var(--text-dim);
      text-shadow: 0 1px 8px rgba(0,0,0,.45); transition: color .2s;
    }
    .stream-links a:hover { color: #fff; }

    .subscribe {
      display: inline-flex; align-items: center; gap: .55rem;
      padding: .75rem 1.6rem; border-radius: 999px;
      border: 1px solid var(--beige);
      background: var(--beige); color: #2a2322;
      font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
      transition: transform .2s, opacity .2s;
    }
    .subscribe:hover { transform: translateY(-2px); opacity: .85; }
    .subscribe svg { width: 15px; height: 15px; }

    @media (max-width: 760px) {
      .releases { grid-template-columns: 1fr; max-width: 460px; }
      .hero { min-height: 100vh; }
      .hero-foot { flex-direction: column; align-items: flex-start; }
    }

    /* ============================================================
       SHARED SECTION (Music / Info) — dark, clean
       ============================================================ */
    .section { padding: 6rem clamp(1.25rem, 4vw, 3rem); max-width: var(--maxw); margin: 0 auto; }
    .section-label {
      font-family: var(--font-mono);
      font-size: .95rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
      color: var(--text-faint); margin-bottom: 2.2rem;
    }

    /* ----- Music grid (per-release platform links) ----- */
    .music-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
    }
    /*  ★ TO ADD A RELEASE: copy one .release block, paste it, and update
        the artwork, title, year, and the three streaming links. */
    .release {
      background: var(--dark-card); border: 1px solid var(--dark-brdr);
      border-radius: 10px; overflow: hidden;
      transition: transform .3s, border-color .3s;
      scroll-margin-top: 130px; /* clears the fixed header (with breathing room) when scrolled to via a card link */
    }
    .release:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.25); }
    /* On desktop the releases share one row directly under the header, so when a
       homepage card jumps to a release, offset enough that "Explore my music" shows
       too (like arriving via the menu). Mobile keeps the tighter offset above. */
    @media (min-width: 1000px) { .release { scroll-margin-top: 210px; } }
    .release-art { aspect-ratio: 1/1; overflow: hidden; }
    .release-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .release:hover .release-art img { transform: scale(1.05); }
    .release-info { padding: 1.2rem 1.3rem 1.5rem; }
    .release-meta { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .3rem; }
    .release-title { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: .55rem; color: var(--beige); }
    .release-listen { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .9rem; }
    .release-links { display: flex; flex-wrap: wrap; gap: .4rem; }
    .release-links a {
      font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
      padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--dark-brdr);
      color: var(--text-dim); transition: all .2s;
    }
    .release-links a:hover { background: var(--beige); color: #2a2322; border-color: var(--beige); }
    /* Streaming glyphs inside the Music release buttons.
       Order-based (Bandcamp, Subvert, Spotify, Apple Music); glyph tints with the button. */
    .release-links a::before {
      content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .5em;
      vertical-align: -.15em; background-color: currentColor;
      -webkit-mask: var(--svc) center / contain no-repeat; mask: var(--svc) center / contain no-repeat;
    }
    .release-links a:nth-child(1) { --svc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.5%2017%20L8%207%20L21.5%207%20L16%2017%20Z%22%2F%3E%3C%2Fsvg%3E"); }
    .release-links a:nth-child(2) { --svc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.2%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%229.2%22%2F%3E%3Cline%20x1%3D%222.8%22%20y1%3D%2212%22%20x2%3D%2221.2%22%20y2%3D%2212%22%2F%3E%3Cpath%20d%3D%22M4.6%206.7%20C8%209%2016%209%2019.4%206.7%22%2F%3E%3Cpath%20d%3D%22M4.6%2017.3%20C8%2015%2016%2015%2019.4%2017.3%22%2F%3E%3C%2Fsvg%3E"); }
    .release-links a:nth-child(3) { --svc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.4%22%2F%3E%3Cpath%20d%3D%22M6.6%209.7%20C10%208.1%2015%208.4%2018%2010.2%22%2F%3E%3Cpath%20d%3D%22M7%2013%20C10%2011.8%2014.4%2012%2017%2013.5%22%2F%3E%3Cpath%20d%3D%22M7.6%2016.1%20C10%2015.3%2013.6%2015.5%2015.8%2016.6%22%2F%3E%3C%2Fsvg%3E"); }
    .release-links a:nth-child(4) { --svc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%204%20L18.2%202.4%20L18.2%205.1%20L11%206.2%20Z%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224.4%22%20width%3D%221.7%22%20height%3D%2211.6%22%2F%3E%3Crect%20x%3D%2216.5%22%20y%3D%222.9%22%20width%3D%221.7%22%20height%3D%2211.4%22%2F%3E%3Cellipse%20cx%3D%227%22%20cy%3D%2216.3%22%20rx%3D%222.8%22%20ry%3D%222.1%22%2F%3E%3Cellipse%20cx%3D%2214.5%22%20cy%3D%2214.7%22%20rx%3D%222.8%22%20ry%3D%222.1%22%2F%3E%3C%2Fsvg%3E"); }

    /* ----- Info ----- */
    /* Desktop: bio top-left, contact links below it, portrait on the right.
       Mobile: bio → portrait → links (see media query). */
    .info-inner {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      grid-template-areas: "photo bio" "photo links";
      grid-template-rows: min-content 1fr;
      column-gap: 4.5rem; row-gap: 2.5rem; align-items: start;
      /* top-aligned right below the label, matching the Recordings page */
      margin: 0;
    }
    .info-bio { grid-area: bio; }
    .info-contact { grid-area: links; align-self: end; }  /* anchor to the portrait's bottom edge */
    .info-photo {
      grid-area: photo; align-self: center;
      width: 100%; max-width: 500px; aspect-ratio: 1/1; justify-self: start;
      border-radius: 10px; overflow: hidden; border: 1px solid var(--dark-brdr);
    }
    .info-photo img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 760px) {
      .info-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "bio" "photo" "links";  /* portrait sits between blurb and links */
        grid-template-rows: auto;
        row-gap: 2.5rem;
      }
      .info-contact { align-self: start; }
      .info-photo { max-width: 100%; justify-self: stretch; } /* match the full-width release images */
    }
    .info-bio {
      font-family: var(--font-mono);
      /* same size as the Transmissions blurb — fewer sizes across the page */
      font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 400; line-height: 1.9;
      max-width: 820px; color: #fff; letter-spacing: -0.01em;
    }
    .info-bio strong { font-weight: 500; }
    .info-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.5rem; }
    .info-links a {
      font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
      border-bottom: 1px solid var(--dark-brdr); padding-bottom: 3px; transition: color .2s, border-color .2s;
    }
    .info-links a:hover { color: #fff; border-color: #fff; }

    /* ----- Info contact groups (FOLLOW / ENQUIRE / LISTEN) ----- */
    .info-contact { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.9; }
    .info-group .info-cat {
      font-family: var(--font-mono);
      font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(42,35,34,0.8); margin-bottom: .9rem;
    }
    /* Same rounded pill / size as the Music-card streaming links, toned for the beige panel */
    .info-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
    .info-pills a {
      font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
      padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(42,35,34,0.28);
      color: rgba(42,35,34,0.78); transition: all .2s;
    }
    .info-pills a:hover { background: #2a2322; color: var(--beige); border-color: #2a2322; }

    /* ============================================================
       FOOTER
       ============================================================ */
    .news-icon { display: block; width: 250px; max-width: 74%; height: auto; margin: 0 auto 2.4rem; }
    /* Make the transmissions block + footer fill the viewport at the bottom of the Info page */
    #newsletter { min-height: 100vh; padding-top: 6rem; padding-bottom: 6rem; display: flex; flex-direction: column; justify-content: center; }
    .news-eyebrow { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); text-align: center; margin-bottom: 2.2rem; }
    #newsletter .section-label { text-align: center; color: #fff; font-size: clamp(1.2rem, 2.7vw, 1.75rem); line-height: 1.3; letter-spacing: 0.08em; margin-bottom: .55rem; }
    .subscribe-block { max-width: 680px; margin: 0 auto; text-align: center; }
    .subscribe-heading { font-family: var(--font); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; color: #fff; letter-spacing: -0.01em; margin-bottom: 1.1rem; }
    .subscribe-block p { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.7; color: var(--text-dim); max-width: 640px; margin: 0 auto 0.7rem; }
    .subscribe-block .subscribe { margin-top: 1.6rem; }
    .subscribe-form { max-width: 360px; margin: 2.4rem auto 0; text-align: left; }
    .subscribe-block .subscribe-fineprint { font-family: var(--font); font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.02em; text-align: center; margin: 0 auto; }
    footer { background: var(--dark-card); border-top: 1px solid var(--dark-brdr); padding: 3rem clamp(1.25rem, 4vw, 3rem) 1.4rem; text-align: center; }
    .footer-emblems { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 2.6rem 0 2.6rem; }
    .footer-chrome { display: block; width: 31px; height: auto; opacity: .5; }
    .footer-antenna { display: block; width: 31px; height: auto; opacity: .5; }
    .footer-mark { display: block; width: 31px; height: auto; opacity: .5; }
    .footer-links { display: flex; justify-content: center; flex-wrap: nowrap; align-items: center; font-size: clamp(.48rem, 2.4vw, .78rem); gap: .3rem .55em; margin-bottom: 2.6rem; }
    .footer-links a { font-family: var(--font-mono); letter-spacing: .02em; color: var(--text-dim); white-space: nowrap; transition: color .2s; }
    .footer-links a:hover { color: #fff; }
    .footer-links a:not(:last-child)::after { content: "\00B7"; margin-left: .55em; color: var(--text-faint); }
    .footer-social { margin-bottom: 2.6rem; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em; color: var(--text-dim); }
    .footer-social a { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 1px; transition: color .2s, border-color .2s; }
    .footer-social a:hover { color: #fff; border-color: #fff; }
    .footer-br { display: none; }                                  /* forced line break, phones only */
    @media (max-width: 700px) { .desk-br { display: none; } }      /* desktop-only line break */
    .mob-br { display: none; }                                     /* phone-only line break */
    @media (max-width: 700px) { .mob-br { display: inline; } }
    @media (max-width: 510px) { .footer-br { display: inline; } }
    .footer-copy { font-family: var(--font-mono); font-size: .64rem; color: var(--text-faint); }

    /* ---- Warm beige "inverted" bands: Info + Footer (full-bleed, deep-brown text) ---- */
    #info {
      background: var(--beige);
      box-shadow: 0 0 0 100vmax var(--beige);   /* extend the beige full width */
      clip-path: inset(0 -100vmax);
      /* Fill the viewport so the Transmissions block sits below the fold; header stays at the top like other pages */
      min-height: 100vh;
      display: flex; flex-direction: column;
    }
    #info .section-label { color: rgba(42,35,34,0.8); }
    #info .info-bio { color: #2a2322; }
    #info .info-links a { color: rgba(42,35,34,0.72); border-bottom-color: rgba(42,35,34,0.28); }
    #info .info-links a:hover { color: #2a2322; border-bottom-color: #2a2322; }
    #info .info-photo { border-color: rgba(42,35,34,0.18); }
    #info .info-contact { color: #2a2322; }
    #info .info-contact a { color: #2a2322; transition: color .2s; }
    #info .info-contact a:hover { color: #7a6a5f; }

    /* ---- Field journal: beige band below the Transmissions block ---- */
    #fieldnotes {
      background: var(--beige);
      box-shadow: 0 0 0 100vmax var(--beige);
      clip-path: inset(0 -100vmax);
      text-align: center;
      min-height: 100vh;
      display: flex; flex-direction: column; justify-content: center;
      padding-top: 5rem; padding-bottom: 5rem;
    }
    .fieldnotes-title { font-family: var(--font-mono); font-size: clamp(1.2rem, 2.7vw, 1.75rem); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #2a2322; margin-bottom: 1.9rem; }
    .fieldnotes-img { display: block; width: 250px; max-width: 62%; height: auto; margin: 0 auto 1.9rem; }
    .fieldnotes-line { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.6; color: #2a2322; max-width: 560px; margin: 0 auto; }
    .fieldnotes-line a { color: #2a2322; transition: color .2s; }
    .fieldnotes-line a:hover { color: #7a6a5f; }
    .fieldnotes-open { margin-top: 2.2rem; }
    .fieldnotes-open a { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.2vw, 1.3rem); letter-spacing: .1em; text-transform: uppercase; color: #2a2322; transition: color .2s; }
    .fieldnotes-open a:hover { color: #7a6a5f; }

    /* reveal-on-scroll */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* scroll-linked "drift-in" parallax target (JS sets the transform) */
    .js-parallax { will-change: transform; }

    /* ============================================================
       SUBSCRIBE MODAL (newsletter signup pop-up)
       ============================================================ */
    .subscribe { cursor: pointer; font-family: inherit; }
    /* Kept rendered (not display:none) so MailerLite can build the embedded
       form into it at load; hidden via opacity/visibility until opened. */
    .modal {
      position: fixed; inset: 0; z-index: 300;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .modal-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,.55);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .modal-card {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-46%);
      width: min(420px, 92vw); text-align: center;
      background: rgba(42,35,34,0.94); border: 1px solid var(--glass-brdr);
      border-radius: 16px; padding: 2.6rem 2rem 2.1rem;
      box-shadow: 0 30px 80px rgba(0,0,0,.5);
      opacity: 0; transition: opacity .28s ease, transform .28s ease;
    }
    .modal.open .modal-card { opacity: 1; transform: translate(-50%,-50%); }
    .modal-close {
      position: absolute; top: .7rem; right: 1rem; background: none; border: none;
      color: var(--text-dim); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: color .2s;
    }
    .modal-close:hover { color: #fff; }
    .modal-title { font-size: 1.7rem; font-weight: 500; margin-bottom: .45rem; }
    .modal-sub { font-size: .9rem; color: var(--text-dim); margin-bottom: 1.7rem; }
    #sub-form { display: flex; flex-direction: column; gap: .7rem; }
    #sub-form input[type=email] {
      width: 100%; padding: .85rem 1rem; border-radius: 10px; text-align: center;
      border: 1px solid var(--glass-brdr); background: rgba(255,255,255,.06);
      color: #fff; font: inherit; font-size: .95rem;
    }
    #sub-form input[type=email]::placeholder { color: var(--text-faint); }
    #sub-form input[type=email]:focus { outline: none; border-color: #c9a96e; }
    #sub-form button[type=submit] {
      padding: .85rem 1rem; border-radius: 10px; border: none; cursor: pointer;
      background: #fff; color: #1c1614; font: inherit; font-weight: 600; font-size: .9rem; transition: opacity .2s;
    }
    #sub-form button[type=submit]:hover { opacity: .85; }
    .sub-msg { font-size: .92rem; color: #c9a96e; margin-top: .4rem; }
    .ml-frame { display: none; }
    .modal-card .ml-embedded { width: 100%; }
    .ml-placeholder { color: var(--text-dim); font-size: .85rem; margin: 0; }
  
    /* ---- Inner pages (Music, Info): solid header + clearance beneath it ---- */
    body.inner .topbar {
      background: rgba(42,35,34,0.92);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--dark-brdr);
    }
    body.inner .section:first-of-type { padding-top: 8rem; }