/* Journal: article and list pages. Builds on shared/tokens.css (system font, ink, one red, hairlines). */
body.journal { background: var(--white); }
.jwrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }

/* header: the name, nothing else */
.jh { padding-block: var(--s-5); }
.jh .jwrap { max-width: var(--max); }
.jh-name { font-family: var(--display); font-weight: 600; font-size: var(--fs-small); text-decoration: none; letter-spacing: 0; }
.jh-name:hover { color: var(--red); }

/* article head */
.post { padding-bottom: var(--s-9); }
.post-head { padding-top: var(--s-8); }
.kicker { font: 600 var(--fs-label)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-4); }
.post-head h1, .index-head h1 {
  font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem); line-height: 1.07; letter-spacing: var(--tr-hero); font-weight: 650;
  overflow-wrap: break-word;
}
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--hair); font-size: var(--fs-small); color: var(--ink-2); font-family: var(--display); letter-spacing: 0; }

/* images */
.hero { margin: var(--s-7) 0 0; }
.hero img { width: 100%; height: auto; background: var(--mist); border-radius: 0.75rem; }
.hero--portrait { max-width: 26rem; }
.prose figure { margin: var(--s-7) 0; }
.prose img { width: 100%; height: auto; background: var(--mist); border-radius: 0.75rem; }
.prose figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }

/* reading text: ~68ch measure */
.prose { margin-top: var(--s-7); max-width: 68ch; font-size: 1.1875rem; line-height: 1.65; letter-spacing: -0.011em; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tr-h2); margin-top: 2.2em; font-weight: 650; }
.prose h3 { font-size: 1.3125rem; line-height: 1.25; margin-top: 1.9em; font-weight: 650; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.6em; }
.prose strong, .prose b { font-weight: 650; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--red); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--red); }
.prose blockquote { margin-left: 0; padding-left: var(--s-5); border-left: var(--line) solid var(--red); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin-block: 2.2em; }

/* end of article */
.post-nav { display: grid; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--hair); font-family: var(--display); }
.post-nav a { text-decoration: none; }
.back { color: var(--ink-2); font-size: var(--fs-small); }
.back:hover, .next:hover { color: var(--red); }
.next { font-size: var(--fs-lede); line-height: 1.25; font-weight: 600; letter-spacing: var(--tr-h3); }
.next span { display: block; margin-bottom: var(--s-2); font: 600 var(--fs-label)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* index */
.index { padding-bottom: var(--s-9); }
.index-head { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.list li { border-bottom: 1px solid var(--hair); }
.list a { display: block; padding-block: var(--s-6); text-decoration: none; }
.list time, .list .rt { font: var(--fs-small) var(--display); color: var(--ink-2); letter-spacing: 0; }
.list h2 { margin-top: var(--s-2); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tr-h3); transition: color .2s var(--ease-out); }
.list p { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }
.list .rt { display: block; margin-top: var(--s-3); }
.list a:hover h2 { color: var(--red); }

/* footer */
.jf { border-top: 1px solid var(--hair); padding-block: var(--s-6); font-size: var(--fs-small); color: var(--ink-2); font-family: var(--display); letter-spacing: 0; }
.jf-in { max-width: var(--max); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.jf nav { display: flex; gap: var(--s-5); }
.jf a { text-decoration: none; }
.jf a:hover { color: var(--red); }

@media (max-width: 480px) {
  .post-head, .index-head { padding-top: var(--s-7); }
  .prose { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* testata delle pagine interne: nome, sezioni, lingua, la chiamata con l'AI */
.jh-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.jh-nav { display: flex; align-items: center; gap: var(--s-5); font: 500 var(--fs-small) var(--display); letter-spacing: 0; }
.jh-nav a { text-decoration: none; color: var(--ink-2); }
.jh-nav a:hover { color: var(--red); }
.jh-nav .jh-cta { color: var(--white); background: var(--ink); padding: var(--s-2) var(--s-4); border-radius: 999px; }
.jh-nav .jh-cta:hover { background: var(--red); color: var(--white); }
@media (max-width: 480px) { .jh-nav { gap: var(--s-4); } .jh-nav a[hreflang] { display: none; } }

/* fine nota: invito a parlare */
.post-cta { margin-top: var(--s-8); padding: var(--s-6); border-radius: 1.25rem; background: var(--mist); }
.post-cta-k { font: 600 var(--fs-label)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-3); }
.post-cta h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tr-h3); max-width: 30ch; }
.post-cta p { margin-top: var(--s-3); color: var(--ink-2); max-width: 52ch; }
.post-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5) !important; }
.cta-btn { display: inline-flex; align-items: center; font: 500 var(--fs-small) var(--display); background: var(--ink); color: var(--white); padding: var(--s-3) var(--s-5); border-radius: 999px; text-decoration: none; }
.cta-btn:hover { background: var(--red); }
.cta-link { font: 500 var(--fs-small) var(--display); color: var(--red); text-decoration: none; }
.cta-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.index-lede { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.33; color: var(--ink-2); max-width: 40ch; }

/* indice con copertine */
.list--covers a { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.list-cover { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--mist); }
.list-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .4s var(--ease-out); }
.list--covers a:hover .list-cover img { filter: none; }
.list-text { display: block; }
@media (max-width: 40rem) { .list--covers a { grid-template-columns: 1fr; gap: var(--s-4); } .list-cover { aspect-ratio: 16 / 9; } }

/* risultati */
.results .r-block { padding-block: var(--s-7); border-top: 1px solid var(--hair); }
.r-block h2 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.r-block > p { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }
.r-stats { margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-5); }
.r-stats div { border-top: var(--line) solid var(--ink); padding-top: var(--s-3); }
.r-stats div:first-child { border-top-color: var(--red); }
.r-stats dd { margin: 0; font: 600 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.01em; }
.r-stats dt { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.r-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.r-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.r-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--hair); }
.r-list span { color: var(--red); font: 500 var(--fs-small) var(--display); padding-top: .2em; }
.r-photos { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.r-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--mist); }
.r-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.06); }
@media (max-width: 40rem) { .r-photos { grid-template-columns: 1fr 1fr; } .r-photos .r-photo:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }

/* /talk/: la chiamata con l'AI, da sola */
.talk .really { margin-top: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--s-8) var(--s-6); background: var(--white); box-shadow: var(--lift-2); }
.talk .really-act { justify-items: center; }
.talk .really-call { font-size: 1.125rem; padding: var(--s-4) var(--s-6); }
.talk .really-status, .talk .really-fine { text-align: center; max-width: 40ch; }
.talk .really-wa { text-align: left; }
.talk .voice-help { text-align: left; }
.talk-points { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.talk-points li { border-top: var(--line) solid var(--ink); padding-top: var(--s-3); }
.talk-points li:last-child { border-top-color: var(--red); }
.talk-points b { display: block; font: 600 var(--fs-body) var(--display); }
.talk-points span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.talk-write { margin-top: var(--s-6); }
@media (max-width: 40rem) { .talk-points { grid-template-columns: 1fr; } .talk .really { padding: var(--s-6) var(--s-4); } }