/* journal.css — nur fuer Skin Heaven, ergaenzt main.css */
.j-filter{display:flex;gap:0;margin-bottom:26px;flex-wrap:wrap}
.j-filter a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;text-decoration:none;color:var(--muted);border:1px solid transparent}
.j-filter a:hover{color:var(--akzent-tief)}
.j-filter a[aria-current]{color:var(--ink);border-color:var(--line)}

.j-liste{border-top:1px solid var(--line)}
.j-eintrag{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:baseline;
  padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;
  transition:padding-left .25s ease,background-color .25s ease}
.j-eintrag:hover,.j-eintrag:focus-visible{padding-left:16px;background:var(--paper-2)}
.j-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.j-meta .chip{margin-left:8px}
.j-titel{font-family:var(--serif);font-size:clamp(19px,2.1vw,24px);font-weight:400;line-height:1.28}

.j-artikel{max-width:38em}
.j-artikel h2{font-size:clamp(22px,2.5vw,29px);margin:42px 0 14px}
.j-artikel h3{font-size:19px;margin:30px 0 8px}
.j-artikel ul{padding-left:20px;margin:0 0 18px}
.j-artikel li{margin-bottom:6px}
.j-artikel p:last-child em{color:var(--muted);font-size:14.5px}
.j-bild{width:100%;border:1px solid var(--line);margin-bottom:30px}
.j-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-tief)}
.j-hinweis{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:8px 12px;display:inline-block;margin-bottom:26px}
.j-autor{max-width:38em;margin-top:52px;padding:28px 30px;background:var(--paper-2);
  border-left:3px solid var(--akzent)}
.j-autor__bild{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:center 30%;
  float:left;margin:0 20px 8px 0;border:1px solid var(--line)}
html[dir="rtl"] .j-autor__bild{float:right;margin:0 0 8px 20px}
.j-autor::after{content:"";display:block;clear:both}
.j-autor h2{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.j-autor h3{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);margin:22px 0 8px}
.j-autor p{font-size:15px;color:var(--ink-2);margin:0}
html[dir="rtl"] .j-autor{border-left:0;border-right:3px solid var(--akzent)}

.j-zurueck{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.j-zurueck a{text-decoration:none;color:var(--muted)}
.j-zurueck a:hover{color:var(--akzent-tief)}
.ig{margin-top:72px;padding-top:8px}
.ig__r{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.ig__k{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);text-decoration:none}
.ig__k img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ig__k:hover img{transform:scale(1.03)}
.ig__t{position:absolute;inset:auto 0 0 0;padding:14px 14px 12px;font-size:13px;line-height:1.4;
  color:#fff;background:linear-gradient(to top,rgba(20,16,18,.78),rgba(20,16,18,0));
  opacity:0;transition:opacity .3s ease}
.ig__k:hover .ig__t,.ig__k:focus-visible .ig__t{opacity:1}
.ig__mehr{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:16px}
.ig__mehr a{color:var(--akzent-tief);text-decoration:none}
@media(max-width:560px){.ig__r{grid-template-columns:repeat(2,1fr)}.ig__t{opacity:1;font-size:11.5px}}

.j-feed{margin-top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted)}
.j-feed a{text-decoration:none}

html[dir="rtl"] .j-eintrag{grid-template-columns:1fr}
html[dir="rtl"] .j-eintrag:hover,html[dir="rtl"] .j-eintrag:focus-visible{padding-left:4px;padding-right:16px}
html[dir="rtl"] .j-meta .chip{margin-left:0;margin-right:8px}
html[dir="rtl"] .j-artikel[dir="rtl"] ul{padding-left:0;padding-right:20px}
html[dir="rtl"] .j-titel,html[dir="rtl"] .j-artikel h2,html[dir="rtl"] .j-artikel h3{
  font-family:"IBM Plex Sans Arabic",var(--sans);font-weight:300}
.j-artikel[dir="rtl"]{font-family:"IBM Plex Sans Arabic",var(--sans)}
@media(max-width:640px){.j-eintrag{grid-template-columns:1fr;gap:8px}}