/* Home page only: three small tiles into the gallery categories (Kresby, 3D / Blender, AI obrázky).
   Each tile = a small tilted paper note (same language as the blue note in the hero: tape, sand offset shadow),
   then number, name, one line and "Do galerie ↗". Until galerie.json has works, the note is an empty paper
   placeholder carrying the hand-drawn category icon; the first work of the category replaces it automatically.
   The icon drawing itself lives in icons.css. Motion: quiet tilt on mouse hover, 10px arrival while scrolling,
   both off for prefers-reduced-motion. */
/* Hero welcome: the same editorial Georgia introduction as on O mně (ink, not muted), one quiet line of
   invitation, then two "doors" into Galerie (01) and Články (02) – eyebrow + Georgia title + rust arrow +
   hand-drawn rust underline, the same gesture as Pokračovat at the end of the inner pages. No button, no card. */
.hero-welcome{font:clamp(21px,1.8vw,25px)/1.5 Georgia,'Times New Roman',serif;color:var(--ink);max-width:30ch;text-wrap:pretty;margin-bottom:14px}
.hero-welcome em{font-style:italic;color:var(--rust)}
.hero-invite{font-size:15px;color:var(--muted);max-width:44ch;margin-bottom:28px}
.hero-doors{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0 48px;border-top:1px solid var(--line);padding-top:22px;max-width:520px}
.hero-door{display:inline-flex;flex-direction:column;gap:8px;min-height:44px;-webkit-tap-highlight-color:transparent}
.hero-door .eyebrow{margin:0}
.hero-door-title{position:relative;display:inline-flex;align-items:baseline;gap:12px;width:fit-content;padding-bottom:9px;font:normal var(--row-title)/1.15 Georgia,serif;letter-spacing:-1px;color:var(--ink)}
.hero-door-title::after{content:"";position:absolute;left:0;right:26px;bottom:0;height:6px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 6px 4px;transform:rotate(-1.5deg);transform-origin:left}
.hero-door + .hero-door .hero-door-title::after{transform:rotate(1deg);border-radius:0 0 22% 48%/0 0 4px 6px}
.hero-door-arrow{font-size:22px;color:var(--rust)}
.hero-door:hover .hero-door-title,.hero-door:active .hero-door-title{color:var(--rust)}
.hero-door:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-door-arrow,.hero-door-title::after{transition:transform .22s ease}
  .hero-door:hover .hero-door-arrow{transform:translate(3px,-3px)}
  .hero-door:hover .hero-door-title::after{transform:rotate(-1.5deg) scaleX(1.08)}
  .hero-door + .hero-door:hover .hero-door-title::after{transform:rotate(1deg) scaleX(1.08)}
}
@media(max-width:600px){
  /* Headline scales with the phone width so "From the first line" / "k novým světům." stay on one line each
     down to 320 px (it used to leave "line" / "světům." alone on a row on smaller phones). */
  .hero h1{font-size:clamp(40px,calc(15vw - 7px),51px)}
  .hero-welcome{font-size:21px}
  .hero-doors{display:flex;flex-wrap:wrap;gap:20px;padding-top:18px}
  .hero-door{flex:1 1 7em;min-width:0}
  .hero-door-title{max-width:100%;flex-wrap:wrap}
  .hero-door-title{font-size:27px}
  .hero-door-arrow{font-size:19px}
}
@media(max-width:380px){.hero-door-title{font-size:24px;gap:8px}}
/* Hello strip (ec1e97fac): a quiet signed line above the hero – the artist name in italic Georgia with the
   footer's hand-drawn rust underline, then one sentence about the site, closed by a hairline. No banner, no photo. */
.home-hello{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;padding:30px 0 22px;border-bottom:1px solid var(--line)}
.home-hello p{margin:0}
.home-hello-name{position:relative;width:fit-content;padding-bottom:6px;font:italic 24px/1.2 Georgia,'Times New Roman',serif;color:var(--ink)}
.home-hello-name span{color:var(--rust)}
.home-hello-name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%;transform:rotate(-3deg)}
.home-hello-text{font-size:15px;color:var(--muted);text-wrap:pretty}
.home-hello + .hero{padding-top:56px}
@media(max-width:600px){.home-hello{padding:22px 0 18px}.home-hello-name{font-size:22px}.home-hello + .hero{padding-top:36px}}
.home-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line);padding-top:44px}
.home-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;column-gap:14px;align-content:start;min-width:0;color:var(--ink)}
.home-tile:hover{color:var(--ink)}
/* At enlarged text sizes the small side thumbnail must not squeeze reading into a few letters. */
.home-tile{container-type:inline-size;container-name:home-tile}
@container home-tile (width < 12em){
 .home-tiles .home-tile .tile-paper{grid-column:1 / -1;grid-row:1;width:104px;margin-bottom:20px}
 .home-tiles .home-tile .number{grid-column:1 / -1;grid-row:2}
 .home-tiles .home-tile h3{grid-column:1 / -1;grid-row:3}
 .home-tiles .home-tile p{grid-column:1 / -1;grid-row:4}
 .home-tiles .home-tile .tile-go{grid-column:1 / -1;grid-row:5}
}
.tile-paper{grid-column:1 / -1;position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin:0 14px 28px 0;background:var(--blue);box-shadow:8px 10px 0 var(--sand);transform:rotate(-1.5deg)}
.home-tile-1 .tile-paper{background:var(--olive);transform:rotate(1.2deg)}
.home-tile-2 .tile-paper{background:var(--clay);transform:rotate(-.8deg)}
.tile-paper::before{content:'';position:absolute;top:-11px;left:42%;width:72px;height:22px;background:var(--sand);opacity:.9;transform:rotate(-7deg);z-index:1}
.tile-paper .cat-icon{width:64px;height:64px}
.tile-paper img{display:block;width:100%;height:100%;object-fit:cover}
/* the picture fills the paper, whatever its own shape: the tile keeps its designed 16 : 9 (phone 4 : 3) */
.tile-paper img{position:absolute;inset:0}
.home-tile .number{grid-row:2;align-self:baseline;font-size:12px;color:var(--muted)}
.home-tile h3{grid-row:2;grid-column:2;font:normal var(--row-title)/1.15 Georgia,serif;letter-spacing:-1px;margin:0 0 8px}
.home-tile p{grid-row:3;grid-column:2;font-size:14px;color:var(--muted);margin:0 0 14px}
.tile-go{grid-row:4;grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:14px;min-height:44px;border-bottom:1px solid var(--ink);font-size:14px}
.tile-go span{color:var(--rust)}
.home-tile:focus-visible{outline-offset:8px}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tile-paper{transition:transform 220ms ease}
  .home-tile:hover .tile-paper{transform:translate(0,-3px) rotate(-.4deg)}
  .home-tile:hover .cat-icon{transform:translate(2px,-3px) rotate(4deg)}
  .home-tile:hover .stroke-trail{animation:icon-redraw 520ms ease-out}
  .home-tile h3{transition:color 200ms ease}
  .home-tile:hover h3{color:var(--rust)}
  .tile-go span{display:inline-block;transition:transform 200ms ease}
  .home-tile:hover .tile-go span{transform:translate(2px,-2px)}
}
.home-tile:active h3{color:var(--rust)}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .home-tile{animation:home-tile-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes home-tile-arrive{from{translate:0 10px}to{translate:0 0}}
  }
}
@media(max-width:900px){
  .home-tiles{gap:28px}
  .tile-paper .cat-icon{width:56px;height:56px}
}
/* Phone: tiles become compact rows – small paper on the left, text on the right. */
@media(max-width:600px){
  .home-tiles{grid-template-columns:1fr;gap:0;padding-top:0}
  .home-tile{grid-template-columns:104px auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;padding:26px 0;border-bottom:1px solid var(--line)}
  .tile-paper{grid-column:1;grid-row:1 / span 3;align-self:start;aspect-ratio:4/3;margin:8px 8px 0 0;box-shadow:5px 6px 0 var(--sand)}
  .tile-paper::before{top:-8px;width:44px;height:14px}
  .tile-paper .cat-icon{width:44px;height:44px}
  .home-tile .number{grid-column:2;grid-row:1}
  .home-tile h3{grid-column:3;grid-row:1;margin-bottom:4px}
  .home-tile p{grid-column:2 / -1;grid-row:2;margin-bottom:4px}
  .tile-go{grid-column:2 / -1;grid-row:3}
}
/* "Z galerie" / "Vybraná díla": a few works straight from galerie.json (the ones marked "vybrané", otherwise the
   first of the file), rebuilt with every build – Tereza never edits the home page by hand. Same small tilted paper
   notes with tape and the sand shadow as the gallery previews, in the colour of the category; under each the
   category (eyebrow style) and the title in Georgia. Four in a row, two on a phone. Absent while the gallery is empty. */
.home-works{margin-top:56px;border-top:1px solid var(--line);padding-top:28px}
.home-works-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:26px}
.home-works-head h3{font:normal var(--row-title)/1.15 Georgia,serif;letter-spacing:-1px;margin:0}
.home-works-head .text-link{flex:none}
.home-works-head .link-arrow{color:var(--rust)}
.home-works-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
.home-work a{display:flex;flex-direction:column;min-width:0;color:var(--ink);-webkit-tap-highlight-color:transparent}
.home-work-paper{position:relative;display:block;margin:10px 12px 20px 0;padding:9px 9px 11px;background:var(--blue);box-shadow:6px 8px 0 var(--sand);transform:rotate(-1.3deg)}
.home-work-1 .home-work-paper{background:var(--olive);transform:rotate(1deg)}
.home-work-2 .home-work-paper{background:var(--clay);transform:rotate(-.8deg)}
.home-work:nth-child(even) .home-work-paper{transform:rotate(1.1deg)}
.home-work-paper::before{content:'';position:absolute;z-index:1;top:-9px;left:40%;width:56px;height:18px;background:var(--sand);opacity:.92;transform:rotate(-7deg)}
.home-work-paper img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;box-sizing:border-box;padding:clamp(4px,4%,9px);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.home-work-cat{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.home-work-title{font:normal 22px/1.2 Georgia,serif;letter-spacing:-.4px;overflow-wrap:anywhere;width:fit-content;max-width:100%;background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 2px no-repeat;padding-bottom:2px}
.home-work a:hover .home-work-title,.home-work a:active .home-work-title{color:var(--rust)}
.home-work a:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .home-work-paper{transition:transform 220ms ease}
  .home-work a:hover .home-work-paper{transform:translate(0,-3px) rotate(-.4deg)}
  .home-work-title{transition:background-size 260ms ease,color 200ms ease}
  .home-work a:hover .home-work-title{background-size:100% 2px}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .home-work{animation:home-tile-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
@media(max-width:900px){.home-works-list{gap:32px 22px}}
@media(max-width:600px){
  .home-works{margin-top:0;padding-top:28px;border-top:0}
  .home-works-head{flex-wrap:wrap;gap:4px 16px;margin-bottom:18px}
  .home-works-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .home-work-paper{margin:8px 8px 16px 0;padding:7px 7px 9px;box-shadow:5px 6px 0 var(--sand)}
  .home-work-paper::before{top:-8px;width:44px;height:14px}
  .home-work-title{font-size:19px}
}
/* "Nejnovější článek" (Tereza, e880e3d08): the olive journal band on the home page carries the newest real article
   of clanky.json – its small tilted paper note (the article's photo on a cream mat, or its word with the drawn rust
   underline, as in the journal list), then date, title in Georgia, one-line summary and "Číst článek ↗". The band's
   own heading, line and "Všechny články" stay on the left. Without a real article the band is exactly as before. */
.journal.has-latest{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:64px;align-items:center}
.journal-head .text-link{margin-top:4px}
.journal-head h2{margin-bottom:22px}
.journal-latest{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:36px;align-items:center;min-width:0}
.journal-latest-note{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin:10px 10px 12px 0;background:var(--blue);color:var(--ink);box-shadow:7px 9px 0 var(--sand);transform:rotate(-1.8deg);-webkit-tap-highlight-color:transparent}
.journal-latest-note::before{content:'';position:absolute;z-index:1;top:-10px;left:40%;width:62px;height:20px;background:var(--sand);opacity:.92;transform:rotate(-7deg)}
.journal-latest-note:hover{color:var(--ink)}
.journal-latest-note .thumbnail-word{position:relative;max-width:100%;padding:0 10px 8px;font:italic clamp(30px,3vw,44px)/1.2 Georgia,serif;text-align:center;overflow-wrap:anywhere;transform:rotate(-5deg)}
.journal-latest-note .thumbnail-word::after{content:'';position:absolute;left:4%;right:14%;bottom:0;height:10px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 24%/0 0 10px 6px;transform:rotate(-2deg);transform-origin:left}
.journal-latest-note .thumbnail-word i{font-style:normal;font-size:.5em;margin-left:10px;color:var(--rust)}
.journal-latest-note.has-photo .note-photo{position:absolute;top:9px;left:9px;width:calc(100% - 18px);height:calc(100% - 20px);box-sizing:border-box;object-fit:contain;padding:clamp(4px,4%,10px);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.journal-latest-copy{min-width:0}
.journal .journal-latest-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 10px;font-size:12px;color:var(--brown);max-width:none}
.journal-latest-meta span{text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--rust)}
.journal-latest h3{font:normal clamp(26px,2.4vw,34px)/1.15 Georgia,serif;letter-spacing:-.8px;margin:0 0 12px;overflow-wrap:anywhere;text-wrap:balance}
.journal-latest h3 a{background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 2px no-repeat;padding-bottom:2px}
.journal .journal-latest-summary{max-width:46ch;margin:0 0 10px;color:var(--brown);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.journal-latest-read{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;border-bottom:1px solid var(--ink)}
.journal-latest-read span{color:var(--rust)}
.journal-latest-read:hover{border-color:var(--rust)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .journal-latest-note{transition:transform 220ms ease}
  .journal-latest:hover .journal-latest-note{transform:translate(0,-3px) rotate(-.6deg)}
  .journal-latest h3 a{transition:background-size 260ms ease}
  .journal-latest:hover h3 a{background-size:100% 2px}
}
@media(max-width:1000px){
  .journal.has-latest{grid-template-columns:1fr;gap:36px}
  .journal-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:end}
  .journal-head .eyebrow{grid-column:1 / -1}
  .journal-head h2{grid-column:1;grid-row:2 / span 2;margin-bottom:0}
  .journal-head p:not(.eyebrow){grid-column:2;grid-row:2;margin-bottom:6px}
  .journal-head .text-link{grid-column:2;grid-row:3;justify-self:start}
}
@media(max-width:600px){
  .journal-head{display:block}
  .journal-head h2{margin-bottom:16px}
  .journal-latest{grid-template-columns:1fr;gap:22px}
  .journal-latest-note{width:min(100%,300px);margin:8px 8px 10px 0}
  .journal-latest h3{font-size:27px}
}