/* 
@media (pointer: coarse) {
  .grid {
    display: none !important;
  }
} */

@media (pointer: coarse) {
  :root {
    --mobile_panel_top_margin: calc(var(--mobile_panel_height)/2);
    --mobile_panel_height: 4vh;
    /* --mobile_panel_font_size: calc(var(--mobile_panel_height)/2.2); */
    --mobile_panel_font_size: calc(var(--mobile_panel_height)/2.5);
    --mobile_panel_button_padding: 2vw;
    --logo_aspect_ratio: 552 / 360;
    --logo_width: calc(var(--mobile_panel_height) * 2 * var(--logo_aspect_ratio));

    --mobile_col_inner: 1fr;
    --mobile_col_outer: 3fr;

    --mobile_modal_title_height: 2.5svh;
    --button_close_size: 25px;
    /* --button_close_roundness: calc(var(--button_close_size) * 0.2); */

    --mobile_panel_border_width: 0.5vh;
    --mobile_margins: 10px;

    --glow-filter:
      drop-shadow(0 0 1px var(--col2));

    --tile_gap: 5px;
    --tile_borderradius: 10px;
    --lightbox_border_radius: 18px;
    --text_button_size: 16px;
    --text_base_size: 18px;
    --text_size_tag: 15px;

    --backdrop_opacity: 0.92;

    --wm_tile_size: 20;

    /* MOBILE */
    --user-brightness: 1.15;
    --mobile_bling_duration: 1.5s;
    --mobile_bling_scale_start: 0.5;
    --mobile_bling_scale_end: 3;
    --mobile_bling_opacity_start: 1;
    --mobile-bling-scale: 2;

    --mobile-tap-interval: 2s;
    --mobile-tap-opacity-min: 0.5;
    --mobile-tap-opacity-max: 1;

    --mobile-title-font-size: 22px;

    --mobile-background-size: auto 170svh;
    --mobile-background-brightness_main: 0.8;
    --mobile-background-brightness_modal: 0.8;
  }

  /* HIDE DESKTOP RELATED */
  .brand-text,
  .logo,
  .side-panel,
  .button_language,
  .side-bottom {
    display: none !important;
  }

  html {
    filter: brightness(var(--user-brightness)) contrast(0.98);
  }

  html,
  body {
    overflow-x: hidden;
    min-height: 100%;
  }

  html.modal-open,
  body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
    /* position: fixed;
    width: 100%; */
  }

  @media (pointer: coarse) {
    body {
      background-size: cover;
      background-position: center top;
      background-image: none !important;
      overflow-x: hidden;
      overflow-y: auto;
      touch-action: pan-y;
    }

    body::before,
    body::after {
      content: none !important;
      display: none !important;
      background: none !important;
      filter: none !important;
    }

    .lightbox {
      touch-action: none;
    }

    .lightbox-image {
      touch-action: none;
      cursor: grab;
    }

    .mobile-menu {
      display: default !important;
    }
  }


  /* ====================================================================================================
   MOBILE MENU
   ==================================================================================================== */

  @media (pointer: coarse) {

    .mobile_gradient_top {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background:
        linear-gradient(to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.9) 5%,
          rgba(0, 0, 0, 0) 10%);
    }

    .mobile_gradient_bottom {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 666;
      background:
        linear-gradient(to top,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.3) 25%,
          rgba(0, 0, 0, 0.0) 55%);
    }

    .mobile-menu::before {
      content: "";
      position: fixed;
      inset: 0;
      border-top: var(--mobile_panel_border_width) solid transparent;
      border-bottom: var(--mobile_panel_border_width) solid transparent;
      border-image: var(--border-image);
      border-image-slice: var(--border-image-slice);
      pointer-events: none;
      z-index: 10;
    }

    .mobile-menu {
      position: fixed;
      width: 100vw;
      height: var(--mobile_panel_height);
      top: calc(var(--mobile_panel_height)/2);
      z-index: 20;
      border: none;

      display: grid;
      /* grid-template-columns: var(--mobile_col_outer) var(--mobile_col_inner) var(--logo_width) var(--mobile_col_inner) var(--mobile_col_outer); */
      grid-template-columns: var(--mobile_col_outer) var(--logo_width) var(--mobile_col_outer);
      align-items: stretch;

      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(1px);
      z-index: 2;
      /* transform-origin: 0% 0%;
      transform: rotate(90deg) translateX(-100%); */
    }

    .mobile-button {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      outline: none;
      margin: 0;
      padding: 0;

      display: flex;
      align-items: center;
      justify-content: center;

      font-family: "MainFont", serif;
      font-size: var(--mobile_panel_font_size);
      letter-spacing: var(--letter_spacing_main);
      color: var(--color_text_main);
      text-shadow: var(--shadow-text);
      filter: var(--glow-filter);

      background: rgba(0, 0, 0, 0);
      transition:
        background var(--transition-time),
        color var(--transition-time),
        filter var(--transition-time),
        opacity var(--transition-time),
        transform var(--transition-time);

      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;

      position: relative;
      z-index: 1;
    }

    /* hover / active */
    .mobile-button:hover,
    .mobile-button:focus-visible {
      color: var(--color_text_accent);
    }

    /* ACTIVE TAG  */
    /* .mobile-button.is-active {
      color: var(--color_text_bright);
      filter: var(--glow-filter-strong);
      transform: scale(1.4) translateY(-0.04em);
      transition: transform 0.1s ease, filter 0.1s ease, color 0.1s ease;
    } */


    .mobile-settings-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      pointer-events: none;
    }

    .mobile-settings-modal.is-open {
      pointer-events: auto;
    }

    .mobile-settings-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      margin: 0;
      background: rgba(0, 0, 0, 0.45);
      opacity: 0;
      transition: opacity 0.22s ease;
    }

    .mobile-settings-modal.is-open .mobile-settings-backdrop {
      opacity: 1;
    }

    .mobile-settings-sheet {
      position: relative;
      top: calc(var(--mobile_panel_height)/2);
      left: 50%;
      width: 80vw;
      max-width: 560px;
      max-height: 100svh;
      transform: translate(-50%, -110%);
      transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.2, 1);
      overflow: hidden;

      border: var(--mobile_panel_border_width) solid transparent;
      border-image: var(--border-image);
      border-image-slice: var(--border-image-slice);
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .mobile-settings-modal.is-open .mobile-settings-sheet {
      transform: translate(-50%, 0);
    }

    /* .mobile-settings-header {
      background-image: var(--logosvg);
      background-size: 270px auto;
      height: var(--modal_title_height);
      background-position: center;
      background-repeat: no-repeat;
      background-color: var(--modal_title_background_color);

      border-radius: 10px;
      border-bottom: 3px solid transparent;
      border-image: var(--border-image);
      border-image-slice: var(--border-image-slice);

      font-size: var(--text_modal_header_size);
      letter-spacing: var(--letter_spacing_header);
      color: var(--color_text_accent);
      text-align: center;
      text-shadow: var(--shadow-text);

      margin-top: var(--about_topmargin);
      padding-top: 4px;
      padding-bottom: 10px;

      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    } */

    /* .mobile-settings-close {
      width: 32px;
      height: 32px;
      border: 1px solid var(--col3-2);
      background: rgba(0, 0, 0, 0.35);
      color: var(--color_text_bright);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    } */

    .mobile-settings-scroll {
      overflow-y: auto;
      /* max-height: calc(50svh - 44px); */
      padding: 12px 14px 16px;
    }

    .mobile-settings-sheet .button_ui {
      width: 100%;
      min-height: 35px;
      padding: 0rem 0rem;
      font-size: var(--text_button_size);
      display: inline-flex;
      align-items: center;
      justify-content: center;

    }

    .mobile-settings-sheet .button_ui--mobile-settings {
      font-family: "RegularTextFont";
      font-size: 16px;
      letter-spacing: var(--letter_spacing_header);
    }

    .mobile-settings-sheet .button_ui.is-active,
    .mobile-settings-sheet .button_ui[aria-pressed="true"] {
      color: var(--color_text_accent);
    }

    .mobile-settings-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mobile-settings-label {
      align-self: center;
      font-family: "MainFont", serif;
      font-size: 14px;
      letter-spacing: 2px;
      color: var(--color_text_accent);
      text-shadow: var(--shadow-text);
    }

    /* .mobile-settings-tags {
      display: flex;
      flex-direction: column;
      gap: 8px;
    } */

    .mobile-settings-tags {
      width: 100%;
    }

    /* KLUCZ */
    .mobile-settings-tags .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 0;
    }

    /* opcjonalnie trochę większe hit area na mobile */
    .mobile-settings-tags .tag {
      padding: 10px 18px;
      font-size: 18px;
    }

    .mobile-settings-panel {
      position: relative;

      width: min(92vw, 420px);
      max-height: 90svh;

      display: flex;
      flex-direction: column;

      /* 🔥 klucz */
      height: auto;

      overflow: hidden;
    }

    .mobile-settings-content {
      display: flex;
      flex-direction: column;
      gap: 20px;

      overflow-y: auto;
      min-height: 0;
    }

    .mobile-settings-tag,
    .mobile-settings-action {
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 214, 150, 0.18);
      background: rgba(255, 255, 255, 0.03);
      color: var(--color_text_main);
      font-family: "RegularTextFont";
      font-size: 15px;
      letter-spacing: 1px;
      text-align: left;
      text-shadow: var(--shadow-text);
      cursor: pointer;
    }

    .mobile-settings-tag.is-active,
    .mobile-settings-action.is-active {
      color: var(--color_text_bright);
    }

    .mobile-settings-row--two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .mobile-settings-separator {
      height: 1px;
      margin: 14px 0;
      background: linear-gradient(to right,
          rgba(255, 214, 150, 0),
          rgba(255, 214, 150, 0.26),
          rgba(255, 214, 150, 0));
    }

    .mobile-settings-slider-wrap {
      display: flex;
      align-items: center;
    }

    .mobile-settings-slider {
      width: 100%;
    }

    .mobile-settings-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--color_text_main);
      font-family: "RegularTextFont";
      font-size: 15px;
      letter-spacing: 1px;
      text-shadow: var(--shadow-text);
    }

    .mobile-settings-toggle input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;

      width: 18px;
      height: 18px;

      border: 1px solid var(--col3-2);
      background: rgba(0, 0, 0, 0.6);

      display: inline-grid;
      place-content: center;

      cursor: pointer;
      position: relative;

      transition:
        background 0.15s ease,
        border 0.15s ease,
        box-shadow 0.15s ease;
    }

    .mobile-settings-toggle input[type="checkbox"]::before {
      content: "";
      width: 10px;
      height: 10px;

      transform: scale(0);
      transition: transform 0.12s ease;

      background: var(--col5);
      /* złoty */
      clip-path: polygon(14% 44%,
          0 65%,
          50% 100%,
          100% 16%,
          80% 0,
          43% 62%);
    }

    .mobile-settings-toggle input[type="checkbox"]:checked {
      background: rgba(149, 105, 50, 0.35);
      border-color: var(--col5);
      box-shadow: 0 0 6px rgba(255, 214, 150, 0.4);
    }

    .mobile-settings-toggle input[type="checkbox"]:checked::before {
      transform: scale(1);
    }

    .mobile-settings-toggle input[type="checkbox"]:active {
      transform: scale(0.9);
    }

    html.mobile-lite-ui .mobile-menu {
      backdrop-filter: none;
      background: rgba(0, 0, 0, 0.45);
    }

    html.mobile-lite-ui .mobile-settings-sheet {
      backdrop-filter: none;
    }

    html.mobile-lite-ui .mobile_gradient_top,
    html.mobile-lite-ui .mobile_gradient_bottom {
      display: none;
    }

    html.mobile-lite-ui .mobile-logo-bling {
      display: none;
    }

    html.mobile-lite-ui .tile::after {
      box-shadow: none;
    }

    /* ====================================================================================================
   SPECIFIC BUTTONS
   ==================================================================================================== */

    .mobile-button--about,
    .mobile-button--contact,
    .mobile-button--2d,
    .mobile-button--3d {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transform: translateY(-0.08em);
      transition: transform 0.1s ease, filter 0.1s ease, color 0.1s ease;
    }

    .mobile-button--about {
      display: flex;
    }

    .mobile-button--2d {
      justify-content: flex-end;
      padding-right: var(--mobile_panel_button_padding);
      font-family: "RegularTextFont";

    }

    .mobile-button--logo {
      position: relative;
      z-index: 666;
      filter: none;
    }

    .mobile-button--logo::before {
      /* z-index: 1; */
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: calc(var(--mobile_panel_height) * 2);
      width: var(--logo_width);

      background-image: var(--logosvg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;


      filter: var(--shadow-filter-strong) brightness(var(--logo-brightness));
      transition: filter 0.1s ease;
    }

    .mobile-button--logo.is-flashing::before {
      animation: mobileLogoFlash 1s ease-out forwards;
    }

    @keyframes mobileLogoFlash {
      0% {
        filter: var(--shadow-filter-strong) brightness(var(--logo-brightness));
      }

      10% {
        filter: var(--shadow-filter) brightness(6);
      }

      100% {
        filter: var(--shadow-filter-strong) brightness(var(--logo-brightness));
      }
    }


    .mobile-logo-bling {
      z-index: -1;
      position: absolute;

      width: calc(var(--mobile_panel_height) * var(--mobile-bling-scale));
      height: calc(var(--mobile_panel_height) * var(--mobile-bling-scale));
      transform: translate(-50%, -50%);

      pointer-events: none;
      /* mix-blend-mode: overlay; */
      opacity: 0;
      background-image: var(--logobling);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      animation: mobileLogoBling var(--mobile_bling_duration) linear infinite;
    }

    /* .mobile-logo-bling::after {
      z-index: 332;
      background-color: rgb(255, 0, 0);
    } */

    @keyframes mobileLogoBling {
      0% {
        opacity: 0;
        transform: scale(0.2);
      }

      25% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }

      75% {
        opacity: 0.2;
      }

      100% {
        opacity: 0;
        transform: scale(2.2);
      }
    }

    .mobile-tap-hint {
      position: absolute;
      left: 72%;
      top: 100%;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 1;
      font-family: "RegularTextFont";
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--color_text_main);
      text-shadow: var(--shadow-text);
      opacity: 1;
      animation: mobileTap var(--mobile_bling_duration) linear infinite;
    }

    @keyframes mobileTap {
      0% {
        opacity: var(--mobile-tap-opacity-min);
        transform: scale(1);
      }

      50% {
        opacity: var(--mobile-tap-opacity-max);
        transform: scale(1.1);
      }

      100% {
        opacity: var(--mobile-tap-opacity-min);
        transform: scale(1);
      }
    }

    .mobile-button--3d {
      justify-content: flex-start;
      padding-left: var(--mobile_panel_button_padding);
      font-family: "RegularTextFont";
      z-index: 100;
    }

    .mobile-button--contact {
      display: flex;
    }
  }













  /* ====================================================================================================
   TAGS
   ==================================================================================================== */

  .tag-cloud .tag {
    height: var(--mobile_panel_height);
    min-width: 74px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    border-width: 3px;
    border-radius: 15px;
    background: rgba(43, 33, 23, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    filter: var(--shadow-filter);
  }

  .tag-cloud .tag.active {
    background-color: var(--color_tagbg_active);
    color: var(--col5);
    filter: var(--glow-filter);
  }


  /* ====================================================================================================
   GALLERY GRID
   ==================================================================================================== */

  .wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
    padding: calc(var(--mobile_panel_top_margin) + var(--mobile_panel_height) + 16px) 12px 20px;
    box-sizing: border-box;
    overflow: visible;
    overscroll-behavior: none;
    filter: none;
    margin-top: calc(var(--mobile_panel_height)/2);
  }

  .wrapper::before {
    content: "";
    position: fixed;
    inset: -30px;
    z-index: -1;
    overscroll-behavior: none;
    background: var(--bg_image) left top / contain no-repeat;
    background-color: black;
    background-size: var(--mobile-background-size);
    /* filter: url(#wavy) brightness(var(--mobile-background-brightness_main)); */
    filter: brightness(var(--mobile-background-brightness_main));
    /* filter: url(#wavy); */
  }

  .wrapper::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image: var(--bg_noise);
    background-repeat: repeat;
    background-size: 512px 512px;
    opacity: 0.8;

    mix-blend-mode: soft-light;

    /* filter: url(#wavyNoise) blur(4px) contrast(1); */
    filter: blur(4px) contrast(1);

    /* animation: noisePan 40s linear infinite; */
    /* will-change: filter, background-position; */
  }



  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tile_gap);
    z-index: 1;
  }

  @media (pointer: coarse) {

    .grid,
    .wrapper {
      min-width: 0 !important;
    }
  }

  @media (min-width: 700px) {
    .grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 950px) {
    .grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 1200px) {
    .grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (min-width: 1450px) {
    .grid {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }

  .tile.tile--featured {
    grid-column: span 1;
    grid-row: span 1;
  }

  .tile {
    /* z-index: 666; */
    border-radius: var(--tile_borderradius);
    background: rgba(0, 0, 0, 0.92);
    filter: var(--shadow-filter);
  }

  .tile::after {
    box-shadow: inset 0 0 8px var(--color_tagbg_active), inset 0 0 20px var(--col3-1);
  }

  .tile:hover,
  .tile:hover img,
  .tag-cloud .tag:hover,
  .button_ui:hover {
    transform: none;
  }

  .tile img {
    filter: saturate(var(--tile_saturation)) contrast(1.05) brightness(1);
  }

  .tile .countBadge {
    right: 4px;
    bottom: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.88);
  }









  /* ====================================================================================================
   WINDOWS / MODALS
   ==================================================================================================== */

  .modal {
    align-items: flex-start;
    justify-content: center;
    overscroll-behavior: none;
    padding: 0;
  }

  .modal_backdrop,
  .modal_panel,
  .modal_panel--about,
  .about_scroll,
  .contact-form {
    touch-action: pan-y;
  }

  .modal_panel::before {
    content: "";
    position: fixed;
    overscroll-behavior: none;
    inset: -30px;
    z-index: -1;
    background: var(--bg_image) left top / contain no-repeat;
    background-color: black;
    background-size: var(--mobile-background-size);
    /* filter: url(#wavy) brightness(var(--mobile-background-brightness_modal)); */
    filter: brightness(var(--mobile-background-brightness_modal));
    /* filter: url(#wavy); */
  }

  .modal_panel {
    width: calc(100vw - 2 * var(--mobile_margins));
    height: calc(100svh - 2 * var(--mobile_margins));
    margin: var(--mobile_margins);
    border-width: var(--mobile_panel_border_width);

    box-sizing: border-box;
  }

  .modal_panel::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background-image: var(--bg_noise);
    background-repeat: repeat;
    background-size: 512px 512px;
    opacity: 1;

    mix-blend-mode: overlay;
    /* mix-blend-mode: multiply; */
    /* filter: url(#wavyNoise) blur(6px); */
    filter: blur(6px);


    /* animation: noisePan 40s linear infinite;
    will-change: filter, background-position; */
  }

  .modal_title {
    z-index: 999;
    position: relative;
    /* isolation: isolate; */
    height: var(--mobile_modal_title_height);
    background-color: var(--modal_title_background_color);
    background-size: 180px;
    font-size: 20px;
    flex-shrink: 0;
    border-bottom: var(--mobile_panel_border_width) solid;
  }


  .modal_close {
    width: var(--button_close_size);
    height: var(--button_close_size);
    position: absolute;
    border: 1px solid var(--col3-2);
    right: 10px;
    z-index: 999;

  }

  .contact-form {
    padding: 16px 14px 14px;
    gap: 10px;
    z-index: 333;
  }

  .contact-form_inputemail {
    height: 44px;
  }

  .contact-form_textarea {
    min-height: 170px;
  }

  .contactSuccessBox {
    width: min(100vw - 24px, 460px);
    padding: 18px 16px;
    border-width: 5px;
    font-size: 18px;
  }


  .about {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about_left {
    display: none;
  }

  .about_right {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .about_scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;

    margin: 0;
    padding: 0 15px 250px 15px;
  }

  .about_scroll::-webkit-scrollbar {
    display: none;
    /* width: 100px; */
  }

  .about_paragraph_title {
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0px 0px 0px;
    padding: 15px;
  }

  .about_block {
    font-size: 12.5pt;
    overflow: hidden;
    z-index: 666;
    position: relative;
  }

  .about_more--sticky {
    flex: 0 0 auto;
    /* display: block; */
    display: none !important;
    width: 100%;
    text-align: center;
    padding: 12px 0 25px;
    margin: 0;
    z-index: 666;

  }


  /* ====================================================================================================
   LIGHTBOX
   ==================================================================================================== */

  .lightboxCaption {
    position: absolute;
    align-self: center;
    bottom: 0;
    left: auto;
    right: auto;
    max-width: none;
    width: fit-content;
    padding: 8px 8px;
    /* backdrop-filter: none; */
    /* border-radius: 10px; */
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.5);
  }

  .lightboxTitleRow {
    align-self: center;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .lightboxDesc {
    align-self: center;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.1;
  }

  .lightboxYearRow {
    align-self: center;
    font-size: 10px;
  }

  .lightbox img,
  .lightbox video {
    max-width: 96vw;
    border-radius: var(--lightbox_border_radius);
  }

  .lightbox img {
    max-height: 88svh;
  }

  .lightbox video {
    height: 88svh;
    max-height: 88svh;
  }

  .closeHint {
    display: none;
  }


}



@media (pointer: coarse) {
  .lightbox.lightbox-rotate-media #lightboxImg {
    transform-origin: center center;
  }

  .lightbox.lightbox-rotate-media:not(.lightbox-zoomed) #lightboxImg {
    transform: rotate(90deg) scale(1);
    max-width: 88svh;
    max-height: 96vw;
  }

  .lightbox.lightbox-rotate-media .lightboxCaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}






/* ===== UX: prevent blue selection / tap highlight on UI ===== */
.tile,
.lightbox,
.tag-cloud .tag,
.button_ui,
.button_frameless,
.label,
.countBadge {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.about_scroll,
.about_scroll * {
  -webkit-user-select: text;
  user-select: text;
}

.contact-form_inputemail,
.contact-form_textarea {
  -webkit-user-select: text;
  user-select: text;
}