/* tasmom.com — Tel Aviv Street Museum of Music. Built from Museum CMS. */
:root{
  --red:#CF2F1C;--yellow:#F3AE11;--blue:#2B5799;--pink:#FE5AA9;--black:#111111;--white:#FFFFFF;--grid:#141413;
  --bg:#FFFFFF;--fg:#141413;--muted:#5C574F;--soft:#F4F1EA;
  --head-h:64px;--foot-h:42px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1B1A18;--fg:#F2EFE8;--muted:#B5AE9F;--soft:#26241F;--white:#E9E6DE;--grid:#0B0B0A}}
:root[data-theme="dark"]{--bg:#1B1A18;--fg:#F2EFE8;--muted:#B5AE9F;--soft:#26241F;--white:#E9E6DE;--grid:#0B0B0A}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:'Rubik',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
button{font-family:inherit;color:inherit}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
h1,h2,h3{margin:0;text-wrap:balance}

.app{height:100dvh;display:flex;flex-direction:column}
/* header */
.head{flex:none;display:flex;align-items:center;gap:12px;padding:8px 16px 10px;border-bottom:6px solid var(--grid);min-height:var(--head-h)}
.head .logo{flex:none;display:flex;width:40px;height:40px}
.head .logo svg{width:40px;height:40px}
.head-t{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.head-t b{font-size:18px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head-t span{font-size:12.5px;color:var(--muted)}
.ln-link{text-decoration:underline;text-underline-offset:2px;font-weight:700;color:var(--fg)}
.bars{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:6px;flex:none}
.bars i{display:block;width:26px;height:4px;background:#fff;box-shadow:0 0 0 1.5px var(--grid)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.body{flex:1;min-height:0;display:flex;position:relative}
.foot{flex:none;display:flex;justify-content:space-between;gap:10px;padding:10px 16px;font-size:13px;border-top:6px solid var(--grid)}
.foot button{all:unset;cursor:pointer}
.foot b{font-weight:800}

/* columns: phone shows only main; desktop shows side | vis | main */
.side,.vis{display:none}
.main{flex:1;min-width:0;min-height:0;display:flex}

/* Mondrian grid */
.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:6px;background:var(--grid);padding:6px}
.tile{border:0;padding:6px;position:relative;cursor:pointer;display:block;text-decoration:none}
.tile:hover{filter:brightness(1.06)}
.tile[aria-hidden]{cursor:default}
.tile .tnum{position:absolute;bottom:6px;inset-inline-start:8px;font-size:11px;font-weight:700;opacity:.85;direction:ltr}
.tile .tttl{position:absolute;inset-inline:8px;bottom:7px;font-size:13px;font-weight:800;line-height:1.2;text-align:start;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:960px){.tile .tttl{font-size:18px;inset-inline:12px;bottom:10px}}
.tile[data-cur]{outline:6px solid #fff;outline-offset:-12px}

/* full-screen panel (card / pin card) */
.sheet{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:5}
.sheet-band{height:12px;flex:none}
.sheet-scroll{flex:1;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:12px;position:relative}
.meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.sheet h1,.sheet h2{font-size:24px;line-height:1.15;font-weight:800}
.sheet p{margin:0;font-size:16px;line-height:1.65;white-space:pre-wrap}
.cta{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 14px;border-top:2px solid var(--grid)}
.btn{all:unset;cursor:pointer;background:var(--grid);color:#fff;font-weight:800;font-size:14px;padding:10px 16px}
.btn-out{all:unset;cursor:pointer;align-self:flex-start;font-weight:800;font-size:13.5px;padding:7px 12px;border:2px solid var(--grid)}
.cta span{font-size:12px;color:var(--muted)}

.item{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:2px solid var(--grid);scroll-margin-top:12px}
.item:first-of-type{border-top:0;padding-top:0}
.item:target{background:var(--soft)}
.q{border-inline-start:4px solid var(--grid);padding-inline-start:10px;font-size:15px;font-weight:600;line-height:1.5}
.q small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.src{font-size:12px;color:var(--muted);line-height:1.5}
.src a{color:var(--muted)}
.fig{margin:0;display:flex;flex-direction:column;gap:6px}
.fig img{width:100%;border:3px solid var(--grid);display:block}
.fig figcaption{font-size:12px;color:var(--muted)}
.sheet .fig img{max-height:260px;object-fit:cover}
.vlink{display:block;border:3px solid var(--grid);padding:14px;font-size:14px;font-weight:600;text-decoration:none;background:var(--soft)}

/* 30s player */
.player{display:flex;align-items:center;gap:10px;border:2px solid var(--grid);padding:8px 10px;font-size:13.5px}
.player .pb{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--grid);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.player .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.player .pt b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .bar{height:4px;background:color-mix(in srgb,var(--muted) 35%,transparent);position:relative}
.player .bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--grid)}
.player a{font-size:12px;white-space:nowrap}
.player small{font-size:11.5px;color:var(--muted)}

.pl{display:flex;flex-direction:column;gap:6px;font-size:14px}
.pl>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid color-mix(in srgb,var(--muted) 30%,transparent);padding-bottom:5px}
.pl a{text-decoration:none}

/* map */
.bm-wrap{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;background:#E9EBE6}
.bm{display:block;width:100%;height:100%;cursor:grab}
.bm-zoom{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px}
.bm-zoom button{width:36px;height:36px;padding:0;border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.94);color:#141413;font-size:19px;font-weight:700;line-height:1;cursor:pointer}
.seg{display:flex;gap:6px}
.seg button{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:5px 12px;border:2px solid var(--grid)}
.seg button[aria-pressed="true"]{background:var(--grid);color:#fff}
.bm-info{position:absolute;inset-inline:10px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;border:2px solid var(--grid);padding:8px 10px;background:var(--bg)}
.bm-info small{display:block;font-size:12px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.legend a,.legend span{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%}
.home-list{display:flex;flex-direction:column;gap:14px}
.home-list h3{font-size:15px;display:flex;align-items:center;gap:8px}
.home-list h3 i{width:14px;height:14px;border-radius:50%;display:inline-block}
.home-list h3 a{font-size:12.5px;font-weight:700;margin-inline-start:auto}

/* metro line */
.ln-scroll{position:relative}
.ln-track{position:relative;display:flex;flex-direction:column;gap:2px;--col:100px;--s:54px;--sc:96px}
.ln-track.big{--col:180px;--s:90px;--sc:160px;gap:6px}
.ln-track::before{content:'';position:absolute;top:28px;bottom:28px;inset-inline-start:calc(var(--col)/2 - 7px);width:14px;background:var(--lc);box-shadow:0 0 0 2px var(--grid)}
.ln-st{display:grid;grid-template-columns:var(--col) minmax(0,1fr);align-items:center;gap:10px;position:relative;min-height:calc(var(--s) + 6px);text-decoration:none;color:inherit}
.ln-disc{display:flex;justify-content:center;align-items:center}
.ln-disc svg{width:var(--s);height:var(--s);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.ln-st[data-cur] .ln-disc svg{width:var(--sc);height:var(--sc);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.ln-st[data-uc] .ln-disc svg{filter:grayscale(.85) opacity(.55)}
.ln-t{min-width:0}
.ln-t b{display:block;font-size:14px;font-weight:800;line-height:1.2}
.ln-st[data-cur] .ln-t b{font-size:17px}
.ln-t small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.ln-t em{font-style:normal;font-size:11px;font-weight:800;background:var(--grid);color:#fff;padding:2px 7px;display:inline-block;margin-top:4px}
.ln-track.big .ln-t b{font-size:18px}.ln-track.big .ln-st[data-cur] .ln-t b{font-size:23px}
.ln-track.big .ln-t small{font-size:14px}
.ln-dir{font-size:11.5px;font-weight:800;color:var(--muted);width:var(--col,100px);text-align:center;padding:4px 0}
.ln-main{flex:1;overflow-y:auto;padding:20px 18px}
.ln-box{border:3px solid var(--grid);padding:12px 6px}
.sticker svg{width:100%;max-width:260px;height:auto;display:block;margin-inline:auto}
.empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted)}

/* menu */
.menu{position:absolute;inset:0;background:var(--bg);z-index:9;display:flex;flex-direction:column;padding:18px;gap:16px;overflow:auto}
.menu a{font-size:20px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:10px}
.menu a i{width:16px;height:16px;border-radius:50%;display:inline-block}
.menu small{font-size:13px;color:var(--muted);font-weight:500}

/* desktop: three columns */
@media (min-width:960px){
  .side{display:flex;flex:none;width:400px;min-height:0;border-inline-end:6px solid var(--grid)}
  .vis{display:flex;flex-direction:column;gap:16px;flex:none;width:340px;min-height:0;overflow-y:auto;padding:18px;border-inline-end:6px solid var(--grid);position:relative}
  .side .sheet{position:static;flex:1;min-height:0}
  .side .sheet .fig{display:none}
  .side [data-phone-only]{display:none}
  .body>.sheet{display:none}
  .head{padding:12px 22px 14px}
  .head .logo,.head .logo svg{width:46px;height:46px}
  .head-t b{font-size:24px}.head-t span{font-size:14px}
  .ln-main{padding:24px 36px}
  [data-desk-hide]{display:none!important}
}
@media (max-width:959px){.ln-track.big{--col:100px;--s:54px;--sc:96px}.ln-track.big .ln-t b{font-size:14px}.ln-track.big .ln-st[data-cur] .ln-t b{font-size:17px}.ln-track.big .ln-t small{font-size:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}