/* One-page layout: name → banner → song map → footer. Fits one screen, no scroll. */
html{scroll-snap-type:none}
body.one{min-height:100svh;background:var(--paper)}
/* printed type: ink spreads a little and breaks up, like the sketch */
.one .ink:not(canvas){filter:url(#print)}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1180px;margin:0 auto;padding:clamp(14px,3.2vh,30px) 16px clamp(10px,2vh,22px)}
.only-mob{display:none}

.top{text-align:center}
.top h1{display:inline-flex;align-items:center;gap:.42em;font-family:var(--sans);font-weight:600;font-size:clamp(30px,5.2vh,46px);letter-spacing:.16em;text-transform:uppercase;line-height:1.05}
.top .logo{width:1.2em;height:1.2em;border-radius:50%;flex:none;filter:sepia(.15) contrast(.95);box-shadow:0 1px 3px rgba(42,36,32,.25)}
.sub{font-family:var(--sans);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.2em;color:var(--brown);margin-top:8px}

.banner{position:relative;width:100%;max-width:1100px;margin-top:clamp(12px,2.4vh,22px);padding:7px;background:#f3ecdd;border:1px solid rgba(42,36,32,.18);box-shadow:0 8px 22px rgba(60,40,20,.14)}
.banner img{width:100%;height:clamp(96px,17vh,196px);object-fit:cover;object-position:50% 44%;filter:sepia(.08)}

.mapcap{position:relative;z-index:32;text-align:center;margin-top:clamp(12px,2.6vh,24px)}
.mapcap h2{display:inline;font-family:var(--sans);font-weight:500;text-transform:uppercase;font-size:12px;letter-spacing:.36em}
.mapcap p{display:inline;font-style:italic;font-size:14px;color:var(--brown)}
.mapcap p::before{content:"\00a0\00a0— "}

.stage{flex:1 1 auto;min-height:200px;width:100%;max-width:1100px;position:relative;margin-top:clamp(8px,1.6vh,16px)}
.stage .flat,.stage .globe{position:absolute;inset:0}
.flat{display:flex;align-items:center;justify-content:center}
.flat .mapframe{touch-action:none;flex:none;border:1.2px solid var(--ink)}
.flat .mapbox{position:absolute;will-change:auto}
.flat .mapbox > img{position:absolute;left:0;top:0;width:100%;height:100%;filter:contrast(1.14) brightness(.97)}
.flat .mapbox > img.base{position:relative;display:block}
.flat .mapbox > img.tile{width:25.001%;height:50.001%}
.flat .mapbox > img.tile,.flat .mapbox > img.xl{filter:none}
.flat .zoom button{width:30px;height:30px;font-size:15px;background:#ebe3d0}
.globe canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
.globe canvas.g-ink{pointer-events:none}
.globe canvas.g-marks{touch-action:none;cursor:grab}
.globe canvas.drag{cursor:grabbing}

/* footer */
.foot{width:100%;max-width:1100px;margin-top:clamp(10px,2vh,20px);display:grid;grid-template-columns:max-content max-content 1fr max-content;gap:14px 56px;align-items:end}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.links a,.contact a{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid rgba(42,36,32,.4);padding-bottom:2px;white-space:nowrap}
.links a:hover,.contact a:hover{color:var(--green);border-color:var(--green)}
.links a + a{margin-left:18px}
.social{display:flex;gap:20px;padding-bottom:4px;justify-self:center}
.links{white-space:nowrap}
.social a{color:var(--brown);display:flex;width:24px;height:24px;align-items:center;justify-content:center}
.social a:hover{color:var(--green)}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.join{white-space:nowrap}
.legal{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);text-align:center;margin-top:2px}
.legal a,.cookies-btn{text-decoration:none;border-bottom:1px solid rgba(133,117,99,.4)}
.cookies-btn{font:inherit;letter-spacing:inherit;color:inherit;padding:0;min-height:0}
.cookies-btn:hover,.legal a:hover{color:var(--green)}

/* cookies note */
.cookies{margin:auto;max-width:min(420px,calc(100vw - 32px));padding:22px 22px 18px;border:0;background:#f8f3e8;color:var(--ink);box-shadow:0 16px 40px rgba(60,40,20,.28);font-size:14.5px;line-height:1.55}
.cookies::backdrop{background:rgba(42,36,32,.35)}
.cookies p + p{margin-top:9px}
.cookies .d-label{margin-bottom:10px}
.cookies .btn{margin-top:16px;width:100%}

/* song card */
.one .songcard{position:fixed;right:24px;top:24px;max-height:calc(100svh - 48px);z-index:40}
.songcard .cover{position:relative;display:block;width:100%;margin-top:14px;aspect-ratio:460/230;overflow:hidden;background:#e4dccb;padding:0;border:0;cursor:pointer;text-decoration:none}
.songcard div.cover{cursor:default}
.songcard .cover img{width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.9)}
.songcard .pbtn{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--green);box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .15s,background .15s}
.songcard .pbtn::after{content:"";position:absolute;left:25px;top:20px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #f6f1e6}
.songcard .cover:hover .pbtn{transform:scale(1.07);background:var(--green-d)}
.songcard .ptag{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:rgba(248,243,232,.92);color:var(--ink);padding:3px 8px}
.songcard .sp-slot{margin-top:14px;min-height:152px;border-radius:12px;overflow:hidden;background:rgba(74,61,52,.08)}
.songcard .sp-slot iframe{display:block;width:100%;height:152px;border:0}
.songcard .sc-head{position:relative;justify-content:flex-end;align-items:center}
.songcard .grip{display:none}
.songcard .d-title{margin-top:14px}
.songcard .d-actions{margin-top:16px}
.songcard .fine{margin-top:10px}

@media (max-width:900px){
  .only-desk{display:none}
  .only-mob{display:inline}
  .globe.only-mob{display:block}
  .page{padding:clamp(14px,3vh,24px) 16px clamp(8px,1.6vh,14px)}
  .top h1{font-size:26px;letter-spacing:.13em;gap:.38em}
  .top .logo{width:1.3em;height:1.3em}
  .sub{font-size:8.5px;letter-spacing:.16em;line-height:1.8;margin-top:6px}
  .sub .dot{display:none}
  .sub .l2{display:block}
  .banner{padding:5px;margin-left:auto;margin-right:auto;margin-top:clamp(10px,2vh,16px)}
  .banner img{height:clamp(80px,15.5svh,126px);object-position:50% 42%}
  .mapcap{margin-top:clamp(10px,2vh,16px)}
  .mapcap h2{display:block;font-size:11px;letter-spacing:.34em}
  .mapcap p{display:block;font-size:12.5px;line-height:1.4;margin-top:4px}
  .mapcap p::before{content:none}
  .stage{min-height:140px;margin-top:clamp(10px,2vh,18px)}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0;margin-top:clamp(12px,2.2vh,20px)}
  .only-desk-b,.only-desk-f{display:none!important}
  .free{width:100%;text-align:center;order:0}
  .free .links a{font-size:11.5px}
  .contact{order:1}.join{order:2}.legal{order:4}
  .lbl{font-size:9px;margin-bottom:4px}
  .links a,.contact a{font-size:11px}
  .contact{margin-top:clamp(8px,1.8vh,16px)}
  .join{margin-top:clamp(8px,1.8vh,16px);padding:11px 14px;font-size:10px;letter-spacing:.16em;min-height:40px}
  .social{width:100%;justify-content:center;gap:26px;padding:0;margin-top:clamp(8px,1.6vh,14px)}
  .social svg{width:17px;height:17px}
  .legal{width:100%;font-size:8.5px;margin-top:clamp(8px,1.6vh,14px);padding-left:40px;padding-right:8px}
  .one .songcard{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88svh;padding-top:10px}
  .songcard .sc-head{justify-content:flex-end;min-height:30px}
  .songcard .grip{display:block;position:absolute;left:50%;top:2px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(74,61,52,.35)}
  .songcard .cover{aspect-ratio:16/9}
}
@media (max-width:900px){
  .yg-a11y-btn{bottom:4px!important;width:34px!important;height:38px!important}
  .yg-a11y-btn svg{width:20px;height:20px}
}
.cookies .c-choice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.cookies .c-choice .btn{margin-top:0;width:auto;flex:1;padding:10px 12px;font-size:14px}
.cookies .c-choice .ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(133,117,99,.55)}
.cookies .c-choice .ghost:hover{background:rgba(133,117,99,.12)}
.cookies .c-state{flex-basis:100%;font-size:13px;opacity:.8}

/* ---------- song card v2: video first, calm type ---------- */
.songcard .sc-video{margin-top:14px;display:flex;justify-content:center;background:#2a2420;border-radius:4px;overflow:hidden}
.songcard .sc-video video{display:block;width:auto;max-width:100%;height:min(62vh,640px);aspect-ratio:9/16;background:#2a2420;object-fit:contain}
.songcard .sc-still{background:#e4dccb}
.songcard .sc-still img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:sepia(.12) saturate(.9)}
.songcard .d-title{margin-top:16px;text-align:center}
.songcard .sc-acts{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.songcard .sc-listen{width:100%;padding:14px 18px;font-size:15px}
.songcard .sc-links{display:flex;gap:10px}
.songcard .sc-links[hidden]{display:none}
.songcard .sc-links .btn{flex:1;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(74,61,52,.55);padding:12px 10px;font-size:15px}
.songcard .sc-links .btn:hover{background:rgba(74,61,52,.08)}
.songcard .sc-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 0 4px;background:none;border:0;border-top:1px solid rgba(42,36,32,.22);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.songcard .sc-more i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.songcard .sc-more[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
.songcard .sc-about[hidden]{display:none}
.songcard .sc-about p{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink);padding:4px 2px 6px}
@media (max-width:900px){
  .songcard .sc-video video{height:min(56svh,560px)}
  .songcard .d-title{font-size:20px}
  .songcard .sc-listen{font-size:16px;padding:15px 18px}
  .songcard .sc-links .btn{font-size:16px;padding:14px 10px}
  .songcard .sc-more{font-size:12.5px;padding:14px 0 6px}
  .songcard .sc-about p{font-size:19px;line-height:1.7}
}

/* header v2: name alone, logo beside the subtitle */
.top h1{display:block}
.top .sub{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.24em;margin-top:10px}
.top .sub .logo{width:34px;height:34px}
@media (max-width:900px){
  .top .sub{font-size:11px;letter-spacing:.2em;gap:10px;margin-top:8px}
  .top .sub .logo{width:30px;height:30px}
}
.songcard .d-title{margin-top:4px}
.songcard .sc-video{margin-top:12px}
.songcard .sc-acts{margin-top:16px}

/* privacy notice bar (first visit only) */
.px-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:35;width:min(600px,calc(100vw - 28px));display:flex;align-items:center;gap:14px;padding:12px 14px 12px 16px;background:#f8f3e8;color:var(--ink);box-shadow:0 8px 28px rgba(60,40,20,.28);font-family:var(--sans);font-size:13.5px;line-height:1.45}
.px-bar p{flex:1}
.px-bar a{color:inherit;text-decoration:underline}
.px-bar div{display:flex;gap:8px;flex:none}
.px-bar button{font:600 12.5px var(--sans);letter-spacing:.06em;padding:9px 14px;border:0;background:var(--green);color:#f6f1e6;cursor:pointer}
.px-bar button + button{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(74,61,52,.5)}
@media (max-width:900px){
  .px-bar{left:76px;right:10px;width:auto;transform:none;bottom:10px;flex-direction:column;align-items:stretch;gap:10px;font-size:13px}
  .px-bar div button{flex:1;padding:11px 10px}
}
.top .sub .mark{height:30px;width:auto;opacity:.92}
@media (max-width:900px){ .top .sub .mark{height:26px} }

/* the journey: a thin red thread on the flat map */
.mapframe .route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mapframe .route path{fill:none;stroke:rgba(165,65,44,.78);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ---------- simple footer: newsletter only ---------- */
.foot{display:flex !important;flex-direction:column;align-items:center;gap:0;margin-top:clamp(18px,3vh,34px)}
.nl{width:100%;max-width:460px;text-align:center}
.nl-title{display:block;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.nl-row{display:flex;align-items:stretch;border:1.5px solid var(--ink);background:rgba(248,243,232,.6)}
.nl-row input{flex:1;min-width:0;border:0;background:transparent;padding:14px 16px;font:400 17px var(--serif);color:var(--ink);outline:none}
.nl-row input::placeholder{color:rgba(42,36,32,.55);font-style:italic}
.nl-row button{flex:none;width:54px;border:0;background:var(--green);color:#f6f1e6;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nl-row button:hover{background:var(--green-d)}
.nl-row button:disabled{opacity:.6}
.nl-row button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nl-row:focus-within{box-shadow:0 0 0 3px rgba(46,125,74,.25)}
.nl-msg{min-height:1.4em;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:15px}
.nl.err .nl-msg{color:var(--red)}
.nl.done .nl-msg{color:var(--green)}
.foot .legal{margin-top:6px}
.songcard .sc-free{margin-top:12px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.songcard a.sc-listen{display:flex;text-decoration:none}
@media (max-width:900px){
  .nl{max-width:none;padding:0 4px}
  .nl-title{font-size:11px;letter-spacing:.18em;margin-bottom:12px}
  .nl-row input{font-size:16px;padding:13px 14px}
  .foot .legal{padding:0;font-size:9.5px}
}

/* ---------- map tacks + red string ---------- */
.mapframe .route path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mapframe .route path.shade{stroke:rgba(42,36,32,.3);stroke-width:2;transform:translate(1.6px,2.1px);filter:url(#th-soft)}
.mapframe .route path.thread{stroke:#d12b1f;stroke-width:1.8;filter:url(#th-fray)}
.mapframe .route path.twist{stroke:rgba(236,104,80,.85);stroke-width:.7;stroke-dasharray:3.5 2.5 1.5 2.5}
.mapframe .route path.twist2{stroke:rgba(110,22,14,.6);stroke-width:.6;stroke-dasharray:1.5 4;stroke-dashoffset:2.5}
.mk::before{width:44px;height:44px;border-radius:0;outline:0;background:url(/img/pin.png?v=3) center/contain no-repeat;box-shadow:none;transition:transform .15s}
.mk:hover::before,.mk[aria-expanded="true"]::before{transform:scale(1.18)}
.mk.y::before{background-image:url(/img/pin-y.png?v=1)}
.mk[aria-expanded="true"]::after{display:none}
.mk .tip{bottom:calc(100% + 6px)}
@media (max-width:900px){ .mk::before{width:34px;height:34px} }
/* overlay: string + pins in screen pixels, above the map, under the zoom buttons */
.mapframe .route{position:absolute;left:0;top:0;width:100%;height:100%;inset:0;pointer-events:none;overflow:visible;z-index:2}
.mapframe .pins{position:absolute;inset:0;pointer-events:none;z-index:3}
.mapframe .pins .mk{pointer-events:auto;width:40px;height:40px;transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* short desktop screens: everything must still fit in one view */
@media (min-width:901px) and (max-height:820px){
  .stage{min-height:150px}
  .top h1{font-size:clamp(26px,4.6vh,40px)}
  .banner img{height:clamp(80px,14vh,150px)}
  .foot{margin-top:clamp(8px,1.4vh,16px) !important}
}
/* desktop: one screen, no scrolling — the script sizes the photo strip and the map to the window */
@media (min-width:901px){
  .page{justify-content:center}
  .stage{flex:none;min-height:0}
  .banner{max-width:none;box-sizing:border-box}
  .banner img{object-position:50% 40%}
  .top h1{font-size:clamp(26px,4.4vh,42px)}
  .mapcap{margin-top:clamp(10px,1.8vh,18px)}
  .stage{margin-top:clamp(8px,1.4vh,14px)}
  .foot{margin-top:clamp(10px,1.8vh,18px) !important}
  .nl-title{margin-bottom:10px}
  .nl-row input{padding:10px 14px;font-size:16px}
  .nl-msg{min-height:1.2em;margin-top:4px;font-size:14px}
}
/* desktop: the card can be pulled down with the mouse — show the handle and a grab cursor */
@media (min-width:901px){
  .songcard{cursor:grab}
  .songcard.dragging{cursor:grabbing;user-select:none}
  .songcard .sc-head{min-height:26px}
  .songcard .grip{display:block;position:absolute;left:50%;top:4px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(74,61,52,.3)}
  .songcard button,.songcard a,.songcard video{cursor:pointer}
}
/* desktop: tighter top and bottom so the map gets the room */
@media (min-width:901px){
  .page{padding-top:clamp(8px,1.6vh,18px);padding-bottom:clamp(6px,1.2vh,14px)}
  .top .sub{margin-top:4px}
  .banner{margin-top:clamp(8px,1.6vh,16px)}
  .banner img{object-position:50% 56%}
  .nl-msg{min-height:1em;margin-top:2px}
}