/* ============================================================
   E.T. Barrr - etbar.veldon.cz
   Direction: "Den s E.T." - storybook-glamping editorial.
   Warm paper + single-weight ink line-art (their own cover
   style, elevated) + real photography; the sky darkens as you
   scroll: ráno -> odpoledne -> soumrak -> večer v barrru.
   Type: Shantell Sans (an artist's hand-line as a typeface)
         + Literata (book serif body).
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.16rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

::selection { background: var(--glow); color: var(--night); }

:focus-visible {
  outline: 2.5px dashed currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -3.5rem;
  left: 1rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.6em 1.1em;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.25s ease;
}

.skip-link:focus-visible { top: 0; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
}

h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }

h3 { font-size: 1.18rem; font-weight: 700; }

.lede {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.06em;
  margin-top: 0.9rem;
}

.lede a { color: var(--amber-deep); text-underline-offset: 3px; }

/* the wordmark: three r's trailing off like an echo */
.wordmark, .hero-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wm-r { display: inline-block; }
.wm-r:nth-of-type(1) { transform: translateY(0.06em) rotate(3deg); opacity: 0.92; }
.wm-r:nth-of-type(2) { transform: translateY(0.16em) rotate(7deg) scale(0.92); opacity: 0.66; }
.wm-r:nth-of-type(3) { transform: translateY(0.3em) rotate(12deg) scale(0.84); opacity: 0.4; }

/* ============================================================
   Header - night-voiced, floats over the hero
   ============================================================ */

/* No transform/filter/backdrop-filter here or on any .site-nav
   ancestor - it would become the containing block of the fixed
   mobile overlay and clip it to the header box. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad);
  color: var(--moon);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.site-header.is-solid {
  background: rgba(var(--night-rgb), 0.96);
  padding-block: 0.6rem;
  box-shadow: 0 1px 0 var(--line-dark);
}

.site-header .wordmark { font-size: 1.3rem; color: var(--moon); }

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.2rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a {
  text-decoration: none;
  padding-bottom: 0.25em;
  background: linear-gradient(currentColor, currentColor) bottom left / 0 2px no-repeat;
  transition: background-size 0.3s ease;
}

.nav-links a:hover { background-size: 100% 2px; }

.nav-top, .nav-foot { display: none; }

.nav-toggle { display: none; }

body.nav-locked { overflow: hidden; }

section[id] { scroll-margin-top: 4.5rem; }

/* ============================================================
   Hero - the ink scene draws itself, then the lights come on
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(58% 42% at 72% 30%, rgba(var(--glow-rgb), 0.07), transparent 70%),
    var(--night);
  color: var(--moon);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-scene {
  position: absolute;
  top: clamp(3.4rem, 7vh, 5rem);
  left: 55%;
  transform: translateX(-50%);
  height: min(62vh, 620px);
  width: auto;
  aspect-ratio: 1200 / 620;
  color: #E6DCC8;
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
}

.hero-scene .moonp { fill: rgba(var(--glow-rgb), 0.16); }

.hero-copy {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad) clamp(2.2rem, 7vh, 4.5rem);
  max-width: 46rem;
}

.hero-copy h1,
.hero-copy p {
  text-shadow: 0 2px 26px rgba(var(--night-rgb), 0.9), 0 0 10px rgba(var(--night-rgb), 0.65);
}

.hero-mark {
  font-size: clamp(3rem, 2rem + 5.5vw, 5.4rem);
  color: var(--moon);
}

.hero-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.3rem);
  color: var(--glow);
  margin-top: 0.4rem;
}

.hero-lede {
  color: var(--moon-soft);
  max-width: 34em;
  margin-top: 0.9rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.4rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--night);
  background: var(--glow);
  border: 2.5px solid transparent;
  border-radius: 999px;
  padding: 0.62em 1.5em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  transform: rotate(-1.2deg) translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(var(--glow-rgb), 0.65);
}

.btn-quiet {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--moon-soft);
  text-decoration: none;
  padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) bottom left / 100% 2px no-repeat;
  transition: color 0.3s ease;
}

.btn-quiet:hover { color: var(--moon); }

/* --- the draw-on --- */

.dr {
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* base: fully drawn (no-JS, reduced-motion, print) */
}

.fd, .bulb { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-scene .dr {
    animation: draw 0.9s cubic-bezier(0.4, 0, 0.4, 1) calc(0.2s + var(--i, 0) * 0.09s) both;
  }

  .hero-scene .fd {
    animation: fadein 0.5s ease calc(0.5s + var(--i, 0) * 0.09s) both;
  }

  .hero-scene .bulb {
    animation: bulbon 0.45s ease calc(2.5s + var(--b, 0) * 0.11s) both;
  }

  .hero-copy > * {
    animation: rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-copy > :nth-child(2) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.36s; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.3rem); }
  to { opacity: 1; transform: none; }
}

/* bulbs end lit; fingertip + star glow with them */
.hero-scene .bulb,
.hero-scene .fingertip {
  fill: var(--glow);
  stroke: var(--glow);
  filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.9));
}

@keyframes bulbon {
  from { fill: transparent; stroke: currentColor; filter: none; }
  to { fill: var(--glow); stroke: var(--glow); filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.9)); }
}

/* ============================================================
   Chapters - the day arc
   ============================================================ */

.chapter { padding: clamp(3.6rem, 9vh, 6.5rem) var(--pad); }

.section-inner { max-width: 72rem; margin-inline: auto; }

.day {
  background:
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(var(--ink-rgb), 0.028) 0 1px, transparent 1px 26px),
    var(--paper);
}

.day.warm {
  background:
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.026) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(var(--ink-rgb), 0.026) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 22%, var(--paper-warm) 100%);
}

.ch-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.tchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.34em 0.95em;
  transform: rotate(-2deg);
}

.chapter .lede + .menu-list,
.chapter .lede + .tag-row { margin-top: 1.6rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(1.2rem, 3vh, 2rem);
}

.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

/* ---------- photos: arch masks + drawn frames ---------- */

.ch-media { position: relative; min-width: 0; }

.ph { position: relative; min-width: 0; }

.ph img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -32px rgba(var(--ink-rgb), 0.55);
}

.ph.arch img { border-radius: 46% 46% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius); }

.ph.framed::before {
  content: '';
  position: absolute;
  inset: -11px 11px 11px -11px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-1.1deg);
  opacity: 0.5;
  pointer-events: none;
}

.night .ph.framed::before { border-color: var(--moon-soft); }

.ph.small {
  width: 54%;
  margin-top: -16%;
  margin-left: auto;
  margin-right: -4%;
  z-index: 1;
}

.ph.small img { border: 6px solid var(--paper); }

.warm .ph.small img { border-color: var(--paper-warm); }

/* ---------- menu lists ---------- */

.menu-list {
  list-style: none;
  border-top: 2px solid var(--line);
  max-width: 34em;
}

.menu-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.4rem;
  padding: 0.85rem 0.15rem;
  border-bottom: 2px solid var(--line);
}

.menu-list .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.04rem;
}

.menu-list .note {
  font-style: italic;
  color: var(--ink-soft);
  text-align: right;
  font-size: 0.92em;
}

/* doodles: drawn by default; redraw when the text block is hovered */
.doodle { margin-top: 0.9rem; color: var(--amber-deep); }

.night .doodle { color: var(--glow); }

.doo { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ch-text:hover .doo { animation: draw 0.8s ease both; }
  .ch-text:hover .doo:nth-child(2) { animation-delay: 0.12s; }
  .ch-text:hover .doo:nth-child(3) { animation-delay: 0.24s; }
  .ch-text:hover .doo:nth-child(4) { animation-delay: 0.36s; }
}

/* ---------- tag chips ---------- */

.tag-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  max-width: 34em;
}

.tag-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.95em;
  background: var(--paper);
}

.tag-row li:nth-child(odd) { transform: rotate(-1.2deg); }
.tag-row li:nth-child(even) { transform: rotate(1deg); }

.warm .tag-row li { background: rgba(251, 247, 239, 0.75); }

.night-tags li { background: transparent; border-color: var(--line-dark); color: var(--moon-soft); }

/* ---------- review quote ---------- */

.review {
  margin-top: 1.8rem;
  max-width: 34em;
  position: relative;
  padding-left: 1.4rem;
}

.review::before {
  content: '„';
  position: absolute;
  left: -0.35rem;
  top: -1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  color: var(--amber);
  opacity: 0.8;
}

.review p { font-style: italic; color: var(--ink); }

.review cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ---------- footprints between chapters ---------- */

.steps {
  display: block;
  margin: clamp(0.4rem, 1.5vh, 1.2rem) auto;
  margin-left: 22vw;
  color: var(--ink);
  opacity: 0.45;
}

.steps-r { margin-left: auto; margin-right: 24vw; }

/* ============================================================
   Dusk bridge
   ============================================================ */

.dusk-bridge {
  position: relative;
  height: clamp(16rem, 38vh, 24rem);
  background: linear-gradient(180deg,
    var(--paper-warm) 0%,
    #E4C9A0 20%,
    #A18CA0 46%,
    #47517E 70%,
    var(--night) 100%);
}

.horizon {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: clamp(70px, 12vh, 120px);
  color: rgba(var(--moon-rgb), 0.5);
}

.string-lights {
  position: absolute;
  inset: auto 0 -12px 0;
  width: 100%;
  height: clamp(54px, 9vh, 90px);
  color: rgba(var(--moon-rgb), 0.4);
  z-index: 1;
}

.slb {
  fill: var(--glow);
  stroke: var(--glow);
  filter: drop-shadow(0 0 7px rgba(var(--glow-rgb), 0.95));
  transition: fill 0.4s ease, stroke 0.4s ease, filter 0.4s ease;
  transition-delay: calc(var(--b, 0) * 0.13s);
}

/* JS arms the string, then lights it on scroll into view */
.sl-armed .slb { fill: transparent; stroke: currentColor; filter: none; }

.sl-armed.sl-on .slb {
  fill: var(--glow);
  stroke: var(--glow);
  filter: drop-shadow(0 0 7px rgba(var(--glow-rgb), 0.95));
}

/* ============================================================
   Night chapters
   ============================================================ */

.night {
  background: var(--night);
  color: var(--moon);
}

.night .lede { color: var(--moon-soft); }

.night .lede a { color: var(--glow); }

.chapter.night + .chapter.night { padding-top: clamp(1.2rem, 4vh, 2.4rem); }

.night .menu-list { border-color: var(--line-dark); }
.night .menu-list li { border-color: var(--line-dark); }
.night .menu-list .note { color: var(--moon-soft); }

.night .tchip { color: var(--glow); }

/* ---------- events ---------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: clamp(1.3rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.event-card {
  background: var(--night-2);
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.event-card:hover { transform: translateY(-4px) rotate(-0.4deg); border-color: rgba(var(--glow-rgb), 0.45); }

.event-card:nth-child(even):hover { transform: translateY(-4px) rotate(0.4deg); }

.event-poster {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  margin: -0.35rem -0.4rem 0.3rem;
}

.event-poster img { width: 100%; height: 100%; object-fit: cover; }

.event-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--glow);
}

.event-card h3 { color: var(--moon); }

.event-desc { color: var(--moon-soft); font-size: 0.95em; flex: 1; }

.btn-fb {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--moon);
  border: 2px solid var(--line-dark);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.btn-fb:hover { border-color: var(--glow); color: var(--glow); }

.events-empty { font-style: italic; color: var(--moon-soft); grid-column: 1 / -1; }

/* ============================================================
   Opening hours - the board he peeks over
   ============================================================ */

.board-inner { max-width: 46rem; }

.board-wrap {
  position: relative;
  margin-top: clamp(5.2rem, 11vh, 7rem);
  max-width: 33rem;
  margin-inline: auto;
}

/* ropes to the top corners */
.board-wrap::before,
.board-wrap::after {
  content: '';
  position: absolute;
  top: -4.4rem;
  width: 3px;
  height: 5rem;
  background: repeating-linear-gradient(180deg, #B98A54 0 7px, #93683B 7px 12px);
  border-radius: 3px;
  z-index: 0;
}

.board-wrap::before { left: 17%; transform: rotate(7deg); }
.board-wrap::after { right: 17%; transform: rotate(-7deg); }

.board-et {
  position: absolute;
  top: -6.6rem;
  left: 50%;
  width: clamp(120px, 34%, 168px);
  height: auto;
  transform: translateX(-58%) rotate(-5deg);
  transform-origin: bottom center;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .board-et { animation: bob 5.2s ease-in-out 1.2s infinite; }
}

@keyframes bob {
  0%, 100% { transform: translateX(-58%) rotate(-5deg); }
  50% { transform: translateX(-58%) translateY(7px) rotate(-3.4deg); }
}

.board {
  position: relative;
  z-index: 2;
  background:
    repeating-linear-gradient(94deg, rgba(var(--ink-rgb), 0.09) 0 2px, transparent 2px 34px),
    linear-gradient(165deg, #8A6238, #6F4C2A 70%);
  border: 3px solid #503618;
  border-radius: var(--radius);
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, 0.85);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  color: #F6EDDD;
}

.board-season {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--glow);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.board-chip {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  display: inline-block;
  border: 2px solid rgba(var(--glow-rgb), 0.65);
  border-radius: 999px;
  padding: 0.28em 0.9em;
  margin-top: 0.7rem;
}

.board-chip.closed { border-color: rgba(246, 237, 221, 0.4); color: rgba(246, 237, 221, 0.8); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.9rem;
}

.hours-table td {
  padding: 0.5em 0.1em;
  border-bottom: 2px solid rgba(246, 237, 221, 0.16);
}

.hours-table tr:last-child td { border-bottom: 0; }

.hours-table td:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
}

.hours-table tr.today td { color: var(--glow); }

.hours-table tr.today td:first-child::after {
  content: ' · dnes';
  font-family: var(--font-display);
  font-size: 0.82em;
}

.board-note {
  margin-top: 1.3rem;
  font-size: 0.9em;
  color: rgba(246, 237, 221, 0.78);
}

.board-note a { color: #F6EDDD; }

.note-label {
  font-family: var(--font-display);
  font-weight: 500;
  color: rgba(246, 237, 221, 0.9);
}

.hours-note-table { margin: 0.35rem 0 0.9rem; max-width: 15rem; }

.hours-note-table td {
  padding: 0.34em 0.1em;
  border-bottom: 2px solid rgba(246, 237, 221, 0.12);
}

/* ============================================================
   Gallery - composed rows, arch accents, dialog lightbox
   ============================================================ */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.6vw, 2.6rem) clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  --gal-h: clamp(15rem, 28vw, 22rem);
}

.gal-grid figure { margin: 0; min-width: 0; }

.gal-grid figure:nth-child(4n + 1) { grid-column: 1 / span 7; }
.gal-grid figure:nth-child(4n + 2) { grid-column: 8 / span 5; }
.gal-grid figure:nth-child(4n + 3) { grid-column: 1 / span 5; }
.gal-grid figure:nth-child(4n) { grid-column: 6 / span 7; }

.gal-media {
  display: block;
  width: 100%;
  height: var(--gal-h);
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--night-2);
  border-radius: var(--radius);
  cursor: zoom-in;
  color: inherit;
}

.gal-grid figure:nth-child(4n + 2) .gal-media,
.gal-grid figure:nth-child(4n + 3) .gal-media {
  border-radius: 46% 46% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius);
}

.gal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gal-media:hover img { transform: scale(1.045) rotate(0.4deg); }

dialog.lightbox {
  margin: auto; /* the global reset kills UA dialog centering - restore it */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 68rem);
  color: var(--moon);
}

dialog.lightbox::backdrop { background: rgba(6, 10, 20, 0.92); }

dialog.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 10px;
}

.lb-close, .lb-prev, .lb-next {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--moon);
  background: rgba(var(--night-rgb), 0.8);
  border: 2px solid var(--line-dark);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.lb-close:hover, .lb-prev:hover, .lb-next:hover { border-color: var(--glow); }

.lb-close { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; }

.lb-nav { display: flex; justify-content: center; gap: 0.8rem; padding-top: 1rem; }

/* ============================================================
   Kontakt
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4.5vw, 3.5rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  align-items: start;
}

.contact-grid h3 { color: var(--glow); margin-bottom: 0.8rem; }

.contact-grid address { font-style: normal; color: var(--moon-soft); }

.contact-grid p { color: var(--moon-soft); }

.contact-grid a {
  color: var(--moon);
  text-decoration: none;
  border-bottom: 2px solid var(--line-dark);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-grid a:hover { color: var(--glow); border-color: var(--glow); }

.contact-grid .btn { margin-top: 1.1rem; border-bottom: 0; }

/* hand-drawn social icons */
.soc-row {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
}

.soc {
  display: inline-flex;
  padding: 0.2em;
  border-bottom: 0 !important;
  color: inherit;
}

.soc svg { transition: transform 0.3s ease, color 0.3s ease; }

.soc:hover { color: var(--glow); }

.soc:hover svg { transform: rotate(-7deg) scale(1.1); }

.soc:nth-child(even):hover svg { transform: rotate(6deg) scale(1.1); }

.footer-lines .soc-row, .nav-foot .soc-row { margin-top: 0; }

/* kontakt: icons on their own row, the map button below them */
.contact-grid .soc-row { display: flex; }

.contact-line { margin-top: 0.9rem; font-size: 0.95em; }

.fine-note { font-size: 0.88em; font-style: italic; }

.contact-grid .tag-row { margin-top: 1.1rem; }

.map-card {
  background: var(--night-2);
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--moon-soft);
}

.map-card svg { width: 100%; height: auto; }

.map-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  fill: currentColor;
  stroke: none;
}

.map-label-big { font-size: 21px; font-weight: 700; fill: var(--glow); }

.map-note { font-size: 13px; opacity: 0.6; }

/* ============================================================
   Footer - night forest; someone hides between the trees
   ============================================================ */

.site-footer {
  background: var(--night);
  color: var(--moon-soft);
  padding: clamp(2rem, 6vh, 4rem) var(--pad) 1.6rem;
}

.forest {
  display: block;
  width: min(1440px, 100%);
  margin-inline: auto;
  color: rgba(var(--moon-rgb), 0.75);
}

.forest .dot { fill: currentColor; stroke: none; }

.fly { fill: var(--glow); stroke: none; opacity: 0.25; }

@media (prefers-reduced-motion: no-preference) {
  .fly { animation: twinkle 4.6s ease-in-out calc(var(--f, 0) * 0.7s) infinite; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  45% { opacity: 0.95; }
  60% { opacity: 0.4; }
}

#et-hidden { cursor: pointer; }

#et-hidden:focus:not(:focus-visible) { outline: none; }

#et-hidden .pupil { fill: currentColor; stroke: none; }

#et-hidden .fingertip { fill: none; stroke: currentColor; transition: fill 0.35s ease, stroke 0.35s ease, filter 0.35s ease; }

#et-hidden .egg-caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  fill: var(--glow);
  stroke: none;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
}

#et-hidden.found .fingertip {
  fill: var(--glow);
  stroke: var(--glow);
  filter: drop-shadow(0 0 7px rgba(var(--glow-rgb), 0.95));
}

#et-hidden.found .egg-caption { opacity: 1; }

.footer-lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem 2.4rem;
  max-width: 72rem;
  margin: 1.6rem auto 0;
  font-size: 0.86rem;
}

.footer-lines a { color: var(--moon); text-decoration: none; border-bottom: 1px solid var(--line-dark); }

.footer-lines a:hover { color: var(--glow); }

.footer-lines .fine { font-family: var(--font-display); font-size: 0.78rem; }

/* ============================================================
   Peek-a-boo + moon progress
   ============================================================ */

.peek {
  position: fixed;
  right: 0;
  bottom: 9vh;
  z-index: 30;
  width: clamp(120px, 17vw, 190px);
  transform: translateX(135%) rotate(-10deg);
  transform-origin: bottom right;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

/* after the first visit he never fully leaves: fingers stay at the edge */
.peek.rest {
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(86%) rotate(-8deg);
}

.peek.show {
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(34%) rotate(-14deg);
}

/* hover-capable devices only - touch taps must not latch a sticky :hover */
@media (hover: hover) {
  .peek.rest:hover { transform: translateX(34%) rotate(-14deg); }
}

.peek-bubble {
  position: absolute;
  top: -0.6rem;
  left: -1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px 999px 999px 4px;
  padding: 0.35em 0.95em;
  box-shadow: 0 10px 24px -12px rgba(var(--ink-rgb), 0.6);
}

.moon-progress {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 25;
  color: var(--ink-soft);
  opacity: 0.75;
  transition: color 0.4s ease;
  pointer-events: none;
}

.moon-progress.on-night { color: var(--moon-soft); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 56rem) {
  /* minmax(0,...) everywhere - WebKit derives auto minimums from
     media aspect-ratios and overflows bare 1fr tracks */
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); }

  .ch-media { margin-top: 0.6rem; }

  .gal-grid { --gal-h: clamp(11rem, 34vw, 17rem); }
  .gal-grid figure:nth-child(3n + 1) { grid-column: 1 / -1; }
  .gal-grid figure:nth-child(3n + 1) .gal-media { height: clamp(13rem, 46vw, 22rem); }
  .gal-grid figure:nth-child(3n + 2) { grid-column: 1 / span 6; }
  .gal-grid figure:nth-child(3n) { grid-column: 7 / span 6; }

  .hero-scene { height: auto; width: 140vw; left: 50%; top: 4.5rem; }

  .steps { margin-left: 12vw; }
  .steps-r { margin-right: 12vw; }
}

@media (max-width: 44rem) {
  .nav-toggle,
  .site-nav .nav-close {
    display: inline-flex;
    background: none;
    border: 2px solid rgba(var(--moon-rgb), 0.45);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.82rem;
    color: inherit;
    padding: 0.45em 1.1em;
    cursor: pointer;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--night);
    color: var(--moon);
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem var(--pad) max(1.5rem, env(safe-area-inset-bottom));
    display: none;
    z-index: 60;
    overflow-y: auto;
  }

  .site-nav.is-open { display: flex; }

  .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-top .wordmark { font-size: 1.2rem; }

  .nav-links {
    flex-direction: column;
    gap: 0;
    font-size: 1.5rem;
  }

  .nav-links a {
    padding: 0.95rem 0;
    border-bottom: 2px solid var(--line-dark);
    background: none;
  }

  .nav-links a:first-child { border-top: 2px solid var(--line-dark); }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav.is-open .nav-links a { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .site-nav.is-open .nav-links a:nth-child(2) { animation-delay: 0.06s; }
    .site-nav.is-open .nav-links a:nth-child(3) { animation-delay: 0.12s; }
    .site-nav.is-open .nav-links a:nth-child(4) { animation-delay: 0.18s; }
    .site-nav.is-open .nav-links a:nth-child(5) { animation-delay: 0.24s; }
    .site-nav.is-open .nav-links a:nth-child(6) { animation-delay: 0.3s; }
  }

  .nav-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: var(--moon-soft);
  }

  .nav-foot a { color: var(--moon); text-decoration: none; }

  /* anchor the dome to the left screen edge so E.T. stays in view */
  .hero-scene { width: 160vw; left: 0; transform: translateX(-44vw); top: 3.6rem; opacity: 0.85; }

  .hero-copy { padding-bottom: 2.2rem; }

  .ph.small { width: 62%; margin-top: -12%; }

  .board-wrap::before { left: 12%; }
  .board-wrap::after { right: 12%; }

  .peek { bottom: 6vh; }

  /* thinner resting sliver on touch screens - never in the way of taps */
  .peek.rest { transform: translateX(94%) rotate(-8deg); }

  .contact-grid .btn { display: block; text-align: center; }
}


/* ============================================================
   /listek/ - the literal Canva menu as a route
   ============================================================ */

.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;
}

.listek-body {
  background:
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(var(--ink-rgb), 0.028) 0 1px, transparent 1px 26px),
    var(--paper);
}

.listek-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--night-rgb), 0.97);
  color: var(--moon);
  padding: 0.7rem var(--pad) 0.6rem;
  display: grid;
  gap: 0.45rem;
  box-shadow: 0 1px 0 var(--line-dark);
}

.listek-back {
  font-size: 1.15rem;
  color: var(--moon);
  justify-self: start;
}

.listek-jump {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.15rem;
}

.listek-jump a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--moon-soft);
  text-decoration: none;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}

.listek-jump a:hover { color: var(--moon); background: var(--night-2); }

.listek-jump a.is-active { color: var(--night); background: var(--glow); }

.listek-main {
  max-width: 47rem;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vh, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem;
  display: grid;
  gap: clamp(1.5rem, 3.5vh, 2.6rem);
}

.listek-page { scroll-margin-top: 7.6rem; }

.anchor-alias { display: block; scroll-margin-top: 7.6rem; }

.listek-page figure { margin: 0; }

.listek-page img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 70px -34px rgba(var(--ink-rgb), 0.5);
}

.listek-notes {
  border-top: 2px solid var(--line);
  padding-top: 1.3rem;
  color: var(--ink-soft);
  font-size: 0.94em;
}

.listek-dph {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}

.listek-legend { margin-top: 0.7rem; }

.listek-legend summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}

.listek-legend ul {
  list-style: none;
  columns: 2;
  column-gap: 2.2rem;
  margin-top: 0.6rem;
  line-height: 1.9;
}

.listek-note-line { margin-top: 0.9rem; }

.listek-foot {
  background: var(--night);
  color: var(--moon-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.3rem var(--pad) 1.5rem;
  font-size: 0.86rem;
}

.listek-foot a { color: var(--moon); text-decoration: none; border-bottom: 1px solid var(--line-dark); }

@media (max-width: 44rem) {
  .listek-legend ul { columns: 1; }
}

/* homepage: the paper-card CTA into the listek */
.listek-cta {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 12px 12px 12px 4px;
  padding: 0.5em 1.2em;
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(var(--ink-rgb), 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.listek-cta:hover {
  transform: rotate(-1.2deg) translateY(-2px);
  box-shadow: 4px 5px 0 rgba(var(--ink-rgb), 0.22);
}

.night .listek-cta {
  color: var(--moon);
  border-color: var(--moon-soft);
  background: var(--night-2);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

/* ============================================================
   kontakt contact form (VE /public/forms)
   ============================================================ */

.contact-form-wrap {
  margin-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(1.6rem, 3vh, 2.2rem);
}

.contact-form-wrap h3 { color: var(--glow); margin-bottom: 1rem; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.4rem;
  max-width: 44rem;
}

.cf-row { display: grid; gap: 0.35rem; }

.cf-row-full { grid-column: 1 / -1; }

.contact-form label { color: var(--moon-soft); font-size: 0.92rem; }

.contact-form input,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: var(--moon);
  padding: 0.6em 0.75em;
  font: inherit;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 1px;
}

.contact-form button { grid-column: 1 / -1; justify-self: start; }

.cf-turnstile { grid-column: 1 / -1; }

.cf-turnstile:empty { display: none; }

.cf-status { grid-column: 1 / -1; color: var(--glow); }

@media (max-width: 44rem) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Animation-delay steps. These were inline style="--i:N" attributes;
   they moved here so a strict CSP (style-src 'self') has nothing to
   block. Purely presentational - see the .dr/.fd/.bulb/.fly rules.
   ============================================================ */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i13{--i:13}.i14{--i:14}.i15{--i:15}.i16{--i:16}.i17{--i:17}.i18{--i:18}.i19{--i:19}.i20{--i:20}.i21{--i:21}.i22{--i:22}
.b0{--b:0}.b1{--b:1}.b2{--b:2}.b3{--b:3}.b4{--b:4}.b5{--b:5}.b6{--b:6}.b7{--b:7}.b8{--b:8}
.f0{--f:0}.f1{--f:1}.f2{--f:2}.f3{--f:3}.f4{--f:4}.f5{--f:5}.f6{--f:6}

/* ---------- keep this stylesheet out of the editor ---------- */
/* Veldon Edit renders its panel into THIS document, so the bare `h1, h2, h3`
   rule above reaches into it and drew the editor's own card headings in the
   display face at the site's heading size. The panel is VE's surface, not part
   of the page: hand its typography back. Scoped rather than narrowing the
   element selectors, which would raise their specificity against the rest of
   the site. */
.veldon-overlay-panel :is(h1, h2, h3) {
  /* family INHERITS (the panel sets its own UI face); size REVERTS, because VE
     declares none and expects the user-agent heading scale -- inheriting would
     flatten a card heading to body size. */
  font-family: inherit;
  font-size: revert;
  line-height: 1.3;
}

/* ---------- the gallery module, as the editor projects it ---------- */
/* While editing, Veldon Edit replaces the baked collage with its own markup
   (<figure class="ve-portfolio-collections__item"><img ...>) and ships no
   stylesheet for it, so without this the gallery collapses to a column of
   full-bleed images mid-edit. Same grid, same spans, same silhouettes as
   .gal-grid, so the section does not lurch when the panel opens. */
.ve-portfolio-collections__title { display: none; }

.ve-portfolio-collections__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.6vw, 2.6rem) clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  --gal-h: clamp(15rem, 28vw, 22rem);
}

.ve-portfolio-collections__item { margin: 0; min-width: 0; }
.ve-portfolio-collections__item:nth-child(4n + 1) { grid-column: 1 / span 7; }
.ve-portfolio-collections__item:nth-child(4n + 2) { grid-column: 8 / span 5; }
.ve-portfolio-collections__item:nth-child(4n + 3) { grid-column: 1 / span 5; }
.ve-portfolio-collections__item:nth-child(4n) { grid-column: 6 / span 7; }

.ve-portfolio-collections__image {
  display: block;
  width: 100%;
  height: var(--gal-h);
  object-fit: cover;
  background: var(--night-2);
  border-radius: var(--radius);
}

.ve-portfolio-collections__item:nth-child(4n + 2) .ve-portfolio-collections__image,
.ve-portfolio-collections__item:nth-child(4n + 3) .ve-portfolio-collections__image {
  border-radius: 46% 46% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius);
}