/* Photographic instruments, real sound, and the band's own photographs. */

/* Sound switch shared by the hero and the instruments */
.sound-chip{display:inline-flex;align-items:center;gap:11px;border:1px solid #c5c6aa;background:rgba(244,237,220,.9);color:var(--ink);border-radius:40px;padding:11px 18px 11px 15px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 28px #183b3022;transition:background .2s,color .2s,transform .2s,border-color .2s}
.sound-chip:hover{transform:translateY(-2px);background:var(--acid)}
.sound-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sound-chip.waking{opacity:.75}
.sound-chip i{display:block;width:15px;height:13px;flex:none;background:linear-gradient(currentColor,currentColor) 0 100%/3px 35% no-repeat,linear-gradient(currentColor,currentColor) 50% 100%/3px 75% no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/3px 50% no-repeat}
.sound-chip.on i{animation:sound-eq .8s ease-in-out infinite alternate}
@keyframes sound-eq{0%{background-size:3px 30%,3px 95%,3px 50%}50%{background-size:3px 90%,3px 40%,3px 75%}100%{background-size:3px 55%,3px 70%,3px 25%}}
.hero-sound{position:absolute;right:6.5%;bottom:12%;z-index:6}

/* Hero: the pipes stand on their own lava boulder at the front of the scene */
.hero-instrument{inset:7% 2% -5% 46%;transform-origin:50% 100%}
.hero-instrument .bagpipe-canvas,.pipes-object .bagpipe-canvas{width:100%;height:100%;display:block}
.bagpipe-fallback{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;translate:-50% 0;transform-origin:50% 92%}
.hero-instrument:not(.ready){opacity:0}.hero-instrument.ready{opacity:1;transition:opacity .8s}
.hero-instrument:after{content:'';position:absolute;left:18%;right:18%;bottom:2%;height:9%;background:radial-gradient(closest-side,#2a2a1c55,transparent);z-index:-1;filter:blur(6px)}
@media(min-width:1600px){.hero-instrument{inset:7% 4% -5% 47%}}
@media(max-width:1000px){.hero-instrument{inset:16% -8% -5% 38%}}
@media(max-width:700px){.hero-instrument{inset:40% -10% 4% 20%;z-index:5}.hero-copy,.second-copy{z-index:6}.hero-sound{right:auto;left:7%;bottom:11%;font-size:10px;padding:9px 14px 9px 12px}}

/* Instruments: photographs that play a little */
#object-stage{inset:11% 0 4% 36%}
.instrument-scene{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(24px) scale(.985);transition:opacity .55s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.instrument-scene.active{opacity:1;transform:none}
.scene-object{position:absolute;left:4%;right:30%;bottom:6%;top:0}
.pipes-object{left:2%;right:28%}
.drum-object{top:auto;aspect-ratio:1201/1250;width:min(58%,66vh);right:auto;left:6%;bottom:9%}
.drum-object .drum{position:absolute;left:0;bottom:0;width:100%;height:auto;filter:drop-shadow(0 26px 22px #2d3a2433);transition:filter .1s}
.drum-object .stick{position:absolute;width:50%;height:auto;top:15.4%;transform-origin:0 50%;filter:drop-shadow(0 12px 8px #2d3a2440);--lift:1}
.drum-object .stick-left{left:-2.1%;transform:rotate(calc(28deg - var(--lift)*15deg))}
.drum-object .stick-right{left:102.1%;transform:scaleX(-1) rotate(calc(28deg - var(--lift)*15deg))}
.scene-photo{position:absolute;right:3%;bottom:10%;width:clamp(150px,15vw,230px);background:#fbf7ea;padding:8px 8px 0;box-shadow:0 22px 50px #183b3026;transform:rotate(3.5deg);margin:0}
.scene-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.scene-photo span{display:block;font:italic 16px/1.2 var(--serif);padding:10px 3px 12px}
.instrument-scene:nth-child(2) .scene-photo{transform:rotate(-3deg)}
@media(max-width:1000px){.scene-photo{width:150px}.drum-object{width:min(62%,60vh)}}
@media(max-width:700px){#object-stage{inset:36% -4% 11% 4%}.scene-object{right:22%}.drum-object{width:72%;left:2%;bottom:12%}.scene-photo{width:112px;right:4%;bottom:6%;padding:6px 6px 0}.scene-photo span{font-size:12px;padding:7px 2px 9px}}

/* Our people: a small family album that fans out of its stack */
.album{position:relative;margin-top:35px;--fan:1}
.album .album-main{margin-top:0;position:relative;z-index:1}
.album-card{position:absolute;z-index:2;width:33%;left:34%;top:28%;margin:0;background:#fbf7ea;color:var(--ink);padding:7px 7px 0;box-shadow:0 20px 45px #0b1f1659;transform:translate(calc(var(--x)*var(--fan)),calc(var(--y)*var(--fan))) rotate(calc(var(--r)*var(--fan)))}
.album-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.album-card figcaption{font:italic 15px/1.2 var(--serif);padding:9px 3px 11px}
.album-card:nth-of-type(2){--x:-128%;--y:22%}
.album-card:nth-of-type(3){--x:118%;--y:-82%}
.album-card:nth-of-type(4){--x:96%;--y:74%}
@media(max-width:700px){.album{margin-bottom:70px}.album-card{width:38%}.album-card:nth-of-type(2){--x:-82%;--y:72%}.album-card:nth-of-type(3){--x:84%;--y:-70%}.album-card:nth-of-type(4){--x:80%;--y:84%}.album-card figcaption{font-size:12px}}

/* The ʻohana: three rows of the band's own photographs drifting past each other */
.ohana{background:#183b30;color:var(--paper);padding:65px 0 115px;overflow:hidden}
.ohana-head{padding:0 6.5%}
.ohana .section-label{border-color:#6a806d}
.ohana-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;align-items:end;margin-bottom:64px}
.ohana-intro p{font-size:17px;margin-bottom:24px}
.ohana-rows{display:grid;gap:20px}
.ohana-row{display:flex;gap:20px;width:max-content;will-change:transform;padding-left:4vw}
.ohana-row:nth-child(2){margin-left:-16vw}.ohana-row:nth-child(3){margin-left:-6vw}
.ohana-photo{flex:none;margin:0;background:#f4eddc;padding:8px 8px 0;border-radius:2px;box-shadow:0 22px 44px #0006;transform:rotate(-1deg);transition:transform .35s}
.ohana-photo:nth-child(even){transform:rotate(1.2deg)}
.ohana-photo:hover{transform:translateY(-6px) rotate(0)}
.ohana-photo img{display:block;height:clamp(170px,22vw,320px);width:auto;max-width:min(46vw,620px);object-fit:cover}
.ohana-photo figcaption{color:var(--ink);font:italic 16px/1 var(--serif);padding:11px 4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:700px){.ohana{padding:40px 0 70px}.ohana-head{padding:0 7%}.ohana-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px}.ohana-intro p{font-size:16px}.ohana-rows,.ohana-row{gap:12px}.ohana-photo{padding:6px 6px 0}.ohana-photo img{height:150px;max-width:72vw}.ohana-photo figcaption{font-size:13px;padding:8px 3px 9px}}

/* Pass it on: school days, in pictures */
.school-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:80px}
.school-photos figure{margin:0;background:#fffaf0;padding:7px 7px 0;box-shadow:0 14px 34px #183b3017;transform:rotate(-1deg)}
.school-photos figure:nth-child(even){transform:rotate(1.1deg) translateY(14px)}
.school-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.school-photos figcaption{font:italic 16px/1.2 var(--serif);padding:10px 3px 13px}
@media(max-width:700px){.school-photos{grid-template-columns:1fr 1fr;gap:12px;margin-top:50px}.school-photos figcaption{font-size:13px}}

/* About: the family album */
.album-section{background:#f4eddc}
.album-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-20px 0 40px}
.album-filters button{border:1px solid var(--line);border-radius:30px;padding:9px 16px;font-size:12px;background:transparent}
.album-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-flow:dense;gap:18px}
.album-grid figure{margin:0;display:flex;flex-direction:column;background:#fffaf0;padding:7px 7px 0;box-shadow:0 12px 30px #183b3014}
.album-grid figure:first-child{grid-column:span 2;grid-row:span 2}
.album-grid figure[hidden]{display:none}
.album-grid button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.album-grid img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.album-grid button{flex:1}
.album-grid figcaption{font:italic 15px/1.25 var(--serif);padding:9px 3px 11px}
#photo-dialog{width:min(1200px,94vw);padding:20px 20px 16px;background:#10241c;color:var(--paper)}
#photo-dialog img{display:block;max-width:100%;max-height:78svh;margin:0 auto;object-fit:contain}
#photo-dialog p{margin:14px 4px 0;font:italic 20px var(--serif);display:flex;justify-content:space-between;gap:20px;align-items:center}
#photo-dialog .dialog-close{color:var(--paper);z-index:2}
.photo-nav{display:flex;gap:8px}.photo-nav button{border:1px solid #ffffff40;background:transparent;color:inherit;border-radius:30px;padding:7px 15px;font:13px var(--sans)}
@media(max-width:700px){.album-grid{grid-template-columns:1fr 1fr;gap:10px}.album-grid figure{padding:5px 5px 0}.album-grid figcaption{font-size:12px}#photo-dialog{padding:14px 10px 12px}#photo-dialog p{font-size:16px;flex-direction:column;align-items:flex-start}}

@media(prefers-reduced-motion:reduce){.instrument-scene{transition:none}.album{--fan:1!important}}

/* Find your first note: a real chanter. Touch a hole to lift that finger; fingertips show the fingering. */
.chanter-wrap{position:relative;margin:62px 0 70px;container-type:inline-size;--half:7.4cqw;--thumb:calc(50% - var(--half) - 22px)}
.keys.chanter{display:block;position:relative;gap:0;user-select:none;-webkit-user-select:none}
.chanter-photo{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 14px #183b3030);pointer-events:none}
.chanter .finger{position:absolute;left:var(--x);top:50%;width:3.7%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f7d9bf 0,#dba783 46%,#a86b4c 100%);box-shadow:0 3px 7px #3b211566,inset 0 -2px 3px #7a452c55;opacity:0;scale:.6;transition:opacity .08s,scale .08s;pointer-events:none;z-index:2}
.chanter .finger.covered{opacity:1;scale:1}
.chanter .finger.thumb{top:var(--thumb);opacity:1;scale:1;background:none;border:1.5px dashed #183b3070;box-shadow:none}
.chanter .finger.thumb.covered{background:radial-gradient(circle at 38% 32%,#f7d9bf 0,#dba783 46%,#a86b4c 100%);border-color:transparent;box-shadow:0 3px 7px #3b211566}
.keys.chanter .thumb-note{position:absolute;left:calc(24.6% + 2.6%);top:var(--thumb);translate:0 -50%;font:500 9px/1 var(--sans);letter-spacing:.14em;opacity:.55;white-space:nowrap;pointer-events:none}
.keys.chanter .hole{position:absolute;left:var(--x);top:50%;translate:-50% -50%;width:max(5.4%,36px);height:auto;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:block;z-index:3;touch-action:none;transition:box-shadow .12s}
.keys.chanter .hole:hover{box-shadow:0 0 0 2px #183b3033}
.keys.chanter .hole.active{transform:none;background:transparent;box-shadow:0 0 0 3px var(--acid),0 0 22px #dceb98bb}
.keys.chanter .hole.bell{width:13%;aspect-ratio:1/1.1;border-radius:45%}
.keys.chanter .hole.thumb{top:var(--thumb)}
.keys.chanter .hole span{position:absolute;left:50%;top:calc(50% + var(--half) + 14px);translate:-50% 0;font:24px/1 var(--serif);color:var(--ink)}
.keys.chanter .hole kbd{position:absolute;left:50%;top:calc(50% + var(--half) + 46px);translate:-50% 0}
.keys.chanter .hole.thumb span{top:50%;left:auto;right:calc(100% + 4px);translate:0 -50%}.keys.chanter .hole.thumb kbd{top:50%;left:auto;right:calc(100% + 26px);translate:0 -50%}
@media(max-width:700px){
 .chanter-wrap{height:540px;margin:26px 0 30px;container-type:normal;--half:38px}
 .keys.chanter{position:absolute;left:58%;top:0;width:520px;transform-origin:0 0;transform:rotate(90deg) translateY(-50%)}
 .keys.chanter .hole span,.keys.chanter .hole kbd{rotate:-90deg}
 .keys.chanter .hole span{top:calc(50% + var(--half) + 10px)}.keys.chanter .hole kbd{top:calc(50% + var(--half) + 34px)}
 .keys.chanter .thumb-note{display:none}
}

/* Two instruments now (pipes, drums): a shorter scroll. */
.instrument-journey{height:200svh}
@media(max-width:700px){.instrument-journey{height:190svh}}

/* Maui Pipe & Drum School 2027: front and centre. */
.school-pill{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin-top:30px;padding:12px 18px 12px 16px;background:var(--ink);color:var(--paper);border-radius:40px;font-size:13px;box-shadow:0 12px 30px #183b302e;transition:transform .2s,background .2s}
.school-pill b{font-weight:600}.school-pill i{font-style:normal;font-size:16px}
.school-pill:hover{transform:translateY(-2px);background:#2b5443}
.school-2027{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;background:#f4eddc;min-height:min(92svh,860px)}
.school-2027-photo{margin:0;position:relative;overflow:hidden}
.school-2027-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.school-2027-body{padding:clamp(48px,7vw,110px) 6.5% clamp(48px,6vw,90px) clamp(36px,5vw,80px);align-self:center}
.school-2027-body h2{font-size:clamp(54px,6.2vw,96px);margin:22px 0 14px}
.school-2027-place{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.75}
.school-2027-lead{font-size:18px;margin:26px 0 30px;max-width:30em}
.school-2027-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 38px;margin:0 0 34px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.school-2027-facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.school-2027-facts dd{margin:0;font:22px/1.2 var(--serif)}
.school-2027-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.school-2027-body .fine{margin-top:22px}
@media(max-width:1000px){.school-2027-facts{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.school-pill{font-size:11px;padding:10px 14px;gap:8px;margin-top:22px}.school-2027{grid-template-columns:1fr;min-height:0}.school-2027-photo{height:300px}.school-2027-body{padding:40px 7% 56px}.school-2027-lead{font-size:16px}.school-2027-facts{grid-template-columns:1fr;gap:14px}}

/* GoFundMe, earlier and more visible. */
.button.gofundme{background:var(--acid);color:var(--ink);border-color:var(--acid);margin:4px 24px 18px 0}
.button.gofundme:hover{background:#eef6c8}

/* Learn: the 2027 school, day by day. */
.school-details{background:#eef0df}
.details-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.details-grid article{border-top:1px solid var(--line);padding-top:22px}
.details-grid h3{font-size:28px;margin-bottom:16px}
.details-grid p{font-size:15px;margin:0 0 14px}
.details-grid b{font-weight:600;display:inline-block;margin-right:6px}
.evenings{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;margin-top:90px}
.evenings h2{font-size:clamp(48px,5vw,76px);align-self:start;position:sticky;top:100px}
.evenings ol{list-style:none;margin:0;padding:0}
.evenings li{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.evenings li:first-child{border-top:1px solid var(--line)}
.evenings time{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding-top:6px}
.evenings h3{font-size:27px;margin-bottom:8px}
.evenings p{font-size:15px;margin:0}
.plunge-photo{margin:80px 0 0;background:#fffaf0;padding:9px 9px 0;box-shadow:0 18px 44px #183b301c;transform:rotate(-.6deg)}
.plunge-photo img{display:block;width:100%;max-height:560px;object-fit:cover}
.plunge-photo figcaption{font:italic 18px var(--serif);padding:12px 4px 14px}
@media(max-width:1000px){.details-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.details-grid{grid-template-columns:1fr;gap:26px}.evenings{grid-template-columns:1fr;margin-top:60px}.evenings h2{position:static}.evenings li{grid-template-columns:1fr;gap:6px}.plunge-photo{margin-top:50px}}

/* About: our tartan. */
.tartan-section{position:relative;background:#f4eddc;padding-top:0}
.tartan-ribbon{height:clamp(90px,11vw,150px);margin:0 -7% 60px;background:url(assets/band/hawaiian-tartan-swatch.webp) 0 50%/auto 100% repeat-x;box-shadow:inset 0 -10px 18px #0002}
.tartan-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center}
.tartan-grid h2{margin-bottom:26px}
.tartan-grid p{font-size:17px;margin:0 0 20px}
.tartan-grid .text-link{margin-top:10px}
.tartan-figures{position:relative;min-height:420px}
.tartan-figures figure{position:absolute;margin:0;background:#fffaf0;padding:8px 8px 0;box-shadow:0 20px 46px #183b3024}
.tartan-figures img{display:block;width:100%;height:auto}
.tartan-figures figcaption{font:italic 16px/1.2 var(--serif);padding:10px 3px 12px}
.tartan-swatch{width:88%;top:0;right:0;transform:rotate(2deg)}
.tartan-swatch img{aspect-ratio:1200/207;object-fit:cover}
.tartan-kilts{width:56%;left:0;bottom:0;transform:rotate(-3deg)}
@media(max-width:700px){.tartan-ribbon{margin:0 -8% 40px}.tartan-grid{grid-template-columns:1fr;gap:40px}.tartan-grid p{font-size:16px}.tartan-figures{min-height:300px}.tartan-swatch{width:94%}.tartan-kilts{width:62%}}