/* Notice block (event-listing layout used on several pages). */
/* notice block (event-listing layout) */
.notice{max-width:760px;font-size:clamp(17px,1.5vw,20px);line-height:1.5}
/* lead: notice header is now an h2 (a11y); keep the mono label look */
.notice-h{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0;font-weight:400;line-height:inherit}
.notice-h::before,.notice-h::after{content:"▬▬▬▬";letter-spacing:-.04em;font-size:var(--fs-caption)}
.notice-line{margin-top:18px;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em;line-height:1.25}
.notice hr{border:0;border-top:2px solid var(--ink);margin:22px 0;width:220px}
.notice ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.notice li{padding-left:28px;position:relative}
.notice li::before{content:"✳";position:absolute;left:0;top:0}
.panel-blue .notice hr{border-color:var(--on-accent)}
@media (min-width:1024px){
  /* M-22: notice blocks use the full width on desktop: heading and line left, the list right */
  .wrap > .notice,.wrap > div > .notice{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
  .wrap > .notice > .notice-h,.wrap > div > .notice > .notice-h{grid-column:1;grid-row:1}
  .wrap > .notice > .notice-line,.wrap > div > .notice > .notice-line{grid-column:1;grid-row:2 / span 3}
  .wrap > .notice > hr:first-of-type,.wrap > div > .notice > hr:first-of-type{grid-column:2;grid-row:1;width:100%;margin-top:6px}
  .wrap > .notice > ul,.wrap > div > .notice > ul{grid-column:2;grid-row:2}
  .wrap > .notice > hr:last-of-type,.wrap > div > .notice > hr:last-of-type{grid-column:2;grid-row:3;width:100%}
}