:root{
    --bg:#f4f1ea;
    --ink:#1a1a1a;
    --muted:#8a857c;
    --accent:#c0392b;
    --paper:#fffdf8;
    --cable:#c73a30;   /* her red instrument cable */
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);
    font-family:"Georgia","Noto Serif",serif;line-height:1.6;
    overflow-x:hidden;}

  /* the cable lives behind everything solid */
  #cable-svg{position:absolute;top:0;left:0;z-index:0;pointer-events:none;}
  .solid{position:relative;z-index:2;}

  /* ===== header ===== */
  header{
    position:fixed;top:0;left:0;right:0;z-index:20;
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 40px;
    background:linear-gradient(var(--bg) 55%,transparent);
  }
  header .brand{font-size:17px;letter-spacing:.18em;font-weight:bold;color:var(--ink);text-decoration:none;}
  header .brand span{color:var(--accent);}
  header nav{display:flex;gap:24px;}
  header nav a{font-size:11.5px;letter-spacing:.2em;color:var(--muted);text-decoration:none;}
  header nav a:hover{color:var(--accent);}

  main{position:relative;max-width:960px;margin:0 auto;padding:0 24px;}

  /* ===== hero ===== */
  .hero{min-height:96vh;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:2;}
  .hero .hi{font-size:clamp(20px,2.4vw,30px);font-style:italic;color:var(--muted);}
  .hero h1{font-size:clamp(56px,8vw,104px);line-height:1.04;margin-top:4px;}
  .hero h1 span{color:var(--accent);}
  .hero .sub{margin-top:20px;font-size:19px;color:#3d3a35;letter-spacing:.04em;}
  .hero .sub.role{margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:.28em;text-transform:uppercase;}
  .hero .sub.line2{margin-top:26px;font-size:15px;color:#3d3a35;}
  .hero .sub.line3{margin-top:6px;font-size:14px;color:var(--muted);max-width:34em;line-height:1.7;}
  .hero .go{margin-top:52px;font-size:11px;letter-spacing:.32em;color:var(--ink);}
  #avatar{width:clamp(200px,26vw,280px);height:auto;flex:0 0 auto;
    border:1.5px solid var(--ink);box-shadow:10px 10px 0 rgba(26,26,26,.12);}
  @media (max-width:700px){
    .hero{flex-direction:column-reverse;justify-content:center;text-align:center;gap:28px;}
  }

  /* ===== section chips ===== */
  .chip{
    display:flex;justify-content:center;margin:90px 0 34px;position:relative;z-index:2;
    scroll-margin-top:96px;
  }
  .chip b{
    background:var(--bg);border:1px solid var(--accent);border-radius:99px;
    padding:6px 24px;font-size:11.5px;letter-spacing:.35em;color:var(--accent);font-weight:normal;
  }

  /* ===== generic solid card ===== */
  .card{
    background:var(--paper);border:1.5px solid var(--ink);
    box-shadow:6px 6px 0 rgba(26,26,26,.12);
    padding:30px 34px;
  }

  /* ===== about ===== */
  .about-row{display:flex;gap:44px;align-items:center;max-width:860px;margin:0 auto;}
  #figure{width:clamp(170px,22vw,230px);height:auto;flex:0 0 auto;
    position:relative;z-index:2;}
  @media (max-width:700px){
    .about-row{flex-direction:column;align-items:center;}
  }
  .about{max-width:640px;margin:0 auto;}
  .about p{font-size:15.5px;color:#3d3a35;}
  .about p + p{margin-top:12px;}
  .about .label{font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:12px;}

  /* ===== pedals ===== */
  .pedalboard{display:flex;flex-direction:column;gap:74px;padding:10px 0;}
  .pedal{
    width:400px;max-width:100%;
    background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;
    box-shadow:6px 6px 0 rgba(26,26,26,.12);
    padding:22px 26px 24px;position:relative;z-index:2;
    transition:transform .2s, box-shadow .2s;
  }
  .pedal:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(192,57,43,.22);}
  .pedal.right{align-self:flex-end;}
  .pedal.left{align-self:flex-start;}
  .pedal .toprow{display:flex;justify-content:space-between;align-items:center;}
  .knobs{display:flex;gap:14px;}
  .knob{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);position:relative;background:var(--bg);}
  .knob::after{content:"";position:absolute;left:50%;top:2px;width:1.5px;height:9px;background:var(--ink);transform:translateX(-50%) rotate(var(--r,0deg));transform-origin:50% 11px;}
  .led{width:10px;height:10px;border-radius:50%;background:#d8d3c8;border:1px solid rgba(26,26,26,.35);}
  .pedal.on .led{background:var(--accent);box-shadow:0 0 8px rgba(192,57,43,.7);}
  .pedal p.sum{margin-top:12px;font-size:14px;line-height:1.7;color:#3d3a35;}
  /* floating preview beside the pedal */
  .fpreview{position:absolute;top:-20px;z-index:6;
    background:var(--paper);border:1.5px solid var(--ink);
    box-shadow:8px 8px 0 rgba(26,26,26,.15);
    opacity:0;visibility:hidden;transform:rotate(-2deg) translateY(6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;pointer-events:none;}
  .pedal.left .fpreview{left:calc(100% + 26px);}
  .pedal.right .fpreview{right:calc(100% + 26px);transform:rotate(2deg) translateY(6px);}
  .pedal.previewing .fpreview{opacity:1;visibility:visible;transform:rotate(-2deg) translateY(0);}
  .pedal.right.previewing .fpreview{transform:rotate(2deg) translateY(0);}
  .fpreview .pimg{display:none;}
  .fpreview .pimg.show{display:block;}
  .fpreview .pimg img{display:block;width:auto;height:auto;max-width:340px;max-height:400px;}
  .fpreview .pimg span{display:block;padding:80px 46px;white-space:nowrap;
    font-size:10px;letter-spacing:.2em;color:var(--muted);}
  @media (max-width:760px){
    .pedal.left .fpreview{left:auto;right:0;top:auto;bottom:calc(100% + 14px);}
    .pedal.right .fpreview{right:0;top:auto;bottom:calc(100% + 14px);}
  }
  /* round footswitches */
  .switchrow{margin-top:16px;display:flex;gap:16px;}
  .fsw{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:var(--bg);
    cursor:pointer;position:relative;font-family:inherit;
    display:flex;align-items:center;justify-content:center;transition:all .15s;}
  .fsw::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px solid rgba(26,26,26,.4);}
  .fsw:hover, .fsw.active{
    border-color:var(--accent);background:var(--accent);
    box-shadow:0 0 10px rgba(192,57,43,.45);transform:translateY(1px);
  }
  .fsw:hover::after, .fsw.active::after{border-color:rgba(244,241,234,.55);}
  .pedal h2{
    margin-top:16px;font-size:20px;letter-spacing:.04em;line-height:1.3;
    font-family:"Futura","Avenir Next","Helvetica Neue",sans-serif;font-weight:800;
  }
  .pedal h2 span{color:var(--accent);}
  .pedal .who{margin-top:6px;font-size:14px;font-style:italic;color:#3d3a35;}
  .pedal .when{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-top:2px;}
  .pedal ul{margin:12px 0 0;padding-left:17px;}
  .pedal li{font-size:13.5px;margin:6px 0;color:#3d3a35;}
  .pedal .tags{margin-top:14px;display:flex;gap:7px;flex-wrap:wrap;}
  .pedal .tags i{font-style:normal;font-size:10.5px;letter-spacing:.06em;
    border:1px solid var(--muted);color:var(--muted);padding:2px 8px;border-radius:99px;}
  .pedal a.link{display:inline-block;margin-top:12px;font-size:12.5px;letter-spacing:.1em;
    color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);}
  .pedal .fx{font-size:10.5px;letter-spacing:.25em;color:var(--muted);}

  /* ===== works: tracklist ===== */
  .tracklist{max-width:640px;margin:0 auto;}
  .tracklist .label{font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:6px;}
  .track{display:flex;gap:18px;padding:16px 4px;border-bottom:1px solid rgba(26,26,26,.15);align-items:baseline;}
  .track:last-child{border-bottom:none;}
  .track .n{font-size:12px;color:var(--muted);letter-spacing:.1em;min-width:28px;}
  .track h3{font-size:17px;font-weight:normal;}
  .track p{font-size:13px;color:var(--muted);margin-top:2px;}
  .track .dur{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;}

  /* ===== side chain (music) ===== */
  .sidechain{max-width:640px;margin:0 auto;border-style:dashed;border-width:1.5px;}
  .sidechain .label{font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:12px;}
  .sidechain p{font-size:15px;color:#3d3a35;}
  .sidechain .soon{margin-top:16px;font-size:12.5px;letter-spacing:.1em;color:var(--muted);font-style:italic;}

  /* ===== gear specs (skills) ===== */
  .gear{max-width:760px;margin:0 auto;}
  .gear .label{font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:16px;}
  .gear dl{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;}
  .gear dt{font-size:12px;letter-spacing:.12em;color:var(--muted);padding-top:2px;}
  .gear dd{font-size:14px;color:#3d3a35;}

  /* ===== amp / contact ===== */
  .ampwrap{display:flex;flex-direction:column;align-items:center;margin:60px 0 40px;position:relative;z-index:2;
    scroll-margin-top:96px;}
  .amp{
    width:420px;max-width:92vw;background:var(--paper);
    border:2px solid var(--ink);border-radius:14px;
    box-shadow:8px 8px 0 rgba(26,26,26,.15);
    padding:20px 26px 26px;text-align:center;position:relative;
  }
  .amp .handle{width:110px;height:14px;border:2px solid var(--ink);border-bottom:none;
    border-radius:8px 8px 0 0;margin:-36px auto 20px;background:var(--bg);}
  .amp .panel{display:flex;justify-content:space-between;align-items:center;
    border:1.5px solid var(--ink);border-radius:8px;padding:10px 16px;background:var(--bg);}
  .amp .panel .brand-sm{font-size:11px;letter-spacing:.28em;}
  .amp .panel .ampknobs{display:flex;gap:10px;}
  .amp .panel .knob{width:18px;height:18px;}
  .amp .panel .knob::after{height:6px;transform-origin:50% 7px;}
  .amp .grill{
    margin-top:14px;height:132px;border:1.5px solid var(--ink);border-radius:8px;
    background:repeating-linear-gradient(45deg,var(--bg) 0 3px,rgba(26,26,26,.16) 3px 4px);
    position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .amp .grill .contact{
    display:flex;flex-direction:column;gap:6px;
    font-size:14px;color:#3d3a35;
  }
  .amp .grill .contact a{border-bottom:none;}
  .amp .input{
    position:absolute;left:50%;top:-9px;transform:translateX(-50%);
    width:16px;height:16px;border-radius:50%;background:var(--ink);
    border:3px solid #9a958c;
  }
  .amp a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);}
  .amp .social{margin-top:16px;display:flex;justify-content:center;gap:22px;}
  .amp .social a{border-bottom:none;line-height:0;}
  .amp .social svg{width:22px;height:22px;fill:var(--muted);transition:fill .15s;}
  .amp .social a:hover svg{fill:var(--accent);}
  .fin{margin:36px 0 46px;font-size:10.5px;letter-spacing:.4em;color:var(--muted);text-align:center;}

  @media (max-width:700px){
    header{padding:14px 18px;}
    header nav{gap:14px;}
    .pedal.left,.pedal.right{align-self:center;}
    .gear dl{grid-template-columns:1fr;}
    .track .dur{display:none;}
  }