#portrait p em{font-family: "DM Sans Presentation", "DM Sans", Arial, sans-serif;
  font-style: italic !important;
  font-weight: 400;}
#histoires .features{grid-template-columns: 1.35fr .65fr;
  gap: 36px;
  align-items: end !important;}
#histoires .stories-return{gap: 22px;
  margin-top: 110px;
  align-items: start;}
#histoires .jpp-photo{margin: 0;
  padding: 4.5%;
  background: #f3f0e8;
  color: #656960;}
#histoires .jpp-photo img,#histoires .jpp-photo-image{display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: none;
  transition: none;}
#histoires .jpp-photo figcaption{margin: 16px 0 3px;
  font: 500 11px/1.4 "DM Sans", Arial, sans-serif;
  letter-spacing: .015em;
  text-transform: uppercase;}
#histoires .jpp-babylab{display: grid;
  grid-template-columns: 1243fr 407fr;
  gap: 0;}
#histoires .stories-return h3{font-size: 27px;
  line-height: 1.05;
  margin: 14px 0 7px;}
#histoires .meta{font-size: 11px;
  letter-spacing: .09em;}
#histoires .tokyo-pair{gap: 5%;
  padding: 8% 6%;}
#histoires .tokyo-pair img{width: 46%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transform: rotate(-6deg);}
#histoires .tokyo-pair img + img{margin-left: 0;
  transform: rotate(7deg) translateY(5%);}
@media (max-width: 850px){#histoires .features{display: block;}
#histoires .feature-secondary{margin-top: 60px;}
#histoires .stories-return{grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 60px;}
#histoires .stories-return article:last-child{display: block;}
#histoires .stories-return h3{font-size: clamp(31px, 5vw, 43px);}
#histoires .jpp-photo figcaption{margin-top: 12px;}
}
#histoires .story-cover{display: block; position: relative; cursor: pointer;}
#histoires .story-cover.tokyo-pair{display: flex;}
#histoires .story-title-link{cursor: pointer;}
#histoires .story-cover:focus-visible,#histoires .story-title-link:focus-visible{outline: 2px solid var(--accent);
  outline-offset: 5px;}
#histoires .story-photo-viewport{overflow: hidden;}
#histoires .story-photo-viewport > *{transition: transform .6s cubic-bezier(.2,.75,.25,1);
  transform-origin: center;}
#histoires .story-read-cursor{position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 8px #0001;
  font: 600 10px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: .09em;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;}
@media (min-width: 851px) and (hover: hover) and (pointer: fine){#histoires .story-cover:hover .story-photo-viewport > *{transform: scale(1.018);}
#histoires .tokyo-pair:hover img{transform: rotate(-6deg) scale(1.015);}
#histoires .tokyo-pair:hover img + img{transform: rotate(7deg) translateY(5%) scale(1.015);}
#histoires .story-read-cursor.is-visible{opacity: 1; visibility: visible;}
}
#histoires .stories-more{display: grid;
  grid-template-columns: 21% 1fr;
  gap: 3%;
  margin-top: 100px;
  padding-inline: 3.3%;
  align-items: start;}
#histoires .stories-more-label{color: var(--accent);
  font-size: clamp(12px, 1.17vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding-top: .45em;}
#histoires .stories-more-label::after{content: "";
  display: block;
  width: clamp(40px, 3.35vw, 64px);
  height: 2px;
  background: currentColor;
  margin-top: 20px;}
#histoires .stories-more p{margin: 0;
  color: #c2beb1;
  font: italic 400 clamp(28px, 2.15vw, 40px)/1.3 "Instrument Serif", Georgia, serif;}
#histoires .stories-more strong{font-weight: 400; color: var(--paper);}
#histoires .stories-more-punctuation{color: var(--accent);}
@media (max-width: 850px){#histoires .stories-more{grid-template-columns: 1fr; gap: 26px; padding-inline: 0; margin-top: 65px;}
#histoires .stories-more-label{font-size: 12px;}
#histoires .stories-more-label::after{margin-top: 14px;}
}
@media (max-width: 850px), (hover: none), (pointer: coarse){#histoires .story-read-cursor{display: none;}
#histoires .story-title-link::after{content: "Lecture à venir ↗";
    display: block;
    margin-top: 12px;
    margin-bottom: 10px;
    color: #c2beb1;
    font: 500 10px/1.4 "DM Sans", Arial, sans-serif;
    letter-spacing: .08em;}
}
@media (prefers-reduced-motion: reduce){#histoires .story-photo-viewport > *,#histoires .tokyo-pair img,#histoires .story-read-cursor{transition: none;}
#histoires .story-cover:hover .story-photo-viewport > *{transform: none;}
#histoires .tokyo-pair:hover img{transform: rotate(-6deg);}
#histoires .tokyo-pair:hover img + img{transform: rotate(7deg) translateY(5%);}
}
.hero h1 .hero-dot{font-weight: inherit; color: var(--accent);}
.hero h1 > span:last-child .hero-dot{color: var(--ink);}
#livres .books-header{display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;}
#livres .books-header h2{min-width: 0;}
#livres .books-copy{display: block;
  width: min(340px, 35%);
  flex-shrink: 0;
  padding-bottom: 10px;}
#livres .books-copy p{font-size: clamp(16px, 1.7vw, 23px);
  line-height: 1.28;
  margin: 0 0 23px;}
#livres .chapter-preview{align-self: flex-start;}
#contact .contact-photo img{aspect-ratio: 1133 / 1700; height: auto;}
#contact .contact-photo-credit{display: inline;
  margin: 0;
  font: 500 11px/1.4 "DM Sans", Arial, sans-serif;
  letter-spacing: .015em;
  color: #656960;}
#contact .contact-photo figcaption{white-space: nowrap;}
.interlude-two-v3 .interlude-two-inner{align-items: baseline; gap: 14px;}
.interlude-two-v3 .interlude-date{font: 400 12px/1.4 "DM Sans", Arial, sans-serif; white-space: nowrap;}
.interlude-two-v3 > p em{font-family: "DM Sans Presentation", "DM Sans", Arial, sans-serif;}
@media (max-width: 850px){#livres .books-header{display: block;}
#livres .books-copy{width: 100%; margin-top: 25px;}
#contact .contact-photo figcaption{white-space: normal;}
}
@media (max-width: 590px){.interlude-two-v3 .interlude-two-inner{margin: 10px 0!important;}
}
#livres .book-cover-link{display: block;}
#contact .contact-project-label{margin-top: 32px;}
@media (max-width:850px), (hover:none), (pointer:coarse){#histoires .story-title-link[href]::after{content: "Lire ↗";}
}
#contact .contact-project-label::before{content: ""; display: block; width: 70px; height: 1px; background: currentColor; opacity: .35; margin-bottom: 20px;}
#contact .contact-project-copy{font-size: 17.5px; margin-bottom: 14px;}
#contact .email{margin-top: 23px;}