/* gm-guitar-fx wood: walnut tongue-and-groove wall + oak pedalboard frame with brass screws. Pure CSS + inline SVG noise (data: URIs, CSP-safe, 0 extra requests). */
body.pb-page{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .011' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .04 0 0 0 0 .01 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --knots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='900'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .0025' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --pgrain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .011' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .04 0 0 0 0 .01 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --pw:128px;
  background-color:#24160d;
  background-image:
    radial-gradient(120% 70% at 50% 0,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%),
    linear-gradient(rgba(10,6,3,.38),rgba(10,6,3,.38)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.72) 0 2px,rgba(0,0,0,.28) 2px 4px,rgba(255,214,170,.09) 4px 5px,rgba(0,0,0,0) 5px var(--pw)),
    var(--grain),
    var(--knots),
    repeating-linear-gradient(90deg,#3a2415 0 var(--pw),#432a18 var(--pw) calc(var(--pw)*2),#33200f calc(var(--pw)*2) calc(var(--pw)*3),#3d2616 calc(var(--pw)*3) calc(var(--pw)*4));
  background-size:auto,auto,auto,240px 480px,360px 900px,auto;
}
body.pb-page .foot{border-top-color:rgba(255,214,170,.14)}
/* the board: honey-oak frame, dark felt deck, brass screws in each corner */
body.pb-page #pedalboard{
  --oak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .5' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .18 0 0 0 0 .06 0 0 0 1.2 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23o)'/%3E%3C/svg%3E");
  position:relative;box-sizing:border-box;margin:30px 0 0;padding:6px clamp(14px,2.6vw,30px) 30px;
  border:16px solid transparent;border-radius:16px;
  background:
    radial-gradient(130% 100% at 50% 0,rgba(255,255,255,.035),rgba(0,0,0,0) 60%) padding-box,
    linear-gradient(#141016,#100d12) padding-box,
    var(--oak) border-box,
    linear-gradient(180deg,#d39a5a,#b97c3f 30%,#c88b4c 55%,#a8692f) border-box;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(60,30,8,.9),0 26px 60px -20px rgba(0,0,0,.85),0 2px 0 1px rgba(255,220,160,.18);
}
body.pb-page #pedalboard::before{content:"";position:absolute;inset:-16px;border-radius:16px;pointer-events:none;
  --sc:radial-gradient(circle,#fff3c4 0 1px,#e8c066 1.6px,#b98a2e 3.4px,#6e4f14 4.6px,rgba(60,40,10,.6) 5.4px,rgba(0,0,0,0) 6px);
  background:var(--sc) 3px 3px/12px 12px no-repeat,var(--sc) calc(100% - 3px) 3px/12px 12px no-repeat,var(--sc) 3px calc(100% - 3px)/12px 12px no-repeat,var(--sc) calc(100% - 3px) calc(100% - 3px)/12px 12px no-repeat}
body.pb-page #pedalboard::after{content:"";position:absolute;inset:-16px;border-radius:16px;pointer-events:none;
  background:linear-gradient(45deg,rgba(0,0,0,0) 46%,#4a3210 46% 54%,rgba(0,0,0,0) 54%) 6px 6px/6px 6px no-repeat,linear-gradient(-45deg,rgba(0,0,0,0) 46%,#4a3210 46% 54%,rgba(0,0,0,0) 54%) calc(100% - 6px) 6px/6px 6px no-repeat,linear-gradient(45deg,rgba(0,0,0,0) 46%,#4a3210 46% 54%,rgba(0,0,0,0) 54%) 6px calc(100% - 6px)/6px 6px no-repeat,linear-gradient(-45deg,rgba(0,0,0,0) 46%,#4a3210 46% 54%,rgba(0,0,0,0) 54%) calc(100% - 6px) calc(100% - 6px)/6px 6px no-repeat}
body.pb-page #pedalboard>.pb-cat{margin-top:26px}
body.pb-page #pedalboard .pedal{box-shadow:0 10px 22px -8px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.5)}
@media (max-width:600px){
  body.pb-page{--pw:86px}
  body.pb-page #pedalboard{border-width:11px;padding:4px 9px 18px;border-radius:12px}
  body.pb-page #pedalboard::before,body.pb-page #pedalboard::after{inset:-11px;border-radius:12px}
  body.pb-page #pedalboard::before{background-size:9px 9px;background-position:1px 1px,calc(100% - 1px) 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px)}
  body.pb-page #pedalboard::after{display:none}
}
@media (forced-colors:active){body.pb-page #pedalboard{border:2px solid CanvasText}body.pb-page #pedalboard::before,body.pb-page #pedalboard::after{display:none}}
/* ---------- wooden stompbox plates (gm-guitar-fx tonewood). Category colour stays as the top stripe + glow. ---------- */
body.pb-page .pedal[data-wood]{
  --ink:#fff;--ink2:#fff;--sh:.12;--wa:#8a5a2b;--wb:#6b4220;--fig:none;--gr:.55;
  color:var(--ink);
  background:
    linear-gradient(115deg,rgba(255,255,255,var(--sh,.26)) 0,rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 52%,rgba(255,255,255,.07) 100%),
    var(--fig),
    linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
    var(--pgrain) 0 0/180px 360px,
    linear-gradient(172deg,var(--wa),var(--wb));
  box-shadow:inset 0 7px 0 var(--pc),inset 0 8px 0 rgba(0,0,0,.35),inset 0 -6px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.12),0 12px 24px -10px rgba(0,0,0,.85);
}
body.pb-page .pedal[data-wood].is-on{box-shadow:inset 0 7px 0 var(--pc),inset 0 8px 0 rgba(0,0,0,.35),inset 0 -6px 0 rgba(0,0,0,.22),0 0 0 2px var(--pc),0 0 34px -4px var(--pc)}
body.pb-page .pedal[data-wood]::before{border-color:rgba(0,0,0,.18);top:12px}
body.pb-page .pedal[data-wood] .kw,body.pb-page .pedal[data-wood] .pedal-name small{color:var(--ink);opacity:1}
body.pb-page .pedal[data-wood] .pedal-desc,body.pb-page .pedal[data-wood] .wood-voice{color:var(--ink2)}
body.pb-page .pedal[data-wood] .pedal-name{text-shadow:none}
/* light woods: dark ink */
body.pb-page .pedal[data-wood=pine],body.pb-page .pedal[data-wood=bamboo],body.pb-page .pedal[data-wood=ivory],body.pb-page .pedal[data-wood=zebrawood],body.pb-page .pedal[data-wood=bocote],body.pb-page .pedal[data-wood=oak]{--ink:#1c1108;--ink2:#22150a;--sh:.3}
body.pb-page .pedal[data-wood=pine]{--wa:#efd29a;--wb:#ddb575;--fig:radial-gradient(ellipse 16px 9px at 70% 62%,rgba(120,70,20,.5),rgba(120,70,20,.15) 60%,rgba(0,0,0,0) 72%)}
body.pb-page .pedal[data-wood=oak]{--wa:#dcb07a;--wb:#c7955c;--fig:repeating-linear-gradient(100deg,rgba(90,50,15,0) 0 11px,rgba(90,50,15,.12) 11px 13px)}
body.pb-page .pedal[data-wood=cedar]{--wa:#7e3f26;--wb:#5a2c17;--fig:repeating-linear-gradient(95deg,rgba(255,190,140,0) 0 14px,rgba(255,190,140,.08) 14px 17px)}
body.pb-page .pedal[data-wood=bamboo]{--wa:#ead79a;--wb:#d9c27a;--fig:repeating-linear-gradient(90deg,rgba(120,90,30,0) 0 26px,rgba(120,90,30,.22) 26px 27px,rgba(255,255,255,.18) 27px 28px),repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 88px,rgba(110,80,25,.32) 88px 90px,rgba(255,250,220,.4) 90px 92px,rgba(0,0,0,0) 92px 140px)}
body.pb-page .pedal[data-wood=ivory]{--wa:#f6efdf;--wb:#e6dcc3;--fig:repeating-linear-gradient(92deg,rgba(150,130,90,0) 0 20px,rgba(150,130,90,.07) 20px 22px)}
body.pb-page .pedal[data-wood=purpleheart]{--wa:#5c2c6c;--wb:#3d1949;--fig:repeating-linear-gradient(97deg,rgba(255,200,255,0) 0 9px,rgba(255,200,255,.07) 9px 11px)}
body.pb-page .pedal[data-wood=ebony]{--wa:#2c2521;--wb:#15110f;--fig:repeating-linear-gradient(93deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.04) 18px 19px)}
body.pb-page .pedal[data-wood=koa]{--wa:#73441d;--wb:#52300f;--fig:repeating-linear-gradient(180deg,rgba(255,210,140,0) 0 6px,rgba(255,210,140,.1) 6px 9px)}
body.pb-page .pedal[data-wood=padauk]{--wa:#8e321c;--wb:#672211;--fig:repeating-linear-gradient(96deg,rgba(255,170,120,0) 0 12px,rgba(255,170,120,.08) 12px 14px)}
body.pb-page .pedal[data-wood=zebrawood]{--wa:#e2cc9a;--wb:#d6bd86;--fig:repeating-linear-gradient(93deg,rgba(70,45,20,0) 0 7px,rgba(70,45,20,.2) 7px 11px,rgba(70,45,20,0) 11px 16px)}
body.pb-page .pedal[data-wood=bocote]{--wa:#d7ad6a;--wb:#c4954f;--fig:repeating-radial-gradient(ellipse 160px 40px at 30% 120%,rgba(60,35,10,0) 0 10px,rgba(60,35,10,.1) 10px 12px)}
/* wood name chip (click to cycle) + voicing line */
body.pb-page .wood-tag{align-self:flex-start;margin:2px 0 -4px;padding:3px 8px;border-radius:999px;border:1px solid var(--pc);background:rgba(10,6,3,.72);color:#fff;font:700 10px/1.3 var(--body,system-ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
body.pb-page .wood-tag:hover,body.pb-page .wood-tag:focus-visible{background:#120a05;outline:2px solid var(--pc);outline-offset:1px}
body.pb-page .wood-voice{margin:-4px 0 0;font:600 italic 12px/1.35 var(--body,system-ui)}
@media (max-width:600px){body.pb-page .wood-tag{align-self:center}body.pb-page .wood-voice{text-align:center;font-size:11px}}
@media (forced-colors:active){body.pb-page .pedal[data-wood]{background:Canvas;color:CanvasText}}
@media (pointer:coarse){.wood-tag{min-height:24px}}