@font-face{
  font-family:"Oswald";
  src:url("assets/oswald.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("assets/literata.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("assets/work-sans.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
:root{
  --paper:#EDEFE1;
  --paper-2:#E2E5D2;
  --ink:#20263A;
  --ink-soft:#4A5268;
  --blue:#2436E8;
  --blue-ink:#1A27B0;
  --marigold:#FFA91A;
  --tomato:#E4572E;
  --sage:#5F7052;
  --line:#20263A;
  --card:#F7F8EC;
  --radius:14px;
  --font-display:"Oswald","Arial Narrow",sans-serif;
  --font-body:"Literata",Georgia,serif;
  --font-ui:"Work Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  background-image:radial-gradient(#20263a14 1px, transparent 1px);
  background-size:22px 22px;
}
::selection{background:var(--marigold); color:var(--ink)}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:99; font-family:var(--font-ui); text-decoration:none}
.skip:focus{top:12px}

/* top bar */
.topbar{border-bottom:2px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:30}
.topbar-inner{max-width:1180px; margin:0 auto; padding:.65rem 1.25rem; display:flex; align-items:center; gap:1rem}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
.brand-mark{background:var(--blue); color:#fff; font-family:var(--font-display); font-weight:700; letter-spacing:.02em; padding:.3rem .5rem; border-radius:8px; border:2px solid var(--line); box-shadow:3px 3px 0 var(--line); transform:rotate(-3deg)}
.brand-word{font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:.01em; line-height:1}
.brand-word em{font-family:var(--font-body); font-style:italic; font-weight:400; font-size:.85rem; color:var(--ink-soft); display:block; letter-spacing:0}
.brand-slash{color:var(--tomato)}
.topbar-date{margin:0 0 0 auto; font-family:var(--font-ui); font-size:.86rem; display:flex; align-items:center; gap:.5rem}
.topbar-date .dot{width:9px; height:9px; border-radius:50%; background:var(--tomato); display:inline-block; box-shadow:0 0 0 3px #e4572e33}
.topbar-city{color:var(--ink-soft)}
.topbar-saved{font-family:var(--font-ui); font-size:.86rem; font-weight:600; background:var(--ink); color:var(--paper); border-radius:999px; padding:.3rem .8rem; white-space:nowrap}

/* hero */
.hero{max-width:1180px; margin:0 auto; padding:2.6rem 1.25rem 1.5rem; display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:start}
.hero-kicker{font-family:var(--font-ui); font-size:.9rem; font-weight:600; margin:0 0 .8rem; background:var(--marigold); display:inline-block; padding:.25rem .7rem; border:2px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--line)}
.hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,5.4vw,4.4rem); line-height:.95; letter-spacing:-.01em; margin:0 0 1rem; text-wrap:balance}
.hero-sub{font-size:1.12rem; max-width:34rem; margin:0 0 1.4rem; color:#2c3350}
.hero-stats{display:flex; gap:0; margin:0; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); max-width:34rem}
.hero-stats div{flex:1; padding:.7rem .9rem; border-left:2px dashed var(--line)}
.hero-stats div:first-child{border-left:0}
.hero-stats dt{font-family:var(--font-ui); font-size:.74rem; font-weight:600; color:var(--ink-soft); margin:0}
.hero-stats dd{font-family:var(--font-display); font-size:1.7rem; line-height:1; margin:.15rem 0 0}
.hero-right{display:flex; flex-direction:column; gap:1rem}
.ticket-art{background:var(--blue); color:#fff; border:2px solid var(--line); border-radius:16px; box-shadow:6px 6px 0 var(--line); overflow:hidden; transform:rotate(1.2deg)}
.ticket-art-top{display:flex; justify-content:space-between; font-family:var(--font-ui); font-size:.8rem; font-weight:600; padding:.7rem 1rem; border-bottom:2px dashed #ffffff66}
.ticket-art-big{font-family:var(--font-display); font-weight:800; font-size:4.6rem; line-height:.88; padding:.8rem 1rem .2rem}
.ticket-art-perf{border-top:2px dashed #ffffff66; margin:.7rem 0 0; position:relative}
.ticket-art-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 1rem 1rem; font-family:var(--font-ui); font-size:.82rem}
.stamp{border:2px solid var(--marigold); color:var(--marigold); border-radius:8px; padding:.15rem .6rem; transform:rotate(-6deg); font-weight:700}
.hero-photo{margin:0; border:2px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:6px 6px 0 var(--line); transform:rotate(-1deg)}
.hero-photo img{display:block; width:100%; height:190px; object-fit:cover; filter:saturate(1.05) contrast(1.02)}
.hero-photo figcaption{font-family:var(--font-ui); font-size:.76rem; color:var(--ink-soft); padding:.45rem .8rem}

/* toolbar */
.toolbar-wrap{max-width:1180px; margin:0 auto; padding:.5rem 1.25rem 0}
.toolbar{background:var(--ink); color:var(--paper); border:2px solid var(--line); border-radius:16px; padding:1rem 1.1rem; display:grid; grid-template-columns:1.3fr .7fr 1fr auto; gap:1rem; align-items:end; box-shadow:6px 6px 0 var(--tomato)}
.field label,.field-label{font-family:var(--font-ui); font-size:.82rem; font-weight:700; display:block; margin-bottom:.4rem; color:#fff}
.search-box{position:relative}
.search-box svg{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#8b93ad; pointer-events:none}
.field input[type="search"],.field select{width:100%; font-family:var(--font-ui); font-size:.95rem; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:10px; padding:.6rem .7rem}
.field input[type="search"]{padding-left:2.3rem}
.day-seg{display:flex; background:#ffffff22; border-radius:10px; padding:3px; gap:3px}
.day-seg button{font-family:var(--font-ui); font-size:.84rem; font-weight:600; border:0; border-radius:8px; padding:.55rem .7rem; background:transparent; color:var(--paper); cursor:pointer; white-space:nowrap}
.day-seg button[aria-pressed="true"]{background:var(--marigold); color:var(--ink)}
#savedToggle{font-family:var(--font-ui); font-size:.88rem; font-weight:700; border:2px solid var(--paper); background:transparent; color:var(--paper); border-radius:999px; padding:.55rem 1rem; cursor:pointer; display:flex; gap:.45rem; align-items:center; white-space:nowrap}
#savedToggle .heart{color:var(--marigold); font-size:1rem}
#savedToggle[aria-pressed="true"]{background:var(--marigold); border-color:var(--marigold); color:var(--ink)}
#savedToggle[aria-pressed="true"] .heart{color:var(--ink)}
.result-line{font-family:var(--font-ui); font-size:.9rem; color:var(--ink-soft); display:flex; gap:.8rem; align-items:center; min-height:2rem; margin:.7rem .2rem 0}
.linklike{background:none; border:0; color:var(--blue-ink); text-decoration:underline; font:inherit; cursor:pointer; padding:0}

/* list */
#listRoot{max-width:1180px; margin:0 auto; padding:.6rem 1.25rem 1rem}
.day-block{margin-top:1.6rem}
.day-head{display:flex; align-items:baseline; gap:1rem; border-bottom:2px solid var(--line); padding-bottom:.4rem; margin-bottom:0}
.day-head h2{font-family:var(--font-display); font-size:2rem; margin:0; line-height:1}
.day-head h2 span{color:var(--blue)}
.day-head p{margin:0; font-family:var(--font-ui); font-size:.86rem; color:var(--ink-soft); margin-left:auto; text-align:right}
.program-list{list-style:none; margin:0; padding:0}
.program-row{display:grid; grid-template-columns:92px 112px 1fr auto; gap:1.1rem; align-items:center; padding:1.05rem .4rem; border-bottom:2px dashed #20263a55; background:transparent}
.program-row:hover{background:#ffffff70}
.time{font-family:var(--font-display); font-size:1.02rem; line-height:1.1}
.time small{display:block; font-family:var(--font-ui); font-size:.74rem; font-weight:600; color:var(--ink-soft)}
.thumb{width:112px; height:84px; border-radius:10px; border:2px solid var(--line); object-fit:cover; display:block; background:var(--paper-2)}
.row-main{min-width:0}
.chiprow{display:flex; gap:.45rem; align-items:center; margin-bottom:.3rem; flex-wrap:wrap}
.chip{font-family:var(--font-ui); font-size:.72rem; font-weight:700; border:1.5px solid var(--line); border-radius:999px; padding:.1rem .6rem; background:#fff}
.chip.price-free{background:var(--sage); color:#fff}
.chip.fmt{background:var(--paper-2)}
.saved-dot{font-family:var(--font-ui); font-size:.72rem; font-weight:700; color:var(--blue-ink)}
.row-title{font-family:var(--font-display); font-size:1.45rem; line-height:1.05; margin:0 0 .25rem}
.row-title button{background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; text-decoration-thickness:2px}
.row-title button:hover{text-decoration-color:var(--blue)}
.row-sum{margin:0; font-size:.98rem; color:#333a55; max-width:44rem}
.row-meta{font-family:var(--font-ui); font-size:.82rem; color:var(--ink-soft); margin-top:.3rem}
.row-actions{display:flex; flex-direction:column; gap:.5rem; align-items:stretch}
.btn-open{font-family:var(--font-ui); font-weight:700; font-size:.88rem; background:#fff; border:2px solid var(--line); border-radius:999px; padding:.55rem 1.1rem; cursor:pointer; box-shadow:3px 3px 0 var(--line); white-space:nowrap}
.btn-open:hover{background:var(--marigold)}
.btn-keep-mini{font-family:var(--font-ui); font-size:.8rem; font-weight:600; background:transparent; border:0; cursor:pointer; color:var(--ink-soft); text-decoration:underline; padding:.2rem}

/* empty */
.empty{max-width:1180px; margin:0 auto; padding:1rem 1.25rem 2rem}
.empty-card{border:2px dashed var(--line); border-radius:16px; background:var(--card); padding:2.2rem; text-align:left}
.empty-title{font-family:var(--font-display); font-size:1.8rem; margin:0 0 .4rem}
.empty-sub{margin:0 0 1.2rem; max-width:36rem}
.btn-primary{font-family:var(--font-ui); font-weight:700; background:var(--blue); color:#fff; border:2px solid var(--line); border-radius:999px; padding:.65rem 1.3rem; cursor:pointer; box-shadow:3px 3px 0 var(--line)}
.btn-primary:hover{background:var(--blue-ink)}

/* notes */
.notes{max-width:1180px; margin:0 auto; padding:1rem 1.25rem 2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.note{border:2px solid var(--line); border-radius:14px; background:var(--card); padding:1.1rem 1.2rem}
.note h2{font-family:var(--font-display); font-size:1.2rem; margin:0 0 .4rem}
.note p{margin:0; font-size:.95rem}

.footer{border-top:2px solid var(--line); background:var(--ink); color:var(--paper); padding:1.4rem 1.25rem 2rem}
.footer p{max-width:1180px; margin:0 auto; font-family:var(--font-ui); font-size:.86rem}
.footer-small{opacity:.75; margin-top:.4rem !important}

/* detail drawer */
.scrim{position:fixed; inset:0; background:#20263acc; z-index:50}
.scrim[hidden]{display:none}
#detailRoot:empty{display:none}
.drawer{position:fixed; top:0; right:0; height:100dvh; width:min(560px,100vw); background:var(--paper); border-left:3px solid var(--line); z-index:60; overflow:auto; box-shadow:-12px 0 40px #0006; animation:slidein .28s ease}
@keyframes slidein{from{transform:translateX(40px); opacity:0}to{transform:none; opacity:1}}
.drawer-head{position:sticky; top:0; background:var(--paper); border-bottom:2px solid var(--line); padding:.8rem 1.2rem; display:flex; gap:.8rem; align-items:center; z-index:2}
.btn-back{font-family:var(--font-ui); font-weight:700; font-size:.88rem; background:#fff; border:2px solid var(--line); border-radius:999px; padding:.5rem 1rem; cursor:pointer; box-shadow:2px 2px 0 var(--line)}
.btn-back:hover{background:var(--marigold)}
.drawer-head .dcat{margin-left:auto}
.drawer-hero{margin:0; border-bottom:2px solid var(--line)}
.drawer-hero img{width:100%; height:220px; object-fit:cover; display:block}
.drawer-hero figcaption{font-family:var(--font-ui); font-size:.75rem; color:var(--ink-soft); padding:.4rem 1.2rem}
.drawer-body{padding:1.3rem 1.4rem 2.5rem}
.drawer-body h2{font-family:var(--font-display); font-size:2.4rem; line-height:1; margin:.5rem 0 .6rem; text-wrap:balance}
.drawer-sub{font-size:1.08rem; color:#2c3350; margin:0 0 1rem}
.fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:1rem 0 1.2rem}
.fact{border:2px solid var(--line); border-radius:12px; background:var(--card); padding:.6rem .8rem}
.fact dt{font-family:var(--font-ui); font-size:.72rem; font-weight:700; color:var(--ink-soft); margin:0}
.fact dd{font-family:var(--font-ui); font-size:.94rem; font-weight:600; margin:.15rem 0 0}
.body-text{max-width:38rem}
.body-text p{margin:0 0 1rem}
.access{border-left:5px solid var(--sage); background:#5f705214; padding:.7rem .9rem; border-radius:0 10px 10px 0; font-size:.95rem}
.keep-row{display:flex; gap:.8rem; align-items:center; margin:1.2rem 0; flex-wrap:wrap}
.btn-keep{font-family:var(--font-ui); font-weight:700; font-size:.95rem; border:2px solid var(--line); border-radius:999px; padding:.7rem 1.3rem; cursor:pointer; background:var(--marigold); box-shadow:3px 3px 0 var(--line)}
.btn-keep[aria-pressed="true"]{background:var(--ink); color:#fff}
.keep-hint{font-family:var(--font-ui); font-size:.84rem; color:var(--ink-soft)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:1.4rem}
  .toolbar{grid-template-columns:1fr 1fr}
  .search-field{grid-column:1/-1}
  .saved-field{grid-column:1/-1}
  #savedToggle{width:100%; justify-content:center}
  .topbar-city{display:none}
  .program-row{grid-template-columns:64px 1fr; grid-template-areas:"time thumb" "main main" "actions actions"}
  .time{grid-area:time} .thumb{grid-area:thumb; width:100%; height:96px}
  .row-main{grid-area:main} .row-actions{grid-area:actions; flex-direction:row}
  .btn-open{flex:1} .btn-keep-mini{flex:0}
  .notes{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .toolbar{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap}
  .hero-stats div{flex:1 1 40%}
  .day-seg button{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}