/* Cesta z mesta v2 - landing page (Builder A). Poster hero, event tiles, principle tiles, torn strips, tickets, contact band.
   Static tilts use the individual `rotate:` / `translate:` properties; GSAP owns `transform`. */

main { display: block; }

.section { padding-block: clamp(56px, 7vw, 96px); overflow-x: clip; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 26px; margin-bottom: clamp(22px, 3.4vw, 40px); }
.sec-head h2, .kruh-head h2, .about-copy h2 { text-wrap: balance; }
.sec-head .note { rotate: -2.5deg; margin: 0; }
.more { margin: clamp(28px, 4vw, 48px) 0 0; }

/* ======================================================================
   1. HERO: two-ink riso poster (ref2 "A Radical Garden")
   ====================================================================== */
.hero { position: relative; padding: 4px 0 clamp(22px, 3vw, 30px); overflow-x: clip; }
.hero-wrap { position: relative; }

.poster-grid {
  --fs: min(14vw, 19svh, 11.8rem);
  display: grid; gap: 10px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: calc(var(--fs) * 0.9) minmax(0, 1.9fr) calc(var(--fs) * 0.9) minmax(0, 0.95fr) minmax(0, 0.55fr);
  height: clamp(540px, calc(100svh - 120px), 880px);
}

/* H1 is one element; its two poster lines are placed straight into the poster grid */
.hero-title { display: contents; font-size: var(--fs); }
.ln { display: block; align-self: center; white-space: nowrap; margin-block: -0.02em 0; }
.ln1 { grid-area: 1 / 1 / 2 / 7; }
.ln2 { grid-area: 3 / 1 / 4 / 9; }

.hb { position: relative; min-width: 0; min-height: 0; transition: translate 240ms var(--ease-out); }
.hb:not(.hb--ph) { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.hb:hover { translate: 0 -4px; }
.hb:active { scale: 0.985; }
.hb .art { width: 72%; height: 72%; object-fit: contain; }
.hb--ph .riso { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hb--house { grid-area: 1 / 7 / 2 / 10; }
.hb--hen { grid-area: 1 / 10 / 2 / 11; }
.hb--tom { grid-area: 1 / 11 / 2 / 12; }
.hb--sun { grid-area: 1 / 12 / 2 / 13; }
.hb--hand { grid-area: 2 / 1 / 3 / 4; }
.hb--swing { grid-area: 2 / 4 / 3 / 8; }
.hb--fam { grid-area: 2 / 8 / 3 / 13; }
.hero-note { grid-area: 3 / 9 / 4 / 13; }
.hb--dome { grid-area: 4 / 7 / 5 / 10; }
.hb--barrow { grid-area: 4 / 10 / 5 / 13; }
.hb--parade { grid-area: 5 / 7 / 6 / 13; }
.hero-copy { grid-area: 4 / 1 / 6 / 7; }

/* one small circle crop, like the disc in the reference */
.poster-grid .hb--hand { clip-path: none; border-radius: 50%; aspect-ratio: 1; height: 100%; width: auto; max-width: 100%; justify-self: start; align-self: center; }
.hb--hand .riso { object-position: 45% 55%; }
.hb--swing .riso { object-position: 50% 42%; }
.hb--house .riso { object-position: 50% 55%; }
.hb--dome .riso { object-position: 50% 60%; }
.hb--barrow .art { width: 62%; height: 76%; }
.hb.hb--parade { display: flex; align-items: center; justify-content: space-around; padding: 0 3%; }
.hb--parade .art { width: auto; height: 82%; aspect-ratio: 1; flex: none; }
.hb--fam { padding: 8px 8px 9px; rotate: 0.6deg; z-index: 1; }
.hb--fam img { position: absolute; inset: 8px 8px 9px; width: calc(100% - 16px); height: calc(100% - 17px); object-fit: cover; object-position: 50% 30%; }

.hero-note { position: relative; align-self: start; display: flex; flex-direction: column; align-items: flex-start; padding-left: 4%; }
.hero-note .arrow { width: clamp(40px, 4.6vw, 62px); height: auto; margin: -6px 0 2px 2%; overflow: visible; }
.hero-note .note { margin: 0; rotate: -2deg; max-width: 13em; }

.hero-copy { align-self: center; display: flex; flex-direction: column; gap: 16px; padding-right: 7%; }
.hero-copy p { margin: 0; max-width: 29em; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.18rem); line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* hero stickers: positioned by their final spot at load; top is shifted by speed to cancel the scroll-scrub offset at scroll 0 */
.hero .sticker { --o: 0px; }
.motion .hero .sticker { --o: calc(var(--s) * 62px); }
.st1 { width: clamp(58px, 7.4vw, 96px); right: -2.4%; top: calc(-3% + var(--o)); }
.st2 { width: clamp(58px, 7.2vw, 94px); left: 18.6%; top: calc(33% + var(--o)); }
.st3 { width: clamp(54px, 6.8vw, 90px); left: 47.6%; top: calc(14% + var(--o)); }
.st4 { width: clamp(54px, 6.2vw, 82px); left: 46.4%; top: calc(69% + var(--o)); }
.st5 { width: clamp(50px, 5.8vw, 76px); right: -2.6%; top: calc(37% + var(--o)); }
.st6 { width: clamp(56px, 6.8vw, 88px); right: -2.6%; top: calc(80% + var(--o)); }
.st7 { width: clamp(56px, 7vw, 92px); left: 40.5%; top: calc(91% + var(--o)); }
.st8 { width: clamp(58px, 6.4vw, 82px); left: 62.2%; top: calc(61% + var(--o)); }

/* ======================================================================
   2. NAJBLIZSIE NA STATKU: poster tile composition (ref1)
   ====================================================================== */
.ev-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 12px; }
.ev { position: relative; display: flex; gap: 16px; padding: clamp(18px, 2.4vw, 32px); transition: translate 240ms var(--ease-out); }
.ev:hover { translate: 0 -5px; }
.ev:active { scale: 0.99; }
.ev h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.95rem); line-height: 1.1; margin: 10px 0 10px; }
.ev p { margin: 0 0 14px; font-size: 1.08rem; font-weight: 500; line-height: 1.45; }
.ev .stamp { align-self: flex-start; }
.ev-photo { margin: 0; width: 100%; aspect-ratio: 3 / 2; flex: none; position: relative; z-index: 1; }
.ev-text { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; }
.ev-art { position: absolute; z-index: 0; pointer-events: none; display: block; }
.ev-art img { width: 100%; }

.ev--a { grid-area: 1 / 1 / 3 / 6; flex-direction: column; gap: 10px; }
.ev--a .stamp { position: absolute; top: clamp(18px, 2.4vw, 32px); left: clamp(18px, 2.4vw, 32px); z-index: 2; background: var(--mustard); }
.ev--a .ev-photo { margin-top: 50px; width: 94%; align-self: center; }
.ev--a .ev-art { width: clamp(62px, 7vw, 96px); top: 14px; right: 18px; }
.ev--a .ev-text { margin-top: 14px; }
.ev--b { grid-area: 1 / 6 / 2 / 13; flex-direction: row; align-items: center; justify-content: space-between; }
.ev--b .ev-photo { width: 45%; }
.ev--b .ev-art { width: clamp(54px, 6vw, 84px); left: 38%; bottom: 8px; }
.ev--b .ev-text { flex: 1; }
.ev--c { grid-area: 2 / 6 / 3 / 13; flex-direction: row; align-items: center; gap: 24px; }
.ev--c .ev-photo { width: 44%; }
.ev--c .ev-text { flex: 1; }
.ev--c .ev-art { width: clamp(84px, 9vw, 130px); right: -26px; top: -26px; }

/* ======================================================================
   3. AKO ZIJEME: 12 principles poster (ref1) + the family
   ====================================================================== */
.about-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pr-note { margin: 18px 0 0 4px; rotate: -1.5deg; }
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: clamp(10px, 1.2vw, 16px); transition: translate 220ms var(--ease-out); }
.pr:hover { translate: 0 -4px; z-index: 2; }
.pr img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; }
.pr span { font-weight: 700; font-size: clamp(0.8rem, 0.55rem + 0.5vw, 1.02rem); line-height: 1.12; text-wrap: balance; }
.pr--flip { flex-direction: column; }
.pr--title { justify-content: flex-start; }
.pr--title h3 { display: flex; flex-direction: column; gap: 8px; font-size: inherit; }
.pr--title .num { font-size: clamp(2.8rem, 2rem + 2.6vw, 4.8rem); color: var(--mustard); line-height: 0.8; display: block; }
.pr--title .lbl { font-family: var(--font-poster); font-weight: 900; text-transform: uppercase; font-size: clamp(0.66rem, 0.5rem + 0.42vw, 0.96rem); line-height: 1.08; font-variation-settings: "SOFT" 60, "WONK" 1; }

.about-copy { position: relative; }
.about-copy p { max-width: 30em; margin: 16px 0 0; font-size: 1.12rem; }
.about-fig { margin: 26px 0 22px; max-width: 400px; }
.about-fig .print { aspect-ratio: 16 / 10; }
.about-cap { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0 0 10%; }
.about-cap .arrow { flex: none; overflow: visible; margin-top: 4px; }
.about-cap .note { margin-top: 18px; rotate: -2deg; }

/* ======================================================================
   4. ROK NA ODORICI: torn riso strips (ref3) + a video print card
   ====================================================================== */
.rok { position: relative; overflow: clip; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 68px); }
.strips {
  --sh: clamp(96px, 13vw, 190px); --sh3: clamp(112px, 15vw, 214px); --gap: clamp(8px, 1.1vw, 14px);
  --card-w: clamp(250px, 30vw, 380px); --card-h: calc((var(--card-w) - 16px) * 9 / 16 + 18px);
  position: relative; display: flex; flex-direction: column; gap: var(--gap);
}
.strip { position: relative; flex: none; left: -25%; width: 150%; height: var(--sh); overflow: hidden; }
.strip > .riso { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.strip--1 { clip-path: polygon(0.0% 3.8%, 3.5% 4.0%, 6.0% 1.6%, 9.0% 9.7%, 11.3% 6.9%, 14.2% 8.3%, 17.8% 5.2%, 20.0% 7.1%, 23.2% 0.3%, 26.4% 7.2%, 29.6% 4.2%, 32.3% 2.4%, 35.9% 7.1%, 38.0% 2.0%, 40.7% 6.5%, 44.5% 3.3%, 47.5% 0.0%, 50.5% 4.0%, 52.8% 0.6%, 56.2% 5.3%, 59.4% 9.2%, 61.3% 0.5%, 64.3% 4.8%, 67.3% 6.2%, 70.8% 1.0%, 73.2% 2.3%, 76.8% 2.6%, 79.1% 3.4%, 82.5% 0.9%, 85.0% 2.2%, 88.0% 4.8%, 91.3% 2.1%, 94.0% 3.9%, 97.0% 4.9%, 100.0% 1.6%, 100.0% 92.3%, 96.8% 98.4%, 94.6% 98.3%, 91.6% 94.9%, 87.8% 99.7%, 85.0% 94.0%, 82.7% 94.9%, 79.0% 91.2%, 76.5% 92.8%, 73.3% 92.2%, 70.0% 97.7%, 67.1% 98.5%, 64.8% 98.9%, 62.2% 91.7%, 59.1% 95.0%, 55.3% 99.8%, 53.2% 87.9%, 50.0% 93.8%, 47.7% 99.4%, 44.4% 92.3%, 41.4% 93.3%, 38.1% 94.2%, 35.7% 96.5%, 32.8% 95.1%, 29.3% 95.0%, 26.0% 94.6%, 24.0% 93.8%, 20.9% 95.1%, 18.1% 99.3%, 14.1% 94.9%, 11.4% 94.1%, 9.0% 92.2%, 5.3% 97.4%, 2.6% 98.6%, 0.0% 94.4%); }
.strip--2 { clip-path: polygon(0.0% 7.9%, 3.4% 0.7%, 5.8% 4.5%, 8.5% 3.8%, 11.7% 4.3%, 14.6% 4.4%, 17.5% 0.5%, 20.7% 5.6%, 24.1% 3.1%, 26.3% 4.9%, 29.2% 0.7%, 32.6% 5.0%, 35.5% 1.5%, 38.0% 6.9%, 40.7% 3.7%, 44.2% 7.0%, 46.9% 2.5%, 50.3% 4.7%, 52.5% 6.7%, 56.3% 2.0%, 59.3% 5.0%, 61.4% 11.5%, 64.1% 6.9%, 68.2% 6.8%, 70.6% 8.4%, 73.3% 8.3%, 76.1% 0.6%, 79.0% 7.9%, 82.0% 0.9%, 84.9% 4.6%, 87.9% 3.6%, 91.1% 2.9%, 94.5% 7.6%, 97.0% 5.9%, 100.0% 5.4%, 100.0% 97.5%, 97.4% 95.3%, 94.5% 99.1%, 91.0% 95.2%, 87.9% 88.2%, 85.3% 98.0%, 82.3% 96.2%, 78.8% 96.8%, 76.0% 92.6%, 73.7% 98.5%, 70.5% 99.3%, 67.6% 94.1%, 64.8% 95.5%, 62.2% 99.3%, 59.3% 95.8%, 56.1% 94.9%, 52.7% 97.0%, 50.6% 97.1%, 47.0% 93.1%, 44.2% 97.8%, 40.7% 98.2%, 38.7% 92.3%, 34.8% 95.2%, 32.8% 97.8%, 29.1% 91.6%, 25.9% 93.1%, 23.4% 98.8%, 20.1% 93.7%, 17.9% 92.8%, 14.9% 98.6%, 12.3% 94.6%, 8.4% 93.8%, 6.1% 95.2%, 3.3% 94.9%, 0.0% 97.2%); }
.strip--4 > .riso { object-position: 50% 38%; }
.strip--3 { clip-path: polygon(0.0% 9.7%, 3.4% 7.1%, 6.0% 3.1%, 8.4% 5.8%, 11.5% 3.2%, 14.6% 8.2%, 18.1% 3.6%, 20.4% 6.0%, 23.6% 5.4%, 25.9% 4.5%, 29.3% 0.1%, 32.8% 0.6%, 34.7% 3.0%, 38.7% 6.2%, 40.8% 6.1%, 44.1% 7.8%, 46.8% 6.1%, 49.7% 8.6%, 53.0% 0.0%, 55.4% 5.5%, 58.3% 11.0%, 61.8% 2.1%, 64.7% 4.9%, 67.4% 1.8%, 70.5% 4.4%, 72.9% 2.4%, 75.9% 6.4%, 79.2% 1.7%, 81.8% 7.0%, 85.8% 6.0%, 88.3% 12.4%, 91.4% 1.7%, 93.9% 0.0%, 97.1% 0.2%, 100.0% 3.8%, 100.0% 93.6%, 97.6% 92.6%, 94.6% 92.8%, 90.7% 96.2%, 88.8% 94.4%, 84.8% 92.0%, 81.8% 93.8%, 79.5% 99.3%, 76.1% 94.0%, 74.1% 98.6%, 70.4% 99.3%, 67.8% 99.1%, 64.2% 91.8%, 61.2% 93.7%, 59.0% 89.7%, 56.4% 98.1%, 53.1% 99.5%, 50.4% 92.0%, 47.2% 96.1%, 44.3% 91.7%, 41.2% 96.2%, 37.8% 93.3%, 35.5% 97.8%, 31.9% 98.7%, 29.6% 92.8%, 26.8% 99.3%, 23.1% 95.5%, 20.3% 92.2%, 17.3% 95.8%, 15.1% 96.6%, 11.9% 94.5%, 8.9% 99.5%, 6.0% 98.1%, 3.5% 94.4%, 0.0% 92.0%); height: var(--sh3); }
.strip--4 { clip-path: polygon(0.0% 3.2%, 2.5% 7.8%, 6.1% 4.7%, 9.1% 4.9%, 12.0% 7.1%, 14.3% 1.3%, 17.2% 5.6%, 20.1% 11.3%, 23.9% 1.8%, 26.7% 1.1%, 29.0% 7.8%, 32.9% 0.5%, 35.4% 5.2%, 38.7% 7.2%, 40.8% 5.7%, 44.3% 4.2%, 46.5% 1.1%, 50.3% 3.6%, 53.0% 7.5%, 55.7% 3.3%, 59.3% 7.4%, 61.3% 5.6%, 65.2% 5.6%, 67.8% 3.6%, 71.1% 2.1%, 73.8% 5.8%, 76.4% 8.2%, 79.1% 5.8%, 82.8% 2.8%, 85.1% 7.5%, 88.5% 1.8%, 90.6% 1.5%, 93.6% 2.0%, 96.6% 2.8%, 100.0% 10.7%, 100.0% 94.9%, 97.1% 95.8%, 94.6% 89.2%, 91.7% 94.6%, 88.4% 98.5%, 85.6% 99.4%, 82.5% 97.0%, 79.9% 92.3%, 76.1% 92.7%, 73.9% 92.6%, 70.7% 97.4%, 67.9% 98.0%, 64.8% 98.0%, 61.7% 99.4%, 59.4% 88.5%, 56.1% 89.7%, 52.6% 93.2%, 49.8% 98.5%, 46.7% 92.6%, 43.7% 94.4%, 40.6% 93.0%, 37.7% 93.5%, 35.2% 98.4%, 32.5% 94.1%, 29.5% 93.9%, 26.1% 95.9%, 23.9% 92.7%, 20.8% 99.1%, 17.1% 92.9%, 14.9% 93.6%, 12.1% 99.3%, 8.6% 92.7%, 5.5% 99.2%, 2.7% 92.3%, 0.0% 92.9%); }
.strip--5 { clip-path: polygon(0.0% 1.9%, 3.5% 0.2%, 6.1% 10.3%, 8.7% 6.9%, 12.1% 6.2%, 14.9% 8.2%, 18.1% 0.9%, 21.0% 6.8%, 23.6% 8.2%, 26.0% 4.9%, 29.6% 0.9%, 31.9% 3.4%, 35.2% 4.6%, 38.3% 8.4%, 40.9% 5.9%, 43.6% 5.4%, 47.2% 4.4%, 50.4% 2.2%, 52.5% 4.7%, 55.8% 4.5%, 59.0% 4.5%, 62.1% 7.9%, 64.5% 7.1%, 68.0% 0.6%, 70.0% 3.6%, 73.8% 7.9%, 76.3% 6.3%, 78.9% 4.1%, 82.9% 1.4%, 85.0% 5.2%, 88.6% 2.7%, 91.0% 2.0%, 93.6% 12.8%, 96.8% 6.5%, 100.0% 6.4%, 100.0% 98.1%, 96.5% 98.9%, 93.7% 96.5%, 90.8% 94.3%, 88.3% 97.4%, 85.0% 94.0%, 82.6% 95.1%, 79.6% 92.3%, 76.1% 98.3%, 74.0% 98.4%, 70.9% 96.0%, 68.1% 93.6%, 64.8% 94.5%, 61.2% 92.4%, 58.2% 95.9%, 55.7% 99.1%, 52.8% 98.6%, 49.4% 92.3%, 46.7% 93.5%, 43.7% 97.7%, 40.9% 97.9%, 38.2% 92.2%, 34.8% 93.3%, 32.5% 97.1%, 29.3% 92.8%, 26.0% 90.1%, 23.2% 90.8%, 21.1% 99.7%, 17.7% 95.7%, 14.6% 96.0%, 12.2% 93.2%, 8.6% 99.7%, 5.9% 95.6%, 2.7% 95.9%, 0.0% 91.7%); }
.strip-inner { position: relative; display: flex; align-items: center; height: 100%; width: calc(100% / 1.5 - 2 * var(--gutter)); max-width: var(--wrap); margin-inline: auto; padding: 6px calc(var(--card-w) + 28px) 6px 0; }
.strip-title { margin: 0; font-size: clamp(1.9rem, 4vw + 1.2rem, 5rem); color: var(--cream); line-height: 0.9; }

/* the video is its own taped print, overlapping the right part of the middle strip (it does not slide) */
.strip-vid {
  position: absolute; z-index: 3; margin: 0; width: var(--card-w); rotate: 3deg;
  right: calc((100% - min(100% - 2 * var(--gutter), var(--wrap))) / 2);
  top: calc(2 * (var(--sh) + var(--gap)) + var(--sh3) / 2 - var(--card-h) / 2);
}
.vid-box { position: relative; aspect-ratio: 16 / 9; background: var(--soil); }
.vid-box video { width: 100%; height: 100%; object-fit: cover; }
.vid-toggle { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.vid-toggle[hidden] { display: none; }
.vid-toggle .vt-label { position: absolute; left: 8px; bottom: 8px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--cream); color: var(--forest); font-size: 0.74rem; font-weight: 700; line-height: 1.5; opacity: 0; transition: opacity 180ms var(--ease-out); }
.vid-toggle:hover .vt-label, .vid-toggle:focus-visible .vt-label { opacity: 1; }
@media (hover: none) { .vid-toggle .vt-label { opacity: 1; } }
.rok-link { margin-top: clamp(22px, 3vw, 36px); margin-bottom: 0; }

/* ======================================================================
   5. KRUH ODORICE: stamped tickets
   ====================================================================== */
.kruh-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.kruh-lead { margin: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; max-width: 30em; }

.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); align-items: start; }
.ticket {
  --notch: 13px;
  position: relative; rotate: var(--tilt, 0deg); padding: 26px 26px 24px; border-radius: 3px;
  transition: translate 240ms var(--ease-out);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.ticket::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed currentColor; border-radius: 3px; opacity: 0.38; pointer-events: none; }
.ticket.t-paper { background: var(--cream); }
.ticket:nth-child(2) { margin-top: clamp(0px, 3vw, 40px); }
.ticket:nth-child(3) { margin-top: clamp(0px, 1.2vw, 16px); }
.ticket:hover { translate: 0 -5px; }
.ticket:active { scale: 0.99; }
.ticket h3 { font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); line-height: 1.12; margin-bottom: 10px; }
.ticket p { margin: 0 0 14px; font-weight: 500; line-height: 1.45; }
.tk-art { display: block; width: clamp(54px, 5.4vw, 72px); margin-bottom: 8px; }
.pas { display: flex; gap: 12px; margin: 16px 0 6px; }
.pecat { --d: 66px; position: relative; flex: none; width: var(--d); height: var(--d); padding: 0; border-radius: 50%; border: 2.5px dashed var(--forest); background: var(--cream); color: var(--clay); cursor: pointer; transition: border-color 200ms var(--ease-out), scale 160ms var(--ease-out); }
.pecat:hover { border-color: var(--clay); }
.pecat:active { scale: 0.94; }
.seal { max-width: none; position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 1.22); height: calc(var(--d) * 1.22); margin: calc(var(--d) * -0.61) 0 0 calc(var(--d) * -0.61); opacity: 0; rotate: var(--r, -8deg); pointer-events: none; overflow: visible; }
.seal circle { fill: none; stroke: currentColor; stroke-width: 4; }
.seal .in { stroke-width: 1.4; stroke-dasharray: 3 3.4; }
.seal text { fill: currentColor; font-family: var(--font-poster); font-weight: 900; font-size: 14px; text-anchor: middle; font-variation-settings: "SOFT" 60, "WONK" 1; }
.pecat[aria-pressed="true"] { border-style: solid; border-color: transparent; }
.pecat[aria-pressed="true"] .seal { opacity: 1; animation: stampin 300ms var(--ease-out) both; }
@keyframes stampin { 0% { scale: 1.9; opacity: 0; rotate: calc(var(--r) - 24deg); } 55% { scale: 0.9; opacity: 1; } 78% { scale: 1.06; } 100% { scale: 1; opacity: 1; rotate: var(--r); } }
.pas.is-full .pecat .seal { animation: stampin 300ms var(--ease-out) both, stampshake 420ms 340ms ease-in-out; }
@keyframes stampshake { 0%, 100% { translate: 0 0; } 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
.pas-count { margin: 0 0 12px; font-family: var(--font-note); font-size: 1.35rem; line-height: 1.1; color: var(--clay); font-weight: 700; min-height: 1.4em; }
.ticket.t-mustard .pas-count { color: var(--forest); }

/* ======================================================================
   6. KONTAKT: soil band, olive panel + map, one petroglyph procession (ref4)
   ====================================================================== */
.contact { position: relative; overflow: clip; }
.lane { position: relative; overflow: hidden; height: clamp(96px, 9.4vw, 128px); border-bottom: 2px dashed rgba(251, 245, 232, 0.28); }
.procession { position: absolute; left: 0; bottom: 3px; display: flex; align-items: flex-end; width: max-content; gap: clamp(60px, 10vw, 150px); }
.pw { flex: none; height: auto; animation: stepbob 0.8s linear infinite; }
.p1 { width: clamp(64px, 7.6vw, 108px); }
.p2 { width: clamp(70px, 8.2vw, 118px); animation-delay: -0.3s; animation-duration: 0.72s; }
.p3 { width: clamp(70px, 8.4vw, 122px); animation-delay: -0.55s; }
.p4 { width: clamp(58px, 6.6vw, 94px); animation-delay: -0.15s; animation-duration: 0.66s; }
@keyframes stepbob { 0%, 49.9% { translate: 0 0; rotate: -3deg; } 50%, 100% { translate: 0 -7px; rotate: 3deg; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2.4vw, 32px); align-items: stretch; padding-block: clamp(26px, 3.4vw, 40px) clamp(44px, 5vw, 64px); }
.panel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: clamp(24px, 3.2vw, 46px); color: var(--cream); }
.panel h2 { color: var(--cream); margin-bottom: 14px; }
.panel address { font-style: normal; }
.panel address p.mail { letter-spacing: 0; }
.panel address p { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.panel a:not(.btn):not(.link-hand) { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.panel a:not(.btn):not(.link-hand):hover { color: var(--mustard); }
.panel-cta { margin: 18px 0 14px; }
.panel .link-hand { font-size: 1.05rem; }
.map { position: relative; min-height: 380px; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 1.5px solid var(--cream); border-radius: 3px; background: var(--paper-2); }

/* ======================================================================
   Stickers inside sections (clipped by the section)
   ====================================================================== */
.sk-a { width: clamp(54px, 6vw, 84px); right: 3%; top: 5%; }
.sk-b { width: clamp(50px, 5.4vw, 74px); right: 28%; top: calc(100% - 150px); }
.sk-c { width: clamp(52px, 6vw, 80px); left: 52%; top: 4%; }
.sk-d { width: clamp(54px, 6vw, 82px); right: 5%; top: 8%; }
.sk-e { width: clamp(48px, 5.2vw, 70px); right: 6%; top: 60%; }

/* ======================================================================
   Tablet and phone: the poster recomposes into a 6-column mosaic
   ====================================================================== */
@media (max-width: 960px) {
  .poster-grid {
    --fs: clamp(2.9rem, 16.4vw, 7.4rem);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: calc(var(--fs) * 0.9) calc(var(--fs) * 2.5) calc(var(--fs) * 0.9) auto auto calc(var(--fs) * 1.4) calc(var(--fs) * 0.9);
    gap: 8px; height: auto;
  }
  .ln1 { grid-area: 1 / 1 / 2 / 5; }
  .hb--hen { grid-area: 1 / 5 / 2 / 7; }
  .hb--fam { grid-area: 2 / 1 / 3 / 7; }
  .ln2 { grid-area: 3 / 1 / 4 / 7; }
  .poster-grid .hb--hand { grid-area: 6 / 1 / 7 / 4; border-radius: 0; aspect-ratio: auto; height: auto; width: auto; align-self: stretch; justify-self: stretch; max-width: none; clip-path: polygon(0.6% 0.9%, 99.2% 0%, 100% 98.8%, 0.3% 100%); }
  .hb--swing { grid-area: 6 / 4 / 7 / 7; }
  .hb--tom { grid-area: 7 / 1 / 8 / 3; }
  .hb--house { grid-area: 7 / 3 / 8 / 5; }
  .hb--sun { grid-area: 7 / 5 / 8 / 7; }
  .hb.hb--dome, .hb.hb--barrow, .hb.hb--parade { display: none; }
  .hero-note { grid-area: 4 / 1 / 5 / 7; align-self: center; padding: 4px 0 0 4px; }
  .hero-note .arrow { display: none; }
  .hero-note .note { max-width: none; }
  .hero-copy { grid-area: 5 / 1 / 6 / 7; padding: 0; gap: 16px; margin: 0 0 10px; }
  .hero-copy p { max-width: 36em; }

  .st1 { width: clamp(46px, 8vw, 70px); right: -2%; top: calc(-1.5% + var(--o)); }
  .st2 { width: clamp(46px, 8vw, 76px); left: auto; right: 5%; top: calc(41% + var(--o)); }
  .st3 { left: 74%; top: calc(11% + var(--o)); }
  .st7, .st8 { display: none; }
  .st4 { width: clamp(42px, 7vw, 62px); left: auto; right: 5%; top: calc(56% + var(--o)); }
  .st5 { right: -1%; top: calc(32% + var(--o)); }
  .st6 { width: clamp(44px, 7.4vw, 68px); right: 0; top: calc(66% + var(--o)); }

  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev--a { grid-area: 1 / 1 / 2 / 2; }
  .ev--b { grid-area: 1 / 2 / 2 / 3; flex-direction: column; align-items: stretch; }
  .ev--b .ev-photo { width: 100%; }
  .ev--b .ev-text { order: 2; }
  .ev--b .ev-art { left: auto; right: 16px; bottom: auto; top: 12px; }
  .ev--c { grid-area: 2 / 1 / 3 / 3; }
  .ev--b .ev-photo { order: 1; margin-top: 4px; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-copy { order: -1; }
  .pr-grid { gap: 8px; }
  .about-fig { max-width: 440px; }

  .kruh-head { grid-template-columns: 1fr; }
  .tickets { grid-template-columns: 1fr; gap: 22px; }
  .ticket { max-width: 520px; }
  .ticket:nth-child(2) { margin-left: auto; margin-top: 0; }
  .sk-c { left: auto; right: 6%; top: 2%; }
  .ticket:nth-child(3) { margin-top: 0; }

  .contact-grid { grid-template-columns: 1fr; }
  .strips { --sh3: clamp(124px, 19vw, 214px); }
  .strip-title { font-size: clamp(1.9rem, 5.4vw + 1rem, 4.2rem); }
}

@media (max-width: 760px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev--a, .ev--b, .ev--c { grid-area: auto; flex-direction: column; align-items: stretch; }
  .ev--a .ev-photo { margin-top: 46px; width: 100%; }
  .ev--c .ev-photo { order: 1; }
  .ev--b .ev-photo, .ev--c .ev-photo { width: 100%; }
}

@media (max-width: 640px) {
  .hero { padding-bottom: 28px; }
  .hb .art { width: 78%; height: 78%; }
  .hero-note .note { font-size: 1.4rem; }
  .st1 { width: 54px; right: -3px; top: calc(-18px + var(--o)); }
  .st2 { width: 58px; left: auto; right: 6px; top: calc(222px + var(--o)); }
  .st4 { width: 52px; right: 10px; top: calc(448px + var(--o)); }
  .st6 { width: 54px; right: -4px; top: calc(552px + var(--o)); }
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr span { font-size: 0.95rem; }
  .pr--title .lbl { font-size: 0.82rem; }
  .strips { --sh3: 124px; }
  .strip-inner { padding-right: 0; }
  .strip-title { font-size: clamp(1.8rem, 9.4vw, 3rem); }
  .strip-vid { display: none; }
  .panel address p.mail { font-size: clamp(0.82rem, 4.1vw, 1.2rem); }
  .ticket { max-width: none; }
  .pecat { --d: 60px; }
  .lane { height: 88px; }
}