/* ==========================================================================
   Zagreb Up To You — design system
   Palette: Gornji Grad rooftop terracotta, tram navy, warm limestone.
   ========================================================================== */
:root{
  --ink:#16233f;
  --ink-2:#2c3c60;
  --body:#3d4658;
  --muted:#6b7488;
  --line:#e4ded4;
  --line-2:#d3cabb;
  --paper:#ffffff;
  --cream:#faf6f0;
  --cream-2:#f3ece2;
  --brick:#c0492f;
  --brick-dk:#9d3823;
  --brick-soft:#f7e8e3;
  --gold:#c08a2e;
  --green:#2f6b4f;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(22,35,63,.06), 0 8px 28px rgba(22,35,63,.07);
  --shadow-lg:0 2px 4px rgba(22,35,63,.06), 0 18px 48px rgba(22,35,63,.12);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;

  --wrap:1160px;
  --narrow:760px;
  --pad:clamp(16px, 4vw, 32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brick-dk); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--brick)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:3px}

h1,h2,h3{font-family:var(--serif); color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); letter-spacing:-.015em}
h2{font-size:clamp(1.55rem, 1.1rem + 1.9vw, 2.25rem); letter-spacing:-.01em}
h3{font-size:clamp(1.12rem, 1rem + .5vw, 1.3rem); font-family:var(--sans); font-weight:600; letter-spacing:-.005em}
.h2--sm{font-size:1.3rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--narrow)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:100}
.skip:focus{left:8px; top:8px}

.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--brick); margin:0 0 .9em}
.lede{font-size:clamp(1.06rem,1rem + .35vw,1.22rem); color:var(--ink-2); line-height:1.6}
.lede--center{max-width:62ch; margin-inline:auto; text-align:center}
.fineprint{font-size:.85rem; color:var(--muted); line-height:1.55}

/* --- header --------------------------------------------------------------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
     backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.hdr__inner{display:flex; align-items:center; gap:20px; min-height:70px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.logo__mark{color:var(--brick); display:flex}
.logo__text{font-family:var(--serif); font-size:1.14rem; font-weight:600; white-space:nowrap}
.logo__text b{font-weight:700}

.nav{margin-left:auto}
.nav__list{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav__list > li > a{
  display:block; padding:9px 12px; border-radius:var(--radius-sm); text-decoration:none;
  color:var(--ink-2); font-size:.94rem; font-weight:500; white-space:nowrap;
}
.nav__list > li > a:hover{background:var(--cream-2); color:var(--ink)}
.nav__list > li > a[aria-current]{color:var(--brick-dk); background:var(--brick-soft)}
.caret{font-size:.6em; margin-left:5px; opacity:.6}
.nav__lang a{border:1px solid var(--line-2); margin-left:6px}

.has-sub{position:relative}
.sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px; list-style:none;
  margin:0; padding:8px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.sub a{display:block; padding:9px 12px; border-radius:8px; text-decoration:none;
       color:var(--body); font-size:.92rem}
.sub a:hover{background:var(--cream-2); color:var(--ink)}
.sub a[aria-current]{color:var(--brick-dk); font-weight:600}

.burger{display:none; margin-left:auto; width:44px; height:44px; background:none;
        border:1px solid var(--line-2); border-radius:var(--radius-sm); cursor:pointer;
        flex-direction:column; gap:5px; align-items:center; justify-content:center}
.burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:flex}
  .nav{position:fixed; inset:70px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--line);
       max-height:calc(100dvh - 70px); overflow-y:auto; padding:12px var(--pad) 28px;
       display:none; box-shadow:var(--shadow-lg)}
  .nav.open{display:block}
  .nav__list{flex-direction:column; align-items:stretch; gap:2px}
  .nav__list > li > a{padding:12px; font-size:1rem}
  .sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
       border:none; border-left:2px solid var(--line); border-radius:0; margin:2px 0 8px 12px; padding:0 0 0 8px}
  .nav__lang a{display:inline-block; margin:10px 0 0}
  .caret{display:none}
}

/* --- breadcrumbs ---------------------------------------------------------- */
.crumbs{background:var(--cream); border-bottom:1px solid var(--line)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:11px 0;
           font-size:.83rem; color:var(--muted)}
.crumbs li+li::before{content:"/"; margin-right:8px; opacity:.5}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brick-dk); text-decoration:underline}

/* --- hero ----------------------------------------------------------------- */
.hero{background:linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%);
      border-bottom:1px solid var(--line); padding:clamp(40px,7vw,86px) 0}
.hero--compact{padding:clamp(32px,4.5vw,54px) 0}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero__text h1{margin-bottom:.35em}
.hero__note{margin-top:1.2em; font-size:.88rem; color:var(--muted)}
.hero:only-child .hero__grid, .hero__grid:has(.hero__text:only-child){grid-template-columns:1fr; max-width:var(--narrow)}
@media (max-width:860px){ .hero__grid{grid-template-columns:1fr} .hero__art{order:-1} }

/* --- buttons -------------------------------------------------------------- */
.actions{display:flex; flex-wrap:wrap; gap:12px; margin:1.6em 0 0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     padding:13px 24px; border-radius:var(--radius-sm); font-size:.96rem; font-weight:600;
     text-decoration:none; border:1.5px solid transparent; cursor:pointer;
     transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn--primary{background:var(--brick); color:#fff; box-shadow:0 2px 10px rgba(192,73,47,.28)}
.btn--primary:hover{background:var(--brick-dk); color:#fff; transform:translateY(-1px);
                    box-shadow:0 5px 18px rgba(192,73,47,.34)}
.btn--ghost{background:var(--paper); color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}

/* --- blocks --------------------------------------------------------------- */
.block{padding:clamp(40px,6vw,74px) 0}
.block--tint{background:var(--cream); border-block:1px solid var(--line)}
.block--tint + .block--tint{border-top:none}
.block ul,.block ol{margin:0 0 1.2em; padding-left:1.35em}
.block li{margin-bottom:.45em}
.block li::marker{color:var(--brick)}

.checklist{list-style:none; padding-left:0}
.checklist li{position:relative; padding-left:30px; margin-bottom:.6em}
.checklist li::before{content:""; position:absolute; left:0; top:.42em; width:16px; height:9px;
  border-left:2.5px solid var(--green); border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg); border-radius:1px}

blockquote{margin:1.6em 0; padding:2px 0 2px 22px; border-left:3px solid var(--brick);
           font-family:var(--serif); font-size:1.15rem; color:var(--ink-2); font-style:italic}
blockquote cite{display:block; margin-top:.6em; font-family:var(--sans); font-size:.85rem;
                font-style:normal; color:var(--muted)}

/* --- cards ---------------------------------------------------------------- */
.cards{display:grid; gap:20px; margin-top:2.2em}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--5{grid-template-columns:repeat(5,1fr)}
.cards--5 .card{padding:18px}
.cards--5 .card h3{font-size:1rem}
@media (max-width:1100px){ .cards--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .cards--3,.cards--4,.cards--5{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards{grid-template-columns:1fr !important} }

.card{display:flex; flex-direction:column; padding:24px; background:var(--paper);
      border:1px solid var(--line); border-radius:var(--radius); text-decoration:none;
      color:inherit; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
a.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.card h3{margin-bottom:.4em}
.card p{font-size:.94rem; margin-bottom:.8em}
.card__icon{font-size:1.6rem; line-height:1; margin-bottom:14px}
.card__meta{font-size:.84rem !important; color:var(--brick-dk); font-weight:600}
.card__go{margin-top:auto; padding-top:8px; font-size:.88rem; font-weight:600; color:var(--brick-dk)}
a.card:hover .card__go span{transform:translateX(3px)}
.card__go span{display:inline-block; transition:transform .15s ease}

/* --- steps ---------------------------------------------------------------- */
.steps{list-style:none; counter-reset:s; padding:0; margin:2em 0 0}
.step{counter-increment:s; position:relative; padding:0 0 30px 58px; margin:0}
.step::before{content:counter(s); position:absolute; left:0; top:0; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; background:var(--brick); color:#fff;
  font-weight:700; font-size:.98rem; font-variant-numeric:tabular-nums}
.step::after{content:""; position:absolute; left:18.5px; top:44px; bottom:6px; width:1.5px; background:var(--line-2)}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
.step h3{margin-bottom:.35em; padding-top:6px}

/* --- tables --------------------------------------------------------------- */
.tablewrap{overflow-x:auto; margin:2em 0 1em; border:1px solid var(--line); border-radius:var(--radius)}
.facts{width:100%; border-collapse:collapse; font-size:.94rem; min-width:460px; background:var(--paper)}
.facts th,.facts td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.facts thead th{background:var(--cream-2); font-family:var(--sans); font-weight:600; color:var(--ink);
                font-size:.82rem; letter-spacing:.04em; text-transform:uppercase}
.facts tbody th{font-weight:600; color:var(--ink)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:none}
.facts tbody tr:hover{background:var(--cream)}

/* --- callout -------------------------------------------------------------- */
.callout{margin:2em 0; padding:22px 26px; border-radius:var(--radius);
         border-left:4px solid var(--gold); background:#fdf8ec}
.callout h3{margin-bottom:.4em; font-size:1.02rem}
.callout p{font-size:.95rem}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-left-color:var(--brick); background:var(--brick-soft)}
.callout--tip{border-left-color:var(--green); background:#eef5f1}

/* --- faq ------------------------------------------------------------------ */
.faq{margin-top:2em; border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__item summary{padding:18px 40px 18px 0; cursor:pointer; list-style:none; position:relative;
  font-weight:600; color:var(--ink); font-size:1.02rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; position:absolute; right:6px; top:15px; font-size:1.5rem;
  font-weight:400; color:var(--brick); transition:transform .2s ease; line-height:1}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--brick-dk)}
.faq__a{padding:0 0 20px; font-size:.96rem}

/* --- cta ------------------------------------------------------------------ */
.cta{background:var(--ink); color:#dbe2ee; padding:clamp(44px,6vw,76px) 0}
.cta__inner{text-align:center}
.cta h2{color:#fff}
.cta p{max-width:58ch; margin-inline:auto; color:#b9c4d6}
.cta .actions{justify-content:center}
.cta .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}

/* --- forms ---------------------------------------------------------------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2em}
.field{display:flex; flex-direction:column; gap:7px}
.field--wide{grid-column:1/-1}
@media (max-width:620px){ .form{grid-template-columns:1fr} }
.field label{font-size:.88rem; font-weight:600; color:var(--ink)}
.req{color:var(--brick)}
.field input,.field textarea,.field select{
  font:inherit; font-size:.96rem; padding:12px 14px; border:1.5px solid var(--line-2);
  border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); width:100%}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brick); outline:none; box-shadow:0 0 0 3px var(--brick-soft)}
.form__submit{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important}

/* --- related -------------------------------------------------------------- */
.related{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:1.4em 0 0}
.related a{display:inline-block; padding:9px 16px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:100px; font-size:.9rem; text-decoration:none; color:var(--ink-2)}
.related a:hover{border-color:var(--brick); color:var(--brick-dk); background:var(--brick-soft)}

/* --- figures -------------------------------------------------------------- */
.fig{margin:0}
.fig img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%}
.fig figcaption{margin-top:10px; font-size:.83rem; color:var(--muted); text-align:center}
.block .fig{margin:2em 0}

/* --- footer --------------------------------------------------------------- */
.ftr{background:var(--cream); border-top:1px solid var(--line); padding:clamp(40px,5vw,60px) 0 0;
     margin-top:0; font-size:.93rem}
.ftr__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; padding-bottom:36px}
@media (max-width:760px){ .ftr__grid{grid-template-columns:1fr; gap:26px} }
.ftr__logo{font-family:var(--serif); font-size:1.14rem; color:var(--ink); margin-bottom:.5em}
.ftr__about{color:var(--muted); max-width:42ch; font-size:.9rem}
.ftr__h{font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.09em;
        text-transform:uppercase; color:var(--ink); margin:0 0 1em}
.ftr__list{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr__list a{color:var(--body); text-decoration:none; font-size:.91rem}
.ftr__list a:hover{color:var(--brick-dk); text-decoration:underline}
.ftr__bottom{border-top:1px solid var(--line-2); padding-block:22px 30px; display:grid; gap:10px}
.ftr__bottom p{margin:0; font-size:.85rem; color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media print{
  .hdr,.ftr,.cta,.crumbs,.burger{display:none}
  body{font-size:11pt}
}

/* ==========================================================================
   Events listing (афиша)
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

.block--events{padding-top:clamp(24px,3vw,36px)}

/* --- filter bar ----------------------------------------------------------- */
.filters{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
         padding:18px 20px;margin-bottom:28px;display:grid;gap:14px;
         position:sticky;top:70px;z-index:20;
         box-shadow:0 6px 18px -14px rgba(22,35,63,.4)}
@media (max-width:1040px){ .filters{position:static} }

.filters__search input{width:100%;font:inherit;font-size:1rem;padding:12px 16px;
  border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.filters__search input:focus{border-color:var(--brick);outline:none;box-shadow:0 0 0 3px var(--brick-soft)}

.filters__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filters__row--last{justify-content:space-between}
.filters__label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
                color:var(--muted);flex:0 0 auto;min-width:58px}
.chips{display:flex;flex-wrap:wrap;gap:7px}

.chip{font:inherit;font-size:.88rem;font-weight:500;padding:7px 14px;cursor:pointer;
      background:var(--paper);color:var(--ink-2);border:1.5px solid var(--line-2);
      border-radius:100px;transition:.14s ease;white-space:nowrap}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips[data-group="flags"] .chip.is-on{background:var(--brick);border-color:var(--brick)}

.filters__venue select{font:inherit;font-size:.88rem;padding:7px 12px;border:1.5px solid var(--line-2);
  border-radius:100px;background:var(--paper);color:var(--ink-2);max-width:230px}
.filters__reset{font:inherit;font-size:.85rem;background:none;border:none;cursor:pointer;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px}
.filters__reset:hover{color:var(--brick-dk)}

/* --- results -------------------------------------------------------------- */
.ev__count{font-size:.88rem;color:var(--muted);margin:0 0 18px;font-variant-numeric:tabular-nums}
.ev__empty{padding:36px 20px;text-align:center;color:var(--muted);background:var(--cream);
           border-radius:var(--radius);border:1px dashed var(--line-2)}
.ev__src{margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}

.ev__day{margin-bottom:34px}
.ev__dayhead{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brick-dk);margin:0 0 14px;padding-bottom:9px;
  border-bottom:2px solid var(--brick-soft)}

.ev{display:grid;grid-template-columns:58px 132px 1fr;gap:18px;align-items:start;
    padding:16px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--paper);margin-bottom:10px;transition:.14s ease}
.ev:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.ev:has(.ev__img:not(:first-child)){}
.ev:not(:has(.ev__img)){grid-template-columns:58px 1fr}

.ev__when{text-align:center;padding-top:2px;line-height:1.1}
.ev__when b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink);font-weight:700}
.ev__when span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:2px}

.ev__img{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--cream-2)}
.ev__img img{width:100%;height:88px;object-fit:cover;display:block}

.ev__body h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin:0 0 6px;line-height:1.35}
.ev__body h3 a{color:var(--ink);text-decoration:none}
.ev__body h3 a:hover{color:var(--brick-dk);text-decoration:underline}
.ev__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.87rem;color:var(--muted);margin:0 0 9px}
.ev__time{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ev__run{font-style:italic}
.ev__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}

.tag{display:inline-block;font-size:.73rem;font-weight:600;letter-spacing:.02em;
     padding:3px 9px;border-radius:4px;background:var(--cream-2);color:var(--ink-2)}
.tag--music{background:#e8eaf4;color:#3a4576}
.tag--theatre{background:#f3e7f0;color:#7a3a66}
.tag--exhibit{background:#e7f0ea;color:#2f6b4f}
.tag--sport{background:#e6f0f4;color:#2c5d75}
.tag--fair{background:#f6ecdf;color:#845b1d}
.tag--culture{background:#f4ece4;color:#7a5334}
.tag--kids{background:var(--brick-soft);color:var(--brick-dk)}
.tag--free{background:#e4f2e6;color:#2a6b38}

@media (max-width:760px){
  .ev{grid-template-columns:52px 1fr;gap:14px;padding:14px}
  .ev__img{display:none}
  .filters{padding:14px}
  .filters__label{display:none}
  .filters__row--last{gap:10px}
  .filters__venue select{max-width:100%;width:100%}
}

/* --- kids section cards --------------------------------------------------- */
.linkout{font-size:.84rem;color:var(--muted);margin-top:.5em}
.linkout a{color:var(--brick-dk)}
.ages{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
      padding:3px 8px;border-radius:4px;background:var(--cream-2);color:var(--ink-2);margin-left:8px;
      vertical-align:middle}
.ev__now{display:block;font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brick-dk);background:var(--brick-soft);
  border-radius:4px;padding:5px 4px;margin-top:3px}

/* --- homepage events teaser ------------------------------------------------ */
.teaser__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
              flex-wrap:wrap;margin-bottom:1.8em}
.teaser__head h2{margin-bottom:.25em}
.teaser__head .lede{margin:0;max-width:56ch}
.teaser__all{flex:0 0 auto;white-space:nowrap}

.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){ .teaser{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .teaser{grid-template-columns:1fr} }

.tz{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;padding-bottom:16px;transition:.15s ease}
.tz:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.tz__img{display:block;background:var(--cream-2);margin-bottom:10px}
.tz__img img{width:100%;height:150px;object-fit:cover;display:block}
.tz__img--none{height:150px;background:linear-gradient(135deg,var(--cream-2),var(--brick-soft))}
.tz__date{padding:0 16px;font-size:.78rem;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--brick-dk)}
.tz__title{padding:0 16px;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35}
.tz:hover .tz__title{color:var(--brick-dk)}
.tz__venue{padding:0 16px;font-size:.85rem;color:var(--muted)}
.tz__tag{margin:6px 16px 0;align-self:flex-start}