/* "Atlas" UI — ivory spec-sheet panels by day, ink panels by night. Explorer panel left, plot sheet right, squared control rail. */
:root{--accent:#5b3fd6;--r:14px;--rs:10px;--ease:cubic-bezier(.22,.8,.24,1);--pw:280px;--cw:272px;--g:16px;
  --panel:rgba(250,248,242,.94);--panel2:#f1eee6;--ink:#191d1a;--ink2:#3d433e;--mute:#7a7f78;--line:rgba(25,29,26,.11);--soft:rgba(25,29,26,.05);
  --shadow:0 1px 2px rgba(20,22,18,.08),0 12px 32px -8px rgba(20,22,18,.28);--stage:#2a2a25;--on:#1f9d6b}
body[data-time=night]{--panel:rgba(17,20,27,.9);--panel2:#1b1f29;--ink:#eef0f4;--ink2:#c3c8d2;--mute:#8b93a1;--line:rgba(255,255,255,.1);--soft:rgba(255,255,255,.05);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -8px rgba(0,0,0,.6);--stage:#07080b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--stage);color:var(--ink);font:15px/1.35 Manrope,system-ui,sans-serif;overflow:hidden;user-select:none;transition:background .6s}
[hidden]{display:none!important}
button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.surf{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:background .6s,border-color .6s,color .6s}
.num{font-family:Fraunces,Georgia,serif;font-variation-settings:"opsz" 144;font-weight:600;letter-spacing:-.02em}
h4{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ---- two panes: cross-fade with a slight zoom-through ---- */
.pane{position:absolute;inset:0;transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s linear .6s;opacity:0;visibility:hidden;transform:scale(1.035)}
body[data-view=lay] #lay,body[data-view=map] #map{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#lay{background:var(--stage);overflow:hidden;touch-action:none;cursor:grab}
#lay:active{cursor:grabbing}
#stage{position:absolute;left:0;top:0;transform-origin:0 0}
#stage.anim{transition:transform .5s cubic-bezier(.2,.75,.25,1)}
#stage img,#stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity .7s}
#lsvg{overflow:visible}
body:not([data-time=night]) #imgN,body[data-time=night] #imgD{opacity:0}
.lp{pointer-events:all;stroke:rgba(255,255,255,.85);stroke-width:calc(1px/var(--z,1));vector-effect:non-scaling-stroke;cursor:pointer;transition:opacity .35s,fill-opacity .25s,stroke-opacity .3s}
body:not(.hasSel) .lp:hover{fill-opacity:.75!important}
body.hasSel .lp:not(.sel){stroke-opacity:.25}
.lp.sel{stroke:#fff;stroke-width:calc(2.5px/var(--z,1));fill:var(--accent)!important;fill-opacity:.88!important}
.lp.dim{pointer-events:none;stroke-opacity:.08}
#lsvg.off .lp,#lsvg.off #dims{opacity:0;pointer-events:none}
/* dimension drawing (selected plot) */
#dims{pointer-events:none;transition:opacity .3s}
#dims line{stroke:#fff;vector-effect:non-scaling-stroke}
#dims .ext{stroke-width:calc(.8px/var(--z,1));opacity:.65}
#dims .dash{stroke-width:calc(1.3px/var(--z,1))}
#dims .tick{stroke-width:calc(1.6px/var(--z,1))}
#dims text{fill:#fff;font-family:Manrope,sans-serif;font-weight:700;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(10,12,20,.85);stroke-linejoin:round;font-size:var(--f);stroke-width:calc(var(--f)*.24)}
#dims .no{font-family:Fraunces,Georgia,serif;font-weight:600}
#dims .ar{font-weight:500}
#tip{position:absolute;z-index:4;pointer-events:none;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;white-space:nowrap;transform:translate(14px,16px);background:var(--ink);color:var(--panel2);box-shadow:var(--shadow)}
#tip b{font-family:Fraunces,serif;font-size:15px;margin-right:4px}
.dm{color:#fff;font:700 12px Manrope,sans-serif;text-align:center;white-space:nowrap;-webkit-text-stroke:.24em rgba(10,12,20,.85);paint-order:stroke fill;stroke-linejoin:round;pointer-events:none;line-height:1.15}
.dm.ct{display:flex;flex-direction:column;align-items:center;font-size:calc(var(--id,22px)*.45);line-height:1.2}.dm.ct b{font:600 var(--id,22px)/1 Fraunces,serif;margin-bottom:.1em}.dm.ct span{font-weight:500}
#map.nodims .dm{display:none}
.maplibregl-ctrl-attrib{background:rgba(0,0,0,.45)!important}.maplibregl-ctrl-attrib a{color:#ddd!important;font-size:10px}

/* ---- explorer panel (desktop: left column / mobile: bottom sheet) ---- */
#panel{position:absolute;z-index:5;left:var(--g);top:var(--g);max-height:calc(100% - var(--g)*2);width:var(--pw);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;transition:transform .55s var(--ease),opacity .4s,background .6s}
body.pc #panel{transform:translateX(calc(-100% - var(--g) - 8px));opacity:0;pointer-events:none}
.grab{display:none}
.head{display:flex;align-items:center;gap:10px;padding:12px 10px 10px 14px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.mono{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;font:600 14px/1 Fraunces,serif;letter-spacing:.02em}
.mono img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.brand .t{min-width:0}
.brand strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:600 15.5px/1.15 Fraunces,Georgia,serif;letter-spacing:-.01em;overflow:hidden}
.brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mute);font-size:11px;margin-top:2px}
.ib{width:30px;height:30px;border-radius:var(--rs);display:grid;place-items:center;color:var(--ink2);flex:none;transition:background .2s,color .2s}
.ib:hover{background:var(--soft);color:var(--ink)}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0 12px;padding:3px;border-radius:var(--rs);background:var(--soft);border:1px solid var(--line)}
.tabs i{position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:7px;background:var(--panel2);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .55s var(--ease)}
body[data-view=map] .tabs i{transform:translateX(100%)}
body[data-time=night] .tabs i{background:#2a3040}
.tabs button{position:relative;height:30px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13px;color:var(--mute);transition:color .3s}
body[data-view=lay] .tabs [data-v=lay],body[data-view=map] .tabs [data-v=map]{color:var(--ink)}
.field{position:relative;display:flex;align-items:center;gap:8px;margin:8px 12px 2px;height:34px;padding:0 10px;font-size:14px;border-radius:var(--rs);border:1px solid var(--line);background:var(--panel2);cursor:text;transition:border-color .2s}
.field:focus-within{border-color:var(--accent)}
.field svg{color:var(--mute)}
.field input{flex:1;min-width:0;width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-weight:500;user-select:text}
.field input::placeholder{color:var(--mute);font-weight:400}
.field kbd{font:600 11px Manrope;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
#qres{margin:6px 12px 0;display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow:auto}
#qres button{min-width:42px;height:30px;padding:0 10px;border-radius:7px;background:var(--soft);border:1px solid var(--line);font:600 14px Fraunces,serif}
#qres button:hover{border-color:var(--accent);color:var(--accent)}
#qres span{color:var(--mute);font-size:13px;padding:4px 2px}
.scroll{flex:1;min-height:0;overflow:auto;padding:2px 0 4px;scrollbar-width:thin}
.sec{padding:11px 14px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sechd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.sechd span{font-size:12px;color:var(--mute)}
.bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin-bottom:6px}
.bar i{display:block;min-width:3px;transition:flex .5s var(--ease)}
.st{display:grid;gap:2px}
.st button{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;height:29px;padding:0 8px;border-radius:7px;text-align:left;font-weight:500;font-size:13.5px;transition:background .2s}
.st button:hover{background:var(--soft)}
.st button.on{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.st button i{width:10px;height:10px;border-radius:3px}
.st button b{font:600 14px Fraunces,serif}
.st button.off{opacity:.45}
.grp{margin-bottom:9px}.grp:last-child{margin-bottom:0}
.grp h5{margin:0 0 5px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{height:27px;padding:0 9px;border-radius:7px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink2);transition:.2s}
.chip:hover{border-color:var(--mute)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--panel2)}
.reset{font-size:12px;font-weight:700;color:var(--accent)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;height:32px;cursor:pointer;font-weight:500;font-size:13.5px}
.row span{display:flex;align-items:center;gap:10px}
.row span svg{color:var(--mute)}
.row input{position:absolute;opacity:0;pointer-events:none}
.tg{position:relative;width:32px;height:18px;border-radius:9px;background:var(--line);transition:background .3s;flex:none}
body[data-time=night] .tg{background:rgba(255,255,255,.18)}
.tg:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .35s var(--ease)}
.row input:checked+.tg{background:var(--accent)}.row input:checked+.tg:after{transform:translateX(14px)}
.row input:focus-visible+.tg{outline:2px solid var(--accent);outline-offset:2px}
.row.dis{opacity:.4;pointer-events:none}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:50px;border-radius:8px;background:var(--soft);border:1px solid transparent;font-size:11px;font-weight:600;color:var(--ink2);transition:.2s}
.tile:hover{border-color:var(--line);background:var(--panel2);color:var(--ink)}
.tile svg.i{width:17px;height:17px}
.tile img{width:18px;height:18px}
body:not([data-time=night]) .tile img{filter:invert(1) brightness(.3)}
.foot{padding:10px 18px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--mute);display:flex;justify-content:space-between}
#pexpand{position:absolute;z-index:5;left:var(--g);top:var(--g);height:42px;padding:0 10px 0 5px;font-size:13.5px;border-radius:var(--r);display:flex;align-items:center;gap:10px;font-weight:700;opacity:0;pointer-events:none;transform:translateX(-12px);transition:.45s var(--ease)}
#pexpand .mono{width:30px;height:30px;font-size:13px;border-radius:8px}
body.pc #pexpand{opacity:1;pointer-events:auto;transform:none}

/* ---- top-right tools ---- */
.tools{position:absolute;z-index:6;right:var(--g);top:var(--g);display:flex;gap:4px;padding:4px;border-radius:var(--r)}
.dn{position:relative;display:grid;grid-template-columns:1fr 1fr;width:76px;height:36px;border-radius:var(--rs);background:var(--soft)}
.dn i{position:absolute;left:3px;top:3px;width:35px;height:30px;border-radius:7px;background:var(--panel2);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .5s var(--ease)}
body[data-time=night] .dn i{transform:translateX(35px);background:#2a3040}
.dn svg{position:relative;justify-self:center;align-self:center;color:var(--mute);transition:color .3s}
body:not([data-time=night]) .dn .s1,body[data-time=night] .dn .s2{color:var(--ink)}
.tools .sep{width:1px;background:var(--line);margin:6px 2px}

/* ---- control rail ---- */
.rail{position:absolute;z-index:4;right:var(--g);bottom:var(--g);display:flex;flex-direction:column;gap:8px;align-items:flex-end;transition:right .55s var(--ease),bottom .45s var(--ease)}
.rg{display:flex;flex-direction:column;border-radius:var(--rs);overflow:hidden}
.rg button{width:42px;height:42px;display:grid;place-items:center;color:var(--ink2);border-top:1px solid var(--line);transition:background .2s,color .2s;font-weight:700;font-size:12px;letter-spacing:.04em}
.rg button:first-child{border-top:0}
.rg button:hover{background:var(--soft);color:var(--ink)}
.rg button.on{background:var(--accent);color:#fff}
#compass{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;transition:opacity .3s,transform .3s var(--ease)}
#compass.off{opacity:0;transform:scale(.7);pointer-events:none}
#compass svg{width:34px;height:34px;transition:transform .1s}
body[data-view=lay] .m-only,body[data-view=map] .l-only{display:none!important}
#legend{position:absolute;z-index:4;left:var(--g);bottom:var(--g);transform:translateY(8px);display:flex;gap:14px;padding:9px 14px;border-radius:var(--rs);font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:.35s var(--ease)}
#legend.on{opacity:1;transform:none}
#legend div{display:flex;align-items:center;gap:7px}
#legend i{width:9px;height:9px;border-radius:3px}

/* ---- plot sheet ---- */
#card{position:absolute;z-index:6;right:var(--g);top:calc(var(--g) + 56px);width:var(--cw);border-radius:var(--r);overflow:hidden;animation:cin .5s var(--ease)}
@keyframes cin{from{opacity:0;transform:translateX(24px)}}
.ctop{display:flex;align-items:center;gap:10px;padding:10px 6px 10px 14px}
.pid{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0}
.pid h4{font-size:10px}
.pid h2{margin:0;font-size:30px;line-height:1;color:var(--ink)}
.cnav{display:flex;gap:0;flex:none}
.cnav .ib{width:28px;height:28px}.cnav svg.i{width:16px;height:16px}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;flex:none}
.tag i{width:6px;height:6px;border-radius:50%}
.spec{margin:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.spec div{padding:8px 14px;border-bottom:1px solid var(--line);min-width:0}
.spec div:nth-child(odd){border-right:1px solid var(--line)}
.spec div.w{grid-column:1/-1;border-right:0}
.spec dt{font-size:10.5px;color:var(--mute);font-weight:600;letter-spacing:.02em}
.spec dd{margin:1px 0 0;font-weight:600;font-size:13.5px}
.spec dd small{display:block;color:var(--mute);font-size:11px;font-weight:500;margin-top:1px}
.cta{display:flex;gap:6px;padding:10px 12px 10px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:8px;border:1px solid var(--line);font-weight:700;font-size:12.5px;transition:.2s}
.btn svg.i{width:15px;height:15px}
.btn:hover{background:var(--soft)}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.p:hover{filter:brightness(1.08);background:var(--accent)}
.acts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.acts button{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;font-size:12.5px;font-weight:600;color:var(--ink2);border-left:1px solid var(--line);transition:.2s}
.acts button:first-child{border-left:0}.acts button:hover{background:var(--soft);color:var(--ink)}
.acts svg.i{width:15px;height:15px}
.acts button.on{color:#e5484d}.acts button.on svg{fill:currentColor}
.cta+.acts{border-top:0}
.spec+.acts{border-top:0}
/* shortlist */
.sl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.sl span{display:flex;align-items:center;height:28px;border-radius:7px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.sl .num{padding:0 4px 0 10px;font-size:14px;height:100%}
.sl [data-x]{width:24px;height:100%;color:var(--mute);font-size:15px}.sl [data-x]:hover{color:#e5484d}
.btn.sm{width:100%;height:32px;font-size:12.5px}.btn.sm svg.i{width:15px;height:15px}
.note{padding:8px 14px 10px;font-size:10.5px;color:var(--mute);line-height:1.4}

/* ---- modal / viewer / toast / placer ---- */
#modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(10,12,16,.62);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
#mbox{position:relative;width:min(92vw,820px);max-height:86vh;overflow:auto;border-radius:18px;padding:28px;background:var(--panel2);color:var(--ink);box-shadow:var(--shadow)}
#mbox.gal{width:min(94vw,1080px);padding:0}
#mbox.about{width:min(94vw,720px);padding:0}
#mbox.about #mx{color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
/* about */
.ahero{height:200px;background:#333 center/cover;position:relative;border-radius:18px 18px 0 0}
.ahero:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 30%,rgba(8,10,14,.82))}
.ah{position:absolute;z-index:1;left:24px;right:24px;bottom:18px;display:flex;align-items:center;gap:12px;color:#fff}
.ah .mono{width:44px;height:44px;font-size:18px;border-radius:11px}
.ah strong{display:block;font:600 26px/1.1 Fraunces,serif}.ah small{display:block;font-size:13px;opacity:.8;margin-top:3px}
.abody{padding:20px 24px 24px}
.abody h4{margin:22px 0 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stats div{padding:12px 14px;border-left:1px solid var(--line)}.stats div:first-child{border-left:0}
.stats b{display:block;font-size:22px;line-height:1.1}.stats span{font-size:11.5px;color:var(--mute);font-weight:600}
.lede{margin:18px 0 0;line-height:1.6;font-size:15px;color:var(--ink2);max-width:600px}
.hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.hl li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;background:var(--soft);font-weight:600;font-size:13.5px}
.hl svg{color:var(--accent);width:16px;height:16px}
.nb{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:20px}
.nb li{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.nb li span{flex:1}.nb li b{font-weight:700;font-size:13px}.nb svg{color:var(--mute);width:15px;height:15px}
.acta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.acta .btn{flex:0 0 auto;padding:0 14px;height:38px}
/* gallery */
.ghd{display:flex;align-items:baseline;gap:10px;padding:22px 24px 12px}
.ghd strong{font:600 26px/1.1 Fraunces,serif}.ghd span{color:var(--mute);font-size:13px}
.gtabs{position:sticky;top:0;z-index:2;display:flex;gap:6px;overflow-x:auto;padding:10px 24px;background:var(--panel2);border-bottom:1px solid var(--line);scrollbar-width:none}
.gtabs button{flex:none;display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--ink2)}
.gtabs b{font-size:11px;color:var(--mute)}
.gtabs button.on{background:var(--ink);border-color:var(--ink);color:var(--panel2)}.gtabs button.on b{color:inherit;opacity:.65}
.gsec{padding:16px 24px 8px}.gsec:last-child{padding-bottom:24px}
.gsh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.gsh h3{margin:0;font:600 19px Fraunces,serif}.gsh span{color:var(--mute);font-size:12.5px;flex:1}
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:150px;gap:8px;grid-auto-flow:dense}
.mosaic.f{grid-template-columns:repeat(4,1fr);grid-auto-rows:120px}
.mosaic button{position:relative;border-radius:10px;overflow:hidden;background:var(--soft);cursor:zoom-in}
.mosaic.f button:first-child{grid-column:span 2;grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.mosaic button:hover img{transform:scale(1.04)}
.mosaic em{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;font-style:normal;font-size:12px;font-weight:600;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.mosaic .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,12,16,.55);color:#fff;font:600 22px Fraunces,serif}
@media(max-width:640px){.mosaic,.mosaic.f{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px}.ghd,.gsec{padding-left:16px;padding-right:16px}.gtabs{padding:10px 16px}.ahero{height:160px}.abody{padding:16px}#vimg{padding:8px}}
#mx{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:var(--rs);display:grid;place-items:center;z-index:3}
#vx{width:40px;height:40px;border-radius:var(--rs);display:grid;place-items:center;flex:none}
#mx:hover{background:var(--soft)}
#vx{color:#fff;background:rgba(255,255,255,.1)}
.mhd{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mhd strong{font:600 26px/1.1 Fraunces,serif}
.masonry{columns:2;gap:10px}@media(min-width:760px){.masonry{columns:3}}
.masonry img{width:100%;margin-bottom:10px;border-radius:10px;cursor:zoom-in;display:block}
.soc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.soc a{width:42px;height:42px;border-radius:var(--rs);display:grid;place-items:center;border:1px solid var(--line)}
.soc a:hover{border-color:var(--accent);color:var(--accent)}
.rel{display:flex;gap:14px;flex-wrap:wrap}.rel a{width:160px;font-weight:600;font-size:14px}
.rel img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;margin-bottom:8px}
#viewer{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:#08090c;color:#fff;animation:fade .25s}
#vimg{flex:1;min-height:0;width:100%;object-fit:contain;padding:8px 64px}
.vbar{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 20px;flex:none}
#vcap{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
#vcap b{font:600 20px Fraunces,serif}#vcap span{color:rgba(255,255,255,.65);font-size:14px;overflow:hidden;text-overflow:ellipsis}
#vthumbs{display:flex;gap:6px;justify-content:safe center;overflow-x:auto;padding:10px 16px 14px;flex:none;scrollbar-width:none}
#vthumbs:empty{display:none}
#vthumbs button{width:64px;height:46px;border-radius:7px;overflow:hidden;opacity:.45;flex:none;outline:2px solid transparent;outline-offset:1px;transition:.2s}
#vthumbs button.on{opacity:1;outline-color:#fff}#vthumbs img{width:100%;height:100%;object-fit:cover;display:block}
#viewer .nav{position:absolute;top:50%;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);font-size:24px;transform:translateY(-50%);color:#fff}
#vcount{font-size:13px;font-weight:600;opacity:.7}
#toast{position:absolute;z-index:40;left:50%;top:calc(var(--g) + 10px);transform:translateX(-50%);padding:10px 16px;border-radius:var(--rs);background:var(--ink);color:var(--panel2);font-weight:600;font-size:14px;box-shadow:var(--shadow);animation:tin .35s var(--ease)}
@keyframes tin{from{opacity:0;transform:translate(-50%,-8px)}}
#placer{position:absolute;z-index:7;right:var(--g);top:calc(var(--g) + 62px);width:min(320px,calc(100vw - 32px));border-radius:var(--r);padding:16px;display:grid;gap:10px}
#placer label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
#placer input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 9px;font:inherit;user-select:text}
#placer p{margin:0;font-size:13px;color:var(--mute)}

/* ---- desktop: keep the map attribution clear of the panel ---- */
@media(min-width:901px){
  #panel{max-height:calc(100% - var(--g)*2 - 36px)}
  #legend{bottom:calc(var(--g) + 28px)}
  #card{max-height:calc(100% - var(--g)*3 - 56px - var(--rh,140px));overflow:auto;scrollbar-width:thin}
  body:not(.pc) #legend{display:none}
}
/* ---- phones / small tablets: panel becomes a bottom sheet ---- */
@media(max-width:900px){
  :root{--g:12px}
  #panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:76vh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(calc(100% - var(--peek,142px) - env(safe-area-inset-bottom)))}
  #panel.open{transform:none}
  body.hasSel #panel{transform:translateY(105%)}
  body.pc #panel{transform:translateY(calc(100% - var(--peek,142px) - env(safe-area-inset-bottom)));opacity:1;pointer-events:auto}
  .grab{display:grid;place-items:center;height:20px;width:100%;flex:none}
  .grab i{width:38px;height:4px;border-radius:2px;background:var(--line)}
  body[data-time=night] .grab i{background:rgba(255,255,255,.22)}
  .head{display:none}
  .tabs{margin-top:0}
  .scroll{padding-top:6px}
  #pexpand{display:none}
  #mbrand{display:flex!important}
  .tools{top:max(var(--g),env(safe-area-inset-top))}
  .rail{bottom:calc(var(--peek,142px) + var(--g) + env(safe-area-inset-bottom))}
  body.hasSel .rail{bottom:calc(var(--ch,300px) + var(--g))}
  #legend{left:var(--g);transform:translateY(8px);top:calc(max(var(--g),env(safe-area-inset-top)) + 58px);bottom:auto;flex-direction:column;gap:7px;padding:10px 12px}
  #legend.on{transform:none}
  #card{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);max-height:72vh;overflow:auto;animation:cup .5s var(--ease)}
  @keyframes cup{from{transform:translateY(40px);opacity:0}}
  .ctop{padding:8px 6px 8px 16px}
  .spec div{padding:7px 16px}
  .note{display:none}
  #placer{top:auto;bottom:calc(var(--peek,142px) + 12px);right:12px}
}
#mbrand{position:absolute;z-index:6;left:var(--g);top:max(var(--g),env(safe-area-inset-top));height:46px;padding:0 14px 0 4px;border-radius:var(--r);display:none;align-items:center;gap:10px;max-width:calc(100vw - 210px)}
#mbrand .mono{width:36px;height:36px;font-size:15px;border-radius:9px}
#mbrand strong{font:600 16px/1.1 Fraunces,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01s!important;animation-duration:.01s!important}}

/* project logo (replaces the monogram when project.json "logo" is set) — a fixed-height box so the image is never taller than its slot */
.mono.logo{display:flex;align-items:center;justify-content:center;width:auto;height:40px;max-width:64px;background:none;border-radius:0;overflow:hidden}
.mono.logo img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:0}
.head .mono.logo{margin-right:2px}
#pexpand .mono.logo{width:auto;height:28px}
#mbrand .mono.logo{width:auto;height:34px}
body[data-time=night] .brand .mono.logo,body[data-time=night] #pexpand .mono.logo,body[data-time=night] #mbrand .mono.logo{background:#fff;border-radius:9px;padding:3px}
.ah .mono.logo{background:#fff;border-radius:11px;padding:5px;height:48px;max-width:80px}