:root {
      /* DARK THEME (Default) */
      --bd: #1a0f0a;
      --bm: #2d1a0e;
      --bw: #3d2410;
      --bl: #5c3520;
      --bs: #4a2c1a;
      --or: #e85c1a;
      --ob: #ff6b22;
      --cr: #d4b896;
      --tl: #e8d5c4;
      --tm: #a08060;
      --tx: rgba(255, 255, 255, 0.4);

      --nav-bg: rgba(26, 15, 10, .92);
      --glass-bg: rgba(255, 255, 255, .02);
      --glass-border: rgba(255, 255, 255, .1);
      --glass-border-light: rgba(255, 255, 255, .08);
      --overlay-bg: rgba(10, 5, 3, .97);
      --hero-grad-1: rgba(185, 85, 20, .35);
      --hero-grad-2: rgba(100, 40, 10, .4);
      --hero-img-opacity: 0.18;
      --hero-blend: luminosity;
      --card-grad: linear-gradient(to top, rgba(15, 8, 5, .96) 0%, rgba(15, 8, 5, .3) 50%, transparent 100%);
      --card-hover-grad: linear-gradient(to top, rgba(232, 92, 26, .88) 0%, rgba(15, 8, 5, .15) 55%, transparent 100%);
      --caption-grad: linear-gradient(to top, rgba(10, 5, 3, .85), transparent);
      --mobile-bg: rgba(26, 15, 10, .98);
    }

    body.light-mode {
      /* LIGHT THEME — béžová/krémová */
      --bd: #f0ebe3;
      --bm: #e8e0d5;
      --bw: #ddd5c8;
      --bl: #c8bcac;
      --bs: #ede6dc;
      --or: #e85c1a;
      --ob: #d44f12;
      --cr: #1a1209;
      --tl: #2d2015;
      --tm: #5c4a35;
      --tx: #8a7060;

      --nav-bg: rgba(240, 235, 227, .96);
      --glass-bg: rgba(0, 0, 0, .03);
      --glass-border: rgba(0, 0, 0, .12);
      --glass-border-light: rgba(0, 0, 0, .08);
      --overlay-bg: rgba(240, 235, 227, .98);
      --hero-grad-1: rgba(232, 92, 26, .10);
      --hero-grad-2: rgba(200, 180, 160, .3);
      --hero-img-opacity: 0.45;
      --hero-blend: multiply;
      --card-grad: linear-gradient(to top, rgba(26, 18, 9, .88) 0%, rgba(26, 18, 9, .2) 50%, transparent 100%);
      --card-hover-grad: linear-gradient(to top, rgba(232, 92, 26, .85) 0%, rgba(26, 18, 9, .1) 55%, transparent 100%);
      --caption-grad: linear-gradient(to top, rgba(26, 18, 9, .75), transparent);
      --mobile-bg: rgba(240, 235, 227, .98);
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bd);
      color: var(--tl);
      font-family: 'Raleway', sans-serif;
      overflow-x: hidden
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 48px;
      background: var(--nav-bg);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(232, 92, 26, .15)
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .theme-toggle {
      background: none;
      border: none;
      color: var(--tm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      transition: color 0.3s;
    }

    .theme-toggle:hover {
      color: var(--or);
    }

    .theme-toggle .sun-icon {
      display: none;
    }

    .theme-toggle .moon-icon {
      display: block;
    }

    body.light-mode .theme-toggle .sun-icon {
      display: block;
    }

    body.light-mode .theme-toggle .moon-icon {
      display: none;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      height: 44px;
      cursor: pointer;
      text-decoration: none;
    }

    .img-logo {
      height: 44px;
      max-height: 44px;
      max-width: 100%;
      width: auto;
      display: block;
      object-fit: contain;
    }

    .img-logo-w {
      /* Tint white logo to butter color #d4b896 */
      filter: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(543%) hue-rotate(345deg) brightness(91%) contrast(92%);
    }

    .img-logo-b {
      display: none;
    }

    body.light-mode .img-logo-w {
      display: none;
    }

    body.light-mode .img-logo-b {
      display: block;
    }

    @media(max-width: 768px) {
      .nav-logo {
        height: 34px;
      }

      .img-logo {
        height: 34px;
      }
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none
    }

    .nav-links a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--tm);
      text-decoration: none;
      transition: color .3s
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--or)
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 180px 48px 64px;
      position: relative;
      overflow: hidden;
      background: var(--bd);
      perspective: 1200px;
    }

    .hero-bg {
      position: absolute;
      inset: -5%;
      transform-origin: center;
      transform-style: preserve-3d;
      background: radial-gradient(ellipse 80% 60% at 70% 40%, var(--hero-grad-1) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 20% 80%, var(--hero-grad-2) 0%, transparent 60%), linear-gradient(160deg, var(--bs) 0%, var(--bm) 50%, var(--bd) 100%);
      will-change: transform;
    }

    .hero-bg-img {
      position: absolute;
      inset: -5%;
      transform-origin: center;
      transform-style: preserve-3d;
      background-image: url('https://static.wixstatic.com/media/c74889_52ef249fad684346917f5984af094b13~mv2.png/v1/fill/w_1200,h_630,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/KRT24_LES_4.png');
      background-size: cover;
      background-position: center;
      opacity: var(--hero-img-opacity);
      mix-blend-mode: var(--hero-blend);
      will-change: transform;
    }

    .hero-geo {
      position: absolute;
      right: -80px;
      top: 50%;
      transform: translateY(-50%);
      width: 560px;
      height: 560px;
      opacity: .18;
      will-change: transform;
    }

    .hero-geo svg {
      width: 100%;
      height: 100%;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 700px;
      will-change: transform;
      transform-style: preserve-3d;
    }

    .hero-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--or)
    }

    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(72px, 10vw, 140px);
      line-height: .9;
      letter-spacing: .02em;
      color: var(--cr);
      margin-bottom: 32px
    }

    .hero-title span {
      display: block;
      color: var(--or)
    }

    .hero-tagline {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 18px;
      color: var(--tm);
      margin-bottom: 48px;
      max-width: 420px;
      line-height: 1.6
    }

    .hero-cta-group {
      display: flex;
      gap: 16px;
      flex-wrap: wrap
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--or);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: 14px 32px;
      text-decoration: none;
      transition: background .3s, transform .2s;
      border: none;
      cursor: pointer;
      font-family: 'Raleway', sans-serif
    }

    .btn-primary:hover {
      background: var(--ob);
      transform: translateY(-2px)
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--cr);
      border: 1px solid var(--glass-border);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: 14px 32px;
      text-decoration: none;
      transition: border-color .3s, color .3s
    }

    .btn-outline:hover {
      border-color: var(--or);
      color: var(--or)
    }

    .hero-badge {
      position: absolute;
      right: 48px;
      bottom: 64px;
      text-align: right;
      z-index: 2
    }

    .hero-badge-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px;
      letter-spacing: .3em;
      color: var(--or);
      display: block
    }

    .hero-badge-sub {
      font-size: 10px;
      letter-spacing: .15em;
      color: var(--tm);
      text-transform: uppercase;
      display: block
    }

    /* SECTIONS */
    section {
      padding: 100px 48px;
      scroll-margin-top: 72px
    }

    .section-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px;
      letter-spacing: .4em;
      color: var(--or);
      text-transform: uppercase;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 16px
    }

    .section-label::after {
      content: '';
      flex: 1;
      max-width: 60px;
      height: 1px;
      background: var(--or)
    }

    #o-galerii {
      background: var(--bm)
    }

    .philosophy-header {
      max-width: 680px;
      margin-bottom: 72px
    }

    .philosophy-header h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 5vw, 64px);
      color: var(--cr);
      line-height: 1.05;
      margin-bottom: 20px
    }

    .philosophy-header p {
      font-size: 16px;
      color: var(--tm);
      line-height: 1.8;
      font-style: italic;
      font-family: 'Playfair Display', serif
    }

    .pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px
    }

    .pillar {
      background: var(--glass-bg);
      padding: 36px 28px;
      border-top: 2px solid transparent;
      transition: border-color .3s, background .3s
    }

    .pillar:hover {
      border-top-color: var(--or);
      background: rgba(232, 92, 26, .05)
    }

    .pillar-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      color: var(--tx);
      display: block;
      margin-bottom: 12px
    }

    .pillar h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px;
      letter-spacing: .12em;
      color: var(--or);
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .pillar p {
      font-size: 16px;
      color: var(--tm);
      line-height: 1.8
    }

    /* WORKS GRID */
    #diela {
      background: var(--bd)
    }

    #diela h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 5vw, 56px);
      color: var(--cr);
      margin-bottom: 48px
    }

    .works-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px
    }

    .work-card {
      position: relative;
      aspect-ratio: 4/3;
      min-height: 200px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .2s
    }

    .work-card:hover {
      transform: scale(1.02)
    }

    .work-card-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .5s ease
    }

    .work-card:hover .work-card-img {
      transform: scale(1.06)
    }

    .work-card-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding: 20px;
      background: var(--card-grad);
      transition: background .4s;
      position: relative;
      z-index: 1
    }

    .work-card:hover .work-card-inner {
      background: var(--card-hover-grad)
    }

    .work-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: .08em;
      color: #fff;
      text-transform: uppercase;
      line-height: 1.15
    }

    .work-meta {
      font-size: 10px;
      letter-spacing: .15em;
      color: rgba(255, 255, 255, .6);
      text-transform: uppercase;
      margin-top: 4px;
      display: block
    }

    /* ==================== MOSAIC OVERLAY ==================== */
    .work-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: var(--overlay-bg);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .45s ease;
      overflow-y: auto
    }

    .work-overlay.active {
      opacity: 1;
      pointer-events: all
    }

    .overlay-close {
      position: fixed;
      top: 4px;
      /* Centered in 52px header */
      right: 24px;
      z-index: 2100;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--cr);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      flex-shrink: 0
    }

    .overlay-close:hover {
      background: rgba(232, 92, 26, .25);
      border-color: var(--or)
    }

    /*
  MOSAIC LAYOUT — 4 cols, 4 rows
  Row 1 (52px) : header bar full width
  Row 2 (400px): hero-photo | title-text+video(160px) | photo-sm | photo-sm
  Row 3 (auto) : desc | author/loc | photo-tall | facts
  Row 4 (220px): strip-photo(cols 1-2) | photo-bot | visit
*/
    .overlay-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 52px 420px minmax(420px, auto) 300px;
      gap: 3px;
      width: 100%;
      max-width: 1540px;
      margin: 0 auto;
      min-height: 100vh;
      background: var(--bd);
      box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    }

    /* ── header ── */
    .tile-header {
      grid-column: 1/5;
      grid-row: 1;
      background: var(--bm);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 80px 0 28px;
      /* Added right padding to avoid close button collision */
    }

    .tile-header-left {
      display: flex;
      align-items: center;
      gap: 20px
    }

    .tile-header-cat {
      font-size: 10px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--or)
    }

    .tile-header-year {
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--tm)
    }

    .tile-header-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      color: rgba(255, 255, 255, .08);
      letter-spacing: .1em
    }

    .tile-nav-row {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .nav-arrow {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border-light);
      color: var(--cr);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s
    }

    .nav-arrow:hover {
      background: rgba(232, 92, 26, .2);
      border-color: var(--or)
    }

    .nav-progress {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      color: var(--cr);
      letter-spacing: .1em;
      min-width: 44px;
      text-align: center
    }

    .nav-sep {
      color: var(--or);
      margin: 0 2px
    }

    /* ── hero photo — row 2, col 1 ── */
    .tile-hero-photo {
      grid-column: 1 / 3;
      grid-row: 2;
      overflow: hidden;
      position: relative;
    }

    .tile-hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 65%;
      display: block;
    }

    .tile-narrative {
      grid-column: 1 / 3;
      grid-row: 3;
      background: var(--bd);
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(255, 255, 255, .03);
    }

    .narrative-header {
      padding: 40px;
      background: var(--bw);
    }

    .tile-video {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
    }

    .tile-video iframe,
    .tile-video video {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      object-fit: cover;
    }

    .narrative-body {
      padding: 40px;
      flex: 1;
    }

    .narrative-body p {
      font-size: 15px;
      line-height: 1.85;
      color: var(--tm);
      margin-bottom: 24px;
    }

    .narrative-author {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .overlay-eyebrow {
      font-size: 9px;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 10px
    }

    .overlay-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(22px, 2.5vw, 42px);
      color: var(--cr);
      line-height: .92;
      letter-spacing: .02em;
      margin-bottom: 8px
    }

    .overlay-subtitle {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 12px;
      color: var(--tm);
      line-height: 1.6
    }

    .overlay-category {
      font-size: 9px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(160, 128, 96, .5);
      margin-top: 14px
    }

    .tile-title-box {
      grid-column: 3 / 5;
      grid-row: 2;
      background: var(--bw);
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      overflow: hidden;
      border-left: 1px solid rgba(255, 255, 255, .03);
    }

    .title-col-left {
      padding: 32px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 1px solid rgba(255, 255, 255, .05);
    }

    .title-col-right {
      padding: 32px 40px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background: rgba(255, 255, 255, .01);
      scrollbar-width: thin;
      scrollbar-color: var(--or) transparent;
    }

    .title-col-right::-webkit-scrollbar {
      width: 4px;
    }

    .title-col-right::-webkit-scrollbar-thumb {
      background: var(--or);
      border-radius: 4px;
    }

    .video-label {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 5;
      font-size: 8px;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(232, 92, 26, .85);
      padding: 4px 10px;
      border-radius: 2px;
      pointer-events: none;
    }

    /* ── small photos — row 2, cols 3-4 ── */
    .tile-photo-sm {
      overflow: hidden;
      position: relative;
      background: var(--bd)
    }

    .tile-photo-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease
    }

    .tile-photo-sm:hover img {
      transform: scale(1.06)
    }

    .tile-photo-sm-3 {
      grid-column: 3;
      grid-row: 2
    }

    .tile-photo-sm-4 {
      grid-column: 4;
      grid-row: 2
    }

    /* ── description — row 3, col 1 ── */
    .tile-desc {
      grid-column: 1;
      grid-row: 3;
      background: var(--bd);
      padding: 32px 36px
    }

    .tile-desc-label {
      font-size: 9px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 14px
    }

    .tile-desc p {
      font-size: 13.5px;
      color: var(--tm);
      line-height: 1.95;
      margin-bottom: 14px
    }

    .tile-desc p:last-child {
      margin-bottom: 0
    }

    /* ── author/location — row 3, col 2 ── */
    .tile-photo-side {
      grid-column: 3;
      grid-row: 3;
      overflow: hidden;
    }

    .tile-photo-side img,
    .tile-photo-end img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tile-photo-end {
      grid-column: 4;
      grid-row: 3;
      overflow: hidden;
    }

    .info-block {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .info-label {
      font-size: 9px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--or)
    }

    .info-val {
      font-size: 16px;
      color: var(--cr);
      font-weight: 600;
      line-height: 1.35
    }

    .info-val-sm {
      font-size: 14px;
      color: var(--tm);
      line-height: 1.5;
      margin-top: 2px;
      white-space: pre-line
    }

    .author-badge-row {
      display: flex;
      align-items: flex-start;
      gap: 12px
    }

    .author-badge {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--or);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px;
      color: #fff;
      flex-shrink: 0
    }

    /* ── tall photo — row 3, col 3 ── */
    .tile-photo-tall {
      grid-column: 3;
      grid-row: 3;
      overflow: hidden;
      position: relative;
      background: var(--bd)
    }

    .tile-photo-tall img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease
    }

    .tile-photo-tall:hover img {
      transform: scale(1.05)
    }

    /* ── facts — row 3, col 4 ── */
    /* tile-facts removed — narrative now spans to edge */

    .fact-item {
      border-left: 2px solid var(--glass-border-light);
      padding-left: 14px;
      transition: border-color .3s
    }

    .fact-item:hover {
      border-left-color: var(--or)
    }

    .fact-label {
      font-size: 9px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 3px
    }

    .fact-val {
      font-size: 12px;
      color: var(--cr);
      line-height: 1.4
    }

    /* tile-strip-photo and tile-photo-bot removed */

    /* ── visit info — row 4, col 4 ── */
    /* .tile-visit removed */

    .tile-gallery-strip {
      grid-column: 1 / 5;
      grid-row: 4;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 3px;
    }

    .gallery-tile {
      overflow: hidden;
    }

    .gallery-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .visit-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      letter-spacing: .1em;
      color: var(--or)
    }

    .visit-text {
      font-size: 12px;
      color: var(--tm);
      line-height: 1.7
    }

    .visit-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--cr);
      text-decoration: none;
      border-bottom: 1px solid var(--glass-border);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
      margin-top: 4px;
      cursor: pointer
    }

    .visit-link:hover {
      color: var(--or);
      border-color: var(--or)
    }

    /* shared caption */
    .photo-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--caption-grad);
      padding: 20px 16px 12px;
      font-size: 10px;
      letter-spacing: .1em;
      color: rgba(255, 255, 255, .5);
      text-transform: uppercase;
      pointer-events: none
    }

    /* ── RESPONSIVE ── */
    @media(max-width:1100px) {
      .overlay-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 52px auto auto auto auto
      }

      .tile-header {
        grid-column: 1/3;
        grid-row: 1
      }

      .tile-hero-photo {
        grid-column: 1;
        grid-row: 2;
        min-height: 260px
      }

      .tile-title {
        grid-column: 2;
        grid-row: 2
      }

      .tile-video {
        height: 120px
      }

      .tile-photo-sm-3 {
        grid-column: 1;
        grid-row: 3
      }

      .tile-photo-sm-4 {
        grid-column: 2;
        grid-row: 3;
        min-height: 160px
      }

      .tile-desc {
        grid-column: 1/3;
        grid-row: 4
      }

      .tile-info {
        grid-column: 1;
        grid-row: 5
      }

      .tile-photo-tall {
        grid-column: 2;
        grid-row: 5
      }

      .tile-facts {
        grid-column: 1/3;
        grid-row: 6
      }

      .tile-strip-photo {
        grid-column: 1/3;
        grid-row: 7;
        min-height: 160px
      }

      .tile-photo-bot {
        grid-column: 1;
        grid-row: 8
      }

      .tile-visit {
        grid-column: 2;
        grid-row: 8
      }

      .overlay-close {
        top: 4px;
        /* Still aligned with header */
        right: 16px
      }
    }

    @media(max-width:640px) {
      .overlay-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto
      }

      .tile-header,
      .tile-hero-photo,
      .tile-title,
      .tile-photo-sm-3,
      .tile-photo-sm-4,
      .tile-desc,
      .tile-info,
      .tile-photo-tall,
      .tile-facts,
      .tile-strip-photo,
      .tile-photo-bot,
      .tile-visit {
        grid-column: 1 !important
      }

      .tile-hero-photo,
      .tile-photo-sm-3,
      .tile-photo-sm-4 {
        min-height: 200px
      }

      .tile-video {
        height: 180px
      }
    }

    /* FEATURED */
    #featured {
      background: var(--bw);
      padding: 0;
      overflow: hidden
    }

    .featured-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1400px;
      margin: 0 auto;
      align-items: stretch;
      min-height: 520px;
    }

    .featured-image {
      background: #1a0f0a;
      height: 100%;
      min-height: 520px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center top;
      transition: background-image 0.6s ease;
    }

    .featured-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(26, 15, 10, .5) 0%, transparent 100%)
    }

    .fan-shape {
      position: absolute;
      bottom: -40px;
      left: -40px;
      width: 400px;
      height: 400px;
      opacity: .15
    }

    .featured-content {
      padding: 64px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .featured-content h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(32px, 4vw, 52px);
      color: var(--cr);
      line-height: .95;
      margin-bottom: 8px
    }

    .featured-subtitle {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 13px;
      color: var(--or);
      margin-bottom: 28px
    }

    .featured-content p {
      font-size: 16px;
      line-height: 1.85;
      color: var(--tm);
      margin-bottom: 16px
    }

    .author-row {
      display: flex;
      gap: 40px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .author-block small {
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--or);
      display: block;
      margin-bottom: 4px
    }

    .author-block strong {
      font-size: 16px;
      color: var(--cr);
      font-weight: 600
    }

    /* LOKALITY */
    #lokality {
      background: var(--bm)
    }

    #lokality h2,
    #autori h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 5vw, 56px);
      color: var(--cr);
      margin-bottom: 48px
    }

    .map-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 3px;
      min-height: 520px
    }

    .map-area {
      background: var(--bd);
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      min-height: 480px;
    }

    .leaflet-container {
      background: var(--bd);
      font-family: 'Raleway', sans-serif;
    }

    .custom-map-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .custom-map-icon>div {
      animation: mpulse 2s infinite;
    }

    @keyframes mpulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 94, 0, 0.4);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(255, 94, 0, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 94, 0, 0);
      }
    }

    .leaflet-tooltip.custom-leaflet-tooltip {
      background: var(--nav-bg);
      border: 1px solid rgba(232, 92, 26, .45);
      color: var(--tm);
      border-radius: 4px;
      padding: 10px 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      font-size: 11px;
      letter-spacing: 0.05em;
      min-width: 180px;
      max-width: 220px;
      white-space: normal;
    }

    .leaflet-tooltip.custom-leaflet-tooltip strong {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      letter-spacing: .08em;
      color: var(--cr);
      display: block;
      margin-bottom: 3px;
      font-weight: normal;
    }

    .leaflet-tooltip-top.custom-leaflet-tooltip::before {
      border-top-color: rgba(232, 92, 26, .45);
    }

    .locations-list {
      background: var(--bd);
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .location-item {
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      align-items: flex-start;
      gap: 14px;
      cursor: pointer;
      transition: padding-left .3s
    }

    .location-item:hover {
      padding-left: 8px
    }

    .location-item:last-child {
      border-bottom: none
    }

    .loc-dot {
      width: 6px;
      height: 6px;
      background: var(--or);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0
    }

    .loc-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      letter-spacing: .1em;
      color: var(--cr);
      display: block
    }

    .loc-place {
      font-size: 11px;
      color: var(--tm);
      letter-spacing: .1em
    }

    /* AUTORI */
    #autori {
      background: var(--bd)
    }

    .authors-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px
    }

    .author-card {
      background: var(--bw);
      border-bottom: 2px solid transparent;
      transition: border-color .3s, background .4s;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden
    }

    .author-card:hover {
      border-bottom-color: var(--or);
      background: rgba(232, 92, 26, .04)
    }

    /* photo strip at top */
    .author-photo {
      width: 100%;
      height: 220px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0
    }

    .author-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform .5s ease;
      filter: grayscale(30%)
    }

    .author-card:hover .author-photo img {
      transform: scale(1.05);
      filter: grayscale(0%)
    }

    .author-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(26, 15, 10, .85) 0%, rgba(26, 15, 10, .1) 60%, transparent 100%)
    }

    /* initials badge over photo */
    .author-avatar-sm {
      position: absolute;
      bottom: 14px;
      left: 20px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .2)
    }

    .author-card:nth-child(1) .author-avatar-sm,
    .author-card:nth-child(5) .author-avatar-sm {
      background: #5c2e10
    }

    .author-card:nth-child(2) .author-avatar-sm,
    .author-card:nth-child(6) .author-avatar-sm {
      background: #3d1a05
    }

    .author-card:nth-child(3) .author-avatar-sm,
    .author-card:nth-child(7) .author-avatar-sm {
      background: #4a2c1a
    }

    .author-card:nth-child(4) .author-avatar-sm,
    .author-card:nth-child(8) .author-avatar-sm {
      background: #2d1508
    }

    /* text content */
    .author-card-body {
      padding: 22px 24px 22px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .author-card h4 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 17px;
      letter-spacing: .1em;
      color: var(--cr);
      margin-bottom: 2px
    }

    .author-location {
      font-size: 10px;
      color: var(--tm);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .author-works-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px
    }

    .author-work-btn {
      font-size: 11px;
      color: var(--or);
      letter-spacing: .06em;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      text-align: left;
      font-family: 'Raleway', sans-serif;
      transition: color .2s
    }

    .author-work-btn::before {
      content: '';
      width: 12px;
      height: 1px;
      background: currentColor;
      flex-shrink: 0;
      transition: width .2s
    }

    .author-work-btn:hover {
      color: #ff6b22
    }

    .author-work-btn:hover::before {
      width: 20px
    }

    .author-desc {
      font-size: 15px;
      color: var(--tm);
      line-height: 1.8;
      flex: 1
    }

    .author-cta {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(232, 92, 26, .4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: color .3s
    }

    .author-card:hover .author-cta {
      color: var(--or)
    }

    /* KONTAKT */
    #kontakt {
      background: var(--bw);
      padding: 100px 48px
    }

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .contact-left h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(40px, 6vw, 72px);
      color: var(--cr);
      line-height: .95;
      margin-bottom: 24px
    }

    .contact-left p {
      font-size: 16px;
      color: var(--tm);
      line-height: 1.85;
      margin-bottom: 36px
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .contact-detail {
      display: flex;
      flex-direction: column
    }

    .contact-detail small {
      font-size: 10px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 4px
    }

    .contact-detail span {
      font-size: 16px;
      color: var(--cr)
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .form-group label {
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--tm)
    }

    .form-group input,
    .form-group textarea {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-bottom: 1px solid rgba(212, 184, 150, .2);
      padding: 14px 16px;
      color: var(--cr);
      font-family: 'Raleway', sans-serif;
      font-size: 16px;
      outline: none;
      transition: border-color .3s
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-bottom-color: var(--or);
      background: rgba(232, 92, 26, .04)
    }

    .form-group textarea {
      resize: vertical;
      min-height: 120px
    }

    footer {
      background: var(--bd);
      border-top: 1px solid rgba(232, 92, 26, .15);
      padding: 48px 48px 32px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 40px
    }

    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 12px
    }

    .footer-social a {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--tm);
      text-decoration: none;
      transition: border-color .2s, color .2s;
      font-size: 13px
    }

    .footer-social a:hover {
      border-color: var(--or);
      color: var(--or)
    }

    .footer-partner {
      text-align: center;
      border-left: 1px solid rgba(255, 255, 255, .06);
      border-right: 1px solid rgba(255, 255, 255, .06);
      padding: 0 40px
    }

    .footer-partner-label {
      font-size: 9px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(160, 128, 96, .4);
      display: block;
      margin-bottom: 10px
    }

    .footer-partner-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: .12em;
      color: rgba(160, 128, 96, .5)
    }

    .footer-bottom {
      grid-column: 1/-1;
      border-top: 1px solid rgba(255, 255, 255, .05);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px
    }

    .footer-bottom-copy {
      font-size: 10px;
      color: rgba(160, 128, 96, .4);
      letter-spacing: .05em
    }

    .footer-bottom-note {
      font-size: 10px;
      color: rgba(160, 128, 96, .3);
      font-style: italic
    }

    .footer-logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px;
      letter-spacing: .2em;
      color: var(--cr);
      line-height: 1.4
    }

    .footer-copy {
      font-size: 11px;
      color: var(--tm)
    }

    .footer-right {
      font-size: 11px;
      color: var(--tm);
      text-align: right;
      line-height: 1.7
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s ease, transform .7s ease
    }

    .reveal.visible {
      opacity: 1;
      transform: none
    }

    .reveal-delay-1 {
      transition-delay: .1s
    }

    .reveal-delay-2 {
      transition-delay: .2s
    }

    .reveal-delay-3 {
      transition-delay: .3s
    }

    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--or), transparent);
      opacity: 0.3;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--cr);
      transition: transform .3s, opacity .3s
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: var(--mobile-bg);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--glass-border);
      padding: 24px 24px;
      flex-direction: column;
      gap: 0;
      z-index: 999
    }

    .mobile-menu.open {
      display: flex
    }

    .mobile-menu a {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--tm);
      text-decoration: none;
      padding: 14px 0;
      border-bottom: 1px solid var(--glass-border);
      transition: color .2s
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
      color: var(--or)
    }

    .mobile-menu a:last-child {
      border-bottom: none
    }

    @media(max-width:900px) {
      nav {
        padding: 16px 24px
      }

      section {
        padding: 72px 24px
      }

      .hero {
        padding: 0 24px 56px
      }

      .pillars {
        grid-template-columns: 1fr 1fr
      }

      .works-grid {
        grid-template-columns: 1fr 1fr
      }

      .authors-grid {
        grid-template-columns: 1fr 1fr
      }

      .featured-inner {
        grid-template-columns: 1fr
      }

      .featured-image {
        min-height: 280px;
        height: 280px;
      }

      .featured-content {
        padding: 40px 24px
      }

      .map-layout {
        grid-template-columns: 1fr
      }

      .contact-layout {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .nav-links {
        display: none
      }

      .hamburger {
        display: flex
      }

      footer {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center
      }

      .footer-social {
        justify-content: center
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center
      }

      .footer-partner {
        border-left: none;
        border-top: 1px solid var(--glass-border);
        padding: 16px 0 0
      }
    }

    @media(max-width:480px) {
      .works-grid {
        grid-template-columns: 1fr
      }

      .authors-grid {
        grid-template-columns: 1fr
      }

      .pillars {
        grid-template-columns: 1fr
      }

      .hero-title {
        font-size: 60px
      }

      .overlay-mosaic {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important
      }
    }



    /* Open Call nav button */
    .nav-oc-btn {
      background: var(--or) !important;
      color: #fff !important;
      padding: 8px 20px 7px !important;
      /* Adjusted for better Bebas Neue vertical centering */
      font-family: 'Bebas Neue', sans-serif !important;
      font-size: 15px !important;
      letter-spacing: .15em !important;
      transition: background .3s, transform .3s !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      line-height: 1 !important;

    }

    .nav-oc-btn:hover,
    .nav-oc-btn.active {
      background: var(--ob) !important;
      color: #fff !important;
    }

    .nav-oc-btn svg {
      transition: transform .3s;
      margin-top: -2px;
      /* Center svg visually with text */
    }

    .nav-oc-btn:hover svg {
      transform: translate(2px, -2px);
    }

    .mobile-menu .nav-oc-btn {
      margin-top: 10px !important;
      justify-content: center !important;
      border-bottom: none !important;
      padding: 14px 20px 12px !important;
      transform: none;
    }

    /* Footer Left Column Layout */
    .footer-left-col {
      display: flex;
      gap: 32px;
      align-items: flex-end;
      /* Align bottom to look harmonious */
      flex-wrap: wrap;
    }

    .footer-sponsors {
      display: flex;
      gap: 16px;
      margin-top: 0;
      align-items: center;
      flex-wrap: wrap;
    }

    .partner-logo-link {
      display: inline-block;
      height: 36px;
      /* Increased from 28px as requested */
    }

    .partner-logo-img {
      height: 100%;
      width: auto;
      display: block;
      object-fit: contain;
    }

    /* Opacity for dark mode white logos to blend with beige text */
    .partner-logo-w {
      opacity: 0.55;
      transition: opacity 0.3s;
    }

    .partner-logo-link:hover .partner-logo-w {
      opacity: 0.85;
      /* slight hover highlight */
    }

    .partner-logo-b {
      display: none;
    }

    body.light-mode .partner-logo-w {
      display: none;
    }

    body.light-mode .partner-logo-b {
      display: block;
      opacity: 0.7;
      transition: opacity 0.3s;
    }

    body.light-mode .partner-logo-link:hover .partner-logo-b {
      opacity: 1;
    }

    @media(max-width: 768px) {
      .footer-left-col {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
      }

      .footer-sponsors {
        justify-content: center;
        margin-top: 8px;
      }
    }