:root{
    --ink:#17262B;
    --ink-line:#33474D;
    --paper:#F1ECE0;
    --paper-dim:#E4DDC9;
    --marigold:#E8A33D;
    --coral:#D8654F;
    --moss:#7C9473;
    --dusk:#5C7A99;
    --white:#FFFDF8;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Sans', sans-serif;
    min-height:100vh;
    background-image:
      linear-gradient(var(--ink),var(--ink)),
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(241,236,224,0.045) 39px, rgba(241,236,224,0.045) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(241,236,224,0.045) 39px, rgba(241,236,224,0.045) 40px);
  }
  h1,h2,h3{font-family:'Space Grotesk', sans-serif; margin:0;}
  .wrap{max-width:1080px; margin:0 auto; padding:28px 20px 60px;}
  a{color:inherit;}

  .masthead{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; border-bottom:2px dashed var(--ink-line); padding-bottom:20px; margin-bottom:28px;}
  .masthead .title-block .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--marigold);}
  .masthead h1{font-size:clamp(26px,4.5vw,40px); line-height:1.05; margin-top:6px;}
  .masthead p{color:var(--paper-dim); max-width:46ch; margin-top:8px; font-size:14.5px;}

  .tabs{display:flex; gap:6px; background:rgba(255,255,255,0.05); padding:6px; border-radius:999px; border:1px solid var(--ink-line); overflow-x:auto; max-width:100%;}
  .tab-btn{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
    background:transparent; border:none; color:var(--paper-dim); padding:10px 15px; border-radius:999px; cursor:pointer;
    transition:background .18s ease, color .18s ease;
  }
  .tab-btn.active{background:var(--marigold); color:#231402; font-weight:600;}
  .tab-btn:not(.active):hover{color:var(--paper);}

  .view{display:none;}
  .view.active{display:block; animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  .btn-primary{
    display:inline-block; padding:13px 22px; border:none; border-radius:9px; cursor:pointer; text-decoration:none;
    background:var(--coral); color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px;
    transition:transform .15s ease, background .15s ease;
  }
  .btn-primary:hover{background:#c1543f; transform:translateY(-1px);}
  .btn-outline{
    display:inline-block; padding:12px 20px; border:1.5px solid var(--marigold); border-radius:9px; cursor:pointer; text-decoration:none;
    background:transparent; color:var(--marigold); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px;
  }
  .btn-outline:hover{background:rgba(232,163,61,0.1);}

  .hero-signature{display:flex; gap:4px; margin:26px 0 8px;}
  .hero-signature .bar{width:6px; border-radius:3px; background:var(--marigold);}
  .home-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
  @media(max-width:760px){ .steps{grid-template-columns:1fr;} }
  .step-card{background:rgba(255,255,255,0.05); border:1px solid var(--ink-line); border-radius:14px; padding:20px 20px 22px;}
  .step-card .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--marigold); text-transform:uppercase; letter-spacing:.08em;}
  .step-card h3{margin-top:8px; font-size:17px;}
  .step-card p{font-size:13.5px; color:var(--paper-dim); margin-top:8px; line-height:1.5;}
  .split-note{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px;}
  @media(max-width:760px){ .split-note{grid-template-columns:1fr;} }
  .mode-card{border-radius:14px; padding:22px; }
  .mode-card.physical{background:var(--paper); color:var(--ink);}
  .mode-card.virtual{background:var(--ink); border:2px dashed var(--marigold);}
  .mode-card h3{font-size:16px;}
  .mode-card.physical h3{color:var(--ink);}
  .mode-card.virtual h3{color:var(--marigold);}
  .mode-card p{font-size:13.5px; margin-top:8px; line-height:1.55;}
  .mode-card.physical p{color:#4d5952;}
  .mode-card.virtual p{color:var(--paper-dim);}

  .card{background:var(--paper); color:var(--ink); border-radius:14px; padding:28px 26px; box-shadow:0 18px 40px rgba(0,0,0,0.35);}
  .card h2{font-size:22px; color:var(--ink);}
  .card .sub{color:#5b6a63; font-size:13.5px; margin-top:6px; margin-bottom:22px;}
  .submit-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px;}
  @media(max-width:820px){ .submit-grid{grid-template-columns:1fr;} }

  label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#5b6a63; margin-bottom:6px; margin-top:18px;}
  label:first-of-type{margin-top:0;}
  input[type=text], input[type=email], input[type=url], textarea, select{
    width:100%; padding:11px 13px; border-radius:8px; border:1.5px solid #cfc7ae; background:var(--white);
    font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; color:var(--ink); outline:none;
  }
  input:focus, textarea:focus, select:focus{border-color:var(--coral); box-shadow:0 0 0 3px rgba(216,101,79,0.15);}
  textarea{resize:vertical; min-height:64px;}
  .checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-top:18px;}
  .checkbox-row input{width:auto; margin-top:3px;}
  .checkbox-row label{margin:0; text-transform:none; font-family:'IBM Plex Sans',sans-serif; font-size:13px; letter-spacing:0; color:#3d463f;}
  .hp-field{position:absolute; left:-9999px; top:-9999px;}

  .genre-badge{display:inline-block; padding:2px 10px; border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:#231402;}

  .submit-btn{
    margin-top:24px; width:100%; padding:14px; border:none; border-radius:9px; cursor:pointer;
    background:var(--coral); color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px;
    transition:transform .15s ease, background .15s ease;
  }
  .submit-btn:hover{background:#c1543f; transform:translateY(-1px);}
  .submit-btn:disabled{opacity:.6; cursor:wait; transform:none;}
  .field-error{color:#a5312a; font-size:12px; margin-top:5px; font-family:'IBM Plex Mono',monospace; display:none;}

  .side-note{background:rgba(255,255,255,0.05); border:1px dashed var(--ink-line); border-radius:14px; padding:22px 22px; font-size:13.5px; color:var(--paper-dim); height:fit-content;}
  .side-note h3{font-size:15px; color:var(--marigold); margin-bottom:10px;}
  .side-note ul{padding-left:18px; margin:10px 0;}
  .side-note li{margin-bottom:6px;}
  .side-note h3:not(:first-child){margin-top:18px;}

  .thankyou{display:none; text-align:center; padding:50px 20px;}
  .thankyou.active{display:block;}
  .thankyou .vinyl{width:74px; height:74px; margin:0 auto 18px; border-radius:50%; background:radial-gradient(circle at center, var(--ink) 0 12%, var(--marigold) 13% 15%, var(--ink) 16% 100%); border:3px solid var(--paper-dim);}
  .thankyou h2{font-size:24px; color:var(--paper);}
  .thankyou p{color:var(--paper-dim); margin-top:8px;}
  .thankyou button{margin-top:18px; background:transparent; border:1.5px solid var(--marigold); color:var(--marigold); padding:9px 18px; border-radius:8px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

  #map{height:520px; border-radius:14px; border:2px solid var(--ink-line); margin-top:6px;}
  .map-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
  .map-toolbar .count{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--paper-dim);}
  .leaflet-popup-content-wrapper{background:var(--paper); color:var(--ink); border-radius:10px;}
  .leaflet-popup-content{font-family:'IBM Plex Sans',sans-serif; font-size:13px; margin:12px 14px;}
  .leaflet-popup-content b{font-family:'Space Grotesk',sans-serif; font-size:14.5px;}

  .mixtape-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:start;}
  @media(max-width:900px){ .mixtape-layout{grid-template-columns:1fr;} }
  .now-playing{background:var(--paper); color:var(--ink); border-radius:14px; padding:22px;}
  .now-playing .np-label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8a8064;}
  .now-playing h3{font-size:19px; margin-top:6px;}
  .now-playing .np-loc{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#5b6a63; margin-top:2px;}
  .now-playing .np-desc{font-size:13.5px; color:#4d5952; margin-top:10px; line-height:1.5;}
  .np-embed{margin-top:16px;}
  .np-fallback{margin-top:16px; text-align:center; padding:26px 14px; border:1.5px dashed #cfc7ae; border-radius:10px;}
  .np-fallback a{display:inline-block; margin-top:10px;}
  .np-controls{display:flex; gap:10px; margin-top:18px;}
  .np-controls button{flex:1; padding:10px; border-radius:8px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-family:'Space Grotesk',sans-serif; font-weight:600; cursor:pointer;}
  .np-controls button:hover{background:var(--ink); color:var(--paper);}
  .np-controls button:disabled{opacity:.35; cursor:default;}

  .playlist-panel{background:rgba(255,255,255,0.05); border:1px solid var(--ink-line); border-radius:14px; padding:18px; max-height:600px; overflow-y:auto;}
  .playlist-group-title{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--marigold); margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--ink-line);}
  .playlist-group-title:first-child{margin-top:0;}
  .track-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px;}
  .track-row:hover{background:rgba(255,255,255,0.06);}
  .track-row.active{background:rgba(232,163,61,0.16); border:1px solid var(--marigold);}
  .track-row .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
  .track-row .t-style{color:var(--paper-dim); font-size:11.5px; font-family:'IBM Plex Mono',monospace;}

  .faq-card{background:var(--paper); color:var(--ink); border-radius:14px; padding:22px 24px; margin-bottom:16px;}
  .faq-card h3{font-size:16.5px;}
  .faq-card p{font-size:14px; color:#4d5952; margin-top:8px; line-height:1.55;}

  .empty-state{text-align:center; padding:30px 20px; color:var(--paper-dim); font-size:13px;}

  footer{text-align:center; margin-top:50px; padding-top:22px; border-top:1px solid var(--ink-line);}
  footer a{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--paper-dim); text-decoration:none; letter-spacing:.04em;}
  footer a:hover{color:var(--marigold);}