@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=IBM+Plex+Mono:wght@400;500&family=Bricolage+Grotesque:wght@500;700&display=swap');
*{box-sizing:border-box}body{--bg:#211e1b;--fg:#efe7d9;--muted:#b0a79b;--accent:#d6a765;--card:#2b2722;--border:#50483f;--disc:#151515;--display:Fraunces,Georgia,serif;--shadow:0 32px 60px #0008;margin:0;background:radial-gradient(ellipse at 22% 38%,#39302a 0%,var(--bg) 55%);color:var(--fg);font-family:Newsreader,Georgia,serif;font-size:18px;min-height:100vh}body[data-concept=b]{--bg:#f1e9d6;--fg:#322923;--muted:#786b5d;--accent:#b74e2d;--card:#faf4e8;--border:#3a302a;--display:'Bricolage Grotesque',Arial,sans-serif;--shadow:10px 10px 0 #322923;background:var(--bg)}button{cursor:pointer;color:inherit;font:inherit}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header,main,footer{max-width:1300px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 36px}header .brand{display:flex;align-items:baseline;gap:16px}.brand strong{font:600 29px var(--display);white-space:nowrap}.brand span,nav,.eyebrow,.meta,footer,.save-row button,.spotify-label{font:11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.11em}.brand span{color:var(--muted)}nav{display:flex;align-items:center;flex-wrap:wrap;gap:7px}nav button{background:transparent;border:0;padding:8px 5px}nav button.selected{color:var(--accent)}nav button[data-concept-choice].selected{background:var(--accent);color:var(--bg)}.separator{height:18px;width:1px;background:var(--border);margin:0 9px}#shelf-btn{border:1px solid var(--border);padding:8px;margin-left:8px}main{padding:36px 36px 50px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:7%}.record-col{position:sticky;top:25px;align-self:start}.eyebrow{color:var(--accent);margin:0 0 23px}.record-wrap{position:relative;width:82%;aspect-ratio:1}.vinyl{position:absolute;inset:3%;border-radius:50%;transform:translateX(22%);background:radial-gradient(circle,var(--accent) 0 16%,var(--disc) 16.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#111 0 2px,#333 2.5px 3px);box-shadow:10px 15px 30px #0006;animation:spin 18s linear infinite}.sleeve{position:relative;width:100%;height:100%;background:var(--card);box-shadow:var(--shadow);overflow:hidden}.sleeve img{width:100%;height:100%;object-fit:cover}.placeholder{height:100%;padding:8%;display:flex;flex-direction:column;justify-content:space-between}.placeholder span{font:11px 'IBM Plex Mono',monospace;color:var(--accent)}.placeholder strong{font:600 clamp(23px,3vw,45px) var(--display)}h1{font:600 clamp(39px,4.6vw,70px)/1 var(--display);margin:35px 0 9px;letter-spacing:-.035em}.artist{font:italic 27px var(--display);color:var(--muted);margin:0}.meta{display:flex;gap:18px;color:var(--muted);margin:23px 0}.discovery{display:flex;flex-wrap:wrap;gap:9px}.discovery button{background:transparent;border:1px solid var(--border);border-radius:25px;padding:9px 16px;font:16px var(--display)}.discovery button:first-child{background:var(--accent);color:var(--bg);border-color:var(--accent)}.discovery button:hover{border-color:var(--accent);color:var(--accent)}.discovery button:first-child:hover{color:var(--bg);filter:brightness(1.1)}article{margin-top:42px;max-width:620px}article p{font-size:21px;line-height:1.55;margin:0 0 22px}article p:first-of-type{font:24px/1.45 var(--display)}article p:last-of-type{font:italic 21px/1.5 var(--display);color:var(--accent);border-top:1px solid var(--border);padding-top:23px;margin-top:28px}.fallback{font:12px 'IBM Plex Mono',monospace;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px;margin-bottom:20px}.save-row{margin:30px 0 24px}.save-row button{background:transparent;border:1px solid var(--border);padding:12px 16px}.save-row button:hover{border-color:var(--accent)}#spotify{max-width:620px}#spotify .spotify-card{border:1px solid var(--border);background:var(--card);padding:22px}#spotify .spotify-card p{font-size:15px;line-height:1.5;color:var(--muted)}#spotify button{background:var(--accent);color:var(--bg);border:0;padding:12px 18px;font:12px 'IBM Plex Mono',monospace;text-transform:uppercase}#spotify a{color:var(--accent)}#spotify iframe{border:0;border-radius:12px;width:100%;height:352px}footer{padding:0 36px 30px;color:var(--muted)}footer .wood{height:7px;background:linear-gradient(100deg,#583a2c,#815439 40%,#553426)}.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#000b;padding:18px}.hidden{display:none}.modal-panel{background:var(--card);border:1px solid var(--border);width:min(760px,100%);max-height:90vh;overflow:auto;padding:28px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font:32px var(--display);margin:0 0 20px}.modal-head button{background:none;border:0;font-size:25px}.modal-panel p{color:var(--muted)}.atlas{position:relative;aspect-ratio:2/1;border:1px solid var(--border);background:repeating-linear-gradient(0deg,transparent 0 29px,#ffffff12 30px),repeating-linear-gradient(90deg,transparent 0 29px,#ffffff12 30px),var(--bg)}.pin{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:3px solid var(--bg);background:var(--accent);box-shadow:0 0 0 4px #d6a76555}.pin:hover{scale:1.4}.saved-item{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--border);text-align:left;padding:14px 0}.saved-item:hover{color:var(--accent)}@keyframes spin{to{transform:translateX(22%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.vinyl{animation:none}}@media(max-width:850px){header{padding:20px;align-items:flex-start;flex-wrap:wrap}.brand span{display:none}main{grid-template-columns:1fr;gap:18px;padding:22px 20px}.record-col{position:static}.record-wrap{width:min(82%,420px)}.story-col{padding-top:10px}h1{font-size:46px}article{margin-top:25px}article p{font-size:19px}footer{padding:0 20px 20px}}@media(max-width:450px){.brand strong{font-size:26px}nav{font-size:10px}#concept-label{display:none}.record-wrap{width:84%}.discovery button{font-size:14px;padding:9px 12px}}

/* V0.7 — compact editorial tabs: listening first */
.editorial-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:30px;border-bottom:1px solid var(--border)}
.editorial-tabs button{font:12px 'IBM Plex Mono',monospace;letter-spacing:.035em;background:none;border:0;border-bottom:2px solid transparent;padding:12px 13px;color:var(--muted)}
.editorial-tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent)}
.editorial-content{min-height:240px;max-width:620px;padding-top:18px}
.editorial-content [hidden]{display:none!important}
.editorial-content article{margin-top:0;max-height:440px;overflow-y:auto;overscroll-behavior:contain;padding-right:12px;scrollbar-color:var(--accent) transparent}
.editorial-content article p{font-size:18px;line-height:1.6;margin-bottom:18px}
.editorial-content article p:first-of-type{font-size:21px;line-height:1.48}
.editorial-content article p:last-of-type{font-size:18px}
#spotify{max-width:none}.save-row{margin:18px 0 20px}
@media(max-width:850px){.editorial-tabs{margin-top:22px}.editorial-tabs button{font-size:11px;padding:11px 9px}.editorial-content article{max-height:360px}.editorial-content article p{font-size:17px}}

/* V0.8: restore actual geographical atlas */
.atlas{background:#131d21 url('./world-map.svg') center/100% 100% no-repeat;aspect-ratio:2/1;overflow:hidden;border-radius:12px}
.atlas .pin{z-index:1;width:18px;height:18px;border:2px solid #131d21;box-shadow:0 0 0 4px #d6a76555}
.atlas .pin:focus-visible{outline:3px solid #fff;outline-offset:4px}
.stream-note{font-size:13px;line-height:1.55;color:var(--muted);margin:12px 0}
.stream-note a{color:var(--accent)}

/* Editorial catalogue v0.9 */
.why-record{margin-top:18px;max-width:490px;color:#e4d5bf;font-size:15px;line-height:1.6}.why-record strong{display:block;color:#d7ad73;font-size:12px;letter-spacing:.06em;margin-bottom:6px}.why-record p{margin:0}.stream-note a{color:#e8c28a}.record-wrap{max-width:min(100%,460px)}

/* V0.9.1: compact first viewport and functional country atlas */
header{padding-top:15px;padding-bottom:12px}
main{padding-top:14px;gap:5%;grid-template-columns:minmax(0,48%) minmax(0,52%)}
.record-col{top:12px}
.eyebrow{margin-bottom:10px}
.record-wrap{width:min(76%,360px,43vh);max-width:none}
h1{font-size:clamp(31px,3vw,48px);line-height:1.08;margin:18px 0 6px}
.artist{font-size:23px}.meta{margin:10px 0;flex-wrap:wrap;gap:8px 16px}
.why-record{margin-top:9px;font-size:14px;line-height:1.4}
.discovery{gap:7px}.discovery button{font-size:14px;padding:8px 12px}
.editorial-tabs{margin-top:18px}.editorial-tabs button{font-size:13px}
.editorial-content{min-height:0;padding-top:10px}
.editorial-content article{max-height:min(39vh,310px);overflow-y:auto}
.editorial-content article p,.editorial-content article p:first-of-type,.editorial-content article p:last-of-type{font-size:17px;line-height:1.48}
#spotify iframe{height:310px}.save-row{margin:12px 0}
.atlas{aspect-ratio:2/1;overflow:hidden;background:#131d21;border-radius:10px}
.atlas svg{display:block;width:100%;height:100%}
.atlas svg .land{fill:#3e4745;stroke:#151d1d;stroke-width:.55;transition:fill .15s}
.atlas svg .available-country{fill:#d3a45e;cursor:pointer;stroke:#241d17;stroke-width:.8}
.atlas svg .available-country:hover,.atlas svg .available-country:focus{fill:#f5d597;outline:none;filter:brightness(1.15)}
.country-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.country-choice{border:1px solid var(--border);border-radius:20px;background:transparent;padding:7px 12px;font-size:14px}
.country-choice:hover{border-color:var(--accent);color:var(--accent)}
.map-loading{padding:18px;color:#f1dfc4}
@media(max-width:850px){main{grid-template-columns:1fr;gap:10px}.record-wrap{width:min(70vw,320px,38vh)}.record-col{position:static}h1{font-size:38px}.editorial-content article{max-height:300px}}

/* V1.0 — world-first atlas */
[hidden]{display:none!important}
body{background:#191713;color:#eee2cf}
header{max-width:1600px;position:relative;z-index:2}.brand span{color:#d6a765}
.map-home{max-width:1600px;margin:0 auto;padding:0 26px 42px;min-height:calc(100vh - 85px)}
.map-intro{text-align:center;margin:6px 0 0}.map-kicker{font:10px 'IBM Plex Mono',monospace;letter-spacing:.3em;color:#b78e59;margin:0 0 8px}.map-intro #map-slogan{font:600 clamp(24px,3.6vw,54px)/1.12 Georgia,serif;letter-spacing:.07em;color:#e5b66e;margin:0 0 12px}.map-intro h2{font:400 clamp(25px,3vw,43px) Georgia,serif;margin:0 0 6px}.map-intro p:last-child{color:#c5b4a0;margin:0 0 8px;font-size:18px}
.home-map{width:100%;position:relative;overflow:hidden;border-radius:10px;background:#171915;box-shadow:inset 0 0 80px #0008}.home-map svg{display:block;width:100%;height:auto;max-height:68vh}.home-map svg>rect{fill:#171915}.home-map svg .atlas-country{fill:var(--country-color)!important;stroke:#29231c;stroke-width:.5;opacity:.52;transition:opacity .2s,filter .2s}.home-map svg .has-records{opacity:1;cursor:pointer;stroke:#181b19;stroke-width:.8}.home-map svg .has-records:hover,.home-map svg .has-records:focus{opacity:1;filter:brightness(1.55) drop-shadow(0 0 2px #e3b26a);outline:none}.map-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #554633;padding:14px 12px}.map-bottom>div{font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#c6ad89}.legend-dot{display:inline-block;background:#d6a765;width:9px;height:9px;border-radius:50%;margin:0 10px}.map-surprise{border:0;border-radius:50px;background:#d6a765;color:#221b14;padding:13px 28px;font:600 17px Georgia,serif}.map-surprise:hover{background:#f0c78b}.map-country-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px 0}.map-country-list button{border:1px solid #514538;background:transparent;color:#cdbca5;border-radius:25px;padding:7px 12px;font-size:13px}.map-country-list button:hover{border-color:#d6a765;color:#f1d39f}.back-map{display:block;margin:-4px 0 14px;border:0;background:transparent;color:#d6a765;font:12px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-align:left;padding:5px 0}.back-map:hover{text-decoration:underline}.map-error{padding:100px 20px;text-align:center;color:#d6a765}
@media(max-width:850px){.map-home{padding:5px 10px 28px;min-height:0}.map-intro #map-slogan{font-size:clamp(20px,5vw,34px)}.map-intro h2{font-size:25px}.map-intro p:last-child{font-size:14px}.home-map{overflow-x:auto}.home-map svg{min-width:670px;max-height:none}.map-bottom{padding:14px 6px}.map-bottom>div{font-size:9px}.map-surprise{padding:11px 16px;font-size:14px}}

/* V1.0.1: editorial atlas layout and faithful map aspect ratio */
body:has(#map-home:not([hidden])){background:#1b1916}
body:has(#map-home:not([hidden])) header{max-width:1440px;padding:15px 30px}
.map-home{max-width:1440px;padding:0 30px 10px;min-height:0}
.map-intro{margin:0 0 10px}
.map-kicker{margin:0 0 3px}
.map-intro #map-slogan{font-size:clamp(22px,2.4vw,36px);letter-spacing:.11em;margin:0 0 5px}
.map-intro h2{font-size:clamp(22px,2.25vw,32px);margin:0 0 3px}
.map-intro p:last-child{font-size:16px;margin:0}
.home-map{width:min(100%,1100px);margin:0 auto;border:1px solid #514334;border-radius:3px;background:#191a17;box-shadow:0 15px 45px #0005;overflow:hidden;aspect-ratio:2/1}
.home-map svg{width:100%;height:100%;max-height:none;display:block;aspect-ratio:2/1;object-fit:contain}
.home-map svg>rect{fill:#191a17}
.home-map svg .atlas-country{opacity:.78;stroke:#332b22;stroke-width:.42;filter:saturate(.68);transition:fill .18s,opacity .18s,filter .18s}
.home-map svg .has-records{opacity:1;stroke:#dfb979;stroke-width:.55;cursor:pointer;filter:saturate(.9)}
.home-map svg .has-records:hover,.home-map svg .has-records:focus{fill:#f3cb83!important;opacity:1;filter:drop-shadow(0 0 3px #e6bd79);outline:none}
.map-bottom{max-width:1100px;margin:auto;padding:9px 4px}
.map-country-list{max-width:1100px;margin:auto;padding:4px 0 10px}
body:has(#map-home:not([hidden])) footer{max-width:1440px;padding:0 30px 10px}
body:has(#map-home:not([hidden])) footer p{margin:8px 0 0}
@media(min-width:900px) and (max-height:900px){.home-map{width:min(100%,970px)}.map-intro #map-slogan{font-size:clamp(22px,2.2vw,31px)}.map-intro h2{font-size:27px}.map-country-list{padding:2px 0 7px}.map-country-list button{padding:4px 9px;font-size:12px}}
@media(max-width:850px){.map-home{padding:0 12px 14px}.home-map{width:100%;aspect-ratio:2/1;overflow:hidden}.home-map svg{min-width:0;width:100%;height:100%}.map-intro #map-slogan{font-size:clamp(18px,4vw,29px)}.map-intro h2{font-size:24px}.map-intro p:last-child{font-size:14px}}

/* Mood Records · visual refinement: keep catalogue and editorial copy unchanged */
.discovery{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.discovery button,.discovery button:first-child{font-family:var(--display);font-size:15px;font-weight:500;line-height:1.3;background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:100px;padding:11px 19px;filter:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.discovery button:hover,.discovery button:first-child:hover,.discovery button:focus-visible{background:var(--accent);border-color:var(--accent);color:#211a12;filter:none}
.discovery button:active{transform:translateY(1px)}
.editorial-content{min-height:0;max-width:660px;padding-top:18px}
.editorial-content article,.editorial-content article#review,.editorial-content article#history{max-height:none;overflow:visible;overscroll-behavior:auto;padding-right:0;scrollbar-width:auto;margin-top:0}
.editorial-content article p,.editorial-content article p:first-of-type,.editorial-content article p:last-of-type{font-family:'DM Sans',Arial,sans-serif;font-style:normal;font-weight:400;font-size:16.5px;line-height:1.72;letter-spacing:0;color:var(--fg);border:0;padding:0;margin:0 0 18px;max-width:65ch}
.editorial-content article p:last-of-type{margin-top:0}
.why-record,.why-record p{font-family:'DM Sans',Arial,sans-serif;font-size:14px;line-height:1.65;font-weight:400}
.stream-note,.spotify-card p{font-family:'DM Sans',Arial,sans-serif}
@media(max-width:850px){.editorial-content article,.editorial-content article#review,.editorial-content article#history{max-height:none;overflow:visible}.editorial-content article p,.editorial-content article p:first-of-type,.editorial-content article p:last-of-type{font-size:16px;line-height:1.7}.discovery button,.discovery button:first-child{font-size:14px;padding:10px 15px}}
@media(prefers-reduced-motion:reduce){.discovery button{transition:none}}

/* V1.1 — typewriter typography trial: only recommendation buttons and reading copy */
.discovery button,.discovery button:first-child{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:400;
  letter-spacing:.035em;
  line-height:1.45;
  padding:10px 15px;
}
.editorial-content article p,
.editorial-content article p:first-of-type,
.editorial-content article p:last-of-type{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  font-weight:400;
  font-style:normal;
  line-height:1.75;
  letter-spacing:0;
  color:var(--fg);
  max-width:72ch;
}
@media(max-width:850px){
  .discovery button,.discovery button:first-child{font-size:12px;padding:9px 13px}
  .editorial-content article p,.editorial-content article p:first-of-type,.editorial-content article p:last-of-type{font-size:13px;line-height:1.7}
}