/* ---------- 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);
    --nav-h:64px;
    --cover-h:84px;     /* book covers share one height; width follows each book's ratio */
    --cover-col:128px;  /* fixed cover column = fits the widest cover, keeps titles aligned */
  }

  .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 — fixed height, width follows each book's ratio (no cropping).
     Default ratio here; per-book ratio is set inline in the markup. */
  .bookcover{
    position:relative;background:#EFEFEC;
    aspect-ratio:2 / 3;height:var(--cover-h);width:auto;max-width:100%;
    justify-self:start;align-self:start;overflow:hidden;
    border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .bookcover img{width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- 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 — 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}

  /* two-stage hero: a fast -lq preview <picture> paints first, then the full
     <img> (data-fade above) fades in over it. Both pictures are absolute-filled
     inline; DOM order stacks the full one on top. No-JS safe: the full img only
     dims under .js, so JS-off shows it normally over the preview. */
  .hero-wrap{position:relative;overflow:hidden}

  /* 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}

  /* click-to-maximize trigger — transparent button overlaying each photo.
     Hidden without JS so there is no dead control (the image still shows). */
  .ph-zoom,.cover-zoom{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:zoom-in;z-index:2}
  html:not(.js) .ph-zoom,html:not(.js) .cover-zoom{display:none}

  /* ---------- lightbox ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:100;display:none;
    align-items:center;justify-content:center;
    background:rgba(20,20,20,.94);
    padding:max(24px,4vh) clamp(16px,8vw,96px);
  }
  .lightbox.is-open{display:flex}
  html.js .lightbox.is-open{animation:pageEnter var(--dur) var(--ease)}
  .lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%}
  .lightbox-stage{display:flex;align-items:center;justify-content:center;max-width:100%}
  .lightbox-cap{
    display:flex;justify-content:center;align-items:baseline;gap:16px;flex-wrap:wrap;text-align:center;
    color:#F4F2EE;
  }
  .lightbox-cap .serif{font-size:19px}
  .lightbox-cap .lbl{color:#9A968E}
  /* controls — minimal circular buttons in the monochrome aesthetic */
  .lightbox-btn{
    position:absolute;display:flex;align-items:center;justify-content:center;padding:0;
    border:0;border-radius:999px;
    background:rgba(255,255,255,.10);color:#FFFFFF;cursor:pointer;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  }
  .lightbox-btn svg{width:50%;height:50%;display:block}
  .lightbox-close{top:max(18px,3vh);right:clamp(16px,5vw,40px);width:44px;height:44px}
  .lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
  .lightbox-prev{left:clamp(10px,3vw,32px)}
  .lightbox-next{right:clamp(10px,3vw,32px)}
  .lightbox-nav[disabled]{opacity:.25;cursor:default;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lightbox-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}

  /* 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)}

  /* clears the sticky main nav when a stat tile jumps to a group */
  .book-group{scroll-margin-top:calc(var(--nav-h) + 24px)}

  /* clickable bibliography stat tiles — jump to the matching group */
  .book-stat-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
  .book-stat-link span:last-child{transition:color var(--dur-fast) 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}
    .book-stat-link:hover{transform:translateY(-3px)}
    .book-stat-link:hover span:last-child{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}
    .lightbox-btn:not([disabled]):hover{background:rgba(255,255,255,.22)}
    .lightbox-nav:not([disabled]):hover{transform:translateY(-50%) scale(1.06)}
  }

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    :root{--nav-h:52px;--cover-h:60px;--cover-col:92px}
    /* 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 var(--cover-col) 1fr !important;gap:14px !important}
    .book-row .kind{display:none}
    .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}

    /* lightbox: arrows over a near-full-width image obstruct it on phones, so
       drop them to a centred row in the reserved bottom band and trim the image
       height to leave room for the caption + controls. */
    .lightbox{padding:max(16px,2.5vh) 4vw calc(56px + max(16px,2.5vh))}
    .lightbox-stage img{max-width:92vw !important;max-height:60vh !important}
    .lightbox-nav{top:auto;bottom:max(16px,2.5vh);transform:none;width:48px;height:48px}
    .lightbox-prev{left:50%;right:auto;margin-left:-54px}
    .lightbox-next{left:50%;right:auto;margin-left:6px}
  }

  /* ---------- 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}
  }