:root{color-scheme:light;--paper:#faf7f0;--ink:#1d1a17;--rust:#902c22;--rule:#c9bfb3;--soft:#eee5d9;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;line-height:1.65;word-break:keep-all}
a{color:inherit;text-underline-offset:.22em}a:hover{color:var(--rust)}
button,summary{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--rust);outline-offset:5px}
img{display:block;width:100%;height:auto}
.frame{width:min(var(--max),calc(100% - 56px));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-10rem;z-index:5;background:white;padding:.7rem}.skip:focus{top:.6rem}
.top{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-height:60px;padding:.5rem max(28px,calc((100% - var(--max))/2));background:var(--paper);border-bottom:1px solid var(--rule);font-size:.88rem}
.top a{text-decoration:none}.wordmark{font-weight:800}.top nav{display:flex;gap:clamp(.85rem,3vw,2rem)}
.hero{display:grid;grid-template-columns:1fr minmax(320px,450px);align-items:center;gap:clamp(2rem,8vw,7rem);padding-block:clamp(2.4rem,7vw,6rem)}
.eyebrow{color:var(--rust);font-size:.78rem;font-weight:750;letter-spacing:.07em}
.eyebrow span,.dates i{display:inline-block;width:.3em;height:.3em;background:var(--rust);border-radius:50%;vertical-align:.25em;margin-inline:.25em}
h1,h2,h3,p,figure{margin:0}
h1{font-size:clamp(3.6rem,8.2vw,7.3rem);letter-spacing:-.11em;line-height:1.07;margin:.28em 0 .29em;font-weight:900}
.dates{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:800;color:var(--rust);letter-spacing:.03em}
.lede{margin:1.25rem 0 1.55rem;max-width:26ch;font-size:1.08rem}
.actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.9rem;font-weight:700}
.primary{display:inline-flex;align-items:center;gap:.75rem;background:var(--ink);color:var(--paper);padding:.65rem .9rem;text-decoration:none}
.primary:hover{background:var(--rust);color:white}
.cover{border:1px solid var(--rule);background:white;padding:.55rem}
.cover img{aspect-ratio:660/934;object-fit:contain}
figcaption{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .2rem 0;color:var(--rust);font-size:.7rem;font-weight:700;letter-spacing:.08em}
figcaption button{font:inherit;color:inherit;border:1px solid var(--rule);background:var(--paper);padding:.25rem .45rem}
section:not(.hero){border-top:1px solid var(--rule);padding-block:clamp(2.8rem,7vw,6rem)}
.section-head{margin-bottom:1.45rem}.section-head h2{font-size:clamp(2.25rem,5.4vw,4.5rem);letter-spacing:-.085em;line-height:1.12;margin:.12em 0 .23em}
.calendar,.venues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.day,.venues article{border-top:2px solid var(--ink);padding:.8rem 0}
.day h3{font-size:2rem;line-height:1.2;letter-spacing:-.045em}.day h3 small{font-size:.75rem;font-weight:500}
.day a{display:grid;grid-template-columns:1fr;gap:.13rem;text-decoration:none;padding:.7rem .3rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.day a:hover{background:var(--soft)}.day a span{color:var(--rust);font-size:.75rem;font-weight:700}
.day a.interlude{background:var(--soft);padding-inline:.55rem}
.artists{display:grid;gap:1.4rem}.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.artist{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);border-top:1px solid var(--ink);align-items:center;gap:clamp(1rem,4vw,3.4rem);padding-top:1rem}
.pair .artist{display:block}.portrait{overflow:hidden;background:var(--soft);aspect-ratio:1.38}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);object-position:center 43%}
#listen img{object-position:center 51%}#cross img{object-position:center 32%}#share .portrait img{object-position:center 58%}
.pair .bio{padding:1rem 0}.bio h3{font-size:clamp(1.55rem,4vw,2.5rem);line-height:1.2;letter-spacing:-.065em;margin:.2rem 0 .55rem}
.bio h3 small{font-size:.44em;letter-spacing:.06em;white-space:nowrap}
.bio p:not(.eyebrow){max-width:44ch}
details{margin-top:.85rem;border-top:1px solid var(--rule);padding-top:.6rem}summary{font-weight:700;color:var(--rust)}details p{padding-top:.5rem}
.roast>p{max-width:48ch}
.chestnuts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.5rem 0 0;padding:0}
.chestnuts li{display:grid;justify-items:center;gap:.35rem;border-top:1px solid var(--rule);padding:.8rem .15rem;color:var(--rust);font-size:.86rem;font-weight:750}
.chestnuts img{width:48px;height:54px;object-fit:contain;mix-blend-mode:multiply}
.venues{grid-template-columns:repeat(2,minmax(0,1fr))}.venues h3,.contact h3{font-size:1.4rem;margin-bottom:.35rem}.contact{margin-top:1.3rem;border-top:1px solid var(--rule);padding-top:1.2rem}.status{display:inline-block;color:var(--rust);background:var(--soft);margin-top:.8rem;padding:.3rem .55rem;font-size:.87rem;font-weight:700}
footer.frame{border-top:1px solid var(--rule);padding:1.15rem 0 2.1rem;display:flex;justify-content:space-between;gap:1rem;font-size:.78rem}footer a{flex:none}
.reveal{animation:arrive 650ms ease both}.reveal .portrait img{animation:focus-in 750ms ease both}.roast.reveal li{animation:arrive 580ms ease both;animation-delay:calc(var(--i,0)*120ms)}
@keyframes arrive{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes focus-in{from{transform:scale(1.06);filter:grayscale(1) contrast(.76)}to{transform:scale(1);filter:grayscale(1)}}
@media(max-width:760px){.frame{width:calc(100% - 36px)}.top{padding-inline:18px}.hero{grid-template-columns:1fr;gap:1.55rem}.desktop{display:none}h1{font-size:clamp(2.9rem,12vw,5rem);letter-spacing:-.09em}.cover{max-width:450px;margin-inline:auto}.calendar,.pair,.venues{grid-template-columns:1fr}.artist{display:block}.artist .bio{padding:.9rem 0}.day a{grid-template-columns:5rem 1fr}.day a small{grid-column:2}.lede{margin:.85rem 0 1.1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.hero{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.7rem,5vw,4.4rem);padding-block:clamp(1.4rem,5vw,4.1rem)}
.cover{background:#fbfaf7;border:0;padding:.2rem}
.cover img{aspect-ratio:766/823}
.cover figcaption{border-top:1px solid var(--rule);margin-top:.35rem}
.fine{font-size:.87rem;color:#62574c;margin-top:.7rem}
.setlist{padding-left:1.5rem;line-height:1.7}.setlist small{color:var(--rust)}
.roaster{margin-top:1.6rem;max-width:680px;background:#f4eadc;padding:.6rem 1rem;border:1px solid var(--rule)}
.roaster svg{display:block;width:100%;height:auto;color:var(--ink)}
.hot-nuts use{fill:#803823}
.heat,.smoke{opacity:.5}
.roaster.running .hot-nuts use{animation:warming 5s ease-in-out infinite alternate}
.roaster.running .hot-nuts g:nth-child(2n) use{animation-delay:.55s}
.roaster.running .hot-nuts g:nth-child(3n) use{animation-delay:1.1s}
.roaster.running .heat path,.roaster.running .smoke path{animation:steam 3.3s ease-in-out infinite}
.roaster.running .heat path:nth-child(2){animation-delay:.48s}.roaster.running .heat path:nth-child(3){animation-delay:.93s}
@keyframes warming{0%,15%{fill:#33241c}100%{fill:#b54429}}
@keyframes steam{0%{opacity:.13;transform:translateY(5px)}55%{opacity:.8}100%{opacity:.13;transform:translateY(-7px)}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:.85rem}.intro{display:contents}.intro .eyebrow{grid-row:1}.intro h1{grid-row:2;margin:0}.intro .dates{grid-row:3}.cover{grid-row:4;width:100%;max-width:510px}.intro .lede{grid-row:5;margin:0}.intro .actions{grid-row:6}.roaster{padding:.4rem .65rem}}
.score-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.5rem 0 2rem}
.score-nav a{display:grid;gap:.15rem;background:var(--paper);text-decoration:none;padding:.55rem .7rem;font-weight:800;line-height:1.4}
.score-nav a:hover,.score-nav a:focus-visible{background:var(--soft)}
.score-nav b{font-size:.7rem;color:var(--rust);letter-spacing:.08em}
.story{max-width:63ch;border-left:2px solid var(--rust);padding:.15rem 0 .15rem 1rem;margin:0 0 1.55rem;line-height:1.85}
:is(.portrait,.chestnut-gallery,.brand-gallery-grid){position:relative;isolation:isolate}
:is(.portrait,.chestnut-gallery,.brand-gallery-grid)::after{content:"";position:absolute;inset:0;pointer-events:none;background:#ac452c;mix-blend-mode:color;opacity:0}
.reveal .portrait img{animation:focus-in 1.05s ease both}
.hot-nuts use{transform-box:fill-box;transform-origin:center}
.roaster.running .hot-nuts use{animation:nut-turn 2.45s ease-in-out infinite,warming 4s ease-in-out infinite alternate}
.roaster.running .hot-nuts g:nth-child(2n) use{animation-delay:-.45s,-.65s}
.roaster.running .hot-nuts g:nth-child(3n) use{animation-delay:-1.18s,-.1s}
.roaster.running .hot-nuts g:nth-child(5n) use{animation-delay:-1.6s,-1.25s}
.roaster.running .embers circle{animation:ember 2s ease-out infinite}
.roaster.running .embers circle:nth-child(2n){animation-delay:-.6s}
.roaster.running .embers circle:nth-child(3n){animation-delay:-1.15s}
.roaster figcaption{flex-wrap:wrap}
.roaster figcaption span{margin-right:auto}
@keyframes nut-turn{0%,100%{transform:translate(-3px,0) rotate(-13deg)}30%{transform:translate(1px,-4px) rotate(9deg)}64%{transform:translate(4px,0) rotate(17deg)}}
@keyframes ember{0%{opacity:0;transform:translateY(5px)}34%{opacity:.75}100%{opacity:0;transform:translateY(-15px)}}
.brand-intro{max-width:62ch;font-size:1.08rem;margin-bottom:1.6rem}
.journey,.ticket-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.journey{padding:0;list-style:none;margin:0}
.journey li,.ticket-grid article{border-top:2px solid var(--ink);padding:1rem .15rem 0}
.journey h3,.ticket-grid h3,.harvest h3{font-size:clamp(1.2rem,3vw,1.65rem);line-height:1.35;letter-spacing:-.055em;margin:.35rem 0 .55rem}
.harvest{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(1rem,5vw,3rem);align-items:center;margin:1rem 0 2rem}
.harvest img{height:clamp(220px,34vw,380px);width:100%;object-fit:cover;object-position:50% 60%}
.harvest p+p{margin-top:.7rem}
.ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:1.4rem 0 1rem}
.ticket-grid article{background:var(--soft);padding:1rem}
.ticket-price{color:var(--rust);font-weight:800;margin-top:.6rem}
.portrait::after{opacity:0}
@media(max-width:760px){.journey,.ticket-grid,.harvest{grid-template-columns:1fr}.top nav{gap:.65rem}.top{font-size:.81rem}}
.portrait img{filter:grayscale(1)}
@keyframes focus-in{from{transform:scale(1.055)}to{transform:scale(1)}}



.hero h1,.section-head h2,.bio h3,.brand h3,.harvest h3{transition:color .22s ease-out}
:is(.portrait,.chestnut-gallery,.brand-gallery-grid)::after{transition:opacity .22s ease-out}

.harvest-social{margin-top:-.65rem;margin-bottom:1.25rem;font-size:.88rem;color:var(--rust)}
.booking{max-width:710px;padding-block:clamp(2rem,7vw,5rem)}
.booking h1{font-size:clamp(2.5rem,8vw,5rem);letter-spacing:-.08em}
.booking-notice,#booking-result{padding:1rem;background:var(--soft);border-left:2px solid var(--rust);margin:1rem 0 1.65rem}
.booking fieldset{margin:0 0 1.5rem;padding:0;border:0}
.booking legend{font-weight:800;color:var(--rust);padding:0;margin-bottom:.55rem}
.booking-option{display:flex;gap:.7rem;align-items:center;padding:.72rem;border-bottom:1px solid var(--rule);cursor:pointer}
.booking-option:has(input:checked){background:var(--soft)}
.booking-option input{accent-color:var(--rust)}
.booking-option small{display:block;font-size:.83rem}
.booking-fields{display:grid;gap:.7rem}
.booking-fields label{display:grid;gap:.22rem;font-size:.93rem;font-weight:700}
.booking-fields input{width:100%;border:1px solid var(--rule);background:var(--paper);font:inherit;padding:.6rem;color:var(--ink)}
.booking button.primary{font:inherit;border:0}
.booking button.primary:disabled{opacity:.55;cursor:default}
#booking-result h2{font-size:1.2rem;margin-bottom:.45rem}
.book-session{display:inline-block;margin-top:.45rem;color:var(--rust);font-size:.88rem;font-weight:750}

.color-in-view:is(h1,h2,h3){color:var(--rust)}
:is(.portrait,.chestnut-gallery,.brand-gallery-grid).color-in-view::after{opacity:.24}
.hero h1,.section-head h2,.bio h3,.brand h3,.harvest h3,:is(.portrait,.chestnut-gallery,.brand-gallery-grid)::after{transition-duration:1.65s;transition-timing-function:ease-in-out}
.booking-row{border-bottom:1px solid var(--rule)}
.booking-row .booking-option{border-bottom:0}
.session-party{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem .75rem;font-size:.9rem}
.session-party[hidden]{display:none}
.session-party input{width:4.6rem;padding:.28rem;background:var(--paper);border:1px solid var(--rule);font:inherit}
#booking-summary{padding-left:1.3rem;margin:.5rem 0}

.booking #booking-error{color:var(--rust);margin-top:.8rem} #booking-issued-code{font-weight:750;overflow-wrap:anywhere}
.chestnut-photo{max-width:680px;margin:0 0 1.65rem}
.chestnut-photo img{width:100%;height:auto}
.chestnut-photo figcaption{flex-wrap:wrap;letter-spacing:0}
.harvest{display:block;max-width:65ch;margin-bottom:1.4rem}
.chestnut-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 0 1.1rem}
.chestnut-gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1)}
@media(max-width:760px){.chestnut-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.score-nav{gap:0;background:transparent;border:0;border-block:1px solid var(--rule);padding:.7rem 0;margin:1.65rem 0 2rem}
.score-nav a{display:flex;flex-direction:column;gap:.15rem;background:transparent;padding:.2rem .35rem .05rem;min-width:0}
.score-nav svg{display:block;width:100%;height:auto;fill:currentColor}
.score-nav .stave{fill:none;stroke:var(--rule);stroke-width:.75}
.score-nav .symbol-line{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round}
.score-nav .string-lines{fill:none;stroke:var(--paper);stroke-width:.65}
.score-nav .paper-note{fill:var(--paper)}
.score-nav svg text{font:italic 10px Georgia,serif}
.score-nav a:hover,.score-nav a:focus-visible{color:var(--rust);background:var(--soft)}
@media(max-width:520px){.score-nav{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.55rem}.score-nav a{padding-inline:.2rem}}
.illustrated-score{margin:1.6rem 0 2.1rem;background:#f5f0e8;border:1px solid var(--rule)}
.roast-headline{text-align:center;font-size:clamp(1.45rem,5.1vw,2.8rem);font-weight:900;line-height:1.15;letter-spacing:-.075em;margin:.95rem .35rem 0;color:var(--rust)}
.roaster.running .roast-headline{animation:roast-letter-warmth 4.8s ease-in-out infinite}
.roaster-stickers text{text-anchor:middle;font-family:inherit;font-weight:800}
.roaster figcaption{justify-content:center;gap:.65rem}
@keyframes roast-letter-warmth{0%,100%{color:#6c3426;transform:translateY(0)}47%,62%{color:#a63b26;transform:translateY(-2px)}}
.roaster-stickers text{fill:#30251e}
.roast-scoop{transform-origin:478px 54px}
.falling-nut{opacity:0;fill:#75442e}
.roaster.running .roast-scoop{animation:scoop-tip 5.6s ease-in-out infinite}
.roaster.running .scoop-load{animation:scoop-empty 5.6s linear infinite}
.roaster.running .falling-nut{animation:nut-drop 5.6s linear infinite}
.roaster.running .falling-nut.second{animation-delay:.12s}
.roaster.running .falling-nut.third{animation-delay:.24s}
@keyframes scoop-tip{0%,13%,45%,100%{transform:rotate(0)}23%,33%{transform:rotate(-20deg)}}
@keyframes scoop-empty{0%,23%,80%,100%{opacity:1}31%,72%{opacity:0}}
@keyframes nut-drop{0%,24%{opacity:0;transform:translate(0,0)}25%{opacity:1;transform:translate(0,0)}34%{opacity:1;transform:translate(-5px,73px) rotate(65deg)}38%,100%{opacity:0;transform:translate(-8px,78px) rotate(85deg)}}


.unified-score svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
  .score-artist-sway{animation:score-artist-sway 5.8s ease-in-out infinite}
  .score-artist-sway-2{animation-delay:-2.1s;animation-duration:6.8s}
  .score-artist-sway-3{animation-delay:-3.4s;animation-duration:7.4s}
}
@keyframes score-artist-sway{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(1.5px,-2px)}
  70%{transform:translate(-1.3px,-.6px)}
}
.unified-score-warmth{opacity:0;mask-image:linear-gradient(145deg,#000 40%,transparent 61%);mask-size:300% 300%;mask-repeat:no-repeat;mask-position:100% 100%;animation:unified-score-ripens 14s ease-in-out infinite}
@keyframes unified-score-ripens{
  0%{opacity:0;mask-position:100% 100%}
  12%{opacity:.85;mask-position:78% 83%}
  52%,65%{opacity:.88;mask-position:0% 0%}
  88%,100%{opacity:0;mask-position:0% 0%}
}
.brand-score-word{display:inline-block;white-space:nowrap}
.brand-score-word>span{display:inline-block}
.rhythm-title.color-in-view .brand-score-word>span{animation:brand-note-entry .56s cubic-bezier(.2,.7,.25,1) var(--beat) both}
@keyframes brand-note-entry{
  0%{opacity:0;transform:translateY(var(--pitch));color:var(--ink)}
  68%{opacity:1;transform:translateY(-.035em)}
  100%{opacity:1;transform:translateY(0)}
}
.roast-date{margin:.75rem 0 0;text-align:center;color:var(--rust);font-size:clamp(.85rem,2.5vw,1.05rem);font-weight:750;word-break:keep-all}
.hero-reservation{margin-top:.7rem}
.hero-reservation>span,.roast-program{color:var(--rust);font-weight:750}
.roast-program{margin-top:.65rem}
@media(max-width:760px){.intro .hero-reservation{grid-row:4;margin-top:0}.cover{grid-row:5}.intro .lede{grid-row:6}}
.admin-booking table{width:100%;border-collapse:collapse;margin-top:.75rem;text-align:left}
.admin-booking th,.admin-booking td{padding:.5rem;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.admin-booking section p{margin-top:.45rem}
.brand-gallery{margin:clamp(1.25rem,4vw,2.5rem) 0}
.brand-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.brand-gallery-grid img{width:100%;aspect-ratio:1135/636;object-fit:cover;filter:grayscale(1)}
.ticket-guide .booking-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:1rem 0;scroll-margin-top:6rem}
.ticket-guide .booking-row h3,.ticket-guide .booking-row p{margin:0 0 .25rem}
.ticket-guide .booking-row>strong{color:var(--rust);white-space:nowrap}
.ticket-guide section+section{margin-top:2rem}
