/* ============ TOKENS ============ */
  :root {
    /* denna galeria */
    --wall: #ECE9E0;
    --wall-deep: #E3DFD3;
    --on-wall: #2B241C;
    --on-wall-soft: #6E6557;
    --mat: #FBFAF6;
    --on-mat: #2B241C;
    --on-mat-soft: #6E6557;
    --frame-a: #5A4028;
    --frame-b: #3E2C1B;
    --brass: #B08A3A;
    --brass-text: #7C5E1D;
    --band: #3C4A3C;
    --on-band: #EDEAE0;
    --on-band-soft: #C2C6B8;
    --line: #D5D0C2;
    --shadow: 0 18px 40px -18px rgba(43, 36, 28, .45), 0 6px 14px -8px rgba(43, 36, 28, .3);

    --font-display: "Didot", "Bodoni 72", "Playfair Display", "Georgia", serif;
    --font-body: "Avenir Next", "Avenir", "Seravek", "Segoe UI", system-ui, sans-serif;

    --fs-hero: clamp(2.2rem, 5.2vw, 3.9rem);
    --fs-h2: clamp(1.65rem, 3.2vw, 2.35rem);
    --fs-h3: 1.22rem;
    --fs-label: .76rem;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      /* vecerna galeria - steny stmavnu, obrazy ostanu nasvietene */
      --wall: #1F1B16;
      --wall-deep: #17140F;
      --on-wall: #EAE3D4;
      --on-wall-soft: #A99E8B;
      --mat: #F1ECDF;
      --on-mat: #2B241C;
      --on-mat-soft: #6E6557;
      --frame-a: #6A4C2E;
      --frame-b: #43301C;
      --brass: #C79E48;
      --brass-text: #7C5E1D;
      --band: #2A362B;
      --on-band: #EDEAE0;
      --on-band-soft: #B7BCAB;
      --line: #3B352B;
      --shadow: 0 22px 48px -16px rgba(0, 0, 0, .75), 0 8px 16px -8px rgba(0, 0, 0, .5);
    }
  }
  :root[data-theme="light"] {
    --wall: #ECE9E0;
    --wall-deep: #E3DFD3;
    --on-wall: #2B241C;
    --on-wall-soft: #6E6557;
    --mat: #FBFAF6;
    --on-mat: #2B241C;
    --on-mat-soft: #6E6557;
    --frame-a: #5A4028;
    --frame-b: #3E2C1B;
    --brass: #B08A3A;
    --brass-text: #7C5E1D;
    --band: #3C4A3C;
    --on-band: #EDEAE0;
    --on-band-soft: #C2C6B8;
    --line: #D5D0C2;
    --shadow: 0 18px 40px -18px rgba(43, 36, 28, .45), 0 6px 14px -8px rgba(43, 36, 28, .3);
  }
  :root[data-theme="dark"] {
    --wall: #1F1B16;
    --wall-deep: #17140F;
    --on-wall: #EAE3D4;
    --on-wall-soft: #A99E8B;
    --mat: #F1ECDF;
    --on-mat: #2B241C;
    --on-mat-soft: #6E6557;
    --frame-a: #6A4C2E;
    --frame-b: #43301C;
    --brass: #C79E48;
    --brass-text: #7C5E1D;
    --band: #2A362B;
    --on-band: #EDEAE0;
    --on-band-soft: #B7BCAB;
    --line: #3B352B;
    --shadow: 0 22px 48px -16px rgba(0, 0, 0, .75), 0 8px 16px -8px rgba(0, 0, 0, .5);
  }

  /* ============ ZAKLAD ============ */
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    color: var(--on-wall);
    background:
      linear-gradient(180deg, var(--wall) 0%, var(--wall-deep) 100%) fixed,
      var(--wall);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  main { display: block; }
  section { scroll-margin-top: 84px; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  img { max-width: 100%; }
  :focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .container { max-width: 1100px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); }

  .eyebrow {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
  }
  .section-head { text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 60ch; margin-inline: auto; }
  .section-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; }
  .section-head p { color: var(--on-wall-soft); max-width: 52ch; }

  /* ============ HLAVICKA ============ */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--wall) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding-block: 14px;
  }
  .brand { display: grid; line-height: 1.2; text-decoration: none; }
  .brand strong {
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 600; letter-spacing: .02em;
  }
  .brand span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-wall-soft); }
  .site-nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); }
  .site-nav a {
    text-decoration: none; font-size: .92rem; font-weight: 500;
    color: var(--on-wall-soft);
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .site-nav a:hover { color: var(--on-wall); border-bottom-color: var(--brass); }
  .nav-phone {
    text-decoration: none; font-weight: 600; font-size: .9rem;
    color: var(--on-mat);
    background: linear-gradient(160deg, color-mix(in srgb, var(--brass) 88%, #fff) 0%, var(--brass) 55%, color-mix(in srgb, var(--brass) 78%, #000) 100%);
    padding: 9px 16px; border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px -2px rgba(0,0,0,.4);
    white-space: nowrap;
  }
  @media (max-width: 760px) {
    .site-nav a:not(.nav-phone) { display: none; }
  }

  /* ============ RAM - zakladny stavebny prvok ============ */
  .frame {
    background:
      linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.22) 100%),
      repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, rgba(0,0,0,0) 2px 7px),
      linear-gradient(180deg, var(--frame-a), var(--frame-b));
    padding: clamp(10px, 1.4vw, 15px);
    box-shadow:
      var(--shadow),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
  .mat {
    background: var(--mat);
    color: var(--on-mat);
    border: 2px solid var(--brass); /* zlatena lista medzi ramom a paspartou */
    box-shadow: inset 0 2px 10px rgba(43,36,28,.14);
    height: 100%;
    box-sizing: border-box;
  }

  /* ============ HERO ============ */
  .hero { padding-block: clamp(34px, 5vw, 64px) clamp(36px, 5vw, 64px); }
  .hero-frame {
    max-width: 860px; margin-inline: auto;
    animation: hang-in .7s ease-out both;
  }
  @keyframes hang-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .hero-frame .mat { padding: clamp(28px, 5.5vw, 64px) clamp(22px, 5vw, 60px); text-align: center; display: grid; gap: 20px; justify-items: center; }
  .hero-frame h1 {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 500;
    max-width: 18ch;
  }
  .hero-frame .lead { color: var(--on-mat-soft); max-width: 52ch; font-size: 1.05rem; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
  .btn {
    display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
    padding: 12px 22px; border-radius: 3px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary {
    color: #241B0E;
    background: linear-gradient(160deg, color-mix(in srgb, var(--brass) 85%, #fff) 0%, var(--brass) 55%, color-mix(in srgb, var(--brass) 75%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px -3px rgba(0,0,0,.45);
  }
  .btn-ghost { color: var(--on-mat); border: 1px solid color-mix(in srgb, var(--on-mat) 35%, transparent); }
  .btn-ghost:hover { border-color: var(--brass); }

  /* mosadzna tabulka pod obrazom */
  .plaque {
    display: inline-block;
    margin-top: 26px;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: #2E230F;
    background: linear-gradient(160deg, #D9BC72 0%, #B08A3A 60%, #8F6D26 100%);
    padding: 8px 20px; border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.35), 0 2px 5px -2px rgba(0,0,0,.5);
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
  }
  .hero-plaque-wrap { text-align: center; }

  /* fakty */
  .facts {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(20px, 5vw, 64px);
    padding-block: clamp(30px, 4vw, 48px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(36px, 5vw, 56px);
  }
  .fact { text-align: center; display: grid; gap: 2px; }
  .fact strong {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .fact span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-wall-soft); }

  /* ============ SALONNA STENA SLUZIEB ============ */
  .services { padding-block: clamp(54px, 8vw, 100px) 0; }
  .salon {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(20px, 3vw, 34px);
    margin-top: clamp(34px, 5vw, 54px);
    align-items: stretch;
  }
  .piece { margin: 0; }
  .piece .mat { padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 10px; align-content: start; }
  .piece h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
  .piece p { font-size: .93rem; color: var(--on-mat-soft); }
  .span-4 { grid-column: span 4; }
  .span-3 { grid-column: span 3; }
  .span-2 { grid-column: span 2; }

  /* jemne zavesenie nakrivo */
  .hang { transition: transform .25s ease; }
  .salon .piece:nth-child(odd) .hang { transform: rotate(-.45deg); }
  .salon .piece:nth-child(even) .hang { transform: rotate(.4deg); }
  .salon .piece:hover .hang { transform: rotate(0deg) translateY(-3px); }

  /* fotografie v paspartach */
  .art-photo {
    display: block; width: 100%; height: auto;
    border: 1px solid rgba(43,36,28,.3);
  }
  .mat--photo { padding: clamp(10px, 1.4vw, 16px); }

  @media (max-width: 900px) {
    .span-4, .span-3, .span-2 { grid-column: span 3; }
    .span-4 { grid-column: span 6; }
  }
  @media (max-width: 620px) {
    .span-4, .span-3, .span-2 { grid-column: span 6; }
  }

  /* stitky - co zaramujeme */
  .subjects { text-align: center; padding-block: clamp(40px, 6vw, 64px); }
  .subjects h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 20px; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; margin-inline: auto; }
  .chip {
    font-size: .86rem; font-weight: 500;
    color: var(--on-mat);
    background: var(--mat);
    border: 1px solid var(--frame-a);
    box-shadow: inset 0 0 0 3px var(--mat), inset 0 0 0 4px color-mix(in srgb, var(--brass) 65%, transparent), 0 2px 5px -2px rgba(0,0,0,.3);
    padding: 7px 16px;
  }

  /* ============ O NAS ============ */
  .about { padding-block: clamp(54px, 8vw, 100px); }
  .about-grid {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    margin-top: clamp(30px, 4vw, 46px);
  }
  .about-copy { display: grid; gap: 16px; max-width: 58ch; }
  .about-copy p { color: var(--on-wall-soft); }
  .about-copy .quote {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.18rem; color: var(--on-wall);
    border-left: 3px solid var(--brass);
    padding-left: 18px;
  }
  .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .timeline li {
    display: grid; grid-template-columns: 74px 1fr; gap: 16px;
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
  }
  .timeline li:first-child { border-top: 1px solid var(--line); }
  .timeline .year {
    font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
    color: var(--brass); font-variant-numeric: tabular-nums;
  }
  .timeline .what { font-size: .93rem; color: var(--on-wall-soft); }
  .timeline .what strong { color: var(--on-wall); font-weight: 600; display: block; }

  /* ============ GALERIA ============ */
  .gallery { padding-block: 0 clamp(54px, 8vw, 100px); }
  .gallery-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 36px);
    margin-top: clamp(34px, 5vw, 54px);
    align-items: end;
  }
  .art-piece { margin: 0; display: grid; gap: 0; }
  .art-piece .mat { padding: clamp(14px, 1.8vw, 22px); }
  .art-piece figcaption { text-align: center; margin-top: 14px; }
  .art-piece figcaption .plaque { margin-top: 0; letter-spacing: .12em; }
  .gallery-note { text-align: center; margin-top: clamp(26px, 4vw, 40px); color: var(--on-wall-soft); font-size: .9rem; max-width: 56ch; margin-inline: auto; }
  @media (max-width: 720px) {
    .gallery-row { grid-template-columns: 1fr; align-items: start; max-width: 420px; margin-inline: auto; }
  }
  @media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
  }

  /* ============ O NAS - foto + casova os ============ */
  .about-side { display: grid; gap: clamp(22px, 3vw, 30px); align-content: start; }

  /* ============ RECENZIE ============ */
  .reviews { padding-block: 0 clamp(54px, 8vw, 100px); }
  .rating-line {
    display: flex; align-items: baseline; justify-content: center;
    gap: 12px; flex-wrap: wrap; margin-top: 6px;
  }
  .rating-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .stars-big { color: var(--brass); font-size: 1.15rem; letter-spacing: 3px; }
  .rating-count { color: var(--on-wall-soft); font-size: .92rem; }
  .reviews-cta { margin-top: 18px; text-align: center; }
  .reviews-cta .btn-ghost { color: var(--on-wall); }
  .review-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: clamp(16px, 2.6vw, 28px);
    margin-top: clamp(30px, 4vw, 46px);
  }
  .review-card {
    background: var(--mat); color: var(--on-mat);
    border: 2px solid var(--brass);
    box-shadow: var(--shadow), inset 0 2px 8px rgba(43,36,28,.1);
    padding: clamp(18px, 2.4vw, 26px);
    display: grid; gap: 10px; align-content: start;
  }
  .review-card .stars { color: var(--brass); letter-spacing: 2px; font-size: .9rem; }
  .review-card blockquote {
    margin: 0;
    font-family: var(--font-display); font-style: italic;
    font-size: 1.04rem; line-height: 1.5;
  }
  .review-card footer { font-size: .8rem; color: var(--on-mat-soft); }
  .review-card footer strong { color: var(--on-mat); font-weight: 600; }

  /* ============ KONTAKT - zelena stena ============ */
  .contact {
    background: linear-gradient(180deg, color-mix(in srgb, var(--band) 94%, #fff) 0%, var(--band) 30%);
    color: var(--on-band);
    padding-block: clamp(54px, 8vw, 100px);
  }
  .contact .section-head p { color: var(--on-band-soft); }
  .contact .eyebrow { color: color-mix(in srgb, var(--brass) 75%, #fff); }
  .storefront { max-width: 880px; margin: clamp(30px, 5vw, 48px) auto 0; }
  .contact-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
    margin-top: clamp(34px, 5vw, 50px);
  }
  .contact-card .mat { padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 12px; align-content: start; }
  .contact-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
  .contact-card p, .contact-card a { font-size: .95rem; color: var(--on-mat-soft); }
  .contact-card a { color: var(--on-mat); text-decoration-color: var(--brass); text-underline-offset: 3px; }
  .contact-card .big-phone {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 600; text-decoration: none;
    color: var(--on-mat); font-variant-numeric: tabular-nums;
  }
  .hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .hours td {
    padding: 7px 0; font-size: .92rem;
    border-bottom: 1px solid color-mix(in srgb, var(--on-mat) 12%, transparent);
    color: var(--on-mat-soft);
  }
  .hours td:last-child { text-align: right; color: var(--on-mat); font-weight: 500; white-space: nowrap; }
  .hours tr:last-child td { border-bottom: none; }
  .hours .closed td:last-child { color: var(--on-mat-soft); font-weight: 400; }
  .hours-note { font-size: .8rem; color: var(--on-mat-soft); }
  .map-link { font-weight: 600; }
  .gps { font-size: .8rem; letter-spacing: .04em; color: var(--on-mat-soft); font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; margin-top: 40px; }
  }

  /* ============ PATA ============ */
  .site-footer {
    background: var(--band);
    color: var(--on-band-soft);
    border-top: 1px solid color-mix(in srgb, var(--on-band) 15%, transparent);
    padding-block: 26px;
    font-size: .85rem;
  }
  .site-footer .container { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; }
  .site-footer strong { color: var(--on-band); font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-frame { animation: none; }
    .hang, .btn, .site-nav a { transition: none; }
    .salon .piece:hover .hang { transform: none; }
  }

  /* ============ VIACSTRANKOVY WEB ============ */
  /* sekcie, ktore na jednostrankovom webe nadvazovali na predoslu, maju teraz symetricke odsadenie */
  .gallery, .reviews { padding-block: clamp(54px, 8vw, 100px); }
  .explore { padding-block: clamp(54px, 8vw, 100px) 0; }
  .home-contact { margin-top: clamp(54px, 8vw, 100px); }

  /* ============ DOVOZ ============ */
  /* zeleny pas, aby sluzba nezapadla medzi ostatnymi kartami */
  .dovoz {
    background: linear-gradient(180deg, color-mix(in srgb, var(--band) 94%, #fff) 0%, var(--band) 32%);
    color: var(--on-band);
    padding-block: clamp(40px, 6vw, 68px);
  }
  .dovoz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: center;
  }
  .dovoz-foto { margin: 0; }
  .dovoz-text { display: grid; gap: 14px; justify-items: start; max-width: 48ch; }

  .dovoz-stitok {
    font-size: var(--fs-label); font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #2E230F;
    background: linear-gradient(160deg, #D9BC72 0%, #B08A3A 60%, #8F6D26 100%);
    padding: 7px 18px; border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px -2px rgba(0,0,0,.5);
  }
  .dovoz h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2); font-weight: 500;
  }
  .dovoz p { color: var(--on-band-soft); }

  .dovoz-zoznam { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
  .dovoz-zoznam li {
    position: relative;
    padding-left: 26px;
    font-size: .95rem; line-height: 1.6;
    color: var(--on-band-soft);
  }
  .dovoz-zoznam li strong { color: var(--on-band); font-weight: 600; }
  .dovoz-zoznam li::before {
    content: "→";
    position: absolute; left: 0; top: 0;
    color: var(--brass); font-weight: 700;
  }
  .dovoz-poznamka { font-size: .9rem; }
  .dovoz .btn-primary { margin-top: 6px; }

  @media (max-width: 820px) {
    .dovoz-grid { grid-template-columns: 1fr; }
    .dovoz-foto { max-width: 460px; margin-inline: auto; }
    .dovoz-text { max-width: none; }
  }

  /* ============ NAŠA DIELŇA ============ */
  .dielna-uvod { padding-block: clamp(54px, 8vw, 100px) 0; }
  .dielna { padding-block: clamp(48px, 7vw, 84px) 0; }
  .dielna:last-of-type { padding-bottom: clamp(48px, 7vw, 84px); }

  .dielna-prehlad { max-width: 580px; margin: 0 auto clamp(28px, 4vw, 44px); }
  .dielna-prehlad figcaption { text-align: center; margin-top: 14px; }

  .dielna-head {
    text-align: center; max-width: 60ch; margin: 0 auto clamp(34px, 5vw, 56px);
    display: grid; gap: 10px;
  }
  .dielna-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; }
  .dielna-head p { color: var(--on-wall-soft); }

  /* stroj = fotka + vysvetlenie, striedavo z oboch strán */
  .stroj {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    margin-bottom: clamp(30px, 4vw, 48px);
  }
  .stroj:nth-of-type(even) { grid-template-columns: 1fr minmax(0, 420px); }
  .stroj:last-child { margin-bottom: 0; }
  .stroj-foto { margin: 0; }
  .stroj:nth-of-type(even) .stroj-foto { order: 2; }

  .stroj-text { display: grid; gap: 12px; align-content: center; max-width: 46ch; }
  .stroj-text h3 {
    font-family: var(--font-display);
    font-size: 1.32rem; font-weight: 600;
  }
  .stroj-text h3::after {
    content: ""; display: block;
    width: 46px; height: 2px; margin-top: 10px;
    background: var(--brass);
  }
  .stroj-text p { color: var(--on-wall-soft); }

  @media (max-width: 780px) {
    .stroj, .stroj:nth-of-type(even) { grid-template-columns: 1fr; gap: 18px; }
    .stroj-foto { max-width: 420px; margin-inline: auto; }
    .stroj:nth-of-type(even) .stroj-foto { order: 0; }
    .stroj-text { max-width: none; }
  }

  /* v galerii moze v poslednom riadku zostat jedna fotka sama — vycentruj ju */
  @media (min-width: 721px) {
    .gallery-row > .art-piece:last-child:nth-child(3n + 1) { grid-column: 2; }
  }

  /* aktivna polozka v navigacii */
  .site-nav a.is-active { color: var(--on-wall); border-bottom-color: var(--brass); }

  /* odkaz "dalej" v kartach rozcestnika */
  .more-link { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--brass-text); margin-top: 4px; }
  .more-link:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

  /* tlacidla na zelenej stene kontaktu */
  .contact .btn-ghost { color: var(--on-band); border-color: color-mix(in srgb, var(--on-band) 45%, transparent); }
  .contact .btn-ghost:hover { border-color: var(--brass); }
  .contact .hero-ctas { margin-top: 14px; }

  /* mobilne menu — <details>, funguje bez JavaScriptu */
  .header-right { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); }
  .nav-mobile { display: none; position: relative; }
  .nav-mobile summary {
    list-style: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1;
    padding: 6px 8px; color: var(--on-wall);
    border: 1px solid var(--line); border-radius: 3px;
  }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile[open] summary { border-color: var(--brass); }
  .nav-mobile-panel {
    position: absolute; right: 0; top: calc(100% + 12px);
    min-width: 220px; display: grid;
    background: var(--mat);
    border: 2px solid var(--brass);
    box-shadow: var(--shadow);
    z-index: 60;
  }
  .nav-mobile-panel a {
    padding: 12px 18px; text-decoration: none;
    font-weight: 500; font-size: .95rem;
    color: var(--on-mat);
    border-bottom: 1px solid color-mix(in srgb, var(--on-mat) 14%, transparent);
  }
  .nav-mobile-panel a:last-child { border-bottom: none; }
  .nav-mobile-panel a.is-active { color: var(--brass-text); font-weight: 600; }
  @media (max-width: 760px) { .nav-mobile { display: block; } }

  /* ============ MAPA NA KONTAKTE ============ */
  .map-piece { max-width: 880px; margin: clamp(34px, 5vw, 50px) auto 0; }
  .map-embed {
    display: block; width: 100%;
    /* na mobile nizsia mapa nestaci — popisok OpenStreetMap by zakryl tretinu */
    height: clamp(340px, 40vw, 420px);
    border: 1px solid rgba(43,36,28,.3);
  }
  .map-piece figcaption { text-align: center; }
  .map-piece figcaption .plaque { margin-top: 16px; }
  .map-note { margin-top: 12px; font-size: .88rem; color: var(--on-band-soft); }
  .map-note .map-link {
    color: var(--on-band);
    text-decoration-color: var(--brass); text-underline-offset: 3px;
  }

  /* ============ LIGHTBOX V GALERII ============ */
  .zoom { display: block; text-decoration: none; color: inherit; cursor: zoom-in; }
  .zoom:hover .hang { transform: translateY(-3px); }
  .zoom:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }

  .lightbox {
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    border: 0; padding: 0; margin: 0;
    background: transparent;
    overflow: hidden;
  }
  .lightbox::backdrop { background: rgba(20, 16, 11, .9); }
  .lightbox-figure {
    margin: 0; box-sizing: border-box;
    width: 100%; height: 100%;
    padding: clamp(16px, 4vw, 48px);
    display: grid; align-content: center; justify-items: center;
  }
  .lightbox-figure .frame { max-width: min(1100px, 92vw); }
  .lightbox-figure .mat { height: auto; }
  .lightbox-img {
    display: block;
    max-width: 100%; max-height: min(70vh, 820px);
    width: auto; height: auto;
    border: 1px solid rgba(43,36,28,.3);
  }
  .lightbox-figure figcaption { text-align: center; }
  .lightbox-figure figcaption .plaque { margin-top: 18px; }

  .lightbox-close, .lightbox-nav {
    position: fixed; z-index: 2;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--wall) 90%, transparent);
    color: var(--on-wall);
    border: 1px solid var(--brass); border-radius: 999px;
    font-family: var(--font-body); line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .lightbox-close { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.1rem; }
  .lightbox-prev { left: clamp(8px, 2vw, 22px); }
  .lightbox-next { right: clamp(8px, 2vw, 22px); }
  .lightbox-close:hover { background: var(--wall); }
  .lightbox-nav:hover { background: var(--wall); }
  .lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

  @media (max-width: 620px) {
    .lightbox-nav { width: 42px; height: 42px; font-size: 1.7rem; }
    .lightbox-img { max-height: 58vh; }
  }

  /* ============ STRANKA 404 ============ */
  .rozcestnik { text-align: center; margin-top: clamp(38px, 6vw, 60px); }
  .rozcestnik h2 {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
    margin-bottom: 20px;
  }
  a.chip { text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
  a.chip:hover { transform: translateY(-2px); border-color: var(--brass); }
  a.chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }