/* Collection catalogue: the same 1200px grid and local Golos font. */
.collections-page{padding-bottom:0;--collection-focus:var(--green)}
[data-theme=dark] .collections-page{--collection-focus:var(--ink)}
.collections-page ::selection{background:var(--peach);color:var(--ink)}
.collections-page :is(a,button,summary):focus-visible{outline:2px solid var(--collection-focus);outline-offset:3px}
.collections-page .primary-nav a[aria-current=page]{color:var(--accent)}
.collections-page .primary-nav a[aria-current=page]:after{transform:scaleX(1)}
.collections-main{padding-block:22px 22px}
.collections-main>.breadcrumbs{margin-bottom:12px}
.collections-heading{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:center;min-height:140px;margin-bottom:18px}
.collections-page h1{font-size:25px;line-height:1.25}
.collections-heading p{font-size:16px;margin-top:9px;line-height:1.6}
.collections-postcards{position:relative;width:380px;height:146px;--post-x:0px;--post-y:0px;isolation:isolate}
.postcard-leaves{position:absolute;z-index:-2;inset:-12px 5px;background:url('assets/hero-botanical-v2.webp') center/contain no-repeat;opacity:.65}
.postcard{position:absolute;display:block;width:160px;height:107px;border:6px solid #fff9ef;border-bottom-width:12px;background:#f5e3c8;box-shadow:0 3px 8px #173c341b;overflow:hidden;will-change:transform;transition:transform .4s ease-out}
.postcard>img,.postcard>svg{width:100%;height:100%;display:block;object-fit:cover}
.postcard-notebook{right:0;top:29px;--angle:12deg;transform:translate(calc(var(--post-x)*.35),calc(var(--post-y)*.35)) rotate(var(--angle));height:108px;width:148px;background:repeating-linear-gradient(#fff2dc 0 12px,#e1caaa 12px 13px);border-color:#f9e6cb}
.postcard-notebook:before{content:'';position:absolute;left:13px;top:0;bottom:0;border-left:2px dashed #a79375}
.postcard-sea{right:75px;top:19px;--angle:7deg;transform:translate(calc(var(--post-x)*.65),calc(var(--post-y)*.65)) rotate(var(--angle))}
.postcard-fire{left:15px;top:5px;--angle:-8deg;transform:translate(var(--post-x),var(--post-y)) rotate(var(--angle))}
.postcard-fire-glow{position:absolute;inset:25% 20% 0;background:radial-gradient(ellipse,#ffa73665,transparent 65%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.postcard-strings{position:absolute;z-index:-1;inset:0;width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:1;opacity:.55;overflow:visible}
.collections-postcards.is-introducing .postcard{animation:postcard-in .6s both;animation-delay:var(--post-delay,0ms)}
.collections-postcards.is-introducing .postcard-sea{--post-delay:80ms}.collections-postcards.is-introducing .postcard-fire{--post-delay:160ms}
.collections-postcards.is-introducing .postcard-fire-glow{animation:postcard-glow 1.1s ease-out}
.collections-postcards.is-introducing .postcard-strings path{animation:postcard-wave .9s ease-out both;transform-origin:center}
.collections-postcards.is-introducing .postcard-strings path:nth-child(2){animation-delay:40ms}.collections-postcards.is-introducing .postcard-strings path:nth-child(3){animation-delay:80ms}.collections-postcards.is-introducing .postcard-strings path:nth-child(4){animation-delay:120ms}
.collections-controls{padding:16px;background:var(--white);border:1px solid var(--line);border-radius:9px;margin-bottom:24px}
#collections-search{margin:0}
.collections-search-field{width:min(520px,100%);display:flex;align-items:center;gap:12px;padding:0 3px 0 13px;min-height:46px;border:1px solid var(--line);border-radius:7px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.collections-search-field:focus-within{border-color:var(--collection-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--collection-focus) 15%,transparent)}
.collections-search-field>.icon{width:20px;height:20px;color:var(--muted);transition:color .15s}.collections-search-field:focus-within>.icon{color:var(--accent)}
.collections-search-field input{width:0;flex:1;min-width:0;height:44px;border:0;outline:none!important;background:transparent;color:var(--ink);font-size:15px}
.collections-search-field input::placeholder{color:var(--muted);opacity:1}.collections-search-field input::-webkit-search-cancel-button{appearance:none}
.collections-page #collections-clear{display:grid;place-items:center;width:44px;height:44px;border-radius:5px;color:var(--muted);flex:none}
.collections-control-row{display:flex;align-items:center;gap:16px;margin-top:10px}
.collections-tabs{display:flex;flex-wrap:wrap;gap:8px}
.collections-page .collections-tabs button{min-height:44px;border:1px solid var(--line);border-radius:7px;padding:8px 16px;font-size:13px;background:var(--surface);transition:color .14s,background .14s,border-color .14s}
.collections-page .collections-tabs button[aria-pressed=true]{background:var(--green);color:#f7f4ed;border-color:var(--green)}
#collections-count{margin-left:auto;white-space:nowrap;color:var(--muted);font-size:13px}
.collections-group{margin-top:24px}.collections-group:first-child{margin-top:0}
.collections-page .collections-group h2{font-size:22px;margin-bottom:14px;line-height:1.3}
.collections-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.collection-tile{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--white);transition:transform .18s,border-color .18s,box-shadow .18s,background .15s}
.collection-media{display:block;height:132px;width:100%;overflow:hidden;position:relative;isolation:isolate;background:var(--peach)}
.collection-art{display:block;width:100%;height:100%;transform:scale(1);transition:transform .25s}
.collection-art>img,.collection-art>svg{display:block;width:100%;height:100%;object-fit:cover}
.collection-copy{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.collection-copy>strong{font-size:16px;line-height:1.35;font-weight:600;transition:color .15s}
.collection-description{display:block;color:var(--muted);font-size:13px;line-height:1.5;min-height:39px}
.collection-examples{display:block;color:var(--muted);font-size:12px;line-height:1.5;min-height:18px;overflow-wrap:anywhere}
.collection-total{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:14px;line-height:1.4;margin-top:auto;padding-top:6px}
.collection-total .icon{width:19px;height:19px;transition:transform .18s}
#collections-language .collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#collections-language .collection-tile{display:grid;grid-template-columns:42% minmax(0,1fr)}
#collections-language .collection-media{height:100%;min-height:150px}
#collections-language .collection-description{min-height:0}
.collection-chord-papers{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;background:#f2dfc7 url('assets/hero-botanical-v2.webp') center/cover}
.collection-paper{display:block;position:relative;width:48px;flex:none;background:#fff6e8;color:#263a32;border-radius:4px;box-shadow:0 2px 7px #173c3420;padding:4px;transform:rotate(calc(-8deg + var(--paper-order)*5deg));transition:transform .2s}
.collection-paper .chord-svg{display:block;width:100%;height:auto;overflow:visible}
.collection-glow,.collection-spark,.collection-lights,.collection-beam,.collection-sheen{pointer-events:none;position:absolute;opacity:0}
.collection-glow{inset:20% 12% 0 28%;background:radial-gradient(ellipse,#ffad3c80,transparent 65%);mix-blend-mode:screen}
.collection-spark{left:64%;top:57%;width:3px;height:5px;border-radius:50%;background:#ffd393}.spark-two{left:68%;top:62%;height:3px}
.collection-lights{inset:0;opacity:1}.collection-lights i{position:absolute;top:10%;left:20%;width:12px;height:12px;background:#ffd38a;filter:blur(3px);opacity:0;border-radius:50%}.collection-lights i:nth-child(2){left:46%;top:8%}.collection-lights i:nth-child(3){left:68%;top:10%}
.collection-beam{left:65%;top:28%;width:40%;height:65%;background:linear-gradient(90deg,#f8d89e70,transparent);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%)}
.collection-sheen{inset:0;background:linear-gradient(110deg,transparent 25%,#fff6cf55 48%,transparent 70%);transform:translateX(-100%)}
.collection-effect-paper .collection-glow{display:none}
.collection-effect-branch .collection-art{transform-origin:50% 100%}
.collection-tile.is-awaiting{opacity:0;transform:translateY(4px)}
.collection-tile.is-entering{animation:collection-in .3s ease-out both;animation-delay:var(--tile-delay,0ms)}
.collections-group.is-updating .collection-tile{animation:collection-refresh .17s ease-out both}
.collections-match{margin-top:22px;padding:14px 20px;display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--sage);border:1px solid var(--line);border-radius:9px}
.collections-match-art{display:flex;justify-content:center;gap:5px;align-items:center;min-height:90px;background:url('assets/hero-botanical-v2.webp') center/contain no-repeat}
.collections-match-art .collection-paper{width:47px}.collections-page .collections-match h2{font-size:18px;line-height:1.35}.collections-match p{font-size:13px;margin-top:5px;line-height:1.6}
.collections-match .text-link{font-size:13px;min-height:44px;white-space:normal;max-width:250px}
.collections-demo-note{color:var(--muted);font-size:11px;line-height:1.6;margin:14px 0 0}
.collections-empty{padding:32px 20px;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:9px}.collections-page .collections-empty h2{font-size:21px}.collections-empty p{margin-top:10px;font-size:14px}.collections-empty>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.collections-info-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 40px);margin:auto;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);padding:28px;overflow:auto;overscroll-behavior:contain}
.collections-info-dialog::backdrop{background:#102e276b;backdrop-filter:blur(2px)}
.collections-page .collections-info-dialog h2{font-size:21px;line-height:1.35;margin-bottom:12px;padding-right:32px}.collections-info-dialog p{font-size:14px;line-height:1.7}.collections-info-dialog .text-link{margin-top:14px;min-height:44px;white-space:normal}.collections-info-close{position:absolute;right:10px;top:10px;width:44px;height:44px}
@media(hover:hover) and (pointer:fine){
 .collections-tabs button:not([aria-pressed=true]):hover,#collections-clear:hover{background:var(--sage)}
 .collection-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow)}
 .collection-tile:hover .collection-art{transform:scale(1.02)}.collection-tile:hover strong{color:var(--collection-focus)}.collection-tile:hover .collection-total .icon{transform:translateX(3px)}
 .collection-effect-fire:hover .collection-glow{animation:postcard-glow .85s ease-out}.collection-effect-fire:hover .collection-spark{animation:collection-spark .8s ease-out}.collection-effect-fire:hover .spark-two{animation-delay:.12s}
 .collection-effect-lights:hover .collection-lights i{animation:collection-light .7s ease-out}.collection-effect-lights:hover .collection-lights i:nth-child(2){animation-delay:.1s}.collection-effect-lights:hover .collection-lights i:nth-child(3){animation-delay:.2s}
 .collection-effect-projector:hover .collection-beam{animation:collection-light .8s ease-out}
 .collection-effect-branch:hover .collection-art{animation:collection-branch .6s ease-out}
 .collection-effect-sea:hover .collection-sheen,.collection-effect-light:hover .collection-sheen{animation:collection-sheen .85s ease-out}
 .collection-effect-paper:hover .collection-paper{transform:translateY(-2px) rotate(calc(-8deg + var(--paper-order)*5deg))}
 .collections-match:hover{background:color-mix(in srgb,var(--sage) 85%,var(--peach))}
 .collections-match:hover .collection-paper{transform:translateY(-2px) rotate(calc(-8deg + var(--paper-order)*5deg))}
}
.collection-tile:focus-visible{border-color:var(--collection-focus);box-shadow:var(--shadow)}.collection-tile:focus-visible strong{color:var(--collection-focus)}.collection-tile:focus-visible .collection-total .icon{transform:translateX(3px)}
@media(hover:none){.collection-tile:active{background:var(--peach)}.collections-page .collections-tabs button:active{background:var(--sage)}}
@media(max-width:1099px){.collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collections-heading{grid-template-columns:minmax(0,1fr) 300px}.collections-postcards{width:300px}.postcard{width:140px;height:96px}.postcard-sea{right:55px}.postcard-notebook{width:125px;right:0}.postcard-fire{left:0}.collections-match{grid-template-columns:140px minmax(0,1fr)}.collections-match>.text-link{grid-column:2;max-width:100%}.collections-match-art{grid-row:1/3}}
@media(max-width:740px){
 .collections-page{padding-bottom:0}.collections-main{padding-block:18px 20px}.collections-main>.breadcrumbs{font-size:11px;gap:7px;margin-bottom:12px}
 .collections-heading{grid-template-columns:minmax(0,1fr) 120px;gap:10px;min-height:118px;margin-bottom:16px}.collections-page h1{font-size:24px}.collections-heading p{font-size:14px;line-height:1.55;margin-top:8px}
 .collections-postcards{width:125px;height:110px;margin-left:-5px}.postcard{border-width:3px;border-bottom-width:7px;width:75px;height:66px}.postcard-notebook{width:63px;height:80px;right:0;top:24px}.postcard-sea{right:20px;top:19px}.postcard-fire{left:0;top:8px}.postcard-leaves{inset:0 -4px}.postcard-strings{width:135px;left:-6px}
 .collections-controls{padding:0;border:0;background:transparent;margin-bottom:20px}.collections-search-field{width:100%}.collections-search-field input{font-size:16px}.collections-control-row{display:block;margin-top:10px}.collections-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.collections-page .collections-tabs button{font-size:14px;padding-inline:8px;min-height:44px}#collections-count{display:block;text-align:right;margin-top:10px;font-size:12px}
 .collections-group{margin-top:22px}.collections-page .collections-group h2{font-size:22px;margin-bottom:12px}.collections-grid,#collections-language .collections-grid{grid-template-columns:minmax(0,1fr);gap:10px}
 .collection-tile,#collections-language .collection-tile{display:grid;grid-template-columns:116px minmax(0,1fr);padding:6px;gap:11px;min-height:152px}.collection-media,#collections-language .collection-media{height:100%;min-height:138px;border-radius:6px}.collection-copy{padding:7px 5px 7px 0;gap:6px}.collection-copy>strong{font-size:16px}.collection-description{font-size:13px;min-height:0;line-height:1.45}.collection-examples{font-size:12px;min-height:0;line-height:1.4}.collection-examples:empty{display:none}.collection-total{font-size:14px;padding-top:4px}.collection-chord-papers{gap:0;padding:3px}.collection-chord-papers .collection-paper{width:29px;padding:3px;flex:1;min-width:0}
 .collections-match{grid-template-columns:85px minmax(0,1fr);gap:6px 12px;padding:14px 12px;margin-top:22px}.collections-match-art{grid-row:1/3;gap:0;min-height:100px}.collections-match-art .collection-paper{width:34px;padding:3px;margin-right:-5px}.collections-page .collections-match h2{font-size:17px}.collections-match p{font-size:13px}.collections-match>.text-link{grid-column:2;font-size:13px;line-height:1.5}.collections-demo-note{font-size:11px;line-height:1.6}.collections-page .song-footer a:not(.brand),.collections-page .song-footer button{min-height:28px;font-size:12px}.collections-info-dialog{padding:26px 20px max(24px,env(safe-area-inset-bottom))}
}
@media(max-width:370px){.collections-heading{grid-template-columns:minmax(0,1fr) 90px;gap:8px}.collections-postcards{width:98px}.postcard{width:62px;height:55px}.postcard-sea{right:10px}.postcard-notebook{width:55px}.collection-tile,#collections-language .collection-tile{grid-template-columns:94px minmax(0,1fr);gap:9px}.collection-copy>strong{font-size:16px}.collection-description{font-size:13px}.collection-media,#collections-language .collection-media{min-height:145px}.collection-chord-papers{flex-wrap:wrap;align-content:center;gap:2px}.collection-chord-papers .collection-paper{flex:0 0 35px;width:35px}.collections-match{grid-template-columns:68px minmax(0,1fr);gap:4px 10px}.collections-match-art .collection-paper{width:29px}}
@keyframes postcard-in{from{opacity:0;translate:0 5px;rotate:2deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes postcard-wave{0%{translate:0 2px}35%{translate:0 -1px}65%{translate:0 .5px}100%{translate:0 0}}
@keyframes postcard-glow{0%,100%{opacity:0}40%{opacity:.85}}
@keyframes collection-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes collection-refresh{from{opacity:.5}to{opacity:1}}
@keyframes collection-spark{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(-5px,-24px)}}
@keyframes collection-light{0%,100%{opacity:0}40%{opacity:.65}}
@keyframes collection-branch{0%,100%{rotate:0deg}35%{rotate:1deg}70%{rotate:-.6deg}}
@keyframes collection-sheen{0%{opacity:0;transform:translateX(-100%)}25%{opacity:.6}100%{opacity:0;transform:translateX(100%)}}
.collections-page.is-paused *,.collections-page.is-paused *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.collections-page *,.collections-page *::before,.collections-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.collections-page .collection-tile,.collections-page .collection-art,.collections-page .collection-total .icon,.collections-page .collection-paper{transform:none!important;rotate:none!important}.collections-page .collection-tile.is-awaiting{opacity:1;transform:none}.collections-page .postcard{translate:none!important;rotate:none!important}.collections-postcards{--post-x:0px!important;--post-y:0px!important}}

.collection-copy mark{background:var(--peach);color:inherit;font-weight:700;border-radius:2px}
.collections-page .collections-empty button{min-height:44px}
.collections-page .collections-search-field:focus-within{outline:2px solid transparent;outline-offset:2px}