:root{--bg:#181813;--bg2:#211b16;--cream:#decaa4;--muted:#a99370;--rust:#713528;--line:rgba(222,202,164,.32);--serif:"Merriweather",Georgia,serif;--mono:"Merriweather",Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--mono);overflow-x:hidden}.screen-edge{position:fixed;inset:9px;z-index:1000;pointer-events:none;border:1px solid rgba(222,202,164,.25);box-shadow:inset 0 0 28px rgba(0,0,0,.18)}body:before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;background:radial-gradient(circle,transparent 55%,rgba(0,0,0,.15));}header{position:fixed;z-index:900;top:0;left:0;right:0;height:64px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(24,24,19,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}header a{color:var(--cream);text-decoration:none;font-size:10px;letter-spacing:.15em}nav{display:flex;gap:18px}.lessons-link{border:1px solid var(--line);padding:7px 9px;background:rgba(113,53,40,.24)}.page{min-height:100svh;scroll-snap-align:start;position:relative;padding:92px 6vw 44px}.hero{display:grid;grid-template-columns:.62fr 1fr;gap:5vw;align-items:center;background:radial-gradient(circle at 70% 45%,#35231b 0,transparent 42%)}.eyebrow{font-size:9px;letter-spacing:.18em}.hero h1{font:650 clamp(54px,7vw,108px)/.88 var(--serif);letter-spacing:-.05em;margin:12px 0 28px}.hero-links,.quick{display:flex;gap:8px;flex-wrap:wrap}.hero-links a,.quick a,.cta{color:var(--cream);text-decoration:none;border:1px solid var(--line);padding:10px 12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.lesson-button,.cta{background:var(--cream)!important;color:#201a15!important;border-color:var(--cream)!important}.photo-frame{margin:0;padding:11px;background:#26231c;border:1px solid rgba(222,202,164,.28);box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 0 0 5px rgba(222,202,164,.025)}.photo-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#181813}.hero-frame{width:min(44vw,690px);height:min(62vh,610px);justify-self:end}.scrollcue{position:absolute;bottom:20px;left:50%;color:var(--muted);text-decoration:none;font-size:8px;letter-spacing:.16em}.second{display:grid;grid-template-columns:1.08fr .92fr;gap:4vw;align-items:center;background:linear-gradient(125deg,#191a14,#211914)}.gallery{position:relative;height:68vh;min-height:500px}.look-frame{position:absolute;width:37%;height:57%;left:3%;top:5%;transform:rotate(-1deg)}.live-frame{position:absolute;width:46%;height:62%;right:7%;bottom:4%;transform:rotate(.8deg);z-index:2}.look-frame img,.live-frame img{object-fit:cover}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{border:0;background:none;color:var(--muted);padding:12px 16px;font:500 10px var(--mono);letter-spacing:.15em;cursor:pointer}.tab.active{color:var(--cream);border-bottom:2px solid var(--cream)}.lesson-tab{background:rgba(113,53,40,.28);border:1px solid rgba(222,202,164,.4)!important}.pane{display:none}.pane.active{display:block}.work-menu{display:grid;gap:8px}.work-menu button{text-align:left;background:rgba(255,255,255,.015);color:var(--cream);border:1px solid var(--line);padding:14px 15px;cursor:pointer}.work-menu strong{display:block;font:500 18px var(--serif)}.work-menu small{display:block;color:var(--muted);margin-top:4px}.quick{margin-top:18px}.statement{font:500 clamp(23px,2.5vw,38px)/1.1 var(--serif);max-width:560px}.pickle{position:fixed;right:24px;bottom:18px;z-index:950;width:76px;border:0;background:none;color:#aaca56;cursor:pointer;font:500 9px var(--mono);letter-spacing:.15em}.pickle svg{width:72px;display:block}.picklebody{fill:url(#g);stroke:#b9d964;stroke-width:1.5}.ridge{fill:none;stroke:#416c28;stroke-width:2;stroke-linecap:round}.bump{fill:#c8e36e}.shades{fill:#0d0d0c}.bridge{stroke:#0d0d0c;stroke-width:4}.mouth{fill:none;stroke:#183316;stroke-width:3;stroke-linecap:round}.overlay{position:fixed;z-index:1200;inset:0;background:rgba(10,10,8,.83);backdrop-filter:blur(15px);display:none;place-items:center;padding:30px}.overlay.open{display:grid}.modal{width:min(720px,92vw);max-height:82vh;overflow:auto;background:#201d17;border:1px solid var(--line);padding:34px;box-shadow:0 30px 90px #000}.modal h2{font:600 45px var(--serif);margin:4px 0 22px}.close{position:absolute;top:28px;right:34px;background:none;border:0;color:var(--cream);font-size:34px;cursor:pointer}.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.link-grid a,.presslink{color:var(--cream);text-decoration:none;border:1px solid var(--line);padding:13px}.drawer-list{display:grid;gap:8px}.drawer-list a{display:block;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line);padding:12px 0}.drawer-list small{display:block;color:var(--muted);margin-top:5px}@media(max-width:800px){.hero,.second{grid-template-columns:1fr}.hero-copy{padding-top:18px}.hero-frame{width:72vw;height:52vh}.gallery{height:58vh}.look-frame{width:44%;height:52%}.live-frame{width:53%;height:57%}.page{padding-left:7vw;padding-right:7vw}.link-grid{grid-template-columns:1fr}nav{gap:8px}header{padding:0 5vw}}
/* quadrant refinement */
.hero{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:3vw}
.hero-copy{justify-self:center;width:min(100%,470px)}
.hero-frame{width:min(47vw,735px);height:min(66vh,650px)}
.second{grid-template-columns:1fr 1fr;gap:3vw}
.gallery{height:72vh}
.look-frame{width:40%;height:61%;left:2%;top:3%}
.live-frame{width:49%;height:66%;right:4%;bottom:2%}
.panel{width:100%;max-width:620px;justify-self:center}
.work-menu{grid-template-columns:1fr 1fr}
.work-menu button{min-height:92px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr)}
.tab{text-align:center}
@media(max-width:800px){
 .hero,.second{grid-template-columns:1fr}
 .work-menu{grid-template-columns:1fr 1fr}
 .hero-frame{width:76vw;height:56vh}
}

/* 2026-09 refinement: one navigation system, Merriweather, lean music drawers */
body,button,a{font-family:"Merriweather",Georgia,serif}
.brand,.primary-nav a,.eyebrow,.work-menu small,.pickle span{font-family:"Merriweather",Georgia,serif}
.primary-nav a{padding:8px 10px;border:1px solid transparent}
.primary-nav a.active,.primary-nav a:hover{border-color:var(--line);background:rgba(113,53,40,.20)}
.hero-links,.tabs{display:none!important}
.work-menu{grid-template-columns:1fr 1fr}
.band-button{grid-column:1/-1;background:rgba(113,53,40,.20)!important;border-color:rgba(222,202,164,.52)!important}
.work-menu button{min-height:88px}
.work-menu strong{font-family:"Merriweather",Georgia,serif;font-weight:650}
.work-menu small{font-size:9px;letter-spacing:.08em}
.statement,.hero h1,.modal h2{font-family:"Merriweather",Georgia,serif}
.hero h1{font-weight:700}
.pane>.eyebrow{margin-bottom:14px}
@media(max-width:800px){
 .work-menu{grid-template-columns:1fr}
 .band-button{grid-column:auto}
 .primary-nav{gap:4px}
 .primary-nav a{font-size:9px;padding:7px 6px}
}

/* single-screen portfolio */
html,body{height:100%;overflow:hidden;scroll-snap-type:none}
header{height:56px;justify-content:center;padding:0}
.primary-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:24px}
.brand{display:none!important}
main{height:100vh;padding-top:56px;display:grid;grid-template-columns:1fr 1fr}
.page{min-height:0;height:calc(100vh - 56px);padding:3vh 3vw;overflow:hidden}
.hero{display:grid;grid-template-columns:.72fr 1.28fr;gap:2vw;align-items:center}
.hero-copy{justify-self:start;width:auto}
.hero h1{font-size:clamp(44px,5.4vw,82px);margin:8px 0}
.hero-frame{width:100%;height:min(66vh,620px);justify-self:stretch}
.scrollcue{display:none!important}
.second{display:grid;grid-template-columns:.92fr 1.08fr;gap:2vw;align-items:center}
.gallery{height:70vh;min-height:0}
.look-frame{width:46%;height:56%;left:0;top:3%}
.live-frame{width:58%;height:62%;right:0;bottom:2%}
.panel{max-height:72vh;overflow:auto;padding-right:4px}
.work-menu{gap:6px}
.work-menu button{min-height:68px;padding:9px 11px}
.work-menu strong{font-size:15px}
.work-menu small{font-size:7.5px;margin-top:2px}
.pickle{width:62px;right:18px;bottom:12px}.pickle svg{width:58px}
@media(max-width:1000px){
 main{grid-template-columns:.88fr 1.12fr}
 .hero{grid-template-columns:1fr}
 .hero-copy{position:absolute;z-index:3;left:4vw;bottom:6vh;text-shadow:0 2px 18px #000}
 .hero-frame{height:72vh}
 .second{grid-template-columns:.8fr 1.2fr}
}
@media(max-width:720px){
 html,body{overflow:auto}
 main{height:auto;display:block}
 .page{height:auto;min-height:100svh;overflow:visible}
 .hero-copy{position:relative;left:auto;bottom:auto}
 .panel{max-height:none;overflow:visible}
}

/* Two-slide wall / pinned-photo composition */
html,body{height:auto;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory}
header{display:none!important}
main{display:block;height:auto;padding:0}
.page{height:100svh;min-height:720px;padding:6vh 6vw;scroll-snap-align:start;overflow:hidden}
.hero{grid-template-columns:.82fr 1.18fr;gap:5vw;align-items:center}
.hero-copy{position:relative;left:auto;bottom:auto;justify-self:center;width:min(100%,520px);text-align:center}
.hero h1{font-size:clamp(58px,7vw,106px);margin:10px 0 28px}
.hero-links{display:flex!important;justify-content:center;gap:10px}
.hero-links a{min-width:105px;text-align:center}
.hero-frame{position:relative;width:min(46vw,720px);height:min(72vh,700px);justify-self:end;transform:rotate(.45deg);padding:14px;background:#d4c19d;border:1px solid rgba(38,30,22,.7);box-shadow:0 28px 70px rgba(0,0,0,.36)}
.hero-frame:before,.look-frame:before,.live-frame:before{content:"";position:absolute;z-index:5;width:11px;height:11px;border-radius:50%;top:8px;left:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#efe0bc 0 16%,#75674f 35%,#302b22 68%);box-shadow:0 2px 3px rgba(0,0,0,.55)}
.hero-frame img{background:#201d17}
.scrollcue{display:block!important;left:50%;transform:translateX(-50%);bottom:16px}
.second{grid-template-columns:1.02fr .98fr;gap:5vw;align-items:center}
.gallery{height:76vh;min-height:520px}
.look-frame,.live-frame{padding:10px;background:#d4c19d;border:1px solid rgba(38,30,22,.7);box-shadow:0 20px 50px rgba(0,0,0,.32)}
.look-frame{width:44%;height:57%;left:1%;top:5%;transform:rotate(-2.1deg)}
.live-frame{width:54%;height:63%;right:1%;bottom:4%;transform:rotate(1.5deg)}
.tabs{display:grid!important;grid-template-columns:repeat(3,1fr);margin-bottom:18px;border:1px solid var(--line)}
.tab{display:block!important;padding:12px 8px}
.panel{max-height:none;overflow:visible}
.work-menu{grid-template-columns:1fr 1fr;gap:7px}
.work-menu button{min-height:78px}
.band-button{grid-column:1/-1}
.pickle{width:86px;right:22px;bottom:18px;filter:drop-shadow(0 10px 9px rgba(0,0,0,.35))}
.pickle svg{width:82px}
@media(max-width:800px){
 .page{height:auto;min-height:100svh;overflow:visible;padding:8vh 7vw}
 .hero,.second{grid-template-columns:1fr}
 .hero-frame{width:78vw;height:55vh;justify-self:center}
 .gallery{height:58vh}
 .work-menu{grid-template-columns:1fr 1fr}
}
.smilefill{fill:#183316}.teeth{fill:none;stroke:#f1e6c6;stroke-width:5;stroke-linecap:round}.mouth{fill:none;stroke:#173016;stroke-width:2.5;stroke-linecap:round}

/* tactile handmade matte-board redesign — CSS treatment only, source photos untouched */
:root{
 --bg:#403a2f;
 --bg2:#4b4437;
 --cream:#f0dfbd;
 --muted:#c5ad82;
 --rust:#865042;
 --line:rgba(244,226,191,.38);
}
body{
 background:
   radial-gradient(ellipse at 18% 14%,rgba(255,255,255,.055),transparent 30%),
   radial-gradient(ellipse at 78% 72%,rgba(0,0,0,.075),transparent 36%),
   repeating-linear-gradient(7deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
   repeating-linear-gradient(97deg,rgba(0,0,0,.012) 0 1px,transparent 1px 5px),
   #403a2f;
}
body:after{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.48;
 background:
  repeating-radial-gradient(ellipse at 30% 20%,rgba(238,218,180,.026) 0 1px,transparent 1px 5px),
  linear-gradient(112deg,rgba(255,255,255,.018),transparent 35%,rgba(0,0,0,.028));
}
.hero,.second{background:transparent}
.screen-edge{border-color:rgba(239,219,181,.31);box-shadow:inset 0 0 42px rgba(25,20,15,.14)}
.photo-frame{
 overflow:visible;
 isolation:isolate;
 background:#d7c39d;
 border:1px solid #9e8b68;
 box-shadow:
   0 3px 2px rgba(0,0,0,.24),
   0 16px 24px rgba(19,15,10,.22),
   0 34px 65px rgba(19,15,10,.17),
   inset 0 0 0 1px rgba(255,245,220,.38);
}
.photo-frame img{
 position:relative;z-index:2;
 object-fit:contain;
 background:#211d17;
 box-shadow:0 1px 3px rgba(0,0,0,.45);
}
/* paper/photo curl shadows: no pixels in the photos are altered */
.photo-frame:after{
 content:"";position:absolute;z-index:-1;
 left:5%;right:4%;bottom:-7px;height:28px;
 background:radial-gradient(ellipse at center,rgba(0,0,0,.42),transparent 68%);
 filter:blur(7px);transform:rotate(-.4deg);
}
.hero-frame{
 padding:17px 17px 22px;
 border-radius:1px 2px 8px 2px;
 transform:perspective(1100px) rotateZ(.55deg) rotateY(-1.2deg);
 box-shadow:
  -3px 2px 2px rgba(0,0,0,.18),
  8px 16px 25px rgba(18,14,10,.22),
  21px 38px 70px rgba(18,14,10,.17),
  inset -5px -4px 10px rgba(100,75,43,.10),
  inset 4px 3px 8px rgba(255,248,226,.22);
}
.look-frame{
 padding:13px 13px 18px;
 border-radius:2px 1px 7px 2px;
 transform:perspective(900px) rotateZ(-2.2deg) rotateY(1.8deg);
}
.live-frame{
 padding:13px 13px 19px;
 border-radius:1px 3px 2px 8px;
 transform:perspective(900px) rotateZ(1.7deg) rotateY(-1.5deg);
}
/* dimensional metallic thumbtacks */
.hero-frame:before,.look-frame:before,.live-frame:before{
 width:14px;height:14px;top:7px;
 background:
  radial-gradient(circle at 31% 25%,#fff6d7 0 7%,#d5c59e 11%,#8a795a 38%,#504635 68%,#211e18 100%);
 border:1px solid rgba(20,17,13,.45);
 box-shadow:
   1px 2px 2px rgba(0,0,0,.55),
   0 5px 7px rgba(0,0,0,.22),
   inset 1px 1px 1px rgba(255,255,255,.4);
}
.panel{
 background:rgba(48,43,34,.30);
 border:1px solid rgba(239,219,181,.20);
 padding:20px;
 box-shadow:inset 0 0 24px rgba(255,245,218,.018);
 backdrop-filter:blur(1px);
}
.work-menu button{
 background:rgba(255,246,221,.035);
 border-color:rgba(239,219,181,.31);
}
.work-menu button:hover{background:rgba(255,246,221,.075)}

/* ===== PRODUCTION PROJECT PORTRAIT INTERACTION ===== */
.project-portrait-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  max-width:610px;
  padding-top:6px;
}
.project-portrait{
  position:relative;
  flex:0 0 108px;
  width:108px;
  height:108px;
  padding:0;
  overflow:hidden;
  border-radius:50%;
  border:1px solid rgba(240,221,185,.42);
  background:#2b251e;
  box-shadow:0 7px 12px rgba(13,9,5,.22),0 18px 34px rgba(13,9,5,.13);
  cursor:pointer;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;
}
.project-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,241,211,.13);
  pointer-events:none;
}
.project-portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.project-portrait:hover,
.project-portrait:focus-visible{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 10px 17px rgba(13,9,5,.27),0 27px 42px rgba(13,9,5,.17);
  outline:none;
}
.project-portrait:hover img,
.project-portrait:focus-visible img{transform:scale(1.10)}

.project-portrait.water img{object-position:50% 25%}
.project-portrait.nick img{object-position:54% 52%}
.project-portrait.sierra img{object-position:50% 34%}
.project-portrait.mike img{object-position:8% 23%}
.project-portrait.press{border-radius:18px}
.project-portrait.press img{object-position:50% 42%}

.project-focus[hidden]{display:none!important}
.project-focus{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  background:rgba(8,6,4,0);
  opacity:1;
  pointer-events:none;
}
.project-focus.is-opening,
.project-focus.is-open,
.project-focus.is-closing{
  pointer-events:auto;
}
.project-focus.is-opening,
.project-focus.is-open{
  animation:projectDimIn 1.25s cubic-bezier(.22,.61,.36,1) forwards;
}
.project-focus.is-closing{
  animation:projectDimOut 1.5s cubic-bezier(.37,0,.63,1) forwards;
}
@keyframes projectDimIn{
  from{background:rgba(8,6,4,0)}
  to{background:rgba(8,6,4,.60)}
}
@keyframes projectDimOut{
  from{background:rgba(8,6,4,.60)}
  to{background:rgba(8,6,4,0)}
}

.project-focus-card{
  width:min(1120px,92vw);
  display:grid;
  grid-template-columns:minmax(300px,34%) minmax(0,1fr);
  gap:38px;
  align-items:center;
}
.project-focus-photo{
  margin:0;
  height:min(72vh,680px);
  padding:12px 12px 18px;
  background:#d5c19d;
  border:1px solid rgba(63,48,34,.62);
  box-shadow:0 16px 24px rgba(10,7,4,.24),0 45px 85px rgba(10,7,4,.22);
}
.project-focus-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#211d17;
}
.project-focus-copy{
  max-width:650px;
  padding:28px 30px 30px;
  color:#f3e5cb;
  background:linear-gradient(135deg,rgba(27,23,19,.99),rgba(13,11,9,.985));
  border:1px solid rgba(231,211,176,.18);
  border-radius:3px 9px 4px 6px;
  box-shadow:0 12px 22px rgba(6,4,2,.25),0 38px 74px rgba(6,4,2,.26);
}
.project-focus-copy h2{
  margin:7px 0 20px;
  color:#f3e5cb;
  font:650 clamp(36px,4.4vw,66px)/.95 var(--serif);
  letter-spacing:-.035em;
}
.project-focus-copy .eyebrow{color:#cbb99a}
.project-focus-links{display:grid;grid-template-columns:1fr;gap:4px}
.project-focus-links a{
  color:#f3e5cb;
  text-decoration:none;
  padding:11px 4px;
  border-bottom:1px solid rgba(240,223,188,.26);
  font-size:13px;
  transition:padding-left .18s ease,background .18s ease;
}
.project-focus-links a:hover{
  padding-left:10px;
  background:rgba(255,255,255,.025);
}

/* The temporary clone is the only element that animates from button to foreground. */
.project-flight{
  position:fixed;
  z-index:1300;
  overflow:hidden;
  pointer-events:none;
  border:1px solid rgba(240,221,185,.48);
  background:#2b251e;
  box-shadow:0 20px 50px rgba(10,7,4,.28);
  transition:
    left .48s cubic-bezier(.16,.85,.24,1),
    top .48s cubic-bezier(.16,.85,.24,1),
    width .48s cubic-bezier(.16,.85,.24,1),
    height .48s cubic-bezier(.16,.85,.24,1),
    border-radius .48s cubic-bezier(.16,.85,.24,1),
    transform .48s cubic-bezier(.16,.85,.24,1);
}
.project-flight img{width:100%;height:100%;display:block;object-fit:cover}

body.project-focus-open{overflow:hidden}

@media(max-width:800px){
  .project-portrait-menu{gap:10px}
  .project-portrait{width:84px;height:84px;flex-basis:84px}
  .project-focus{align-items:flex-start;overflow:auto;padding:6vh 6vw}
  .project-focus-card{grid-template-columns:1fr;gap:20px;width:88vw}
  .project-focus-photo{width:min(82vw,420px);height:46vh;justify-self:center}
  .project-focus-copy{width:min(82vw,520px);justify-self:center}
  .project-focus-copy h2{font-size:36px}
}

/* ===== SECOND PAGE ACTIVE SECTION HIGHLIGHT ===== */
.second .panel{
  position:relative;
  border-radius:4px;
  transition:
    background-color .38s ease,
    box-shadow .38s ease,
    border-color .38s ease;
}
.second .tabs{
  gap:7px;
  border-bottom:0;
  margin-bottom:22px;
}
.second .tab{
  position:relative;
  border:1px solid rgba(222,202,164,.18);
  border-radius:3px;
  background:rgba(255,255,255,.018);
  color:var(--muted);
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}
.second .tab:hover{
  color:var(--cream);
  border-color:rgba(222,202,164,.40);
  transform:translateY(-1px);
}
.second .tab.active{
  color:#201a15!important;
  background:var(--cream)!important;
  border-color:var(--cream)!important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.16),
    0 0 0 1px rgba(222,202,164,.12);
  transform:translateY(-2px);
}
.second .lesson-tab{
  background:rgba(113,53,40,.16);
}
.second .panel[data-active-section="music"]{
  background:rgba(222,202,164,.025);
  box-shadow:0 0 0 1px rgba(222,202,164,.08),0 20px 55px rgba(0,0,0,.08);
}
.second .panel[data-active-section="lessons"]{
  background:rgba(113,53,40,.075);
  box-shadow:0 0 0 1px rgba(154,90,67,.18),0 20px 55px rgba(0,0,0,.09);
}
.second .panel[data-active-section="booking"]{
  background:rgba(118,105,78,.065);
  box-shadow:0 0 0 1px rgba(222,202,164,.10),0 20px 55px rgba(0,0,0,.09);
}
.project-portrait.is-selected{
  transform:translateY(-5px) scale(1.07);
  box-shadow:
    0 0 0 2px var(--cream),
    0 11px 20px rgba(13,9,5,.28),
    0 30px 48px rgba(13,9,5,.18);
}

/* Overlay audit hardening */
.project-focus[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
.project-focus.is-closing{pointer-events:none!important}
.project-focus.is-closing .project-focus-card,
.project-focus.is-closing .project-focus-links,
.project-focus.is-closing a{pointer-events:none!important}

/* ===== MASTER — FAST / IMMEDIATE TRANSITIONS ===== */

/* Page movement: starts instantly and settles quickly. */
html{
  scroll-behavior:auto;
}
.page,
.slide,
section{
  scroll-margin-top:0;
}

/* Project dim begins on the first rendered frame after click. */
.project-focus.is-opening,
.project-focus.is-open{
  animation:projectDimInFast .46s cubic-bezier(.16,.78,.24,1) forwards;
}
.project-focus.is-closing{
  animation:projectDimOutFast .42s cubic-bezier(.3,0,.5,1) forwards;
}
@keyframes projectDimInFast{
  0%{background:rgba(8,6,4,0)}
  100%{background:rgba(8,6,4,.60)}
}
@keyframes projectDimOutFast{
  0%{background:rgba(8,6,4,.60)}
  100%{background:rgba(8,6,4,0)}
}

/* Photo flies immediately rather than waiting for the dim. */
.project-flight{
  transition:
    left .31s cubic-bezier(.12,.82,.22,1),
    top .31s cubic-bezier(.12,.82,.22,1),
    width .31s cubic-bezier(.12,.82,.22,1),
    height .31s cubic-bezier(.12,.82,.22,1),
    border-radius .31s cubic-bezier(.12,.82,.22,1),
    transform .31s cubic-bezier(.12,.82,.22,1);
}

/* ===== MASTER — TACTILE TABLE DEPTH =====
   No artificial frame around expanded project photos.
   Consistent directional depth makes interface pieces feel laid on,
   hovering over, or pressed into the matte-board/table surface. */

:root{
  --table-hi: rgba(255,244,219,.16);
  --table-edge: rgba(75,54,36,.22);
  --table-shadow-near: rgba(20,12,7,.25);
  --table-shadow-far: rgba(20,12,7,.16);
  --table-inset-dark: rgba(30,20,12,.18);
  --table-inset-light: rgba(255,246,224,.11);
}

/* EXPANDED PHOTO: raw/natural photo edge, no beige mat/frame. */
.project-focus-photo{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible;
  box-shadow:
    0 5px 7px rgba(15,9,5,.30),
    0 17px 23px rgba(15,9,5,.25),
    0 42px 65px rgba(15,9,5,.18)!important;
  filter:drop-shadow(2px 5px 2px rgba(8,5,3,.10));
}
.project-focus-photo img{
  border:0!important;
  outline:0!important;
  border-radius:1px;
  box-shadow:none!important;
}

/* The dark information card sits physically above the surface too. */
.project-focus-copy{
  border:0!important;
  box-shadow:
    0 4px 5px rgba(12,8,5,.28),
    0 15px 20px rgba(12,8,5,.23),
    0 34px 52px rgba(12,8,5,.17),
    inset 0 1px rgba(255,246,224,.035)!important;
}

/* CLOSED PROJECT PHOTOS: small physical photo medallions resting on the board. */
.project-portrait{
  border:0!important;
  box-shadow:
    0 2px 2px rgba(20,12,7,.26),
    0 7px 9px rgba(20,12,7,.20),
    0 15px 22px rgba(20,12,7,.12)!important;
}
.project-portrait::after{
  box-shadow:
    inset 0 1px rgba(255,246,224,.08),
    inset 0 -1px rgba(35,23,14,.10)!important;
}
.project-portrait:hover,
.project-portrait:focus-visible{
  box-shadow:
    0 3px 3px rgba(20,12,7,.27),
    0 10px 13px rgba(20,12,7,.22),
    0 25px 32px rgba(20,12,7,.15)!important;
}

/* NAV / MENU CONTROLS: slightly pressed into the surface until engaged. */
.primary-nav a,
.tabs button,
.tab{
  box-shadow:
    inset 0 1px 2px var(--table-inset-dark),
    inset 0 -1px var(--table-inset-light),
    0 1px rgba(255,245,222,.05);
}
.primary-nav a:hover,
.primary-nav a.active,
.tabs button:hover,
.tabs button.active,
.tab:hover,
.tab.active{
  box-shadow:
    inset 0 1px rgba(255,246,224,.08),
    0 2px 3px var(--table-shadow-near),
    0 7px 12px var(--table-shadow-far);
}

/* LINK CARDS / BUTTON-LIKE CONTENT: tactile paper/card stock. */
.links a,
.link-grid a,
.work-menu button,
.booking-links a,
.lesson-links a,
.project-focus-links a{
  box-shadow:
    inset 0 1px rgba(255,246,224,.045),
    inset 0 -1px rgba(32,21,13,.12),
    0 2px 3px rgba(20,12,7,.12);
}
.links a:hover,
.link-grid a:hover,
.booking-links a:hover,
.lesson-links a:hover{
  box-shadow:
    inset 0 1px rgba(255,246,224,.06),
    0 3px 4px rgba(20,12,7,.18),
    0 9px 14px rgba(20,12,7,.12);
}

/* Existing pinned photographs: stronger contact shadow = visibly on top of table. */
.photo,
.photo-card,
.pinned-photo,
.frame{
  box-shadow:
    0 3px 4px rgba(18,11,6,.24),
    0 12px 18px rgba(18,11,6,.18),
    0 30px 40px rgba(18,11,6,.11);
}

/* Panels/panes: restrained inset edge, like content pressed into board. */
.pane,
.panel,
.content-card{
  box-shadow:
    inset 0 2px 4px rgba(37,24,14,.10),
    inset 0 -1px rgba(255,246,224,.07);
}

/* Pickle sits above the table instead of looking pasted onto viewport. */
#pickle,
.pickle{
  filter:
    drop-shadow(0 3px 2px rgba(17,10,6,.28))
    drop-shadow(0 11px 9px rgba(17,10,6,.17));
}

/* Flying image loses the artificial outline too. */
.project-flight{
  border:0!important;
  box-shadow:
    0 4px 5px rgba(10,6,4,.28),
    0 15px 20px rgba(10,6,4,.23),
    0 34px 48px rgba(10,6,4,.17)!important;
}

/* =========================================================
   MASTER — SLEEK MONOCHROME / SEAMLESS PHOTO INTEGRATION
   Photos remain untouched. All blending is CSS-only.
   ========================================================= */

:root{
  --bg:#060606;
  --bg2:#0b0b0b;
  --cream:#f3f3f1;
  --muted:#9a9a97;
  --rust:#d7d7d3;
  --line:rgba(255,255,255,.13);
  --table-hi:rgba(255,255,255,.08);
  --table-edge:rgba(255,255,255,.09);
  --table-shadow-near:rgba(0,0,0,.44);
  --table-shadow-far:rgba(0,0,0,.28);
  --table-inset-dark:rgba(0,0,0,.28);
  --table-inset-light:rgba(255,255,255,.045);
}

html,body{
  background:#060606;
  color:var(--cream);
}
body{
  background:
    radial-gradient(circle at 72% 33%, rgba(255,255,255,.035), transparent 34%),
    radial-gradient(circle at 18% 76%, rgba(255,255,255,.025), transparent 31%),
    linear-gradient(180deg,#080808 0%,#050505 100%);
}
body:before{
  background:
    radial-gradient(circle at 50% 48%, transparent 48%, rgba(0,0,0,.28) 100%);
}
.screen-edge{display:none!important}

/* Slides share one continuous black/graphite surface. */
.hero,
.second{
  background:transparent!important;
}
.page{
  isolation:isolate;
}
.page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.012),transparent 35%,rgba(255,255,255,.018) 70%,transparent);
}

/* FIRST SLIDE — image dissolves naturally into the black surface. */
.hero{
  grid-template-columns:.80fr 1.20fr;
  gap:4vw;
}
.hero-copy{
  text-align:left;
  justify-self:end;
  width:min(100%,500px);
  padding-left:2vw;
}
.hero h1{
  color:#f7f7f4;
  letter-spacing:-.055em;
  text-shadow:0 12px 38px rgba(0,0,0,.55);
}
.hero .eyebrow{color:#969693}

.hero-frame{
  position:relative;
  width:min(49vw,760px);
  height:min(75vh,740px);
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  overflow:visible;
  box-shadow:none!important;
  filter:
    drop-shadow(0 16px 24px rgba(0,0,0,.34))
    drop-shadow(0 38px 60px rgba(0,0,0,.22));
}
.hero-frame:before,
.look-frame:before,
.live-frame:before{
  display:none!important;
}
.hero-frame img{
  object-fit:cover;
  background:transparent!important;
  border-radius:2px;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-composite:intersect;
}

/* Sleek home actions: flat monochrome, subtle physical depth. */
.hero-links{
  gap:7px!important;
  justify-content:flex-start!important;
}
.hero-links a,
.quick a,
.cta{
  color:#e9e9e6;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px;
  padding:10px 15px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 6px 18px rgba(0,0,0,.16);
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}
.hero-links a:hover,
.quick a:hover,
.cta:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.27)!important;
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(0,0,0,.24);
}
.lesson-button,
.cta{
  color:#080808!important;
  background:#f0f0ed!important;
  border-color:#f0f0ed!important;
}

/* SECOND SLIDE — only the looking-back photo, large and blended. */
.second{
  grid-template-columns:1.04fr .96fr;
  gap:4.5vw;
}
.gallery{
  height:76vh;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.look-frame{
  position:relative!important;
  inset:auto!important;
  width:min(44vw,690px)!important;
  height:min(74vh,720px)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  overflow:visible;
  box-shadow:none!important;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.36))
    drop-shadow(0 38px 58px rgba(0,0,0,.25));
}
.look-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  background:transparent!important;
  border-radius:2px;
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 64%, rgba(0,0,0,.88) 76%, transparent 100%);
  mask-image:
    radial-gradient(ellipse at center, #000 64%, rgba(0,0,0,.88) 76%, transparent 100%);
}

/* Hide any old second-slide companion photo if a cached HTML copy ever includes it. */
.second .live-frame{
  display:none!important;
}

/* The content area reads as a sleek dark plate laid into the surface. */
.panel{
  width:100%;
  max-width:650px;
  padding:26px 28px;
  background:
    linear-gradient(145deg,rgba(18,18,18,.88),rgba(8,8,8,.84))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    inset 0 -1px rgba(0,0,0,.6),
    0 14px 34px rgba(0,0,0,.22),
    0 38px 72px rgba(0,0,0,.17)!important;
  backdrop-filter:blur(12px);
}
.pane,
.panel,
.content-card{
  box-shadow:none;
}
.pane>.eyebrow{
  color:#8d8d89;
}

/* If page-2 tabs are shown by future variants, keep them monochrome and sleek. */
.second .tabs{
  gap:8px;
  border:0;
}
.second .tab,
.second .lesson-tab{
  color:#9d9d99!important;
  background:#0d0d0d!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:999px!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 5px 14px rgba(0,0,0,.15)!important;
}
.second .tab:hover{
  color:#f4f4f2!important;
  border-color:rgba(255,255,255,.24)!important;
}
.second .tab.active{
  color:#080808!important;
  background:#efefec!important;
  border-color:#efefec!important;
  transform:translateY(-1px);
  box-shadow:
    0 7px 22px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06)!important;
}
.second .panel[data-active-section]{
  background:
    linear-gradient(145deg,rgba(18,18,18,.88),rgba(8,8,8,.84))!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 14px 34px rgba(0,0,0,.22),
    0 38px 72px rgba(0,0,0,.17)!important;
}

/* PROJECT BUTTONS — simple, borderless, photographic, with restrained lift. */
.project-portrait-menu{
  gap:12px;
}
.project-portrait{
  width:104px;
  height:104px;
  flex-basis:104px;
  border:0!important;
  background:#111!important;
  box-shadow:
    0 5px 12px rgba(0,0,0,.34),
    0 18px 30px rgba(0,0,0,.20)!important;
}
.project-portrait::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 -10px 22px rgba(0,0,0,.12)!important;
}
.project-portrait:hover,
.project-portrait:focus-visible,
.project-portrait.is-selected{
  transform:translateY(-5px) scale(1.045)!important;
  box-shadow:
    0 7px 15px rgba(0,0,0,.42),
    0 26px 42px rgba(0,0,0,.28)!important;
}
.project-portrait.press{
  border-radius:50%!important;
}
/* Preserve close-up mandolin image as Press + Performances button. */
.project-portrait.press img{
  object-position:50% 42%;
}

/* ARTIST OVERLAY — stark black/white, no decorative frame. */
.project-focus-copy{
  color:#f4f4f1;
  background:rgba(8,8,8,.96)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.42),
    0 40px 74px rgba(0,0,0,.34)!important;
}
.project-focus-copy h2{
  color:#f6f6f3;
}
.project-focus-links a{
  color:#e8e8e5;
  border-bottom-color:rgba(255,255,255,.12);
  box-shadow:none!important;
}
.project-focus-links a:hover{
  background:rgba(255,255,255,.055);
}

/* Expanded image remains natural-edge and floats over the dark table. */
.project-focus-photo{
  box-shadow:
    0 7px 10px rgba(0,0,0,.42),
    0 22px 34px rgba(0,0,0,.34),
    0 58px 86px rgba(0,0,0,.25)!important;
}
.project-flight{
  background:#0a0a0a!important;
  box-shadow:
    0 8px 12px rgba(0,0,0,.42),
    0 30px 48px rgba(0,0,0,.30)!important;
}

/* Link hub also follows the monochrome language. */
.overlay{
  background:rgba(0,0,0,.86);
}
.modal{
  background:#0b0b0b!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:18px;
  box-shadow:0 34px 100px rgba(0,0,0,.72)!important;
}
.link-grid a,
.presslink{
  color:#ededeb;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:10px;
  box-shadow:none!important;
}
.link-grid a:hover{
  background:rgba(255,255,255,.065);
}

/* Pickle remains the one intentional color accent. */
.pickle{
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,.42))
    drop-shadow(0 15px 11px rgba(0,0,0,.25));
}

/* Mobile keeps the single-photo composition clean. */
@media(max-width:800px){
  .hero,
  .second{
    grid-template-columns:1fr;
  }
  .hero-copy{
    text-align:center;
    justify-self:center;
    padding-left:0;
  }
  .hero-links{
    justify-content:center!important;
  }
  .hero-frame{
    width:min(82vw,660px);
    height:52vh;
    justify-self:center;
  }
  .gallery{
    height:48vh;
  }
  .look-frame{
    width:min(84vw,600px)!important;
    height:48vh!important;
  }
  .panel{
    padding:20px;
    border-radius:14px!important;
  }
}

/* =========================================================
   MASTER — COZY BLACK / LEGIBILITY / PHOTO THUMBNAIL UPDATE
   ========================================================= */

/* Tastefully lit black tactile surface: charcoal fibers + warm low light. */
body{
  background-color:#050505!important;
  background-image:
    radial-gradient(ellipse at 76% 17%, rgba(255,232,198,.070) 0%, rgba(255,232,198,.025) 22%, transparent 47%),
    radial-gradient(ellipse at 17% 76%, rgba(255,244,225,.038) 0%, transparent 38%),
    radial-gradient(circle at 48% 48%, rgba(255,255,255,.018), transparent 54%),
    repeating-linear-gradient(17deg, rgba(255,255,255,.010) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(103deg, rgba(255,255,255,.007) 0 1px, transparent 1px 7px),
    linear-gradient(145deg,#0c0c0b 0%,#050505 48%,#090908 100%)!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.022) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.015) 0 1px, transparent 1.5px);
  background-size:9px 11px,13px 15px;
  mix-blend-mode:screen;
}
.page::after{
  background:
    radial-gradient(ellipse at 68% 38%,rgba(255,236,205,.028),transparent 34%),
    linear-gradient(120deg,rgba(255,255,255,.012),transparent 36%,rgba(255,255,255,.015) 72%,transparent)!important;
}

/* Global readability: larger UI typography and no black-on-black controls. */
body{font-size:17px}
.hero-links a,
.quick a,
.cta,
.tab,
.second .tab,
.second .lesson-tab,
.project-focus-links a,
.link-grid a,
.presslink,
.modal a,
.panel button,
.panel a{
  font-size:15px!important;
  line-height:1.25!important;
}
.hero-links a,
.quick a,
.second .tab,
.second .lesson-tab,
.link-grid a,
.presslink,
.modal a,
.panel button,
.panel a{
  color:#eeeeeb!important;
}
.hero-links a strong,
.quick a strong,
.panel button strong,
.panel a strong,
.link-grid a strong{
  color:inherit!important;
}
.lesson-button,
.cta,
.second .tab.active{
  color:#090909!important;
  background:#f0f0ed!important;
}
.lesson-button *,
.cta *,
.second .tab.active *{
  color:#090909!important;
}
.pane p,
.panel p{
  font-size:17px;
  line-height:1.58;
}
.pane h2{
  font-size:clamp(31px,3.4vw,49px);
}

/* Artist thumbnails are monochrome at rest; source images are untouched. */
.project-portrait img{
  filter:grayscale(1) contrast(1.07) brightness(.90);
  transition:
    filter .28s ease,
    transform .35s cubic-bezier(.2,.8,.2,1);
}
.project-portrait:hover img,
.project-portrait:focus-visible img{
  filter:grayscale(1) contrast(1.10) brightness(1);
}
/* Expanded/project-flight imagery is always original full color. */
.project-focus-photo img,
.project-flight img{
  filter:none!important;
}

/* Second slide source is lower resolution: present it smaller instead of enlarging it.
   This avoids interpolation blur and gives it intentional breathing room. */
.gallery{
  height:66vh!important;
}
.look-frame{
  width:min(32vw,500px)!important;
  height:min(60vh,590px)!important;
  max-width:500px!important;
  max-height:590px!important;
  filter:
    drop-shadow(0 7px 8px rgba(0,0,0,.40))
    drop-shadow(0 25px 38px rgba(0,0,0,.28))!important;
}
.look-frame img{
  object-fit:contain!important;
  object-position:center!important;
  -webkit-mask-image:
    radial-gradient(ellipse at center,#000 69%,rgba(0,0,0,.92) 80%,transparent 100%)!important;
  mask-image:
    radial-gradient(ellipse at center,#000 69%,rgba(0,0,0,.92) 80%,transparent 100%)!important;
}

/* Slightly more tactile controls without adding visual clutter. */
.hero-links a,
.quick a,
.second .tab,
.link-grid a,
.presslink{
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 0 -1px rgba(0,0,0,.65),
    0 5px 13px rgba(0,0,0,.22)!important;
}
.panel{
  background:
    radial-gradient(ellipse at 18% 0%,rgba(255,238,210,.035),transparent 35%),
    linear-gradient(145deg,rgba(20,20,19,.91),rgba(7,7,7,.89))!important;
}

@media(max-width:800px){
  body{font-size:16px}
  .gallery{height:43vh!important}
  .look-frame{
    width:min(68vw,420px)!important;
    height:41vh!important;
  }
  .hero-links a,
  .quick a,
  .tab,
  .project-focus-links a,
  .link-grid a{
    font-size:14px!important;
  }
}

/* =========================================================
   COZY BLACK V2 — SECOND PHOTO BLEND + LIFT + TAB LEGIBILITY
   ========================================================= */

/* Second-page image: same edge-dissolve language as page one,
   but much subtler so the original rectangular photograph remains present. */
.look-frame{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:
    drop-shadow(0 5px 4px rgba(0,0,0,.52))
    drop-shadow(0 16px 13px rgba(0,0,0,.38))
    drop-shadow(0 38px 30px rgba(0,0,0,.25))!important;
}
.look-frame img{
  object-fit:contain!important;
  border-radius:2px!important;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.88) 3.5%,#000 8%,#000 92%,rgba(0,0,0,.88) 96.5%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.90) 3.5%,#000 8%,#000 92%,rgba(0,0,0,.90) 96.5%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.88) 3.5%,#000 8%,#000 92%,rgba(0,0,0,.88) 96.5%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.90) 3.5%,#000 8%,#000 92%,rgba(0,0,0,.90) 96.5%,transparent 100%)!important;
  mask-composite:intersect!important;
  box-shadow:none!important;
}

/* Page-one photograph gets a clearer physical lift as well. */
.hero-frame{
  filter:
    drop-shadow(0 5px 4px rgba(0,0,0,.48))
    drop-shadow(0 17px 14px rgba(0,0,0,.34))
    drop-shadow(0 42px 34px rgba(0,0,0,.23))!important;
}

/* Second-page tabs all use the SAME dark button language.
   Selected state is indicated by brighter type/edge and a small lift,
   never a white-filled pill. */
.second .tab,
.second .lesson-tab,
.second .tab.active,
.second .lesson-tab.active,
.second button.tab.active,
.second button.lesson-tab.active{
  color:#dededb!important;
  background:
    linear-gradient(180deg,rgba(31,31,30,.98),rgba(21,21,20,.98))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    inset 0 -1px rgba(0,0,0,.72),
    0 4px 10px rgba(0,0,0,.22)!important;
}
.second .tab *,
.second .lesson-tab *,
.second .tab.active *,
.second .lesson-tab.active *{
  color:inherit!important;
}
.second .tab:hover,
.second .lesson-tab:hover{
  color:#ffffff!important;
  border-color:rgba(255,255,255,.26)!important;
  background:
    linear-gradient(180deg,rgba(39,39,38,.98),rgba(24,24,23,.98))!important;
}
.second .tab.active,
.second .lesson-tab.active,
.second button.tab.active,
.second button.lesson-tab.active{
  color:#f7f7f4!important;
  border-color:rgba(255,255,255,.32)!important;
  transform:translateY(-2px)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 5px 8px rgba(0,0,0,.31),
    0 13px 21px rgba(0,0,0,.20)!important;
}

/* PICKLE V2 — more organic pickle + skate-marker CLICK ME label */
.pickle{
  width:94px!important;
  right:20px!important;
  bottom:14px!important;
  padding:0 4px 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:1px!important;
}
.pickle svg{
  width:82px!important;
  overflow:visible;
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,.50))
    drop-shadow(0 14px 10px rgba(0,0,0,.28));
}
.picklebody{
  fill:url(#g)!important;
  stroke:#9fbe4f!important;
  stroke-width:1.15!important;
}
.ridge{
  stroke:#365d25!important;
  stroke-width:1.5!important;
  opacity:.72;
}
.bump{
  fill:#a9c955!important;
  stroke:#416b2c;
  stroke-width:.5;
}
.pickle-highlight{
  fill:none;
  stroke:rgba(224,239,144,.34);
  stroke-width:2;
  stroke-linecap:round;
}
.pickle-dimple{
  fill:#547b31;
  opacity:.72;
}
.pickle-speck{
  fill:#d2e77c;
  opacity:.68;
}
.pickle span{
  display:block!important;
  margin-top:-2px!important;
  color:#f2f2ef!important;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive!important;
  font-size:13px!important;
  font-weight:700!important;
  font-style:italic!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  transform:skew(-9deg) rotate(-2deg)!important;
  text-shadow:
    0 2px 2px rgba(0,0,0,.78),
    0 5px 9px rgba(0,0,0,.38);
  white-space:nowrap;
}
.pickle:hover span,
.pickle:focus-visible span{
  transform:skew(-9deg) rotate(-2deg) translateY(-1px) scale(1.04)!important;
}

/* FINAL UI FIXES + PICKLE SPOTIFY EASTER EGG */
.second .tab,.second .lesson-tab,.second button.tab,.second button.lesson-tab{
 color:#ededeb!important;background:linear-gradient(180deg,#20201f,#151514)!important;border:1px solid rgba(255,255,255,.13)!important}
.second .tab *,.second .lesson-tab *{color:inherit!important}
.second .tab.active,.second .lesson-tab.active,.second button.tab.active,.second button.lesson-tab.active{
 color:#090909!important;background:#f1f1ee!important;border-color:#f1f1ee!important;transform:translateY(-2px)!important;
 box-shadow:0 5px 8px rgba(0,0,0,.30),0 14px 23px rgba(0,0,0,.20)!important}
.second .tab.active *,.second .lesson-tab.active *{color:#090909!important}

/* Book Lessons matches AirGigs / SoundBetter. */
#lessons .lesson-button,#lessons .cta,.lesson-pane .lesson-button,.lesson-pane .cta,a.lesson-button,a.cta[href*="lessons.com"]{
 color:#eeeeeb!important;background:linear-gradient(180deg,#242423,#181817)!important;border:1px solid rgba(255,255,255,.13)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -1px rgba(0,0,0,.70),0 5px 13px rgba(0,0,0,.24)!important}
#lessons .lesson-button *,#lessons .cta *,.lesson-pane .lesson-button *,.lesson-pane .cta *,a.lesson-button *,a.cta[href*="lessons.com"] *{color:#eeeeeb!important}

/* Blend ONLY left/right sides of page-two image. */
.look-frame img{
 -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 2%,rgba(0,0,0,.88) 5%,#000 11%,#000 89%,rgba(0,0,0,.88) 95%,rgba(0,0,0,.55) 98%,transparent 100%)!important;
 mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 2%,rgba(0,0,0,.88) 5%,#000 11%,#000 89%,rgba(0,0,0,.88) 95%,rgba(0,0,0,.55) 98%,transparent 100%)!important;
 -webkit-mask-composite:initial!important;mask-composite:initial!important}

.modal{position:relative}
.pickle-egg{position:absolute;top:12px;right:12px;width:43px;height:57px;padding:0;border:0;background:transparent;cursor:pointer;z-index:6;transform:rotate(4deg);
 filter:drop-shadow(0 3px 2px rgba(0,0,0,.52)) drop-shadow(0 10px 8px rgba(0,0,0,.27));transition:transform .18s ease}
.pickle-egg svg{display:block;width:100%;height:100%}
.pickle-egg:hover,.pickle-egg:focus-visible{transform:rotate(-3deg) translateY(-2px) scale(1.06)}
.spotify-egg-panel[hidden]{display:none!important}
.spotify-egg-panel{margin:18px 0 3px;padding:10px;background:#080808;border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 15px 34px rgba(0,0,0,.30)}
.spotify-egg-head{display:flex;align-items:center;justify-content:space-between;padding:1px 3px 9px;color:#bdbdb9;font-size:11px;letter-spacing:.13em}
.spotify-egg-head button{border:0;background:transparent;color:#ededeb;font-size:21px;cursor:pointer}
.spotify-egg-panel iframe{display:block;border:0;border-radius:12px;background:#121212}


/* =========================================================
   FINAL POLISH — square-round controls, unified page tone,
   true image-edge blending, realistic pickle, sticky Spotify
   ========================================================= */

/* Both slides use the SAME lighting/tone/surface. */
.hero,.second{
  background:
    radial-gradient(ellipse at 72% 22%,rgba(255,232,198,.052) 0%,rgba(255,232,198,.018) 25%,transparent 49%),
    radial-gradient(ellipse at 18% 76%,rgba(255,244,225,.030) 0%,transparent 40%),
    transparent!important;
}
.hero::before,.second::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse at 54% 46%,rgba(255,255,255,.014),transparent 52%),
    linear-gradient(115deg,rgba(255,255,255,.009),transparent 34%,rgba(255,242,220,.012) 69%,transparent);
}

/* Main controls throughout: more square, still softly rounded. */
.hero-links a,
.quick a,
.cta,
.second .tab,
.second .lesson-tab,
.link-grid a,
.presslink,
.project-focus-links a,
.modal .close,
.spotify-egg-head button,
.spotify-dock-close{
  border-radius:10px!important;
}
.project-portrait{
  border-radius:12px!important;
}
.project-portrait.press{
  border-radius:12px!important;
}

/* Page-two photo now uses its NATURAL aspect ratio, so no object-fit letterbox
   can create hard black side strips.  Fade begins on the real image edge. */
.look-frame{
  width:min(31vw,470px)!important;
  height:auto!important;
  max-width:470px!important;
  max-height:none!important;
  aspect-ratio:496 / 763!important;
  overflow:visible!important;
}
.look-frame img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:496 / 763!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:2px!important;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.68) 2.2%,rgba(0,0,0,.94) 5.5%,#000 10%,#000 90%,rgba(0,0,0,.94) 94.5%,rgba(0,0,0,.68) 97.8%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.90) 3.2%,#000 7.5%,#000 92.5%,rgba(0,0,0,.90) 96.8%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.68) 2.2%,rgba(0,0,0,.94) 5.5%,#000 10%,#000 90%,rgba(0,0,0,.94) 94.5%,rgba(0,0,0,.68) 97.8%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.90) 3.2%,#000 7.5%,#000 92.5%,rgba(0,0,0,.90) 96.8%,transparent 100%)!important;
  mask-composite:intersect!important;
}
.look-frame,.hero-frame{
  filter:
    drop-shadow(0 6px 4px rgba(0,0,0,.55))
    drop-shadow(0 18px 14px rgba(0,0,0,.37))
    drop-shadow(0 44px 34px rgba(0,0,0,.24))!important;
}

/* Realistic pickle stays playful but less cartoon-flat. */
.pickle{
  transform:rotate(-2deg);
}
.pickle svg{
  width:90px!important;
  filter:
    drop-shadow(0 5px 4px rgba(0,0,0,.52))
    drop-shadow(0 16px 12px rgba(0,0,0,.31))!important;
}
.pickle:hover svg,
.pickle:focus-visible svg{
  transform:translateY(-2px) rotate(1deg);
}

/* Tiny secret pickle retains the same realistic-green vibe. */
.pickle-egg{
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.55))
    drop-shadow(0 10px 8px rgba(0,0,0,.29))!important;
}

/* Spotify player inside modal. */
.spotify-player-shell{
  width:100%;
}
.spotify-player-host{
  width:100%;
}
.spotify-egg-panel{
  overflow:hidden;
}

/* Sticky bottom-center continuation player. Uses Spotify's own official UI
   for transport/audio controls; only our X is added. */
.spotify-dock[hidden]{display:none!important}
.spotify-dock{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:260;
  width:min(92vw,500px);
  padding:11px 11px 8px;
  background:rgba(8,8,8,.94);
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  box-shadow:
    0 7px 14px rgba(0,0,0,.48),
    0 27px 50px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
}
.spotify-dock-host{
  width:100%;
}
.spotify-dock-close{
  position:absolute;
  right:-7px;
  top:-9px;
  z-index:3;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0!important;
  color:#080808!important;
  background:#f0f0ed!important;
  border:1px solid rgba(0,0,0,.18)!important;
  font-family:inherit;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.spotify-dock iframe{
  display:block;
  width:100%!important;
  height:152px!important;
  border:0!important;
  border-radius:12px!important;
}

/* Keep site typography consistent: Merriweather everywhere except the
   intentionally skate-marker CLICK ME under the main pickle. */
body,button,a,input,textarea,select{
  font-family:"Merriweather",Georgia,serif;
}
.pickle span{
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive!important;
}

@media(max-width:800px){
  .look-frame{
    width:min(61vw,390px)!important;
    height:auto!important;
  }
  .spotify-dock{
    width:min(94vw,480px);
    bottom:7px;
  }
}


/* =========================================================
   REAL PICKLE ICONS + PERSISTENT SPOTIFY + HD GAME POPUP
   ========================================================= */
.pickle{
  width:132px!important;
  right:14px!important;
  bottom:7px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.pickle-photo-wrap{
  position:relative;
  display:block;
  width:116px;
  height:156px;
  margin:0 auto -3px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.pickle-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:rotate(-4deg);
  filter:
    drop-shadow(0 5px 2px rgba(0,0,0,.44))
    drop-shadow(0 17px 14px rgba(0,0,0,.36))
    drop-shadow(0 34px 31px rgba(0,0,0,.22));
  transition:transform .18s ease,filter .18s ease;
}
.pickle:hover .pickle-photo,.pickle:focus-visible .pickle-photo{
  transform:translateY(-4px) rotate(-2deg) scale(1.035);
  filter:
    drop-shadow(0 7px 3px rgba(0,0,0,.42))
    drop-shadow(0 23px 17px rgba(0,0,0,.38))
    drop-shadow(0 40px 34px rgba(0,0,0,.23));
}
/* intentionally cheap copy-paste sunglasses pasted over the real pickle */
.cheap-shades{
  position:absolute;
  left:23px;
  top:47px;
  width:76px;
  height:32px;
  transform:rotate(8deg);
  filter:drop-shadow(2px 4px 2px rgba(0,0,0,.65));
  pointer-events:none;
}
.cheap-shades i{position:absolute;display:block;background:#060606}
.cheap-shades .lens{top:3px;width:31px;height:22px;border:2px solid #000;border-radius:45% 48% 52% 45%;background:linear-gradient(#232323,#030303 58%,#111)}
.cheap-shades .l1{left:2px}.cheap-shades .l2{right:2px}
.cheap-shades .bridge{left:31px;top:9px;width:16px;height:3px;border-radius:2px}
.cheap-shades .arm{top:7px;width:13px;height:3px}.cheap-shades .a1{left:-8px;transform:rotate(8deg)}.cheap-shades .a2{right:-8px;transform:rotate(-5deg)}

.pickle-egg{
  position:absolute!important;
  top:9px!important;
  right:9px!important;
  width:55px!important;
  height:82px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  z-index:7;
}
.pickle-egg img{
  width:50px;height:70px;display:block;object-fit:contain;
  transform:rotate(-4deg);
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.42)) drop-shadow(0 11px 9px rgba(0,0,0,.28));
}
.pickle-egg span{
  position:absolute;left:50%;top:67px;transform:translateX(-50%) rotate(-4deg);
  color:#e5e5e1;font-size:8px;letter-spacing:.08em;white-space:nowrap;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive!important;
  text-shadow:0 2px 3px #000;
}

/* Spotify stays fixed once started. No menu owns or relocates it. */
.spotify-dock{
  z-index:420!important;
}

/* Centered half-screen game overlay; site remains visible, blurred and dimmed. */
.game-overlay[hidden]{display:none!important}
.game-overlay{
  position:fixed;
  inset:0;
  z-index:390;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,4,5,.48);
  backdrop-filter:blur(8px) saturate(.82);
  -webkit-backdrop-filter:blur(8px) saturate(.82);
}
.game-window{
  position:relative;
  width:min(74vw,980px);
  height:min(64vh,650px);
  min-height:420px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:#6f8490;
  box-shadow:
    0 12px 24px rgba(0,0,0,.42),
    0 38px 90px rgba(0,0,0,.48),
    inset 0 1px rgba(255,255,255,.07);
  cursor:pointer;
  isolation:isolate;
}
#pickleGameCanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.game-hud{
  position:absolute;left:16px;right:64px;top:14px;z-index:5;
  display:flex;align-items:center;gap:18px;
  color:#fff;font-size:11px;letter-spacing:.11em;
  text-shadow:0 2px 7px rgba(0,0,0,.85);
  pointer-events:none;
}
.game-hud span:nth-of-type(1){margin-left:auto}
.game-close{
  position:absolute;right:12px;top:11px;z-index:9;
  width:38px;height:38px;border-radius:10px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:rgba(15,13,34,.64)!important;color:#fff!important;
  font-size:24px;line-height:1;cursor:pointer;
  backdrop-filter:blur(7px);
}
.game-instructions{
  position:absolute;left:50%;top:16%;z-index:5;
  transform:translateX(-50%);
  padding:9px 13px;border-radius:9px;
  background:rgba(14,11,33,.53);
  color:#fff;font-size:11px;letter-spacing:.1em;
  text-shadow:0 2px 5px #000;
  animation:gameHintFade 4.7s forwards;
  pointer-events:none;
}
@keyframes gameHintFade{0%,55%{opacity:1}100%{opacity:0;visibility:hidden}}
.game-over[hidden]{display:none!important}
.game-over{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;
  background:rgba(8,6,22,.59);backdrop-filter:blur(7px);
  cursor:default;
}
.game-over-card{
  width:min(82%,400px);padding:25px;text-align:center;
  background:rgba(17,14,40,.93);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:15px;
  box-shadow:0 28px 70px rgba(0,0,0,.48);
}
.game-over-card small{font-size:9px;letter-spacing:.18em;color:#bfc2d7}
.game-over-card h2{margin:8px 0;font-size:25px}
.game-over-card p{margin:0 0 16px;color:#d2d3df}
.game-over-card button{
  margin:4px;padding:9px 13px;border-radius:9px;
  border:1px solid rgba(255,255,255,.15);
  background:#28234d;color:#fff;font:inherit;cursor:pointer;
}
@media(max-width:760px){
  .game-overlay{padding:12px}
  .game-window{width:96vw;height:62vh;min-height:390px}
  .pickle{width:116px!important}
  .pickle-photo-wrap{width:102px;height:142px}
}

/* ===== THREE-MINUTE RUN / GOTHIC DEATH PASS ===== */
.game-over{
  background:rgba(0,0,0,.76)!important;
  backdrop-filter:blur(3px)!important;
}
.game-over-card{
  width:min(86%,520px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.game-over-card small{display:none!important}
.game-over-card h2{
  margin:0 0 16px!important;
  color:#8f0d14!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(48px,8vw,92px)!important;
  font-weight:700!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  text-shadow:
    0 2px 0 #210204,
    0 0 14px rgba(130,0,8,.36),
    0 8px 24px rgba(0,0,0,.9)!important;
}
.game-over-card p{
  color:#aaa!important;
  font-family:Georgia,"Times New Roman",serif!important;
  letter-spacing:.08em!important;
}
.game-over-card button{
  background:rgba(5,5,5,.76)!important;
  border:1px solid rgba(150,150,150,.35)!important;
  border-radius:3px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  letter-spacing:.08em!important;
}

/* ===== SPOTIFY PRIORITY / FOCUS FIX =====
   Permanent portal is above every site overlay and is never blurred by them. */
.spotify-portal{
  position:fixed!important;
  left:50%!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  z-index:2147483000!important;
  width:min(92vw,520px)!important;
  pointer-events:auto!important;
  isolation:isolate!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.spotify-portal[hidden]{display:none!important}
.spotify-portal .spotify-player-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  pointer-events:auto!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}
.spotify-portal iframe{
  display:block!important;
  width:100%!important;
  height:152px!important;
  border:0!important;
  border-radius:12px!important;
  pointer-events:auto!important;
  filter:none!important;
}
.spotify-portal .spotify-dock-close,
.spotify-portal #spotifyDockClose{
  position:absolute!important;
  top:-10px!important;
  right:-10px!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
}
/* Any backdrop blur belongs to the overlay itself; never blur fixed portal siblings. */
.game-overlay,.project-focus,.overlay{transform:translateZ(0)}
/* Squarer classic wayfarer-style shades, intentionally pasted on. */
.cheap-shades{width:82px!important;height:31px!important;left:20px!important;top:48px!important;transform:rotate(6deg)!important}
.cheap-shades .lens{
  width:34px!important;height:23px!important;border-radius:5px 5px 7px 7px!important;
  border:3px solid #050505!important;
  background:linear-gradient(155deg,#292929 0%,#050505 55%,#151515 100%)!important;
}
.cheap-shades .l1{left:1px!important}.cheap-shades .l2{right:1px!important}
.cheap-shades .bridge{left:33px!important;top:9px!important;width:16px!important;height:4px!important}

/* EXPERIMENTAL SPACE-CITY RUNNER */
.game-overlay{z-index:2147482000!important;background:rgba(2,2,7,.62)!important;backdrop-filter:blur(11px) saturate(.72)!important;-webkit-backdrop-filter:blur(11px) saturate(.72)!important;animation:gameveil .28s ease both}
.game-window{width:min(82vw,1080px)!important;height:min(70vh,680px)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 70px rgba(97,80,196,.16)!important;animation:gamepop .32s cubic-bezier(.2,.9,.2,1) both}
@keyframes gameveil{from{opacity:0}to{opacity:1}} @keyframes gamepop{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
.spotify-portal{z-index:2147483000!important;filter:none!important;opacity:1!important;pointer-events:auto!important}
.game-pause[hidden]{display:none!important}.game-pause{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(5,5,12,.45);backdrop-filter:blur(4px);color:white;text-align:center}.game-pause div{padding:25px 34px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(8,7,20,.82);box-shadow:0 20px 70px #000}.game-pause b{display:block;font:700 32px Georgia,serif;letter-spacing:.08em}.game-pause span{display:block;margin-top:8px;font-size:15px;letter-spacing:.18em}.game-pause small{display:block;margin-top:10px;opacity:.6;letter-spacing:.1em}

/* ===== EXPERIMENTAL ANT + 3-LIVES PASS ===== */
.game-hearts{
  color:#ef4052;
  font-family:Arial,sans-serif;
  font-size:16px;
  letter-spacing:.14em;
  text-shadow:0 2px 5px rgba(0,0,0,.8),0 0 8px rgba(239,64,82,.24);
  min-width:72px;
  text-align:center;
}
.game-hearts[data-lives="2"]{opacity:.78}
.game-hearts[data-lives="1"]{opacity:.58}
.game-hearts[data-lives="0"]{opacity:.25}

/* ===== FLOATING GAME WINDOW / EDGE ARTIFACT FIX ===== */
.game-window{
  /* Eliminate the exposed gray strip on the bottom/right edges. */
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10)!important;
  outline:0!important;
  background:#050608!important;
  background-clip:padding-box!important;

  /* Match the site's floating photographic/project language. */
  border-radius:18px!important;
  box-shadow:
    0 42px 95px rgba(0,0,0,.72),
    0 18px 42px rgba(0,0,0,.62),
    0 2px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.9) inset!important;
  transform:translateZ(0);
}
#pickleGameCanvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:#050608!important;
  border-radius:inherit!important;
  vertical-align:top!important;
}
.game-overlay{
  background:rgba(0,0,0,.58)!important;
  backdrop-filter:blur(10px) brightness(.72)!important;
  -webkit-backdrop-filter:blur(10px) brightness(.72)!important;
}
.game-overlay.open .game-window{
  animation:gameFloatIn .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes gameFloatIn{
  from{opacity:0;transform:translateY(18px) scale(.965) translateZ(0)}
  to{opacity:1;transform:translateY(0) scale(1) translateZ(0)}
}

/* CLEAN PICKLE MENU — no redundant name/Links headings */
#linkhub .modal{padding-top:34px}
#linkhub .link-grid{margin-top:0}

/* Matching square wayfarer-style sunglasses on the small game pickle. */
.pickle-egg .egg-shades{
  position:absolute;left:7px;top:23px;width:39px;height:16px;
  transform:rotate(6deg);filter:drop-shadow(1px 2px 1px rgba(0,0,0,.7));
  pointer-events:none;z-index:3;
}
.pickle-egg .egg-shades i{position:absolute;display:block;background:#050505}
.pickle-egg .egg-shades .lens{
  top:1px;width:16px;height:11px;border:2px solid #050505;border-radius:3px 3px 4px 4px;
  background:linear-gradient(155deg,#292929 0%,#050505 55%,#151515 100%);
}
.pickle-egg .egg-shades .l1{left:1px}.pickle-egg .egg-shades .l2{right:1px}
.pickle-egg .egg-shades .bridge{left:15px;top:5px;width:9px;height:2px;border-radius:2px}
.pickle-egg .egg-shades .arm{top:4px;width:6px;height:2px}
.pickle-egg .egg-shades .a1{left:-4px;transform:rotate(8deg)}
.pickle-egg .egg-shades .a2{right:-4px;transform:rotate(-5deg)}

/* LOGO ITERATION — same button geometry, icon at right. */
#linkhub .link-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
#linkhub .brand-icon{
  width:28px;height:28px;flex:0 0 28px;object-fit:contain;
  filter:grayscale(1) saturate(0) contrast(1.05);
  opacity:.86;transition:filter .16s ease,opacity .16s ease,transform .16s ease;
}
#linkhub .link-grid a:hover .brand-icon,
#linkhub .link-grid a:focus-visible .brand-icon{
  filter:grayscale(0) saturate(1);opacity:1;transform:scale(1.04);
}

/* V2: tiny animated game-pickle Easter egg tucked into the modal corner. */
#linkhub .pickle-egg{
  width:38px !important;height:58px !important;
  top:8px !important;right:8px !important;
  transform-origin:70% 15%;
  animation:picklePeek 3.8s ease-in-out infinite;
}
#linkhub .pickle-egg img{width:100%;height:100%;object-fit:contain}
#linkhub .pickle-egg > span:last-child{
  font-size:7px !important;bottom:-1px !important;right:-1px !important;
  letter-spacing:.02em;
}
#linkhub .pickle-egg .egg-shades{
  left:5px !important;top:17px !important;width:29px !important;height:12px !important;
  transform:rotate(6deg) scale(.78);
  transform-origin:left top;
}
@keyframes picklePeek{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  45%{transform:translate3d(-2px,1px,0) rotate(-2deg)}
  55%{transform:translate3d(-3px,-2px,0) rotate(2deg)}
  65%{transform:translate3d(-1px,0,0) rotate(-1deg)}
}
@media (prefers-reduced-motion:reduce){
  #linkhub .pickle-egg{animation:none}
}

/* V2: local thematic SoundBetter mark — audio waveform, no remote logo dependency. */
#linkhub .soundbetter-mark{
  display:flex;align-items:center;justify-content:center;gap:2px;
  background:transparent;
}
#linkhub .soundbetter-mark i{
  display:block;width:3px;border-radius:3px;background:currentColor;
}
#linkhub .soundbetter-mark i:nth-child(1),
#linkhub .soundbetter-mark i:nth-child(5){height:10px}
#linkhub .soundbetter-mark i:nth-child(2),
#linkhub .soundbetter-mark i:nth-child(4){height:18px}
#linkhub .soundbetter-mark i:nth-child(3){height:25px}
#linkhub .soundbetter-mark{color:#aaa;filter:grayscale(1);transition:color .16s ease,filter .16s ease}
#linkhub .link-grid a:hover .soundbetter-mark,
#linkhub .link-grid a:focus-visible .soundbetter-mark{
  color:#5d70bb;filter:none;
}

/* V3 — tiny naked pickle Easter egg in link menu; keep subtle wiggle. */
#linkhub .pickle-egg{
  width:24px!important;height:39px!important;
  top:7px!important;right:8px!important;
  animation:picklePeek 3.8s ease-in-out infinite!important;
}
#linkhub .pickle-egg img{
  width:24px!important;height:34px!important;
  transform:rotate(-4deg)!important;
}
#linkhub .pickle-egg > span:last-child{
  top:31px!important;font-size:5.5px!important;
}
#linkhub .pickle-egg .egg-shades{display:none!important}

/* V3 — main pickle much smaller; CLICK ME remains readable and no longer overlaps it. */
.pickle{
  width:92px!important;
  right:13px!important;
  bottom:9px!important;
  gap:4px!important;
}
.pickle-photo-wrap{
  width:62px!important;
  height:84px!important;
  margin:0 auto 3px!important;
}
.pickle > span:last-child{
  position:relative!important;
  margin:0!important;
  font-size:12.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:skew(-9deg) rotate(-2deg)!important;
}
/* Resize the pasted sunglasses with the smaller main pickle. */
.pickle .cheap-shades{
  left:12px!important;
  top:25px!important;
  width:41px!important;
  height:18px!important;
  transform:rotate(8deg) scale(.55)!important;
  transform-origin:left top!important;
}

/* V4 — use the supplied black sunglasses artwork on the main pickle. */
.pickle-photo-wrap{
  transition:transform .20s cubic-bezier(.2,.8,.2,1),filter .20s ease!important;
  transform-origin:50% 72%!important;
}
.pickle .pickle-photo{
  transform:rotate(-4deg)!important;
  transition:none!important;
}
.pickle:hover .pickle-photo-wrap,.pickle:focus-visible .pickle-photo-wrap{
  transform:translateY(-2px) rotate(1deg)!important;
}
.pickle:hover .pickle-photo,.pickle:focus-visible .pickle-photo{
  transform:rotate(-4deg)!important;
}
.pickle-glasses{
  position:absolute!important;
  z-index:4!important;
  left:8px!important;
  top:24px!important;
  width:48px!important;
  height:auto!important;
  object-fit:contain!important;
  transform:perspective(120px) rotateZ(7deg) rotateY(-10deg)!important;
  transform-origin:center!important;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.72))!important;
  pointer-events:none!important;
  transition:none!important;
}
.pickle:hover .pickle-glasses,.pickle:focus-visible .pickle-glasses{
  transform:perspective(120px) rotateZ(7deg) rotateY(-10deg)!important;
}
/* Disable the old constructed glasses if any stale markup survives. */
.pickle .cheap-shades{display:none!important}


/* =========================================================
   RESPONSIVE LAYER
   Desktop styling/content above remains authoritative.
   These rules only adapt layout below 1100px.
   ========================================================= */

/* Tablets / iPad landscape and smaller */
@media (max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden}
  .page{min-height:100svh;height:auto}
  .hero,.section-inner{width:min(94vw,900px);margin-inline:auto}
  .hero{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:clamp(20px,4vw,48px)}
  .hero-copy h1{font-size:clamp(72px,10vw,126px);line-height:.82}
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero-actions a,.hero-actions button{min-height:48px}
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .project-overlay .project-card{width:min(92vw,900px);max-height:88svh;overflow:auto}
  #linkhub .modal{width:min(92vw,900px)}
  #linkhub .link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spotify-portal{max-width:min(94vw,520px)}
  .game-window{width:min(94vw,900px);height:min(72svh,560px)}
}

/* iPad portrait / large phones */
@media (max-width:820px){
  .hero{
    display:flex;flex-direction:column;
    justify-content:center;align-items:stretch;
    min-height:100svh;padding:clamp(72px,10svh,110px) 0 72px;
  }
  .hero-copy{position:relative;z-index:2;width:100%}
  .hero-copy h1{font-size:clamp(66px,17vw,118px);line-height:.80}
  .hero-actions{width:100%}
  .hero-actions a,.hero-actions button{
    flex:1 1 30%;min-width:118px;padding-inline:12px;
  }
  .hero-photo{
    position:absolute!important;
    right:-8vw!important;top:9svh!important;
    width:min(58vw,440px)!important;height:78svh!important;
    opacity:.42;z-index:0;pointer-events:none;
  }
  .hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.72)}
  .section-inner{padding:70px 0 80px}
  .section-layout{display:block}
  .section-photo{width:min(70vw,430px);margin:0 auto 28px}
  .section-content{width:100%}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-overlay .project-card{
    display:block;width:min(94vw,680px);padding:18px;
  }
  .project-overlay .project-image{width:100%;max-height:43svh;object-fit:contain}
  .project-overlay .project-info{width:100%;padding:18px 4px 4px}
  #linkhub .modal{width:min(94vw,680px);padding:26px 20px}
  #linkhub .link-grid{grid-template-columns:1fr 1fr;gap:10px}
  #linkhub .link-grid a{min-height:58px;padding:0 16px}
  .pickle{right:max(8px,env(safe-area-inset-right))!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  .spotify-portal{left:50%;right:auto;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom))}
  .game-window{width:96vw;height:min(68svh,520px)}
}

/* Phones */
@media (max-width:560px){
  .hero{padding:62px 20px 74px}
  .hero-copy h1{font-size:clamp(60px,20vw,94px)}
  .hero-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .hero-actions a,.hero-actions button{
    min-width:0;min-height:46px;padding:0 7px;font-size:clamp(11px,3.3vw,15px)
  }
  .hero-photo{
    right:-30vw!important;top:7svh!important;
    width:92vw!important;height:80svh!important;opacity:.30
  }
  .scroll-hint{bottom:18px}
  .section-inner{width:calc(100% - 32px);padding:58px 0 72px}
  .section-photo{width:min(78vw,360px)}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .project-tile{min-height:118px}
  .project-overlay{padding:12px}
  .project-overlay .project-card{width:100%;max-height:92svh;border-radius:18px}
  .project-overlay .project-image{max-height:38svh}
  .project-overlay .project-info{font-size:15px}
  #linkhub{padding:10px}
  #linkhub .modal{width:100%;padding:28px 12px 16px;border-radius:18px}
  #linkhub .link-grid{grid-template-columns:1fr;gap:8px}
  #linkhub .link-grid a{min-height:54px;padding:0 14px;font-size:17px}
  #linkhub .brand-icon{width:24px;height:24px;flex-basis:24px}
  #linkhub .pickle-egg{
    width:20px!important;height:32px!important;top:5px!important;right:7px!important
  }
  #linkhub .pickle-egg img{width:20px!important;height:28px!important}
  #linkhub .pickle-egg > span:last-child{display:none!important}
  .pickle{width:78px!important}
  .pickle-photo-wrap{width:48px!important;height:66px!important}
  .pickle > span:last-child{font-size:11.5px!important}
  .pickle-glasses{left:6px!important;top:19px!important;width:38px!important}
  .spotify-portal{width:calc(100vw - 16px)!important;max-width:none!important}
  .game-overlay{padding:8px}
  .game-window{width:100%;height:min(64svh,470px);border-radius:16px}
}

/* Very narrow phones */
@media (max-width:370px){
  .hero{padding-inline:14px}
  .hero-copy h1{font-size:19vw}
  .hero-actions a,.hero-actions button{font-size:10.5px}
  .project-grid{grid-template-columns:1fr}
}

/* Touch devices: don't depend on hover for usability. */
@media (hover:none) and (pointer:coarse){
  a,button,.project-tile,.pickle,.pickle-egg{touch-action:manipulation}
  #linkhub .brand-icon{filter:grayscale(1) saturate(0);opacity:.92}
  #linkhub .link-grid a:active .brand-icon{filter:grayscale(0) saturate(1);opacity:1}
  .pickle:hover .pickle-photo-wrap{transform:none!important}
}

/* Modern safe-area handling for notched iPhones/iPads. */
@supports (padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}


/* =========================================================
   MOBILE 3-PAGE FLOW — preserves the live-site interaction model.
   PAGE 1: original hero/photo/name/main buttons
   PAGE 2: Music/Lessons/Booking tabs + their content/photo buttons
   PAGE 3: look-behind photo
   ========================================================= */
@media (max-width:820px){

  /* Keep page 1 functionally like the published site. */
  section.hero{
    min-height:100svh!important;
    height:100svh!important;
    overflow:hidden!important;
  }

  /* Mobile only: remove the SCROLL language. */
  section.hero .scrollcue{display:none!important}

  /* PAGE 2: controls/content occupy their own viewport before the portrait. */
  section.second{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:200svh!important;
    padding:0!important;
    overflow:visible!important;
  }

  section.second .panel{
    order:1!important;
    width:100%!important;
    max-width:none!important;
    min-height:100svh!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:
      max(28px,env(safe-area-inset-top))
      clamp(16px,5vw,36px)
      38px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  section.second .tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin:0 0 20px!important;
  }
  section.second .tab{
    min-width:0!important;
    min-height:48px!important;
    padding:10px 6px!important;
    touch-action:manipulation!important;
  }

  section.second .project-portrait-menu{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }
  section.second .project-portrait{
    touch-action:manipulation!important;
  }

  /* PAGE 3: look-behind portrait gets its own clean viewport. */
  section.second .gallery{
    order:2!important;
    width:100%!important;
    min-height:100svh!important;
    margin:0!important;
    padding:
      max(30px,env(safe-area-inset-top))
      18px
      max(42px,env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* Keep the low-resolution source tasteful: never enlarge beyond source width. */
  section.second .look-frame{
    width:min(78vw,496px)!important;
    max-width:496px!important;
    height:auto!important;
    max-height:82svh!important;
    margin:0 auto!important;
  }
  section.second .look-frame img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:496px!important;
    max-height:82svh!important;
    object-fit:contain!important;
  }

  /* Touch/mobile app friendliness without changing destinations. */
  a,button,.project-portrait,.pickle,.pickle-egg{
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
  }

  /* Pickle remains fixed bottom-right as on the live version. */
  .pickle{
    position:fixed!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:560px){
  section.second .panel{
    padding:
      max(22px,env(safe-area-inset-top))
      14px
      30px!important;
  }
  section.second .tabs{gap:6px!important;margin-bottom:14px!important}
  section.second .tab{
    min-height:45px!important;
    font-size:clamp(11px,3.3vw,15px)!important;
  }
  section.second .project-portrait-menu{gap:9px!important}
  section.second .look-frame{
    width:min(82vw,390px)!important;
    max-width:390px!important;
  }
  section.second .look-frame img{max-width:390px!important}
}


/* =========================================================
   MOBILE FINAL FLOW
   PAGE 1 = hero
   PAGE 2 = tabs/content/photo-buttons, then look-behind portrait
   (portrait is part of page 2, never a third full viewport)
   ========================================================= */
@media (max-width:820px){
  section.second{
    min-height:auto!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0 0 58px!important;
    background:#080909!important;
  }

  section.second .panel{
    order:1!important;
    min-height:auto!important;
    height:auto!important;
    padding:
      max(28px,env(safe-area-inset-top))
      clamp(16px,5vw,36px)
      26px!important;
    justify-content:flex-start!important;
    margin:0 auto!important;
  }

  /* Look-behind sits naturally UNDER the controls/photos with breathing room. */
  section.second .gallery{
    order:2!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    padding:34px 18px 54px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  section.second .look-frame{
    width:min(58vw,340px)!important;
    max-width:340px!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))!important;
  }
  section.second .look-frame img{
    display:block!important;
    width:100%!important;
    max-width:340px!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }
}

@media (max-width:560px){
  section.second{padding-bottom:46px!important}
  section.second .panel{
    padding:
      max(20px,env(safe-area-inset-top))
      14px
      20px!important;
  }
  section.second .gallery{padding:28px 14px 44px!important}
  section.second .look-frame{
    width:min(56vw,275px)!important;
    max-width:275px!important;
  }
  section.second .look-frame img{max-width:275px!important}
}