/* ---------- self-hosted fonts (latin + latin-ext, subset for Czech) ----------
     Vendored woff2 in /assets/fonts so there is no third-party / render-blocking
     request. Only the weights the markup actually uses are shipped:
     Archivo 700 & 800 (.disp), Spectral 300/400 + italic 300 (.serif).
     font-display:swap keeps text visible during load. */
  @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
    src:url('/assets/fonts/archivo-700.woff2') format('woff2')}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
    src:url('/assets/fonts/archivo-800.woff2') format('woff2')}
  @font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;
    src:url('/assets/fonts/spectral-300.woff2') format('woff2')}
  @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
    src:url('/assets/fonts/spectral-400.woff2') format('woff2')}
  @font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;
    src:url('/assets/fonts/spectral-300-italic.woff2') format('woff2')}

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar{width:0;height:0;display:none}
  body{
    background:#FFFFFF;color:#141414;
    font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::-webkit-scrollbar{width:0;height:0;display:none}
  :root{
    --accent:#141414;
    --dur-fast:140ms;
    --dur:280ms;
    --dur-slow:500ms;
    --ease:cubic-bezier(.2,.6,.2,1);
  }

  .disp{font-family:'Archivo',Helvetica,Arial,sans-serif}
  .serif{font-family:'Spectral',Georgia,serif}
  .lbl{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#141414}
  a{color:inherit;text-decoration:none}
  input{font-family:inherit}
  button{font-family:inherit}

  /* visible keyboard focus */
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
  }

  /* skip-to-content link — off-screen until focused */
  .skip-link{
    position:absolute;left:8px;top:-48px;z-index:100;
    background:#141414;color:#FFFFFF;
    font-size:13px;font-weight:600;letter-spacing:.04em;
    padding:10px 16px;border-radius:6px;
    transition:top var(--dur-fast) var(--ease);
  }
  .skip-link:focus{top:8px}

  /* striped placeholder tiles */
  .ph{
    background-image:repeating-linear-gradient(135deg,#EFEFEC 0 15px,#E6E6E2 15px 30px);
    display:flex;align-items:center;justify-content:center;
  }
  .slot{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:11px;letter-spacing:.06em;color:#B0B0A6;text-align:center;padding:0 12px;
  }
  /* book cover placeholder */
  .bookcover{
    aspect-ratio:2 / 3;width:56px;border:1px solid rgba(0,0,0,.08);align-self:start;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 5vw;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .brand{font-size:16.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
  .nav-right{display:flex;align-items:center;gap:26px}
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-links a{
    position:relative;
    font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    cursor:pointer;color:#AFABA2;transition:color var(--dur-fast) var(--ease);white-space:nowrap;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .nav-links a.active::after{transform:scaleX(1)}
  .nav-links a.active{color:#141414}
  .lang{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.12em;margin-left:8px}
  .lang .t{cursor:pointer;color:#B3B0AB;transition:color var(--dur-fast) var(--ease)}
  .lang .t.active{color:#141414}
  .lang span.sep{color:#CFCFC8}
  /* hamburger toggle — hidden on desktop, shown under the mobile breakpoint */
  .nav-toggle,.nav-burger{display:none}

  /* ---------- generic ---------- */
  .page{opacity:1}
  section{display:block}

  /* page transition — runs on SPA navigation only (class added in JS) */
  @keyframes pageEnter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .page--enter{animation:pageEnter var(--dur) var(--ease)}

  /* image fade-in — non-LCP only; gated on .js so no-JS keeps images visible */
  html.js img[data-fade]{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
  html.js img[data-fade].is-loaded{opacity:1}

  /* feature trio */
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .feature{cursor:pointer;display:flex;flex-direction:column;gap:18px}
  .feature .ph{aspect-ratio:3 / 4;width:100%;overflow:hidden}
  /* will-change promotes the image to its own GPU layer so the hover scale is a cheap
     composited transform rather than a per-frame raster repaint. */
  .feature .ph img{transition:transform var(--dur) var(--ease);will-change:transform}

  /* photo gallery */
  .photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
  .photo-grid .ph{overflow:hidden}
  .photo-grid .ph img{transition:transform var(--dur) var(--ease);will-change:transform}

  /* pill buttons (contact, 404) — :active kept outside the hover query so touch taps respond */
  .pill{transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
  .pill:active{transform:translateY(0);box-shadow:0 3px 10px rgba(0,0,0,.10)}

  /* book rows — subtle background highlight only */
  .book-row{transition:background var(--dur) var(--ease)}

  /* footer */
  footer{background:#141414;color:#FFFFFF;padding:72px 5vw 40px}
  .footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px 40px}
  .footer-links{display:flex;flex-wrap:wrap;gap:14px 28px}
  .footer-links a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);cursor:pointer;transition:color var(--dur-fast) var(--ease)}
  .footer-contact{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
  .footer-contact .footer-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
  .footer-contact a{font-size:14px;color:rgba(255,255,255,.85);transition:color var(--dur-fast) var(--ease)}
  .footer-bottom{
    display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:14px;
    margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  }

  /* ---------- hover affordances (pointer devices only) ---------- */
  @media (hover: hover){
    .nav-links a:hover{color:#141414}
    .nav-links a:hover::after{transform:scaleX(1)}
    .lang .t:hover{color:#141414}
    /* Feature cards + gallery tiles: a steady-frame image zoom (no card lift, no shadow). */
    .feature:hover .ph img{transform:scale(1.02)}
    .photo-grid figure:hover .ph img{transform:scale(1.02)}
    .pill:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
    .book-row:hover{background:rgba(0,0,0,.02)}
    .footer-links a:hover{color:#fff}
    .footer-contact a:hover{color:#fff}
  }

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    /* compact bar: brand left, hamburger right; links drop into a panel */
    nav{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 6vw}
    .brand{font-size:15px}

    .nav-toggle{
      display:block;position:absolute;top:0;right:6vw;height:100%;width:46px;
      margin:0;padding:0;opacity:0;cursor:pointer;z-index:61;-webkit-appearance:none;appearance:none;
    }
    .nav-burger{
      display:flex;flex-direction:column;justify-content:center;gap:5px;
      width:26px;height:46px;margin-left:auto;pointer-events:none;z-index:60;
    }
    .nav-burger span{display:block;height:2px;width:100%;background:#141414;border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease)}
    .nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
    .nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}

    .nav-right{
      position:absolute;top:100%;left:0;right:0;width:100%;
      flex-direction:column;align-items:flex-start;gap:22px;
      background:#FFFFFF;border-bottom:1px solid rgba(0,0,0,.08);
      padding:22px 6vw 26px;
      box-shadow:0 12px 24px rgba(0,0,0,.06);
      display:none;
    }
    .nav-toggle:checked ~ .nav-right{display:flex}
    .nav-links{flex-direction:column;align-items:flex-start;gap:20px}
    .nav-links a{font-size:15px}
    .nav-links a::after{display:none}
    .lang{margin-left:0}

    /* trim the tall top padding that pushes content down on small screens */
    main > .page > :first-child{padding-top:52px !important}

    .features{grid-template-columns:1fr;gap:44px}
    .photo-grid{grid-template-columns:1fr}
    .about-grid{grid-template-columns:1fr !important;gap:18px !important}
    .book-row{grid-template-columns:52px 44px 1fr !important;gap:14px !important}
    .book-row .kind{display:none}
    .book-row .bookcover{width:44px !important}
    .event-row{grid-template-columns:78px 1fr !important;gap:18px !important}
    .footer-top{flex-direction:column;gap:28px}
    .footer-contact{align-items:flex-start;text-align:left}
  }

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
    img[data-fade]{opacity:1 !important}
  }