/* Jeanne Arte — blog.css · the Journal (blog.html: /blog and /blog/<slug>) only.
   The list is a table of contents (title ……… date); an article is a page of the
   same book. Tokens and shared components: css/site.css. The article's blocks
   (text, images, call to action …): css/blocks.css. Page-scoped classes only,
   all prefixed .blog-. No colour is written here: the tokens give them. */

/* ---------------------------------------------------------------- the page */
.blog-orn { margin-block: var(--s5) var(--s3); }
.blog-head__back { margin-top: var(--s2); }
.blog-all { margin-bottom: var(--s1); }
.blog-empty { padding-block: var(--s5); }

/* ---------------------------------------------------------------- table of contents
   One entry per article: the date as a small label, the title, the excerpt in
   italics, a small framed photo. From 640 px the date moves to the end of the
   title's last line, joined to it by a dotted leader — the carte's idiom. */
.blog-entry {
  display: flow-root;
  padding-block: var(--s4);
}
.blog-entry + .blog-entry { border-top: 1px solid var(--line); }
.blog-entry:last-child { padding-bottom: 0; }
html.js .blog-entry { cursor: pointer; }

/* phones: the photo floats right from the title's first line down; the date
   label above it keeps the full width (the float's top margin is cut out of its
   wrap shape), so « 2 NOVEMBRE 2026 » never breaks beside the photo */
.blog-entry__thumb {
  float: right;
  width: 104px;
  margin: 28px 0 var(--s1) var(--s2);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  shape-outside: inset(28px 0 0 0);
}
@media (max-width: 359px) {
  .blog-entry__thumb { width: 88px; margin-left: 12px; }
}
.blog-entry__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: filter .3s;
}
html.dark .blog-entry__thumb img { filter: brightness(.88); }

/* phones: no leader, the date sits above the title */
.blog-entry__line.line { display: block; }
.blog-entry__line.line .line__l::after { display: none; }
.blog-entry__date {
  padding-left: 0;
  font-size: var(--fs-label);
  line-height: 1.45;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--accent);
}
/* with the language beside it (« 13 августа 2026 г. · Français ») the label may
   take two lines on a narrow phone: the break falls before the language */
.blog-entry__date time { white-space: nowrap; }
.blog-entry__title {
  margin-top: 6px;
  font-size: var(--fs-h3);
  line-height: 1.35;
  overflow-wrap: break-word;
  text-wrap: pretty; /* full lines, so the leader runs from a short last line */
}
.blog-entry__link {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s;
}
.blog-entry:hover .blog-entry__link,
.blog-entry__link:focus-visible { text-decoration-color: var(--accent); }

.blog-entry__excerpt {
  margin-top: var(--s1);
  font-size: 1.125rem;
  line-height: 1.55;
  font-style: italic;
}

/* « Lire l'article → »: what the whole entry does, said in words (the title is the link) */
.blog-entry__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s1);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--accent);
}
.blog-entry__more span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color .2s;
}
.blog-entry__more .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.blog-entry:hover .blog-entry__more span { text-decoration-color: currentColor; }
.blog-entry:hover .blog-entry__more .i { transform: translateX(3px); }

@media (min-width: 640px) {
  .blog-entry.has-thumb {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: start;
  }
  .blog-entry__thumb {
    float: none;
    width: auto;
    margin: 6px 0 0;
    padding: 5px;
    shape-outside: none;
  }
  .blog-entry__line.line { display: grid; }
  .blog-entry__line.line .line__l::after { display: block; }
  .blog-entry__date {
    grid-column: 2;
    grid-row: 1;
    padding-left: .6em;
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    font-style: italic;
    white-space: nowrap;
    color: var(--text-muted);
  }
  .blog-entry__title { grid-column: 1; grid-row: 1; margin-top: 0; }
}

/* ---------------------------------------------------------------- an article
   label (date · Journal), the title, the cover in a hairline mount, the body in
   a Spectral reading column, then a ruled page foot: the way back and a quiet
   booking line. The footer's fleuron follows at once and closes the article —
   a second one here would set two identical ornaments a hand apart. Fleurons
   inside an article come from the panel's « Разделитель » (divider) blocks.
   The title keeps the whole 720 px column; the photo, the text and the end
   matter share one narrower measure: 31 em of Spectral is about 68 characters
   a line in French (34 em gave 75 — over the 70 ch the system allows). */
.blog-cover,
.blog-body,
.blog-post__foot {
  max-width: 31em;
  margin-inline: auto;
}
/* At 40 px on a 320 px phone a word like « Parasympathetic » is wider than the
   column: hyphenate long words only, never « ri-tuel ». */
.blog-post__title {
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
/* most of Jeanne's titles are a whole sentence: they open at the low end of the
   h1 range rather than filling five lines at 68 px */
.blog-post__title.is-long { font-size: clamp(2.5rem, 1.95rem + 1.9vw, 3.5rem); line-height: 1.08; }
/* …and on the smallest phones they step below the 40 px floor: browsers do not
   hyphenate a Capitalised Word, and « Parasympathetic » (287 px at 40 px) would
   otherwise be cut in two without a hyphen on a 280 px column (244 px at 34). */
@media (max-width: 359px) {
  .blog-post__title.is-long { font-size: 2.125rem; line-height: 1.1; }
}

/* "Not written in your language yet — read it in …" */
.blog-langs {
  max-width: 30em;
  margin: var(--s3) auto 0;
  padding-block: var(--s1);
  border-block: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-muted);
}
.blog-langs p:first-child { padding-top: var(--s1); }
.blog-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  font-style: normal;
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
}
.blog-langs a:hover { text-decoration-thickness: 2px; }
/* the lead, then the languages as one group: they wrap together, below it */
.blog-langs__row,
.blog-langs__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
}
.blog-langs__links { column-gap: 4px; }

.blog-cover { margin: var(--s5) auto 0; }
.blog-cover__frame {
  display: block;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.blog-cover__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
html.dark .blog-cover__frame img { filter: brightness(.88); }
.blog-cover figcaption {
  margin-top: var(--s1);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}

.blog-body { margin-top: var(--s5); }
/* Section titles are whole sentences (« 3. Le massage bien-être est un véritable
   rituel. »): balanced wrapping broke them at « bien-|être »; fill the line instead. */
.blog-body .prose h2,
.blog-body .prose h3 { line-height: 1.22; text-wrap: pretty; }

.blog-post__foot { margin-top: var(--s6); }
.blog-post__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--line-2);
}
.blog-post__nav .link { text-underline-offset: 6px; }
.blog-back-i { transform: scaleX(-1); }
.blog-post__nav .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.blog-post__back:hover .i { transform: scaleX(-1) translateX(3px); }
.blog-post__book:hover .i { transform: translateX(3px); }
@media (max-width: 559px) {
  .blog-post__nav { flex-direction: column; }
}

/* ---------------------------------------------------------------- print: the article as a page */
@media print {
  .blog-entry__more, .blog-post__nav, .blog-langs { display: none !important; }
  html.dark .blog-entry__thumb img,
  html.dark .blog-cover__frame img { filter: none; }
}