/* ===== Site header: chile ristras on twine + ink-sketch bow nav. Shared by every page (assets/header.css).
   Markup is generated by tools/build-header.py. Each .ristra sets --rh (chile height), --tw (twine), --rot (tilt), --img. ===== */
.hdr{--scene:335px;position:relative;z-index:3;padding-top:14px;color:var(--ink,#13292C)}
.hdr-top{position:absolute;top:0;left:0;z-index:4;padding:10px 12px}.hdr-logo{display:block}.hdr-logo img{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.hdr-nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;height:var(--scene);padding:0 2vw;max-width:1600px;margin:0 auto}
.hdr-nav>span{z-index:0}.nav-item{z-index:1}.hdr-nav a.ristra{margin:0;padding:0}.hdr-nav .bow{max-width:none}
.ristra{--k:.85;--h:calc(var(--rh)*var(--k));position:relative;display:block;height:calc(var(--h) + var(--tw));transform-origin:50% 0;rotate:var(--rot);text-decoration:none;color:inherit;
 animation:sway var(--dur,3.4s) ease-in-out var(--delay,0s) infinite alternate;will-change:rotate}
/* twine: nail head at the top edge, twisted cord, knot where it meets the chiles */
.ristra::before{content:"";position:absolute;left:50%;top:-8px;width:14px;height:calc(var(--tw) + 14px);margin-left:-7px;z-index:1;
 background:radial-gradient(circle at 50% 4.5px,#C4C4C4 0,#4A4A4A 3.2px,transparent 4.2px),
 radial-gradient(ellipse 5px 3.5px at 50% calc(100% - 4px),#D9B986 0,#9C7C49 70%,transparent 100%),
 radial-gradient(circle 3.5px at 50% calc(100% - 9px),#CDAA73 0,#A2804E 70%,transparent 100%),
 repeating-linear-gradient(-58deg,#D2B07E 0 2px,#A78651 2px 4px) 50% 0/3px 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ristra img{display:block;height:var(--h);width:auto;margin-top:var(--tw);
 filter:drop-shadow(0 14px 10px rgba(45,12,8,.28)) drop-shadow(0 3px 3px rgba(45,12,8,.35)) saturate(.92) contrast(1.04)}
.ristra.flip img{transform:scaleX(-1)}
/* inner shading masked to the chile silhouette gives the bunch volume */
.ristra::after{content:"";position:absolute;left:0;top:var(--tw);width:100%;height:var(--h);pointer-events:none;mix-blend-mode:multiply;
 background:linear-gradient(90deg,rgba(60,10,8,.42),rgba(60,10,8,.1) 30%,transparent 48%,rgba(60,10,8,.06) 68%,rgba(60,10,8,.38)),linear-gradient(rgba(60,10,8,.35),transparent 18%,transparent 80%,rgba(60,10,8,.25));
 -webkit-mask:var(--img) center/100% 100% no-repeat;mask:var(--img) center/100% 100% no-repeat}
.ristra.flip::after{transform:scaleX(-1)}
.ristra .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* nav banner (inline SVG from tools/sketchbow.py), centred in the upper third of the chile */
.bow{position:absolute;left:50%;top:calc(var(--tw) + var(--h)*.2 - var(--bw)*.21);width:var(--bw);--bw:150px;height:auto;translate:-50% 0;rotate:var(--brot,0deg);
 overflow:visible;z-index:2;filter:drop-shadow(0 3px 3px rgba(40,25,10,.3));transition:translate .25s,filter .25s}
.bow .paper{fill:#83C5BE;transition:fill .2s}.bow .tail{filter:brightness(.88)}.bow .fold{filter:brightness(.62)}
.bow .bt{font:500 30px/1 var(--serif,"Fraunces",Georgia,serif);fill:#13292C;letter-spacing:.3px}
.ristra.on .bow .bt{text-decoration:underline}
.ristra:hover .bow,.ristra:focus-visible .bow{translate:-50% -4px;filter:drop-shadow(0 8px 7px rgba(40,25,10,.38))}
.ristra:hover .bow .paper,.ristra:focus-visible .bow .paper{fill:#FFDE7A}
.ristra:hover{animation-name:swayBig}
.ristra:focus-visible{outline:3px solid #FF5B14;outline-offset:6px;border-radius:12px}
@keyframes sway{from{rotate:calc(var(--rot) - 1.1deg)}to{rotate:calc(var(--rot) + 1.1deg)}}
@keyframes swayBig{from{rotate:calc(var(--rot) - 3deg)}to{rotate:calc(var(--rot) + 3deg)}}
@media(prefers-reduced-motion:reduce){.ristra{animation:none}.bow{transition:none}}
/* name / page-title block beneath the scene (main site pages only) */
.band .hero,.band .post-hero,.band .page-hero{text-align:center;padding:84px 28px 56px}.band .post-hero{padding-bottom:150px}.band .eyebrow{color:var(--teal)}
.band .hero h1{font:400 clamp(40px,5.5vw,68px)/1 var(--serif);letter-spacing:-.025em;margin:10px auto 0}.band .hero h1 .dot{color:var(--blaze)}
.band .post-hero h1,.band .post-hero .meta,.band .page-hero h1,.band .page-hero p{margin-left:auto;margin-right:auto}.band .meta,.band .page-hero p{color:var(--slate)}.band .meta a{color:var(--teal)}
/* the longest bunches hang past the scene, over whatever section follows (teal hero on sub-pages) */
@media(min-width:561px){.band.hdr+.hero,.band.hdr+section.hero{padding-top:124px}}
@media(min-width:1500px){.hdr{--scene:370px}.ristra{--k:.95}.hdr-nav{padding:0 1vw}}
@media(max-width:1400px){.hdr-nav>span:first-child,.hdr-nav>span:last-child{display:none}}
@media(max-width:1100px){.hdr{--scene:300px}.ristra{--k:.72}.bow{--bw:136px}.hdr-nav>span:nth-child(2),.hdr-nav>span:nth-child(10){display:none}}
@media(max-width:820px){.hdr{--scene:260px}.ristra{--k:.6}.hdr-nav>span{display:none}.hdr-nav{justify-content:space-evenly}.bow{--bw:124px}}
@media(max-width:560px){/* fallback nav: tappable pills */
 .hdr-nav{height:auto;flex-wrap:wrap;justify-content:center;gap:8px;padding:48px 16px 0}
 .ristra{animation:none;rotate:0deg;height:auto}.ristra::before,.ristra::after,.ristra img,.bow{display:none}
 .nav-item .lbl{position:static;width:auto;height:auto;clip:auto;display:inline-block;min-height:44px;line-height:44px;padding:0 16px;border-radius:99px;background:#83C5BE;color:#13292C;font:500 16px var(--sans,sans-serif);box-shadow:0 1px 2px rgba(0,0,0,.15)}
 .nav-item:hover .lbl{background:#FFDE7A}.nav-item.on .lbl{background:#1F7F88;color:#FBF7F0}}