/* interview colors */
.i-1-carin-klonowski span {background:#842a72;}
.i-2-hanako-murakami span {background:#71a341}
.i-2-hanako-murakami a {pointer-events:none;}
.i-3-alexandra-roussopoulos span {background:#19668c;}

/* temporary */
.dummy a {pointer-events:none;}
.dummy span {opacity:.1;filter:contrast(.2);}

/* reset */
* {margin:0;padding:0;box-sizing:border-box;}

/* animations */
@keyframes fade-in {0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}}

/* fonts */
@font-face {font-family:'Standard';src:url('../fonts/standard-book.woff2') format('woff2');font-weight:400;font-style:normal;}
@font-face {font-family:'Standard';src:url('../fonts/standard-book-italic.woff2') format('woff2');font-weight:400;font-style:italic;}
@font-face {font-family:'Standard';src:url('../fonts/standard-bold.woff2') format('woff2');font-weight:700;font-style:normal;}
/*@font-face {font-family:'Standard';src:url('../fonts/standard-bold-italic.woff2') format('woff2');font-weight:700;font-style:italic;}*/

/* general */
:focus-visible {outline:0!important;color:#111;}
html, body {overscroll-behavior:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body {font:14px/1.45 Standard,"Helvetica Neue",sans-serif;color:#999;background:#fff;word-break:break-word;}
main {animation:fade-in .75s;}
a {color:currentColor;text-decoration:none;}
a:hover {color:#111;}
a.selected {color:#111;}
ul {list-style:none;}
img {display:block;max-width:100%;height:auto;}
audio {display:none;} 
sup, sub {line-height:0;}

/* header */
header {position:sticky;top:0;z-index:1;background:#fff;cursor:default;}
header .top {display:flex;justify-content:space-between;gap:1em;padding:.8em 1.2em;border-bottom:1px solid #ccc;}
header h1 {flex:1;font-size:1em;font-weight:normal;}
header nav {flex:1;display:flex;justify-content:flex-end;}
header nav ul {display:flex;gap:1em;}
header .top a {padding:1em 0;}
header:not(:hover) .tagline span:last-of-type {display:none;}
header:hover .tagline span:first-of-type {display:none;}

/* player */
:root {
  --plyr-color-main: #111;
  --plyr-audio-control-color: #111;
  --plyr-audio-control-color-hover: #111;
  --plyr-audio-control-background-hover: #fff;
  --plyr-control-icon-size: 16px;
  --plyr-range-fill-background: currentColor; 
  --plyr-audio-range-track-background: #ccc;
  --plyr-range-track-height: 1px;   
  --plyr-range-thumb-shadow: 0;
  --plyr-range-thumb-background: currentColor;
  --plyr-range-thumb-height: 9px; 
  --plyr-progress-marker-background: transparent;
  --plyr-progress-marker-width: 9px;
  --plyr-tooltip-radius: 0;
  --plyr-tooltip-shadow: 0 none;
  --plyr-tooltip-background: #fff;
}
.plyr-cont {display:flex;border-bottom:1px solid #ccc;}
.plyr {flex:1;}
.plyr--audio .plyr__controls {padding:.4em .8em .4em .55em;}
.plyr__tooltip {/*bottom:auto;top:2em;*/font-size:0px;color:transparent;margin-bottom:-4px;text-align:center;padding:0;background:transparent;display:flex;max-width:none!important;}
.plyr__tooltip::before {display:none;}
.plyr__tooltip br {display:none;}
.plyr__tooltip img {max-height:36px;max-width:36px;margin:0 2px;}
.plyr__controls .plyr__controls__item:first-child {transform: scale(.75);}
.plyr__progress__marker {height:9px;border-radius:50%;border:1px solid #999;}
.plyr__progress__marker:hover {border-color:currentColor;}
.plyr__controls__item.plyr__time {color:#999;min-width:4.2em;text-align:right;}
.plyr--full-ui input[type=range] {height:30px;border-radius:0;}
      
/* interviews list */
.interviews {display:flex;gap:1em;overflow:auto;padding:.8em 1.2em;border-bottom:1px solid #ccc;}
.interviews::-webkit-scrollbar {display:none;}
.interviews a {padding:.8em 0;}
.interviews a:hover {text-decoration:underline;}
.interviews li {white-space:nowrap;position:relative;}
.interviews li:not(:first-of-type):after {content:"";border-left:1px solid #ccc;margin-left:1em;}
.interviews li:last-of-type:after {display:none;}
.interviews li span {opacity:.5;}
.interviews .soon a {pointer-events:none;}
.interviews .soon:hover:before {content:"à venir";font-size:.75em;position:absolute;right:1.4em;top:-.95em;}

/* open/close */
section {scroll-margin-top:100vh;}
section:not(:target) {display:none;}
section:target ~ .grid {display:none;}
.open {font-family:Courier, monospace;font-size:17px;display:inline-block;padding:0 1.2em;height:2.45em;line-height:2.4;border-left:1px solid #ccc;}
.close {position:fixed;bottom:0;left:0;padding:.8em 1.2em .9em 1.2em;background:#fff;}
.close:not(:hover) {color:#999;}

/* abstract */
#abstract {scroll-margin-top:100vh;}

/* text */
.text {font-size:1.125em;max-width:62ch;margin:0 auto;padding:2em 1.2em 6em;color:#111;animation:fade-in .75s;}
.text h1, .text h2, .text h3 {font-size:1em;font-weight:normal;text-align:center;margin:1.2em 0 2em;}
.text h4 {font-weight:normal;font-size:1em;margin-top:1em;text-indent:5ch;}
.text p + p {text-indent:5ch;}
.text blockquote {padding:0 2em;margin:1.2em 0 2em;}
.text blockquote p:last-child {text-align:right;}
.text a {scroll-margin-top:4em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.text sup a:not(:hover) {text-decoration:none;}
.text figure {margin:1.3em 0;max-width:50%;}
.text figure img {margin:0 0 .8em 0;max-height:35vh;}
.text figure a {text-decoration:none;}
.text figcaption {font-size:14px;width:150%;}
.text figcaption p + p {text-indent:0;}
body {counter-reset: section;}
.text figcaption:before {padding-left:5.55ch;counter-increment: section;content: "0" counter(section);}

.footnotes {margin-top:2em;font-size:14px;color:#999;}
.footnotes a:not(:hover) {text-decoration:none;}
.footnotes ol {padding-left:1.2em;}
.footnotes ol li + li {margin-top:.6em;}
.footnotes li:target {color:#111;}

/* images grid */
.grid {padding:1.2em;display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));grid-gap:1.2em;animation:fade-in .75s;}
.grid figure {display:flex;justify-content:center;}
.grid a {aspect-ratio:1;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;}
.grid img {max-width:100%;max-height:145px;opacity:.8;filter:grayscale(100%) contrast(.7);}

.grid figure a:hover img {opacity:1;filter:none;}
.grid figure figcaption {display:none;color:#999;width:calc(25% + .6em);background:rgba(255,255,255,.9);padding:.8em 1.2em 1.2em;}
@media screen and (min-width:800px) and (hover: hover) and (pointer: fine) {
  .grid figure a:hover figcaption {z-index:1;display:block;position:fixed;bottom:0;right:0;}
}

.parvus__slide > div {width:100%;}
.parvus__slide .parvus__caption * {max-width:38ch;}

/* smaller screens */
@media only screen and (max-width:940px) {
  header .tagline {display:none;}
}
@media only screen and (max-width:680px) {
  .interviews span  {display:none;}
}

/* bigger screens */
@media only screen and (min-width:800px) {
  .parvus__slide > div {display:flex;gap:1.2em;max-height:100%;}
  .parvus__content {flex:0 0 75%;}
  .parvus__content img {width:auto!important;height:auto!important;max-width:100%;max-height:100%;}
  .parvus__caption {display:flex;align-items:flex-end;flex:0 0 25%;padding:0 1.2em 0 0;}
}