:root {
  --brand-height: 100px;
  --navbar-padding: 0.5rem;
  --navbar-height: calc(var(--brand-height) + 2 * var(--navbar-padding));
  --instax-border-width: 1.2rem;

  --primary-color: #ff7800;
  --secondary-color: #0facff;
  --hover-color: #6dd7ff;
  --shadow-color: rgb(33, 33, 33);
  --grunge-color: #4a2f1c;
  --grunge-panel-color: rgba(74, 47, 28, 0.9);
  --muted-ink: #6b5a4a;
  --heading-ink: rgb(114, 61, 22);

  /* Body text, and every heading that doesn't ask for its own colour. Bootstrap
     supplies this one; handing it our own value keeps its tables and form
     controls in step with the rest. */
  --body-ink: #2e2a28;
  --bs-body-color: var(--body-ink);

  /* Global grunge dimmer: 1 = full, 0 = off. Multiplies every photo's
     per-photo strength, so this one knob weakens the effect everywhere. */
  --grunge-intensity: 0.9;

  --panel-blur: 1px;
  --panel-texture: url('/static/images/textures/panel-texture.png');
  --panel-texture-strength: 0.3;
}

body {
  /* settings on body instead of html because lightbox is using body too*/
  background-color: #111;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* The counting pixel sits after the footer. Left in the flow it would open a
   line box below it and leave a strip of page to scroll into; the image still
   loads from a box of no height. */
.toplist {
  display: block;
  height: 0;
  overflow: hidden;
}

a:hover,
a:focus {
  color: var(--hover-color);
}

h1,
.h1 {
  font-family: 'Riffic';
  font-size: clamp(3.5rem, 7vw, 6rem);
  color: var(--primary-color);
}

h2,
.h2 {
  font-family: 'Riffic';
  font-size: clamp(2.4rem, 4vw, 4rem);
}

h3,
.h3 {
  font-family: 'Riffic';
  font-size: clamp(1.9rem, 3vw, 3.2rem);
}

h4,
.h4 {
  font-family: 'Riffic';
  font-size: clamp(1.5rem, 2vw, 2.4rem);
}

p {
  margin-bottom: 2rem;
}

a {
  color: var(--secondary-color);
  text-decoration: none;
}

.container {
  position: relative; /* fixme text disappear */
}

.fit-center {
  width: fit-content;
  margin: 0 auto;
}

.vertical-center {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.row-gap {
  row-gap: 1rem;
}

.logo {
  height: 4rem;
}

.hero-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding-top: var(--navbar-height);

  background-image: url('/static/images/backgrounds/background.jpg');
  background-size: cover;
  background-position: center;

  isolation: isolate;
}

.hero-background.img-2 {
  background-image: url('/static/images/backgrounds/background_2.jpg');
}

.hero-background.img-3 {
  background-image: url('/static/images/backgrounds/background_3.jpg');
}

.hero-background.img-tutu {
  background-image: url('/static/images/backgrounds/background_tutu.jpg');
}

.hero-background.img-tutu::before {
  background-color: transparent;
}

.landing-logo {
  margin-top: -45px;
}

.hero-block {
  min-height: 4rem;
  height: auto;
  display: grid;
  place-content: end center;
  color: ivory;
  text-align: center;
  margin-top: clamp(2rem, 2vh, 2rem);
}

.hero-block p {
  margin-bottom: 0;
}

.interactive-gallery,
.text-container {
  position: relative;
  background-color: rgba(255, 255, 240, 0.825);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 45px rgba(0, 0, 0, 0.1);
}

.interactive-gallery {
  overflow: hidden;
  padding: 1rem;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.text-container {
  overflow: visible;
  padding: 2rem;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 3rem;
}

.interactive-gallery::before,
.text-container::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: var(--grunge-panel-color, var(--grunge-color));
  -webkit-mask-image: var(--panel-texture);
  mask-image: var(--panel-texture);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-size: auto;
  mask-size: auto;
  opacity: var(--panel-texture-strength);
  pointer-events: none;
}

.interactive-gallery > *,
.text-container > *,
.footer > * {
  position: relative;
  z-index: 1;
}

.interactive-gallery.has-preview .photo-grid .photo.filter-preview {
  translate: 0 -30px;
  transition-delay: calc(var(--filterPreviewDelay) * 1ms);
}

.interactive-gallery.grunge-whole .instax-frame::after {
  z-index: 2;
}

.text-container p {
  text-align: justify;
}

/* Justified and hyphenated. The dictionary comes from `lang` on <html>; without it
   nothing is ever broken. */
.text-container.prose p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* A word to leave whole, for a bent spelling a hyphen would read as a typo in. */
.text-container.prose .whole {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.text-container .h4 {
  display: block;
  margin-bottom: 2rem;
}

.footer {
  position: relative;
  overflow: hidden;
  font-family: 'Riffic';
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
  color: white;
  background-color: rgba(255, 255, 240, 0.219);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}

.footer .container {
  display: grid;
  place-items: start;
}

.navbar {
  z-index: 1000;
  font-size: 1.5rem;
}

.navbar .navbar-brand .navicon {
  height: var(--brand-height);
}

.navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
}

.navbar-toggler-icon {
  background-image: url('/static/images/icons/hamburger-icon.svg');
}

.photo-reel {
  margin-top: clamp(1.5rem, 4vh, 4rem);
}

.photo-reel .instax-frame {
  width: 98%;
  animation-delay: var(--delay);
  transition:
    scale 0.1s ease-in-out,
    translate 0.25s ease-out;
}

.photo-reel .photo:nth-child(1) {
  --delay: 3.2s;
  z-index: 400;
}

.photo-reel .photo:nth-child(2) {
  margin-top: 1rem;
  --delay: 4.2s;
  z-index: 500;
}

.photo-reel .photo:nth-child(3) {
  --delay: 3.7s;
  z-index: 400;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
  justify-content: center;
}

.photo-grid {
  row-gap: 1rem;
  text-align: center;
  user-select: none;
}

.photo-grid h2 {
  --line-thickness: 0.8rem;
  --line-gap: 2rem;

  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--line-gap);
  padding-top: 3rem;
}

.photo-grid h2::before,
.photo-grid h2::after {
  content: '';
  display: block;
  flex: 1;
  background-color: var(--secondary-color);
  height: var(--line-thickness);
  border-radius: 10rem;
}

.photo-grid img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.photo-grid .photo {
  display: inline-block;
  margin: 0.5rem 0;
  height: 13rem;
  max-height: 30vw;
  rotate: calc(var(--tilt) * 5deg);
  transition:
    scale 0.1s ease-in-out,
    translate 0.25s ease-out;
}

.photo-grid .photo.hidden {
  display: none;
}

.photo-grid .photo:hover {
  scale: 110%;
}

.photo-reel .instax-frame:hover {
  scale: 105%;
}

/* Gallery grid: photos are height-driven (uniform row height). */
.photo-grid .instax-frame {
  --instax-border-width: 0.8rem;
  height: 100%;
}

/* Worn-instax frame: ivory paper board with a grunge overlay. */
.instax-frame {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: var(--instax-border-width) var(--instax-border-width)
    calc(2 * var(--instax-border-width)) var(--instax-border-width);
  background-color: ivory;
  border-radius: 2px;
  box-shadow: 5px 10px 15px var(--shadow-color);
  /* keep the multiply blend contained to this frame */
  isolation: isolate;
  /* clip the (scaled) grunge overlay to the frame edges */
  overflow: hidden;
}

.instax-frame .instax-photo {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.photo-grid .instax-photo {
  height: 100%;
  width: auto;
}

/* Landing reel: photos are width-driven inside the Bootstrap columns. */
.photo-reel .instax-photo {
  width: 100%;
  height: auto;
}

/* Brown scratches: the texture is used as a luminance mask (white marks ->
   visible), filled with brown and multiplied on. Shared by the frame (::after)
   and the lightbox overlay (.lb-grunge-paint) so both stay identical.
   Texture and a safe `grow` come from the defaults, so a plain
   `<span class="instax-frame"><img class="instax-photo"></span>` just works. */
.instax-frame::after,
.lb-grunge-paint {
  position: absolute;
  /* Grow the box (instead of transform: scale) so the mask is rasterized
     straight from the full-res texture at this size -> stays sharp and uses
     more of the file. The extra area also covers corners under rotation.
     Longhands (not `inset:`) for older mobile browser support. */
  top: calc(-1 * var(--grunge-grow, 45%));
  right: calc(-1 * var(--grunge-grow, 45%));
  bottom: calc(-1 * var(--grunge-grow, 45%));
  left: calc(-1 * var(--grunge-grow, 45%));
  background-color: var(--grunge-color, #4a2f1c);
  opacity: calc(var(--grunge-strength, 0.7) * var(--grunge-intensity, 1));
  mix-blend-mode: multiply;

  /* Alpha-mask PNG (alpha = scratches): a plain alpha mask, so no
     `mask-mode: luminance` needed -> works in every browser incl. old mobile. */
  --grunge-texture-default: url('/static/images/textures/grunge-paper-1.png');
  -webkit-mask-image: var(--grunge-texture, var(--grunge-texture-default));
  mask-image: var(--grunge-texture, var(--grunge-texture-default));
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* only rotate/flip/offset here (no zoom) so nothing gets upscaled/blurred */
  transform: translate(var(--grunge-x, 0), var(--grunge-y, 0))
    rotate(var(--grunge-rotate, 0deg))
    scale(var(--grunge-flip-x, 1), var(--grunge-flip-y, 1));
}

/* Frame scratches sit behind the photo (z-index 0), so they show only on the
   ivory frame; .grunge-whole lifts them above the photo. */
.instax-frame::after {
  content: '';
  z-index: 0;
  border-radius: 2px;
  pointer-events: none;
}

/* Lightbox overlay: clips the scaled paint layer to the enlarged photo edges.
   Positioned over .lb-image by JS. */
.lb-grunge-overlay {
  position: absolute;
  pointer-events: none;
  border-radius: 2px;
  z-index: 1;
  display: none;
  overflow: hidden;
}

.lightbox .lb-image {
  border-width: 20px;
  border-bottom-width: 50px;
  border-color: ivory;
}

.lb-data .lb-caption {
  /* add ellipsis in lightbox2 caption */
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  padding-bottom: 2px;
}

.lb-data .lb-details {
  top: -50px;
  margin-left: 16px;
  color: rgb(22, 22, 22);
  z-index: 10001;
  position: relative;
}

.contact-links {
  display: grid;
  row-gap: 1rem;
  place-content: start;
}

.contact-links a {
  font-size: 1.25rem;
  font-weight: 500;
}

.avatar {
  width: 85%;
  border: 12px ivory solid;
  transform: rotate(3deg);
  transform-origin: center;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.18);
}

.btn-lg {
  margin-top: 4vw;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  padding: 5% 13%;
  font-size: 2.5rem;
}

.vulpy-sticker {
  width: 135%;
  margin-left: -45px;
  margin-top: 0px;
  transform: rotate(8deg);
}

/* ---------------------------------------------------------------- Tales --- */

.post-list {
  display: grid;
  row-gap: 2rem;
}

/* Card on the tales index. Reuses the .text-container paper panel, laid out
   sideways: cover photo on the left, text on the right. */
.post-card {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  color: inherit;
  transition: scale 0.15s ease-in-out;
}

.post-card:hover,
.post-card:focus {
  color: inherit;
  scale: 101%;
}

.post-card-photo {
  flex: 0 0 clamp(8rem, 20vw, 13rem);
  text-align: center;
}

.post-card-photo .instax-frame {
  --instax-border-width: 0.6rem;
  width: 100%;
  rotate: -2deg;
}

.post-card-body {
  flex: 1 1 auto;
}

.post-card h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  color: var(--heading-ink);
  margin-bottom: 0.25rem;
}

.post-card p {
  text-align: left;
  margin-bottom: 0.5rem;
}

/* "Tales" in the big heading slot, doubling as the way back to the list. */
.post-section {
  display: inline-block;
  color: var(--primary-color);
}

.post-section:hover,
.post-section:focus {
  color: var(--hover-color);
}

/* Title and date belong together at the top of the post itself. */
.post-header h1 {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  margin-bottom: 0.25rem;
}

.post-date {
  font-family: 'Riffic';
  color: var(--muted-ink);
  font-size: 0.9rem;
}

/* Tables arrive from Markdown bare: Bootstrap only dresses up the ones marked
   with .table, and Markdown has no way to add a class. */
/* Squeezes for as long as it can, then scrolls inside the panel rather than
   pushing the page sideways. */
.post-scroll {
  overflow-x: auto;
  margin-bottom: 2rem;
}

/* A photo on its own line in the Markdown. Two limits, and whichever bites
   first wins: a landscape photo runs out of width, a portrait one runs out of
   height. Without the second limit a tall photo at full width becomes a screen
   and a half of fox. */
.post-photo {
  --photo-max-width: 34rem;
  --photo-max-height: 60vh;

  margin: 2rem auto;
  max-width: min(100%, var(--photo-max-width));
  text-align: center;
  rotate: var(--photo-tilt, 0deg);
}

/* The frame hugs the photo instead of filling the column, so when the height
   limit shrinks a portrait photo, the ivory border shrinks with it. */
.post-photo .instax-frame {
  width: auto;
  max-width: 100%;
  transition: scale 0.1s ease-in-out;
}

.post-photo .instax-frame .instax-photo,
.post-photo-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--photo-max-height);
}

/* A photo asked for without `?instax`: no ivory board, no wear, no lean. */
.post-photo-img {
  display: block;
  margin: 0 auto;
}

.post-photo .instax-frame:hover {
  scale: 103%;
}

.post-photo figcaption,
.post-photo-caption {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted-ink);
  margin-top: 0.75rem;
}

/* A photo written next to text in the same paragraph: smaller, pushed to one
   side, and the text runs around it. Which side comes from where the photo
   sits in the Markdown. */
.post-photo-left,
.post-photo-right {
  --photo-max-width: 18rem;

  display: block;
  margin: 0.5rem 0 1rem;
}

.post-photo-left {
  float: left;
  margin-right: 1.5rem;
}

.post-photo-right {
  float: right;
  margin-left: 1.5rem;
}

/* Several photos in one paragraph line up side by side. */
.post-photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.post-photos .post-photo {
  flex: 1 1 14rem;
  margin: 0;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
  font-family: 'Riffic';
}

/* Grid cells refuse to shrink below their content unless told to, and without
   shrinking the titles below there is nothing for the ellipsis to do. */
.post-nav > * {
  min-width: 0;
}

.post-nav-all {
  text-align: center;
}

/* Centred, not baseline: a box with `overflow: hidden` stops sharing its text
   baseline, which would drop the arrow out of line with the title. */
.post-nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.post-nav-newer .post-nav-link {
  justify-content: flex-start;
}

.post-nav-older .post-nav-link {
  justify-content: flex-end;
}

.post-nav-arrow {
  flex: 0 0 auto;
}

/* The title is the part that gives way as the window narrows. */
.post-nav-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Markdown has no syntax for colour, so a tale reaches for a <span> and one of
   these - that keeps the palette in the stylesheet instead of in the text. */
.post .tint-orange {
  color: var(--primary-color);
}

.post .tint-blue {
  color: var(--secondary-color);
}

.post table {
  width: 100%;
}

.post th,
.post td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(74, 47, 28, 0.25);
}

.post th {
  font-family: 'Riffic';
  text-align: left;
  color: var(--heading-ink);
}

/* Post itself */

.post h1,
.post h2,
.post h3,
.post h4 {
  color: var(--heading-ink);
}

.post h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  margin-top: 2rem;
}

.post h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  margin-top: 1.5rem;
}

.post h4 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  margin-top: 1rem;
}

.post > p:last-of-type {
  margin-bottom: 0;
}

/* Short blocks set in columns. A width, not a count, so the browser fits in as
   many as it can and drops to one on a phone without being asked. */
.post .cols {
  columns: 18rem;
  column-gap: 2.5rem;
  column-fill: balance;
  clear: both;
}

.post .cols li,
.post .cols p {
  break-inside: avoid;
}

.post .cols > :first-child {
  margin-top: 0;
}

/* Stop a floated photo from reaching past its own section. */
.post h2,
.post h3,
.post h4,
.post hr,
.post-photos {
  clear: both;
}


@keyframes toony-wobble {
  0% {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 0;
  }

  33% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-7deg) scale(0.7, 1);
    transform: translate3d(-25%, 0, 0) rotate(-7deg) scale(0.7, 1);
    opacity: 1;
  }

  66% {
    -webkit-transform: translate3d(2%, 0, 0) rotate(3deg) scale(1.1, 1);
    transform: translate3d(2%, 0, 0) rotate(3deg) scale(1.1, 1);
  }

  to {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

/* Was animate.css's base rule; kept after the library was dropped, since
   toony-wobble only names the animation and needs a duration from somewhere.
   spots.js also asks for `animate__bounceIn` - if the spots are ever switched
   back on, that animation's keyframes have to be copied in here too. */
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__toony-wobble {
  -webkit-animation-name: toony-wobble;
  animation-name: toony-wobble;
}

@media (max-width: 991px) {
  /* large */
  .lightbox .lb-image {
    border-width: 0px;
    border-bottom-width: 50px;
    width: 100%;
    height: auto;
  }

  .lb-data .lb-caption {
    padding-top: 8px;
  }

  .lb-dataContainer {
    padding: 0; /* Odstranění paddingu okolo obrázku */
  }

  .lb-outerContainer {
    padding: 0;
    max-width: 100vw;
  }

  .lightboxOverlay {
    opacity: 0.92;
  }

  .vulpy-sticker {
    width: 130%;
    margin-left: -15%;
    margin-top: -30px;
    transform: rotate(-3deg);
  }

  .about-img {
    margin-top: -30px;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .photo-reel .instax-frame {
    width: 80%;
  }

  .photo-reel .photo:nth-child(2) {
    order: -1;
    --delay: 3.7s;
    z-index: 500;
  }

  .photo-reel .photo:nth-child(3) {
    --delay: 4.2s;
    z-index: 600;
  }

  .hero-block p a {
    display: block;
    margin-top: 0.75rem;
  }

  .contact-links {
    display: grid;
    place-content: center;
  }

  .photo-grid .photo {
    height: 10rem;
    max-height: 30vw;
  }

  .landing-logo {
    margin-top: 0px;
  }

  /* A third of this is too narrow to read a title in, so the three stack up
     and each one gets the full width. */
  .post-nav {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .post-nav-slot:empty {
    display: none;
  }

  .post-nav-newer .post-nav-link,
  .post-nav-older .post-nav-link {
    justify-content: center;
  }
}

@media (max-width: 575px) {
  /* A phone column is too narrow to run text beside a photo, so the floats
     give up and the photo goes back to standing on its own. */
  .post-photo-left,
  .post-photo-right {
    --photo-max-width: 34rem;

    float: none;
    margin: 2rem auto;
  }

  /* Stacked the other way up, so the paragraph is read before its photo. The
     photo has to stay first in the markup for the float to work on wider
     screens, so the order is turned around here instead. */
  .post-photo-para {
    display: flex;
    flex-direction: column-reverse;
  }

  .post-card {
    flex-direction: column-reverse;
    text-align: center;
  }

  .post-card p {
    text-align: left;
  }
}

@media (max-width: 475px) {
  .photo-grid .instax-frame {
    --instax-border-width: 0.6rem;
  }

  .photo-grid h2 {
    --line-thickness: 0.5rem;
    --line-gap: 1rem;
  }
}