/* Steinbach Instruments - shared styles (tokens/accents stay per page) */

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    margin:0;
    background:var(--void);
    color:var(--parchment);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  img{ max-width:100%; display:block; }

  ::selection{ background:var(--brass); color:var(--void); }

  :focus-visible{
    outline: 2px solid var(--brass-bright);
    outline-offset: 3px;
  }

  /* film grain overlay */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:200;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--brass);
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 64px);
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px, 5vw, 64px);
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background 0.4s ease, border-color 0.4s ease, padding 0.3s ease;
  }
  .nav.scrolled{
    background:rgba(11,9,8,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding-top:14px; padding-bottom:14px;
  }
  .nav-mark{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--parchment);
    text-decoration:none;
  }
  .nav-mark span{ color:var(--brass); }
  .nav-links{
    display:flex; gap:clamp(16px,3vw,36px);
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--parchment-dim);
    transition:color 0.25s ease;
  }
  .nav-links a:hover{ color:var(--brass-bright); }
  .nav-links a.active{ color:var(--brass-bright); }
  @media (max-width:720px){ .nav-links{ display:none; } }

  /* Mobile nav (burger) */
  .nav-toggle{
    display:none;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:36px;
    background:none; border:none; padding:0;
    cursor:pointer;
    position:relative; z-index:2;
  }
  .nav-toggle span{
    display:block; width:22px; height:1.5px;
    background:var(--parchment);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  @media (max-width:720px){
    .nav-toggle{ display:flex; }
    .nav-mark{ position:relative; z-index:2; }
    .nav.menu-open{ backdrop-filter:none; -webkit-backdrop-filter:none; }
    .nav.menu-open .nav-links{
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:26px;
      position:fixed; inset:0;
      background:rgba(11,9,8,0.97);
      backdrop-filter:blur(10px);
    }
    .nav.menu-open .nav-links a{ font-size:0.95rem; letter-spacing:0.16em; }
    .nav.menu-open .nav-item-drop{ text-align:center; }
    .nav.menu-open .nav-item-drop > a .caret{ display:none; }
    .nav.menu-open .nav-drop-menu,
    .nav.menu-open .nav-item-drop:hover .nav-drop-menu,
    .nav.menu-open .nav-item-drop:focus-within .nav-drop-menu{
      position:static; transform:none;
      opacity:1; visibility:visible;
      min-width:0; border:none; background:none; backdrop-filter:none;
      padding:14px 0 0;
      display:flex; flex-direction:column; align-items:center; gap:16px;
    }
    .nav.menu-open .nav-drop-menu::before{ display:none; }
    .nav.menu-open .nav-drop-menu a{ font-size:0.78rem; color:var(--parchment-faint); padding:0; }
    .nav.menu-open .nav-drop-menu a.current{ color:var(--brass-bright); }
    body.menu-open{ overflow:hidden; }
  }

  /* Instruments dropdown */
  .nav-item-drop{ position:relative; }
  .nav-item-drop > a .caret{
    display:inline-block; font-size:0.55rem; margin-left:5px;
    transform:translateY(-1px);
  }
  .nav-drop-menu{
    position:absolute; top:calc(100% + 12px); left:50%;
    transform:translateX(-50%) translateY(-4px);
    min-width:190px;
    background:rgba(11,9,8,0.96);
    backdrop-filter:blur(8px);
    border:1px solid var(--line);
    border-radius:3px;
    list-style:none; margin:0; padding:6px 0;
    opacity:0; visibility:hidden;
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-drop-menu::before{
    content:""; position:absolute; top:-14px; left:0; right:0; height:14px;
  }
  .nav-item-drop:hover .nav-drop-menu,
  .nav-item-drop:focus-within .nav-drop-menu{
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  .nav-drop-menu a{ display:block; padding:10px 18px; white-space:nowrap; }
  .nav-drop-menu a.current{ color:var(--brass-bright); }

  /* ---------- FOOTER ---------- */
  .footer{ padding:64px 0 40px; }
  .footer-disclaimer{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.04em; line-height:1.7; color:var(--parchment-faint); max-width:640px; margin:0 0 24px; }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
  .footer-bottom, .footer-bottom a{
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--parchment-faint); text-decoration:none;
  }
  .footer-bottom a:hover{ color:var(--parchment-dim); }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }