/* Distilcuts additions on top of Basho's screen.css (kept untouched so Basho updates stay mergeable) */

/* Hero
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero-title {
   text-wrap: pretty; /* no lone "!" on the last line */
}

.hero-description {
   font-size: 2.2rem;
   line-height: 1.5;
   max-width: 900px;
   margin: -2vh 0 4.5vh;
   opacity: var(--opacity-one);
}

/* Header social links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Instagram, LinkedIn and search form one evenly spaced icon group (18px between icons) */
.header-nav .header-social {
   display: flex;
}

.header-social:not(:has(a)),
.header-social.is-mobile {
   display: none;
}

.header-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 44px;
}

.header-social svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

/* Daily
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Bottom spacing on the section, not the grid, so the mobile button keeps it below */
.daily-section {
   margin-bottom: 8vh;
}

.daily-section .special-wrap {
   grid-template-columns: repeat(4, 1fr);
   margin-bottom: 0;
}

.daily-section .global-subtitle {
   flex-wrap: wrap;
   gap: 0 16px;
}

/* "All editions / episodes" link: in the section header on desktop, a centered button under the section on mobile */
.section-more {
   flex: none;
   align-self: center;
   font-size: 1.6rem;
   margin: -12px 0 -12px auto;
   padding: 12px 0;
   font-weight: var(--font-weight-three-medium);
}

.section-more-button.is-mobile {
   display: none;
}

/* Logos
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.logos-section {
   margin-bottom: 8vh;
   text-align: center;
}

.logos-title {
   font-size: 2rem;
   font-weight: var(--font-weight-three-medium);
   line-height: 1.35;
   max-width: 700px;
   margin: 0 auto 4vh;
}

.logos-marquee {
   display: flex;
   overflow: hidden;
   --marquee-gap: 64px;
   gap: var(--marquee-gap);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logos-track,
.testi-track {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: space-around;
   gap: 64px;
   min-width: 100%;
   animation: marquee-scroll 40s linear infinite;
}

/* Paused by hover (mouse only: a tap leaves a sticky hover on phones), or by a tap or the pause button (fil.js) */
.is-paused :is(.logos-track, .testi-track) {
   animation-play-state: paused;
}

@media (hover: hover) {
   .logos-marquee:hover :is(.logos-track, .testi-track) {
      animation-play-state: paused;
   }
}

/* Flatten Ghost's gallery/image card markup so every logo is a flex item */
.logos-track :is(figure, div, p, a) {
   display: contents;
}

.logos-track figcaption {
   display: none;
}

.logos-section .logos-track img {
   /* Fixed width, and a selector that beats Ghost's cards.css (.kg-gallery-image img { width: 100% }, loaded after us):
      a percentage width made the track narrower than its logos, so the last one ran into the loop gap.
      160 × 93 (120 × 70 on mobile) = the boxes that layout used to give, which the owner prefers */
   flex: none;
   width: 160px;
   height: 93px;
   object-fit: contain;
   filter: grayscale(1);
   opacity: .7;
   transition: filter .2s, opacity .2s;
}

.logos-track img:hover {
   filter: none;
   opacity: 1;
}

.dark-mode .logos-track img {
   filter: grayscale(1) invert(1);
}


@media (prefers-reduced-motion: reduce) {
   .logos-marquee {
      -webkit-mask-image: none;
      mask-image: none;
   }

   .logos-track,
   .testi-track {
      flex-wrap: wrap;
      justify-content: center;
      animation: none;
   }

   :is(.logos-track, .testi-track)[aria-hidden],
   .marquee-toggle {
      display: none;
   }
}

/* Pause button of the logos and testimonials bands: hidden until reached with the keyboard */
.marquee-toggle {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   padding: 0;
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

.marquee-toggle:focus-visible {
   position: static;
   display: table;
   width: auto;
   height: auto;
   margin: 16px auto 0;
   padding: 10px 18px;
   clip-path: none;
   font: inherit;
   font-size: 1.5rem;
   color: inherit;
   border: var(--border) currentColor;
   border-radius: 99px;
   background: transparent;
}

/* Testimonials: the logos band's marquee, with cards built by fil.js (photo, name, job, quote)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.testi-section {
   margin-bottom: 8vh;
}

.testi-marquee {
   --marquee-gap: 24px;
}

.testi-track {
   align-items: stretch;
   gap: 24px;
}

.testi-card {
   display: flex;
   flex: none;
   flex-direction: column;
   align-items: center;
   width: 360px;
   padding: 28px 24px;
   text-align: center;
   border: var(--border) var(--color-border-one);
}

.testi-card :is(figure, p) {
   margin: 0;
}

.testi-card figure,
.testi-card > p:has(img) {
   order: -1;
   margin-bottom: 14px;
}

.testi-card img {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   object-fit: cover;
}

.testi-card h2 {
   font-size: 2rem;
   margin: 0;
}

.testi-card h3 {
   font-size: 1.5rem;
   font-weight: var(--font-weight-one-light);
   margin: 4px 0 16px;
   opacity: var(--opacity-one);
}

.testi-card blockquote {
   font-size: 1.6rem;
   line-height: 1.6;
   margin: 0;
   padding: 0;
   border: 0;
}

.testi-card blockquote::before {
   content: "“";
   display: block;
   font-family: Georgia, serif;
   font-size: 4.8rem;
   line-height: .8;
   color: var(--ghost-accent-color);
}

@media (max-width:768px) {
   .testi-card {
      width: 280px;
      padding: 22px 18px;
   }

   .testi-card blockquote {
      font-size: 1.5rem;
   }
}

/* Sponsor
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.sponsor-section {
   margin-bottom: 8vh;
}

.sponsor-label {
   display: block;
   margin-bottom: 1.5vh;
   font-size: 1.3rem;
   font-weight: var(--font-weight-three-bold);
   letter-spacing: .1em;
   text-transform: uppercase;
   opacity: var(--opacity-one);
}

.sponsor-card {
   display: flex;
   flex-wrap: wrap;
   color: inherit;
   text-decoration: none;
   background-color: var(--color-nine);
}

.sponsor-image {
   display: block;
   flex: 1 1 400px;
   min-width: 0;
   aspect-ratio: 1200 / 628;
   object-fit: cover;
}

.sponsor-content {
   display: flex;
   flex: 1 1 340px;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 2vh;
   padding: 4vh 4vw;
}

.sponsor-title {
   font-size: 3.6rem;
   line-height: 1.15;
   margin: 0;
}

.sponsor-excerpt {
   font-size: 1.9rem;
   line-height: 1.5;
   margin: 0;
   opacity: var(--opacity-one);
}

.sponsor-card .global-button {
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   padding: 14px 28px;
}

/* Promos
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.promos-section {
   margin-bottom: 8vh;
}

.promos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--grid-gap);
}

.promo-card {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
}

.promo-image {
   flex: none;
   width: 88px;
   height: 88px;
   object-fit: cover;
   border-radius: 14px;
}

.promo-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.promo-title {
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
}

.promo-excerpt {
   font-size: 1.5rem;
   opacity: var(--opacity-one);
}

/* RWD
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .daily-section .special-wrap {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:768px) {
   .hero-description {
      font-size: 1.7rem;
   }

   .sponsor-title {
      font-size: 2.6rem;
   }

   .sponsor-excerpt {
      font-size: 1.6rem;
   }

   .logos-title {
      font-size: 1.6rem;
   }

   .logos-section .logos-track img {
      width: 120px;
      height: 70px;
   }
}

@media (max-width:768px) {
   .section-more {
      display: none;
   }

   .section-more-button.is-mobile {
      display: table;
   }
}

/* Le Fil
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Title and lead on top, the fil full width, "Tout le fil" below */
.fil-section {
   margin-bottom: 8vh;
}

/* Home section headings (Fil, promos): the look of Basho's "Nos dernières publications"
   (rule on top, big title), the lead in the light weight of its first line */
.home-heading {
   margin-bottom: 4.5vh;
   padding-top: 2vh;
   border-top: var(--border) var(--color-border-one);
}

.home-heading p {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-light);
   font-size: 2.8rem;
   line-height: 1.3;
   max-width: 900px;
   margin: 1vh 0 0;
}

.fil-page-title {
   font-size: 4.4rem;
   line-height: 1.1;
   margin: 0;
}

.fil-lead {
   font-size: 1.8rem;
   line-height: 1.5;
   margin: 1.5vh 0 0;
   opacity: var(--opacity-one);
}

.section-more-button {
   display: table;
   margin: 4vh auto 0;
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   padding: 14px 26px;
}

.fil-page {
   max-width: 1000px;
   margin-bottom: 10vh;
}

.fil-page-title {
   margin-top: 4vh;
}

.fil-page .fil {
   margin-top: 5vh;
}

.fil-day-heading:not(:first-child) {
   margin-top: 5vh;
}

.fil-day-heading {
   font-size: 1.3rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin: 0;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--color-font-one);
}

/* Image (or source tile) on the left; "time · source", title and full excerpt on the right */
.brief {
   display: grid;
   grid-template-columns: 180px minmax(0, 1fr);
   gap: 20px;
   align-items: start;
   padding: 18px 0;
   border-bottom: var(--border) var(--color-border-one);
}

.brief-image {
   display: block;
   line-height: 0;
}

.brief-image img,
.brief-tile {
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: 10px;
}

.brief-tile {
   display: grid;
   place-items: center;
   box-sizing: border-box;
   padding: 8px;
   font-family: var(--font-family-one);
   font-size: 1.5rem;
   font-weight: var(--font-weight-one-bold);
   line-height: 1.15;
   text-align: center;
   color: color-mix(in srgb, var(--ghost-accent-color), #000 25%);
   background-color: color-mix(in srgb, var(--ghost-accent-color) 12%, var(--color-body));
}

.brief.is-external .brief-tile {
   color: hsl(var(--hue, 200) 70% 30%);
   background-color: hsl(var(--hue, 200) 60% 94%);
}

.dark-mode .brief-tile,
.dark-mode .brief.is-external .brief-tile {
   color: var(--color-font-one);
   background-color: var(--color-border-one);
}

.brief-meta {
   font-size: 1.3rem;
   margin-bottom: 4px;
}

.brief:last-child {
   border-bottom: 0;
}

.brief-time {
   font-variant-numeric: tabular-nums;
   opacity: var(--opacity-one);
}

.brief-source {
   font-weight: var(--font-weight-three-bold);
   /* Darkened accent: brand oranges sit near 4:1 on white, under the 4.5:1 small text needs */
   color: color-mix(in srgb, var(--ghost-accent-color), #000 25%);
}

.dark-mode .brief-source {
   color: var(--ghost-accent-color);
}

.brief.is-external .brief-source {
   color: hsl(var(--hue, 200) 70% 30%);
}

.dark-mode .brief.is-external .brief-source {
   color: hsl(var(--hue, 200) 70% 72%);
}

.brief-title {
   font-size: 2rem;
   line-height: 1.3;
   margin: 0;
}

.brief-title a {
   color: inherit;
   text-decoration: none;
}

.brief-title a:hover {
   text-decoration: underline;
}

.brief-excerpt {
   font-size: 1.6rem;
   line-height: 1.6;
   margin: 6px 0 0;
   opacity: var(--opacity-one);
}

/* Brief page (partials/fil/breve-page.hbs) */
.breve-date {
   display: block;
   font-size: 1.5rem;
   font-variant-numeric: tabular-nums;
   margin-bottom: 12px;
   opacity: var(--opacity-one);
}

.breve-text {
   font-size: 2rem;
   line-height: 1.6;
   max-width: 680px;
   margin: 18px auto 0;
}

.breve-sources {
   font-size: 1.5rem;
   margin: 14px auto 0;
}

.breve-sources a {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* Cover close to the sources line: Basho's 4vh + 4vh (72px on a 900px-high window) becomes 24px */
.breve-page .post-header-content > div:first-child {
   margin-bottom: 0;
}

.breve-page .post-header-wrap .post-header-image {
   margin-top: 24px;
}

/* Share buttons close to the cover (or the sources line): Basho's 8vh (72px) becomes 24px */
.breve-page .post-header-container {
   padding-bottom: 24px;
}

/* Share block (Basho's, per the Sharing setting) and "Tout le fil", side by side and centred */
.breve-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 16px;
   margin: 0 auto 60px;
}

.breve-actions .post-share-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: auto;
   padding-top: 0;
}

.breve-actions .post-share-wrap {
   width: auto;
}

.breve-actions .section-more-button {
   margin: 0;
}

/* Same size as "Tout le fil" */
.breve-actions .share-native {
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   padding: 14px 26px;
}

/* Both on one line at phone width (360px included) */
@media (max-width: 768px) {
   .breve-actions {
      gap: 10px;
   }

   .breve-actions .share-native,
   .breve-actions .section-more-button {
      font-size: 1.5rem;
      padding: 12px 16px;
   }
}

/* Desktop: smaller title, larger text, so the text carries the brief. Mobile keeps Basho's sizes. */
@media (min-width: 769px) {
   .breve-page .post-title {
      font-size: 4.4rem;
   }

   .breve-text {
      font-size: 2.4rem;
      max-width: 760px;
   }
}

/* Footer subscribe title: the French CTA is a full sentence, keep it on two lines on desktop. */
@media (min-width: 769px) {
   .footer-subscribe h3 {
      font-size: 4.4rem;
   }
}

/* Header navigation (partials/navigation.hbs)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Up to 7 links in the bar from 1500px; below, links 6 and 7 go back to the dropdown.
   ponytail: fixed breakpoint sized for DistilNews' labels; longer labels on another site may need a wider one. */
.header-nav nav li {
   white-space: nowrap;
}

@media (min-width: 1025px) and (max-width: 1499px) {
   .header-nav nav > ul > .nav-wide {
      display: none;
   }
}

@media (max-width: 1024px), (min-width: 1500px) {
   .is-dropdown .nav-wide,
   .is-dropdown:not(:has(li:not(.nav-wide))) {
      display: none;
   }
}

/* Live bar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.live-bar:not(:has(li)) {
   display: none;
}

/* Header menus (burger, dropdown) open over the sticky Direct bar */
.header-section {
   position: relative;
   z-index: 85;
}

/* Basho's 2vh under the header grows with the window height: the logo's own 30px margin is the gap to the Direct bar */
.header-wrap {
   padding-bottom: 0;
}

.live-bar {
   /* Stays in view when scrolling; under the reading progress bar of posts (z-index 90) */
   position: sticky;
   top: 0;
   z-index: 80;
   margin-bottom: 3vh;
   font-size: 1.4rem;
   color: var(--color-body);
   background-color: var(--color-font-one);
}

.live-bar-wrap {
   display: flex;
   align-items: center;
   gap: 16px;
   overflow: hidden;
}

.live-bar-label {
   display: flex;
   flex: none;
   align-items: center;
   gap: 8px;
   font-size: 1.2rem;
   font-weight: var(--font-weight-three-bold);
   letter-spacing: .08em;
   text-transform: uppercase;
}

.live-bar-label::before {
   width: 8px;
   height: 8px;
   content: '';
   border-radius: 50%;
   background-color: var(--ghost-accent-color);
}

.live-bar-marquee {
   display: flex;
   flex: 1 1 auto;
   gap: 32px;
   min-width: 0;
   overflow: hidden;
}

.live-bar-track {
   display: flex;
   flex: none;
   gap: 32px;
   min-width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   white-space: nowrap;
   animation: marquee-scroll 84s linear infinite; /* without JS; fil.js sets it from the track width */
}

.live-bar a {
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   color: inherit;
   text-decoration: none;
}

.live-bar-label:hover,
.live-bar a:hover span:last-child {
   text-decoration: underline;
}

.live-bar time {
   font-variant-numeric: tabular-nums;
   opacity: .7;
}

.live-bar-toggle {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   cursor: pointer;
   color: inherit;
   border: 0;
   background: transparent;
}

.live-bar-toggle svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
}

.icon-play,
[aria-pressed="true"] .icon-pause {
   display: none;
}

[aria-pressed="true"] .icon-play {
   display: block;
}

.live-bar-marquee:hover .live-bar-track,
.live-bar-marquee:focus-within .live-bar-track,
.is-paused .live-bar-track {
   animation-play-state: paused;
}

@keyframes marquee-scroll {
   to { transform: translateX(calc(-100% - var(--marquee-gap, 32px))); }
}

/* Podcast
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.podcast-section {
   margin-bottom: 8vh;
}

/* Latest episodes in one row (6 desktop, 4 tablet, 2 × 2 mobile); "Tous les épisodes" leads to the rest */
.podcast-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: var(--grid-gap);
   margin: 0;
   padding: 0;
   list-style: none;
}

@media (max-width:1024px) {
   .podcast-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .podcast-episode:nth-child(n+5) {
      display: none;
   }
}

.podcast-episode a {
   display: flex;
   flex-direction: column;
   gap: 8px;
   color: inherit;
   text-decoration: none;
}

.podcast-cover {
   display: block;
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
   transition: transform .3s ease;
}

.podcast-episode a:hover .podcast-cover {
   transform: translateY(-3px);
}

.podcast-meta {
   font-size: 1.3rem;
   opacity: var(--opacity-one);
}

.podcast-title {
   font-size: 1.7rem;
   font-weight: var(--font-weight-three-medium);
   line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
   .live-bar-track {
      animation: none;
   }

   .live-bar-track[aria-hidden],
   .live-bar-toggle {
      display: none;
   }

   .live-bar-marquee {
      overflow-x: auto;
   }
}

@media (max-width:768px) {
   .podcast-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   /* Image beside the meta line and title; the excerpt takes the full width below */
   .brief {
      grid-template-columns: 104px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      gap: 4px 14px;
   }

   .brief-body {
      display: contents;
   }

   .brief-image {
      grid-row: 1 / 3;
   }

   .brief-meta {
      grid-column: 2;
      margin: 0;
   }

   .brief-title {
      grid-column: 2;
   }

   .brief-excerpt {
      grid-column: 1 / -1;
      margin-top: 10px;
   }

   /* Square: a title often wraps to 3 lines here, a 4:3 image only covered 2 */
   .brief-image img,
   .brief-tile {
      aspect-ratio: 1;
   }

   .brief-tile {
      font-size: 1.3rem;
   }

   .brief-title {
      font-size: 1.8rem;
   }

   .home-heading p {
      font-size: 2rem;
   }

   .fil-page-title {
      font-size: 3.4rem;
   }
}

/* Accessibility fixes over Basho
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Basho removes the outline on its buttons; keyboard users need it back */
:focus-visible:not(input, textarea) {
   outline: 2px solid currentColor !important;
   outline-offset: 3px;
}

/* Flickity focuses the featured slider on click: no ring then, only for keyboard use (see fil.js) */
.flickity-enabled.is-pointer:focus-visible {
   outline: none !important;
}

/* 44px hit area on the small slider arrows without moving them */
.featured-btn-previous,
.featured-btn-next {
   position: relative;
}

.featured-btn-previous::after,
.featured-btn-next::after {
   position: absolute;
   inset: -12px;
   content: '';
}

@media (max-width:1024px) {
   /* Footer links stacked in columns: full 44px rows for thumbs */
   .footer-nav-column li {
      margin-bottom: 0;
   }

   .footer-nav-column li a {
      display: inline-flex;
      align-items: center;
      min-width: 44px;
      min-height: 44px;
   }

   .footer-nav-column li svg {
      transform: none;
   }
}

/* Header: icon-only search, Sign in + Subscribe (mockup v1)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-search {
   color: inherit;
   border: 0;
   background: transparent;
}

@media (min-width:1025px) {
   /* Basho paints its search pill grey (and darker on hover): the icon stays bare */
   .header-search.is-desktop,
   .header-search.is-desktop:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 44px;
      padding: 0;
      background-color: transparent;
   }

   .header-search.is-desktop:hover {
      opacity: .6;
   }

   .header-search.is-desktop svg {
      width: 18px;
      margin: 0;
      transform: none;
   }
}

/* Basho positions the mobile icon itself; the button around it gets the 44px tap area */
.header-search.is-mobile {
   position: absolute;
   top: -1px;
   right: 36px;
   box-sizing: border-box;
   width: 44px;
   height: 44px;
   padding: 10px;
}

.header-search.is-mobile svg {
   position: static;
}

/* The desktop search button is hidden in the mobile menu; its list item must not leave a gap */
.header-nav .header-search-item {
   display: contents;
}

.header-nav .signin a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
}

@media (max-width:1024px) {
   /* Mobile: Instagram and LinkedIn leave the burger menu and sit next to the search icon */
   .header-nav nav .header-social {
      display: none;
   }

   .header-social.is-mobile {
      position: absolute;
      top: -1px;
      right: 80px;
      display: flex;
   }

   .header-social.is-mobile a {
      padding: 0;
      color: var(--color-font-one);
   }

   .header-social.is-mobile svg {
      width: 20px;
      height: 20px;
   }
}

/* Small laptops (1025–1279px): 5 menu items + icons + 2 buttons must fit on one line */
@media (min-width:1025px) and (max-width:1279px) {
   .header-nav nav a {
      font-size: 1.5rem;
   }

   .header-nav nav li {
      margin-left: 8px;
   }

   .header-nav .signup a {
      padding: 6px 14px;
   }
}

/* Press releases and search pages: room for the first results while they load (no footer jump) */
[data-press][data-loading] {
   min-height: 150vh;
}

/* Search page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-page-form {
   width: min(560px, calc(100% - 2 * var(--margin-wrap-left-right, 20px)));
   margin: 4vh auto 0;
}

.search-page-form input {
   max-width: none;
   min-width: 0;
}

.search-page-empty {
   font-size: 1.9rem;
   text-align: center;
   margin: 0 0 6vh;
   opacity: var(--opacity-one);
}

/* Search modal: Basho's search look (full-width sheet from the top, big bold field, card grid)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
html:has(.search-modal[open]) {
   overflow: hidden;
}

.search-modal {
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
   margin: 0 0 auto;
   padding: 0;
   overflow: hidden auto;
   color: var(--color-font-three);
   border: 0;
   background-color: var(--color-body);
}

.search-modal[open] {
   animation: searchOne .6s ease;
}

.search-modal::backdrop {
   background-color: rgba(0, 0, 0, .6);
}

.search-modal-form {
   position: relative;
   padding: 4vh 3vw;
}

.search-modal-input {
   box-sizing: border-box;
   width: 100%;
   max-width: 1000px;
   padding: 0 60px 0 0;
   font-family: var(--font-family-one);
   font-size: 7.6rem;
   font-weight: var(--font-weight-one-bold);
   letter-spacing: var(--letter-spacing, normal);
   color: inherit;
   border: 0;
   outline: none;
   background: transparent;
}

.search-modal-input::placeholder {
   opacity: 1;
   color: var(--color-font-three);
}

.search-modal-input::-webkit-search-cancel-button {
   display: none;
}

.search-modal-meta {
   margin: 1vh 0 0;
   font-size: 1.6rem;
}

.search-modal-meta span {
   opacity: var(--opacity-one);
}

.search-modal-meta a {
   margin-left: 8px;
   font-weight: var(--font-weight-three-bold);
   color: inherit;
}

.search-modal-close {
   position: absolute;
   top: 50%;
   right: 3vw;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   cursor: pointer;
   border: 0;
   background: transparent;
   transform: translateY(-50%);
}

.search-modal-close svg {
   width: 22px;
   height: 22px;
   fill: var(--color-font-three);
}

.search-modal-results {
   display: grid;
   margin: 0;
   padding: 0 3vw 7vh;
   list-style: none;
   gap: calc(var(--grid-gap) * 2);
   grid-template-columns: repeat(7, minmax(0, 1fr));
}

.search-modal-results:empty {
   display: none;
}

.search-result {
   display: block;
   padding-bottom: var(--grid-gap);
   color: inherit;
   text-decoration: none;
}

.search-result-image {
   display: block;
   width: 100%;
   height: 150px;
   margin-bottom: 8px;
   object-fit: cover;
   border-radius: calc(var(--border-radius) / 2);
   background-color: var(--color-twelve);
}

.search-result-title {
   display: block;
   font-family: var(--font-family-two);
   font-size: 2rem;
   font-weight: var(--font-weight-two-bold);
   line-height: 1.3;
}

.search-result:hover .search-result-title {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
}

.search-result-meta {
   display: block;
   margin-top: .6vh;
   font-size: 1.3rem;
}

@media (max-width:1800px) {
   .search-modal-input { font-size: 6.2rem; }
   .search-modal-results { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width:1280px) {
   .search-modal-form { padding-block: 3vh; }
   .search-modal-input { font-size: 4.6rem; }
   .search-modal-results { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width:1024px) {
   .search-modal-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width:768px) {
   .search-modal { height: 100%; }
   .search-modal-form { padding-block: 2vh; }
   .search-modal-input { font-size: 3.6rem; }
   .search-modal-results { gap: var(--grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .search-result-title { font-size: 1.8rem; }
}

@media (max-width:480px) {
   /* Phones: one result per row, thumbnail on the left (as Basho) */
   .search-modal-form,
   .search-modal-results {
      padding-right: var(--margin-wrap-left-right);
      padding-left: var(--margin-wrap-left-right);
   }

   .search-modal-close { right: calc(var(--margin-wrap-left-right) - 12px); }
   .search-modal-meta { font-size: 1.4rem; }
   .search-modal-results { gap: 0; padding-bottom: 3vh; grid-template-columns: minmax(0, 1fr); }

   .search-result {
      display: grid;
      align-items: start;
      padding: 10px 0;
      grid-template-columns: 90px minmax(0, 1fr);
      column-gap: 12px;
   }

   .search-result-image {
      width: 90px;
      height: 90px;
      margin: 0;
      grid-row: span 2;
   }
}

@media (prefers-reduced-motion: reduce) {
   .search-modal[open] { animation: none; }
}

/* Featured posts on their own ("une" section): the hero used to wrap them and clip the slider's overflow */
.une-section {
   overflow: hidden;
   color: var(--color-font-one);
   background-color: var(--color-body-partial);
}

/* Back-to-top link: bottom right, appears after two screens of scrolling (fil.js) */
.back-to-top {
   position: fixed;
   right: max(16px, env(safe-area-inset-right));
   bottom: max(16px, env(safe-area-inset-bottom));
   z-index: 85;
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   color: var(--color-body-partial);
   background-color: var(--color-font-one);
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: opacity .2s, transform .2s, visibility .2s;
}

.back-to-top.is-visible {
   opacity: 1;
   visibility: visible;
   transform: none;
}

.back-to-top svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
   transform: rotate(180deg);
}

@media print {
   .back-to-top { display: none; }
}

/* Podcast episode (#episode), built by podcast.js: line above the player, player (docked at the bottom once scrolled past),
   Listen / Watch, "Listen on" links with brand icons, tabs (notes, chapters, transcript, guests)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content pre:has(> code.language-chapters, > code.language-vtt) {
   display: none;
}

.post-content .episode-head {
   margin-bottom: 32px;
}

.post-content .episode-meta {
   margin-bottom: 12px;
   font-size: 1.5rem;
   font-weight: 600;
   letter-spacing: .02em;
   text-transform: uppercase;
}

.post-content .episode-audio {
   display: block;
   width: 100%;
}

.podcast-player {
   display: flex;
   gap: 16px;
   align-items: center;
   padding: 16px;
   color: var(--color-font-one);
   background-color: var(--color-body-partial);
   border: var(--border) var(--color-border-one);
   border-radius: 16px;
}

.pp-play {
   display: grid;
   flex: none;
   place-items: center;
   width: 56px;
   height: 56px;
   padding: 0;
   color: #fff;
   background-color: var(--ghost-accent-color);
   border: 0;
   border-radius: 50%;
   cursor: pointer;
}

.pp-play svg {
   width: 26px;
   height: 26px;
   fill: currentColor;
}

.pp-body {
   flex: 1;
   min-width: 0;
}

.pp-title {
   display: none;
}

.pp-bar {
   position: relative;
   height: 8px;
   margin: 18px 0;
   background-color: var(--color-border-one);
   border-radius: 4px;
   cursor: pointer;
}

/* Taller hit area than the visible bar */
.pp-bar::before {
   position: absolute;
   inset: -18px 0;
   content: "";
}

.pp-fill {
   width: 0;
   height: 100%;
   background-color: var(--ghost-accent-color);
   border-radius: 4px;
}

.pp-mark {
   position: absolute;
   top: 0;
   width: 2px;
   height: 100%;
   background-color: var(--color-body-partial);
}

.pp-row {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 8px;
   align-items: center;
   font-size: 1.4rem;
}

.pp-time {
   margin-right: auto;
   font-variant-numeric: tabular-nums;
}

.pp-row :is(button, a) {
   min-width: 44px;
   min-height: 44px;
   padding: 0 10px;
   font: inherit;
   color: inherit;
   text-decoration: none;
   background: none;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
   cursor: pointer;
}

.pp-row a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.pp-resume {
   font-weight: 600;
}

/* Mini player: fixed at the bottom once the listener has pressed play and scrolled past the player */
.podcast-player.is-docked.is-started {
   position: fixed;
   right: max(16px, env(safe-area-inset-right));
   bottom: max(16px, env(safe-area-inset-bottom));
   left: max(16px, env(safe-area-inset-left));
   z-index: 86;
   max-width: 720px;
   margin: 0 auto;
   padding: 8px 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.podcast-player.is-docked.is-started .pp-title {
   display: block;
   overflow: hidden;
   font-size: 1.4rem;
   font-weight: 600;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.podcast-player.is-docked.is-started .pp-bar {
   margin: 8px 0 4px;
}

.podcast-player.is-docked.is-started .pp-row > :not(.pp-time, .pp-skip) {
   display: none;
}

.podcast-player.is-docked.is-started .pp-play {
   width: 44px;
   height: 44px;
}

body:has(.podcast-player.is-docked.is-started) .back-to-top {
   bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px);
}

.episode-modes {
   display: inline-flex;
   margin-bottom: 12px;
   padding: 4px;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
}

.episode-modes button {
   min-height: 40px;
   padding: 0 18px;
   font: inherit;
   font-size: 1.5rem;
   color: inherit;
   background: none;
   border: 0;
   border-radius: 99px;
   cursor: pointer;
}

.episode-modes button[aria-pressed="true"] {
   font-weight: 600;
   color: var(--color-body-partial);
   background-color: var(--color-font-one);
}

.episode-video {
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background-color: #000;
   border-radius: 16px;
}

.episode-video[hidden] {
   display: none;
}

.episode-video iframe,
.episode-video-poster {
   display: grid;
   place-items: center;
   width: 100%;
   height: 100%;
   border: 0;
}

.episode-video-poster {
   background: center / cover no-repeat;
   cursor: pointer;
}

.episode-video-poster svg {
   width: 72px;
   height: 72px;
   padding: 16px;
   fill: #fff;
   background-color: rgba(0, 0, 0, .6);
   border-radius: 50%;
}

.post-content .episode-links {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
   font-size: 1.5rem;
}

.episode-links-label {
   flex-basis: 100%;
   margin-bottom: 4px;
   font-weight: 600;
   text-align: center;
}

.episode-link svg {
   width: 20px;
   height: 20px;
   fill: var(--brand);
}

.episode-tabs {
   display: flex;
   gap: 6px;
   margin: 8px 0 32px;
   padding: 6px;
   overflow-x: auto;
   background-color: var(--color-body-partial);
   border: var(--border) var(--color-border-one);
   border-radius: 16px;
   scrollbar-width: none;
}

.episode-tab {
   display: inline-flex;
   flex: 1 0 auto;
   gap: 10px;
   align-items: center;
   justify-content: center;
   min-height: 56px;
   padding: 0 18px;
   font: inherit;
   font-size: 1.7rem;
   font-weight: 600;
   color: inherit;
   white-space: nowrap;
   background: none;
   border: 0;
   border-radius: 12px;
   cursor: pointer;
}

.episode-tab svg {
   flex: none;
   width: 20px;
   height: 20px;
   fill: currentColor;
}

.episode-tab:hover {
   background-color: var(--color-border-one);
}

.episode-tab[aria-selected="true"] {
   color: #fff;
   background-color: var(--ghost-accent-color);
}

.episode-tab-count {
   min-width: 24px;
   padding: 2px 8px;
   font-size: 1.3rem;
   line-height: 1.4;
   border-radius: 99px;
   background-color: var(--color-border-one);
}

.episode-tab[aria-selected="true"] .episode-tab-count {
   background-color: rgba(255, 255, 255, .25);
}

.post-content .episode-time {
   margin-right: 8px;
   padding: 2px 8px;
   font: inherit;
   font-size: .85em;
   font-variant-numeric: tabular-nums;
   color: var(--ghost-accent-color);
   background: none;
   border: var(--border) currentColor;
   border-radius: 99px;
   cursor: pointer;
}

.post-content .episode-chapters {
   margin: 0;
   padding: 0;
   list-style: none;
}

.post-content .episode-chapters li {
   margin: 0;
}

.episode-chapter {
   display: grid;
   grid-template-columns: 80px 1fr auto;
   gap: 12px;
   align-items: baseline;
   width: 100%;
   min-height: 48px;
   padding: 12px 8px;
   font: inherit;
   color: inherit;
   text-align: left;
   background: none;
   border: 0;
   border-bottom: var(--border) var(--color-border-one);
   cursor: pointer;
}

.episode-chapter-time {
   font-variant-numeric: tabular-nums;
   color: var(--ghost-accent-color);
}

.episode-chapter-length {
   font-size: .85em;
   opacity: .7;
}

.is-current > .episode-chapter {
   font-weight: 600;
   background-color: var(--color-body-partial);
}

.episode-transcript-tools {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 16px;
   align-items: center;
   margin-bottom: 16px;
}

.episode-transcript-search {
   flex: 1 1 240px;
   min-height: 44px;
   padding: 0 16px;
   font: inherit;
   color: inherit;
   background: none;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
}

.episode-transcript-follow {
   min-height: 44px;
   padding: 0 16px;
   font: inherit;
   color: inherit;
   background: none;
   border: var(--border) currentColor;
   border-radius: 99px;
   cursor: pointer;
}

.episode-transcript-scroll {
   max-height: 60vh;
   padding-right: 8px;
   overflow-y: auto;
}

.post-content .episode-para {
   margin: 0 0 16px;
   padding: 8px 12px;
   border-radius: 8px;
}

.post-content .episode-para.is-current {
   background-color: var(--color-body-partial);
   box-shadow: inset 3px 0 0 var(--ghost-accent-color);
}

.episode-voice {
   margin-right: 6px;
}

.episode-voice::after {
   content: " :";
}

.episode-guests {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 16px;
}

.episode-guests:not(:has(.episode-guest)) {
   display: none;
}

.post-content .episode-guest {
   display: grid;
   gap: 6px;
   justify-items: start;
   padding: 16px;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
   border-radius: 16px;
}

.episode-guest img {
   width: 72px;
   height: 72px;
   margin: 0;
   object-fit: cover;
   border-radius: 50%;
}

.episode-guest-name {
   font-weight: 600;
}

.episode-guest-bio {
   font-size: 1.5rem;
}

.episode-guest-more {
   font-size: 1.4rem;
   color: var(--ghost-accent-color);
}

@media (max-width: 767px) {
   .podcast-player {
      gap: 12px;
      padding: 12px;
   }

   .pp-row {
      font-size: 1.3rem;
   }

   .episode-chapter {
      grid-template-columns: 64px 1fr;
   }

   /* Every tab in sight on a phone: two by two rather than a row scrolling out of view */
   .episode-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }

   .episode-tab {
      gap: 8px;
      min-height: 52px;
      padding: 0 10px;
      font-size: 1.5rem;
   }

   .episode-chapter-length {
      display: none;
   }
}

/* Job offer (#offre): employer, "filled" notice; the apply button (first button card) goes once filled
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.offre-head {
   margin-bottom: 32px;
}

.post-content .offre-employer {
   display: inline-flex;
   gap: 12px;
   align-items: center;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
}

.offre-employer img {
   width: 48px;
   height: 48px;
   object-fit: contain;
   border-radius: 8px;
}

.post-content .offre-filled {
   margin-top: 16px;
   padding: 12px 16px;
   font-weight: 600;
   border: var(--border) currentColor;
   border-radius: 8px;
}

.post-content:has([data-filled]) .kg-button-card {
   display: none;
}

.offre-line span + span::before {
   content: " · ";
}

.offre-filled-pill {
   font-weight: 600;
}

/* Job board filters (home key "filtres") */
.filtres-section {
   display: grid;
   gap: 24px;
   margin-bottom: 8vh;
}

.filtres-group h2 {
   margin-bottom: 12px;
   font-size: 1.8rem;
}

.filtres-group p {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
}

.filtres-group a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0 16px;
   font-size: 1.5rem;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
}

/* Job offers of DistilJobs on the other sites (home key "emplois", fil.js) */
.emplois-section {
   margin-bottom: 8vh;
   text-align: center;
}

.emplois-list {
   margin: 0 0 32px;
   padding: 0;
   text-align: left;
   list-style: none;
}

.emplois-item a {
   display: grid;
   gap: 4px;
   padding: 16px 0;
   color: inherit;
   text-decoration: none;
   border-bottom: var(--border) var(--color-border-one);
}

.emplois-title {
   font-size: 1.9rem;
   font-weight: 600;
}

.emplois-meta {
   font-size: 1.5rem;
   opacity: .75;
}

/* DistilCast home sections: latest episode as a featured video ("episode"), "Listen on" band ("ecouter"), guests ("invites");
   the podcast page as platform tiles; play badge on episode cards
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.episode-section,
.ecouter-section,
.invites-section {
   margin-bottom: 8vh;
}

.episode-feature {
   margin: 0 auto;
}

.episode-feature-stage {
   position: relative;
   display: grid;
   place-items: center;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--color-body-partial) center / cover no-repeat;
   border: 0;
}

/* Without a video, the square cover sits whole in the 16:9 frame */
.episode-feature-stage img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.episode-feature-stage.has-video img {
   display: none;
}

.episode-feature-play {
   position: relative;
   display: grid;
   place-items: center;
   width: clamp(72px, 8vw, 120px);
   height: clamp(72px, 8vw, 120px);
   background-color: var(--ghost-accent-color);
   border-radius: 50%;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.episode-feature-play svg {
   width: 45%;
   height: 45%;
   fill: #fff;
}

.episode-feature-meta {
   margin: 20px 0 8px;
   font-size: 1.4rem;
   font-weight: 600;
   letter-spacing: .04em;
   color: var(--ghost-accent-color);
   text-transform: uppercase;
}

.episode-feature-title {
   margin: 0 0 16px;
   font-size: clamp(2.4rem, 4vw, 4.8rem);
}

.episode-feature-foot {
   display: flex;
   justify-content: center;
   margin-top: 48px;
}

/* The way to the full episode: a real button, the strongest call of the section after the video */
.episode-feature-listen {
   display: inline-flex;
   align-items: center;
   min-height: 56px;
   padding: 0 28px;
   font-size: 1.8rem;
   font-weight: var(--font-weight-three-bold);
}

@media (max-width: 767px) {
   .episode-feature-listen {
      justify-content: center;
      width: 100%;
      font-size: 1.6rem;
      text-align: center;
   }
}

.ecouter-section {
   text-align: center;
}

.ecouter-title {
   margin-bottom: 16px;
   font-size: 1.8rem;
}

.listen-band {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
   font-size: 1.5rem;
}

.listen-band .episode-link,
.post-content .episode-link {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   min-height: 44px;
   padding: 0 16px 0 12px;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
}

.listen-band .episode-link svg {
   width: 20px;
   height: 20px;
   fill: var(--brand);
}

.invites-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 24px;
}

.invite-card {
   display: grid;
   gap: 8px;
   justify-items: center;
   font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
}

.invite-card-empty {
   display: grid;
   place-items: center;
   width: 100%;
   max-width: 120px;
   aspect-ratio: 1;
   background-color: var(--color-body-partial);
   border-radius: 50%;
}

.invite-card-empty svg,
.invite-entry-photo.is-empty svg {
   width: 36%;
   height: 36%;
   fill: currentColor;
   opacity: .5;
}

.invite-card img {
   width: 100%;
   max-width: 120px;
   height: auto;
   aspect-ratio: 1;
   object-fit: cover;
   border-radius: 50%;
}

.listen-page {
   max-width: 880px;
   margin: 0 auto 8vh;
}

.listen-page-title {
   margin: 6vh 0 12px;
}

.listen-page-lead {
   margin-bottom: 32px;
   font-size: 1.8rem;
}

.listen-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 16px;
}

.listen-tile {
   display: grid;
   grid-template-columns: 48px 1fr auto;
   gap: 16px;
   align-items: center;
   padding: 16px;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
   border-radius: 16px;
}

.listen-tile svg {
   box-sizing: border-box;
   width: 48px;
   height: 48px;
   padding: 10px;
   fill: #fff;
   background-color: var(--brand);
   border-radius: 12px;
}

.listen-tile-open {
   padding: 8px 14px;
   font-size: 1.4rem;
   border: var(--border) currentColor;
   border-radius: 99px;
}

.item-play {
   position: absolute;
   bottom: 12px;
   left: 12px;
   z-index: 1;
   width: 44px;
   height: 44px;
   background-color: var(--ghost-accent-color);
   border-radius: 50%;
   pointer-events: none;
}

.item-play::after {
   position: absolute;
   top: 50%;
   left: 55%;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 13px solid #fff;
   transform: translate(-50%, -50%);
   content: "";
}

/* Page "episodes" (page-episodes.hbs): every episode, grouped by season by podcast.js, as Le Fil groups by day
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.episodes-seasons {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 3vh;
}

.episodes-seasons a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0 16px;
   font-size: 1.5rem;
   border: var(--border) var(--color-border-one);
   border-radius: 99px;
}

.episodes-list {
   margin-top: 5vh;
}

.episodes-season {
   scroll-margin-top: 100px;
}

.episodes-season:not(:first-child) {
   margin-top: 5vh;
}

.episode-row {
   display: grid;
   grid-template-columns: 120px 1fr;
   gap: 20px;
   align-items: start;
   padding: 20px 0;
   border-bottom: var(--border) var(--color-border-one);
}

.episode-row-cover img {
   display: block;
   width: 120px;
   height: 120px;
   object-fit: cover;
}

.episode-row-meta {
   margin: 0 0 6px;
   font-size: 1.4rem;
   opacity: var(--opacity-one);
}

.episode-row-title {
   margin: 0 0 6px;
   font-size: 2rem;
   line-height: 1.3;
}

.episode-row-excerpt {
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   font-size: 1.6rem;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
   .episode-row {
      grid-template-columns: 88px 1fr;
      gap: 14px;
   }

   .episode-row-cover img {
      width: 88px;
      height: 88px;
   }

   .episode-row-title {
      font-size: 1.7rem;
   }

   .episode-row-excerpt {
      display: none;
   }
}

/* Page "invites" (page-invites.hbs): directory of the podcast's guests; tag pages show the tag image */
.invites-directory {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 16px;
   margin-top: 5vh;
}

.invite-entry {
   display: grid;
   grid-template-columns: 72px 1fr;
   grid-template-rows: auto auto 1fr;
   column-gap: 16px;
   row-gap: 4px;
   align-content: start;
   padding: 16px;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
   border-radius: 16px;
}

.invite-entry-photo {
   grid-row: span 3;
   width: 72px;
   height: 72px;
   object-fit: cover;
   border-radius: 50%;
}

.invite-entry-photo.is-empty {
   display: grid;
   place-items: center;
   background-color: var(--color-body-partial);
}

.invite-entry-name {
   font-size: 1.8rem;
   font-weight: 600;
}

.invite-entry-bio {
   font-size: 1.5rem;
}

.invite-entry-count {
   font-size: 1.4rem;
   color: var(--ghost-accent-color);
}

.archive-tag-image {
   display: block;
   width: 120px;
   height: 120px;
   margin: 0 auto 24px;
   object-fit: cover;
   border-radius: 50%;
}

.archive-tag-image.is-logo {
   object-fit: contain;
   border-radius: 16px;
}

/* Desktop: bigger platform logos in the "ecouter" band, filling the width */
@media (min-width: 768px) {
   .listen-band {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
   }

   .listen-band .episode-link {
      justify-content: center;
      min-height: 72px;
      padding: 0 24px;
      font-size: 1.9rem;
      font-weight: 600;
      border-radius: 16px;
   }

   .listen-band .episode-link svg {
      width: 32px;
      height: 32px;
   }

   .ecouter-title {
      margin-bottom: 24px;
      font-size: 2.4rem;
   }
}

/* "Our latest guests": one row only; the rows after the first have no height */
.invites-grid.is-one-row {
   grid-template-rows: auto;
   grid-auto-rows: 0;
   row-gap: 0;
   overflow: hidden;
}

/* Mobile: 2 × 2 guests, the others hidden (a row gap would show a slice of the hidden rows) */
@media (max-width: 768px) {
   .invites-grid.is-one-row {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: auto;
      row-gap: 24px;
   }

   .invites-grid.is-one-row > :nth-child(n+5) {
      display: none;
   }
}

/* "The voices of …" (home key "animateurs"): two or three large host cards */
.voices-section {
   margin-bottom: 8vh;
}

.voices-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
}

.voice-card {
   display: grid;
   gap: 12px;
   justify-items: center;
   align-content: start;
   padding: 48px 32px 40px;
   color: inherit;
   text-align: center;
   text-decoration: none;
   /* A light tint of the site's accent colour, so the cards stand out from the page in light and dark mode */
   --voice-bg: color-mix(in srgb, var(--ghost-accent-color) 8%, var(--color-body-partial));
   background-color: var(--voice-bg);
   border-radius: 24px;
   transition: transform .2s ease;
}

.voice-card:hover {
   transform: translateY(-4px);
}

.voice-photo {
   width: clamp(140px, 14vw, 200px);
   height: clamp(140px, 14vw, 200px);
   margin-bottom: 12px;
   object-fit: cover;
   border-radius: 50%;
   box-shadow: 0 0 0 4px var(--voice-bg), 0 0 0 8px var(--ghost-accent-color);
}

.voice-photo.is-empty {
   display: grid;
   place-items: center;
   background-color: var(--color-body);
}

.voice-photo.is-empty svg {
   width: 36%;
   height: 36%;
   fill: currentColor;
   opacity: .5;
}

.voice-name {
   font-family: var(--font-family-one);
   font-size: clamp(2.6rem, 3vw, 3.4rem);
   font-weight: var(--font-weight-one-bold);
   line-height: 1.15;
}

.voice-bio {
   max-width: 40ch;
   font-size: 1.7rem;
   line-height: 1.5;
}

.voice-more {
   margin-top: 8px;
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--ghost-accent-color);
}

@media (prefers-reduced-motion: reduce) {
   .voice-card { transition: none; }
   .voice-card:hover { transform: none; }
}

.voices-page-grid {
   margin-top: 5vh;
}