/* One article (template for real stories from clanky.json). Surface: Decide / Learn – one text to read.
   Top: back to the journal, then title + summary + date on the left and the same tilted paper note as in the
   list on the right (tape, sand offset shadow, thumbnail_word with a drawn rust underline, colour of its row).
   Below: the text in one comfortable column, back link again at its end, then a quiet "next story" link. */
.article-read-more:hover{color:var(--rust);border-color:var(--rust)}
.story-detail{padding-top:calc(var(--page-top) - 44px)}
.story-back{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:14px;-webkit-tap-highlight-color:transparent}
.story-back span{color:var(--rust);margin-right:6px}
.story-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:72px;align-items:center;margin:28px 0 56px}
.story-heading h1{max-width:800px;font-size:var(--title-inner);text-wrap:balance}
.story-heading .intro{max-width:620px;text-wrap:pretty}
.story-heading .article-meta{margin:8px 0 0}
.story-sample{max-width:560px;margin:16px 0 0;padding:10px 14px;background:var(--olive);color:var(--brown);font-size:13px}
.story-note{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin:12px 12px 12px 0;background:var(--blue);box-shadow:9px 11px 0 var(--sand);transform:rotate(2.2deg)}
.story-note.thumbnail-1{background:var(--olive);transform:rotate(-1.6deg)}
.story-note.thumbnail-2{background:var(--clay);transform:rotate(1.4deg)}
.story-note::before{content:'';position:absolute;top:-12px;left:40%;width:80px;height:24px;background:var(--sand);opacity:.9;transform:rotate(-7deg)}
.story-note .thumbnail-word{position:relative;padding-bottom:8px;font:italic clamp(40px,4.4vw,60px)/1.2 Georgia,serif;border:0;border-radius:0;transform:rotate(-5deg)}
.story-note .thumbnail-word::after{content:'';position:absolute;left:-4%;right:10%;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}
.story-note .thumbnail-word i{font-style:normal;font-size:.5em;margin-left:12px;color:var(--rust)}
.story-prose{max-width:680px;border-top:1px solid var(--line);padding-top:48px;font-size:18px;line-height:1.85}
.reading-section{margin-bottom:40px}
.reading-section h2{font:normal var(--section-title)/1.2 Georgia,serif;letter-spacing:-.5px;margin-bottom:16px}
.story-prose p{margin-bottom:24px;text-wrap:pretty}
.story-back-end{margin-top:8px}
/* Own article photographs: whole image, readable caption, no decorative crop. */
.story-photo{margin:32px 0;max-width:100%}
.story-photo img{display:block;max-width:100%;width:auto;height:auto;object-fit:contain}
.story-photo figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.story-next{margin-top:64px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .story-note{transition:transform 220ms ease}
  .story-top:hover .story-note{transform:translate(0,-3px) rotate(1deg)}
  .story-back span{display:inline-block;transition:transform 200ms ease}
  .story-back:hover span{transform:translateX(-3px)}
}
.story-back:active{color:var(--rust)}
@media(max-width:750px){
  .story-top{grid-template-columns:1fr;gap:36px;margin:20px 0 44px}
  .story-note{width:min(78%,300px);margin-left:6px}
  .story-prose{padding-top:36px;font-size:17px}
  .story-next{margin-top:44px}
}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.reading-section{animation:reading-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}@keyframes reading-arrive{from{translate:0 10px}to{translate:0 0}}}}
.article-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}.article-read-more{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid var(--muted);border-radius:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;opacity:1;cursor:pointer}.articles-intro{padding-bottom:24px}.journal-mark{display:inline-block;color:var(--rust);font-style:italic;font-size:.65em;margin-left:28px;transform:rotate(-12deg)}.article-notice{max-width:700px;color:var(--muted);font-size:14px;margin:0 0 40px}.article-list{list-style:none;padding:0;margin:0 0 90px}.article-row{display:grid;grid-template-columns:minmax(200px, .8fr) 1.6fr;gap:56px;padding:44px 0;border-top:1px solid var(--line);align-items:center}.article-thumbnail{aspect-ratio:3/2;background:var(--blue);color:var(--ink);padding:24px;display:flex;flex-direction:column;justify-content:center;position:relative;transition:transform 200ms ease}.thumbnail-1{background:var(--olive)}.thumbnail-2{background:var(--clay)}.thumbnail-word{font:italic clamp(36px,4vw,60px)/1.2 Georgia,serif;align-self:center;transform:rotate(-5deg);border-bottom:2px solid var(--ink);border-radius:0 0 48% 24%}.thumbnail-word i{font-size:.5em;margin-left:12px}.thumbnail-label{position:absolute;bottom:14px;left:20px;font-size:12px;letter-spacing:1px}.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:12px;margin:0 0 14px}.article-meta>span:first-child{text-transform:uppercase;letter-spacing:1.5px;color:var(--rust);font-weight:bold}.article-copy h2{font:normal clamp(28px,3vw,42px)/1.15 Georgia,serif;letter-spacing:-1px;margin:0 0 16px}.article-copy>p:not(.article-meta){max-width:560px;color:var(--muted);margin-bottom:18px}.article-status{font-size:12px;color:var(--muted)}@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.article-row:hover .article-thumbnail{transform:translateY(-3px) rotate(-.5deg)}}@media(max-width:650px){.article-row{grid-template-columns:1fr;gap:28px;padding:40px 0}.article-thumbnail{aspect-ratio:16/9}.thumbnail-word{font-size:48px}.article-copy h2{font-size:32px}.article-list{margin-bottom:48px}.article-notice{margin-bottom:28px}.journal-mark{margin-left:18px}}@media(prefers-reduced-motion:reduce){.article-thumbnail{transition:none}}
/* Journal list, empty state: the same tilted paper note with tape and sand offset shadow as the empty gallery
   categories, in the olive of the journal band on the home page. One italic Georgia line with a drawn rust
   underline. Pure text, no fake story; it disappears with the first real article in clanky.json.
   Quiet 10px arrival on scroll, the note lifts under the mouse; all off for prefers-reduced-motion. */
.articles-soon{margin:36px 0 8px;max-width:640px}
.articles-soon .soon-line{position:relative;display:inline-block;max-width:100%;margin:0;padding:20px 30px 22px 26px;background:var(--olive);box-shadow:7px 8px 0 var(--sand);transform:rotate(-1.2deg);font:italic 19px/1.4 Georgia,serif;color:var(--ink);text-wrap:pretty}
.articles-soon .soon-line::before{content:'';position:absolute;top:-10px;left:38%;width:64px;height:20px;background:var(--sand);opacity:.9;transform:rotate(-7deg)}
.articles-soon .soon-line::after{content:'';position:absolute;left:24px;right:34%;bottom:14px;height:8px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 8px 5px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .articles-soon .soon-line{transition:transform 220ms ease}
  .articles-soon:hover .soon-line{transform:translate(0,-3px) rotate(-.4deg)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .articles-soon{animation:journal-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes journal-arrive{from{translate:0 10px}to{translate:0 0}}
  }
}
/* The page end (space before the footer) is shared via main{padding-bottom:var(--page-end)} in style.css. */
.articles-intro:last-child{padding-bottom:0}
@media(max-width:650px){
  .articles-soon{margin:28px 8px 4px 0}
  .articles-soon .soon-line{padding:16px 22px 18px 20px;font-size:17px;box-shadow:5px 6px 0 var(--sand)}
  .articles-soon .soon-line::before{top:-8px;width:48px;height:15px}
  .articles-soon .soon-line::after{left:18px;bottom:11px}
}
/* Journal list, finished look (first real story will switch it on). Surface: Explore – a calm list of
   rows, not a card grid. Each preview is a small paper note like the blue note on the home page:
   tilted, taped, with the sand offset shadow and a hand-drawn rust underline under the word.
   The whole title is the link; the note and "Read more" point to the same story. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.article-list{margin-bottom:0}
.article-list>li:last-child .article-row{border-bottom:1px solid var(--line)}
.article-thumbnail{margin:6px 12px 12px 0;transform:rotate(-1.5deg);box-shadow:8px 10px 0 var(--sand)}
.article-list>li:nth-child(even) .article-thumbnail{transform:rotate(1.2deg)}
.article-thumbnail::before{content:'';position:absolute;top:-11px;left:42%;width:72px;height:22px;background:var(--sand);opacity:.9;transform:rotate(-7deg)}
.article-thumbnail .thumbnail-word{border-bottom:0;border-radius:0;position:relative;padding-bottom:8px}
.article-thumbnail .thumbnail-word::after{content:'';position:absolute;left:-4%;right:10%;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}
.article-thumbnail .thumbnail-word i{font-style:normal;color:var(--rust)}
a.article-thumbnail:hover{color:var(--ink)}
.article-meta{align-items:baseline}
.article-copy h2{max-width:620px;text-wrap:balance}
.article-title{background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 2px no-repeat;padding-bottom:2px}
.article-title:hover{color:var(--rust)}
.article-summary{text-wrap:pretty}
.article-read-more{color:var(--ink);border-bottom-color:var(--ink)}
.article-read-more span{color:var(--rust)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .article-title{transition:background-size 260ms ease,color 200ms ease}
  .article-row:hover .article-title{background-size:100% 2px}
  .article-row:hover .article-thumbnail{transform:translate(0,-3px) rotate(-.4deg)}
  .article-thumbnail .thumbnail-word::after{transition:transform 260ms ease}
  .article-row:hover .thumbnail-word::after{transform:rotate(-2deg) scaleX(1.08)}
  .article-read-more span{transition:transform 200ms ease}
  .article-read-more:hover span{transform:translate(2px,-2px)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .article-row{animation:journal-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
/* Private layout preview only (nahled-clanku.html, noindex, not linked). */
.preview-banner{margin:24px 0 0;padding:12px 16px;background:var(--olive);color:var(--brown);font-size:13px;max-width:760px}
@media(max-width:650px){
  .article-row{gap:32px;padding:36px 0}
  .article-thumbnail{margin:6px 8px 10px 0}
  .article-copy h2{font-size:30px}
}
/* Robustness on real stories: columns never grow with a long title, word or link (minmax(0,…)); a long word on the
   paper note breaks inside the note instead of sticking out of it. */
.article-row{grid-template-columns:minmax(200px,.8fr) minmax(0,1.6fr)}
.article-thumbnail .thumbnail-word,.story-note .thumbnail-word{max-width:100%;overflow-wrap:anywhere;text-align:center}
.story-note{padding:18px 20px}
@media(max-width:750px){.story-top{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.article-row{grid-template-columns:minmax(0,1fr)}}
/* Article photo (optional "image" in clanky.json). The paper note keeps its shape (list 3 : 2, phone 16 : 9, article
   page 4 : 3), its colour, tape and tilt; the WHOLE photo lies in it on a cream mat with a hairline edge – the same
   passe-partout as the gallery previews and the photo on O mně. Portrait or landscape, nothing is cut or stretched. */
.article-thumbnail.has-photo,.story-note.has-photo{padding:0}
.note-photo{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 22px);box-sizing:border-box;object-fit:contain;padding:clamp(6px,4%,12px);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.story-note .note-photo{top:14px;left:14px;width:calc(100% - 28px);height:calc(100% - 30px)}