/* .dark-mode {
  --c-back: #181819;
  --c-grey-back: #38383b;
  --c-grey-border: #a7a7a7;
  --c-grey-more: #d0d0d0;
  --c-main: white;

  --c-accent: var(--c-main);
  --border: var(--border-width) solid var(--c-grey-back);
} */

/*  SPECIAL HEADERS
    ========================================================================== */

.journal header,
.issue header{
  background-color: var(--c-accent);
}
.journal header{
  border-bottom: var(--border);
}
.journal .logo-container,
.issue .logo-container{
  margin: 0;
  padding: var(--file-corner);

}
.journal .logo-container .logo,
.issue .logo-container .logo{
  color: white;
}

/*  JOURNAL PAGE - PRESENTING EACH ISSUES
    ========================================================================== */

details.journal-intro {
	position: absolute;
	top: calc(var(--lh) * -1.5);
	left: 50%;
	transform: translateY(0%) translateX(-50%);
	z-index: 9999;
	padding: 0;
	border: var(--border);
	max-width: var(--max-w);
	background-color: var(--c-grey-back);
	border-radius: 50% / 1.5rem;
}
details.journal-intro[open]{
  border-radius: 50% / 3rem;
}
details.journal-intro summary{
  padding: 1em var(--file-corner);
}
details.journal-intro main {
	padding: 0 calc(var(--file-corner) * 2) var(--file-corner);
}
details.journal-intro summary{
  text-align: center;
}
details.journal-intro summary::after{
  content: "more";
}
details[open].journal-intro summary::after{
  content: "less";
}

details.journal-intro summary::-webkit-details-marker,
details.journal-intro summary::marker {
    display: none;
}
details.journal-intro summary{
  list-style: none;
}


.journal .folder-content {
  padding: calc(var(--file-corner) * 2) var(--file-corner);
  gap: var(--file-corner);
}

/* redistribution of size */
.journal-section-file {
  width: 100%;
  display: grid;
  grid-template-columns: calc(var(--max-w) * 0.75) 1fr;
  position: relative;
  gap: var(--file-corner);
}

.journal-section-file .file {
  margin-right: 0;
}

/* the whole block is a link */
.journal-link {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* big title */
.file-journal-title {
  padding: calc(3 * var(--file-corner)) 0 calc(2 * var(--file-corner));
  z-index: 1;
  position: relative;
}

.file-journal-text {
  grid-row: 2;
  grid-column: 1 / span 1;
  padding-bottom: 1rem;
  margin-top: auto;
}

.file {
  grid-row: 1 / span 2;
  grid-column: 2 / span 1;
  max-width: calc(var(--max-w) * 1.25) !important;
}
.journal-section-file .file{
  padding: 0 !important;
}

.file-cover-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 var(--file-corner) 1rem;
  padding-top: calc(var(--file-corner) + 1rem);
}
.file-cover-link:hover .file-image-container>div {
  background-color: var(--c-accent);
}
.file-cover-link:hover .file-image-container>div>img {
  filter: grayscale(1);
  mix-blend-mode: screen;
}


/* thumbnail system */
.file-image-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.file-image-container > div {
  background-color: var(--c-accent);
  border-radius: 25%;
  width: 12em;
  flex-grow: 1;
  flex-shrink: 1;
}
.file-image-container > div + div{
  margin-left: -6em;
}
.file-image-container > div > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 25%;
}

/* titles system */
.file-title-container {
  font-family: "Amiamie Rounded";
  font-size: var(--fs-big);
  line-height: calc(var(--lh) * 1.5);
  margin-top: var(--lh);
}
.file-title-container span{
  color: var(--c-accent);
  font-size: 2em;
  line-height: 0;
  vertical-align: middle;
}
.file-title-container ul, .file-title-container li{
  display: inline;
}
.artists{
  font-size: 1rem;
}
.artists::before{
  content: '(';
}
.artists::after{
  content: ')';
}

/*  INDIVIDUAL ISSUE
    ========================================================================== */

/* making all the article in an issue connected like logo block, solidified */
.issue .folder-content {
  padding: 0;
}

.issue .folder-content .section-file {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
  border-top: var(--border);
  margin-top: 0 !important;
}

.issue .folder-content .file-image {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 28rem;
}

.issue .folder-content .file {
  margin: 0;
  max-width: 100% !important;

  border: none;
  padding: var(--file-corner);
  clip-path: none;
  
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--lh));
}

.issue .folder-content .file>.file__summary {
  flex-grow: 1;
}

.issue .folder-content .file-tab {
  position: absolute;
  top: 0;
  left: 0;
  padding-right: calc(1.5 * var(--file-corner));
  clip-path: polygon(0% 0%,
      0% 0%,
      100% 0%,
      100% 0%,
      100% calc(100% - var(--file-corner)),
      calc(100% - var(--file-corner)) 100%,
      0% 100%,
      0% 100%);
}

/* editorial on the side */
.issue__folder {
  display: grid;
  grid-template-columns: calc(var(--max-w) / 2) 1fr;
}

.issue__editorial {
  border-top: var(--border);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--file-corner);
}

.edito__title {
  padding: calc(var(--file-corner) * 2) var(--file-corner);
}

.edito__content {
  flex-grow: 1;
  padding: var(--file-corner);
  
  position: sticky;
  top: 0;
  max-height: 100vh;
}

.edito__footer {
  background-color: var(--c-grey-border);
  padding: var(--file-corner);
}

/* lettrine */
/* .edito__content p:first-child:first-letter {
  display: block;
  float: left;
  font-size: var(--fs-logo);
  font-weight: bold;
  font-family: "Amiamie Rounded";
  filter: url(#custom5);
  padding-right: 0.1em;
  line-height: 1;
  height: calc(var(--lh) * 3);
} */

.file-link {
	background-color: var(--c-grey-border);
	color: var(--c-grey-more);
}


/*  INDIVIDUAL ARTICLES
    ========================================================================== */

.issue-toc {
  float: left;
  position: sticky;
  top: var(--border-width);
  height: 100vh;
  background-color: var(--c-grey-border);

  font-family: "Amiamie Rounded";
}
.issue-toc > div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--border-width);
}  
.issue-toc > div > div.active {
  background-color: var(--c-accent);
  color: var(--c-back);
  text-decoration: none;
}
.issue-toc > div > div{
  background-color: var(--c-grey-back);
}

.issue-toc-article {
  order: 2;
  display: block;
  clear: both;
  border: none;
  padding: 0.5rem 0.5rem 0.35rem;
}
.issue-toc-article > img {
	float: right;
	width: 0.825em;
	height: auto;
	margin-top: 0.25em;
  margin-left: 0.25em;
}
.issue-toc ul{
  display: inline;
}
.issue-toc li{
  display: inline list-item;
}



.journal-button{
  background: none;
  font-size: inherit;
  color: inherit;
  background-color: var(--c-grey-back);
  border: var(--border);
  border-radius: 50% / 1.5rem;
  padding: 1rem var(--file-corner);
  margin-top: 0.25rem;
  text-align: center;
}
.journal-button:hover {
  cursor: pointer;
  color: var(--c-accent);
}
.journal-controls{
  z-index: 99;
  padding: var(--file-corner);
  position: fixed;
  bottom: 0;
  right: 0;
  float: right;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.journal-main-container {
  height: fit-content;
  display: grid;
  grid-template-columns: calc(var(--max-w) / 2) 1fr;
  background-color: var(--c-grey-border);
  color: black;
}
.journal-main-container > .text-content{
  padding: 0 var(--file-corner) calc(var(--lh) * 2);
  max-width: var(--mega-width);
}

.journal-article-header {
  padding: var(--file-corner) 0;
  margin-bottom: 1em;
}

.journal-container,
.journal-file__meta {
  margin: 0 !important;
  max-width: var(--max-w);
}

.journal-file__artists {
  margin-top: 2vh;
}

.journal-file__artists ul {
  display: inline-block;
}

.journal-article__title {
  font-size: var(--fs-mega);
  line-height: 1;
  margin: 0 !important;
  margin-top: 1vh;
  width: min(var(--max-w), 100%);
}

.journal-article__subtitle {
  margin: 0 !important;
  width: var(--max-w);
  font-size: 1.2em;
}

.journal-main-container p {
  font-size: 1.125em;
  line-height: 1.4;
  max-width: var(--max-w);
}

.journal-file__meta {
  margin-top: 1em;
  margin-bottom: 1em;
}

.article .file-image,
.journal .file__tags{
  background-color: initial;
}
.journal .file__tags p{
  font-size: inherit;
  line-height: inherit;
}

blockquote {
  border-radius: 50% / 1.5rem;
  font-style: italic;
}

.journal-container figure {
  margin-top: 2vh;
  text-align: center;
}

.journal-container figcaption {
  margin-top: 1vh;
  text-align: center;
}
.footnote-ref,
.footnote-backref{
  padding: 0 0.5em;
  border-radius: 100%;
  background-color: var(--c-accent);
  text-decoration: none;
}


/* --- printing article --- */
.edito-print{
  display: none;
}
@media print {

  @page {
    size: A4 portrait;
  }

  :root{
    --border-width: 1pt;
    --border: var(--border-width) solid black;
  }

  html{
    font-size: 10pt;
  }
  body{
    font-size: inherit;
  }

  nav,
  .issue-toc,
  footer,
  .journal-article-print-button,
  .journal-file__tags {
    display: none !important;
  }
  .logo-container {
    margin-top: 0 !important;
  }
  .journal-main-container,
  .journal-file__tags {
    background-color: white;
    color: black;
  }
  .journal-main-container {
    display: block !important;
  }
  .logo-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .edito-print{
    display: block;
    padding-bottom: var(--lh);
  }

  .dark-mode {
    --c-back: white;
    --c-grey-back: black;
    --c-grey-border: black;
    --c-grey-more: black;
    --c-main: black;
    --c-accent: var(--c-main);
    --border: var(--border-width) solid var(--c-grey-border);
  }

  .journal header, .issue header {
    background-color: initial !important;
  }
  .journal .logo-container .logo, .issue .logo-container .logo {
    color: black !important;
  }

  .journal-container a{
    text-decoration-color: black !important;
  }
  .journal-container a::after{
    content: attr(href);
    display: inline-block;
    background-color: black !important;
    color: white !important;
    font-size: 1rem;
    padding: 0 0.25em;
    margin-left: 0.25em;
  }
  .footnote a{
    text-decoration: none !important;
    font-family: inherit !important;
  }
  .footnote a::after,
  .footnote-ref::after{
    content: none !important;
  }
  .footnote-ref{
    background-color: initial !important;
    border: var(--border);
  }
  .footnote-backref{
    display: none !important;
  }
  .journal-button{
    display: none !important;
  }

}

@media only screen and (max-width: 54rem) {

  .journal-section-file{
    display: block;
    border-bottom: none;
  }
  .file-journal-title {
    padding: 0;
  }
  .journal-section-file .file {
    margin: 0 -1rem;
    border-bottom: var(--border);
  }
  .journal .folder-content,
  .file-cover-link{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  details.journal-intro[open] {
    top: 3rem;
    position: fixed;
    width: 100%;
    bottom: 2rem;
    transform: none;
    left: 0;
  }
  details.journal-intro[open]  main {
    padding: var(--file-corner);
  }

  .issue__folder {
    display: block;
    border-right: none;
  }
  .issue .folder-content .section-file {
    display: block;
  }
  .edito__content,
  .issue .folder-content .file{
    padding: 1rem;
  }

  .issue .folder-content .file-image {
    background-color: var(--c-grey-border);
    width: 100%;
    max-width: 100%;
  }
  .issue .folder-content .file {
    background: var(--c-back);
  }


  .article .file__tags{
    padding: 0;
  }
  .journal-article-header {
    display: flex;
    flex-direction: column;
  }
  .journal-file__meta{
    order: -1;
  }
  .journal-article__title{
    order: -2;
  }

  .issue-toc{
    display: none;
  }

  .journal-main-container > .text-content{
    padding: 1rem;
  }

  .journal-article-header {
    padding: 0;
    margin-bottom: 0;
  }
  .journal-container{
    border-top: var(--border);
    border-color: var(--c-back);
  }
  .journal-article__title{
    border-bottom: none;
    padding-bottom: 0;
  }
  .journal-file__meta{
    padding-top: 0;
  }
  .journal-main-container {
    display: block;
  }

  .article .file-image {
    max-width: 100%;
  }
  .journal-container{
    padding-top: 1rem;
  }
}


@media only screen and (max-width: 600px) {
  .file-title-container {
    font-size: 1rem !important;
    line-height: var(--lh) !important;
  }
  .logo-container {
    padding: 3rem 1rem 2rem !important;
  }
  .journal-controls {
    padding: 0.5rem;
  }
  .journal-button:nth-child(2){
    display: none;
  }
}