:root {
  --beigecolor: #9a3412;  
  --briquecolor: #ffedd5;
  --selection: #9a341282;
  
  --maxwidth: 60rem;
  --font-wght: 350;
  --font-wdth: 100;
  
  --textcolor: var(--beigecolor);
  --backgroundcolor: var(--briquecolor);
  --bordercolor: var(--beigecolor);
  --accentcolor: var(--beigecolor);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --beigecolor: #ffedd5; 
    --briquecolor: #9a3412;
    --selection: #ffedd58b;
    --textcolor: var(--beigecolor);
    --backgroundcolor: var(--briquecolor);
    --bordercolor: var(--beigecolor);
    --font-wght: 280;
  }
}

html[data-force-color-mode="dark"] {
  --beigecolor: #ffedd5;   
  --briquecolor: #9a3412;
  --selection: #ffedd58b;
  --textcolor: var(--beigecolor);
  --backgroundcolor: var(--briquecolor);
  --bordercolor: var(--beigecolor);
  --font-wght: 280;
}

:root[data-force-color-mode="light"] {
  --beigecolor: #9a3412;  
  --briquecolor: #ffedd5;
  --selection: #9a341282;
  --textcolor: var(--beigecolor);
  --backgroundcolor: var(--briquecolor);
  --bordercolor: var(--beigecolor);
}


body { 
  font-family: "Faune", serif;
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
  margin: 0;
  line-height: 1.45; 
  font-size: clamp(1.1rem, 2vw, 1.5em);
  transition: background-color 0.4s ease, color 0.4s ease;
}

*, *::before, *::after {
  font-variation-settings: "wght" var(--font-wght, 400), "wdth" var(--font-wdth, 112.5);
}


h1, h2, h3 {
  line-height: 1.1; 
}

h1 {
  text-align: center;
  font-style: italic;
  padding: 0.8em;
  font-family: 'Faune Display', serif;
}

h2 {
  font-size: 1.5em;
  padding: 0px 0px 0px 30px;
}

.tags-link {
  font-size: 1em;
  padding: 0px 0px 0px 20px;
}

.tags-link a{
text-decoration: none;
}

strong {
  font-family: 'Source Serif 4 18pt', serif;
  font-weight: 600;
  font-style: normal;
}

p { 
  font-family: 'Source Serif 4 18pt', serif;
  padding: 0px 10px;
}

span {
  font-family: 'Source Serif 4 18pt', serif;
  font-style: normal;
}


a {
  color: currentColor; 
  text-decoration: underline;
}

a:hover {
  color: var(--backgroundcolor);
  background-color: var(--textcolor);
}

ul a {
  text-decoration: none;
}


nav,
.top-nav { 
  font-family: 'Faune';
  font-style: italic;
  color: var(--backgroundcolor);
  background-color: var(--textcolor);
  padding: 10px 20px;
  text-align: right;
  position: sticky;
  top: 0;
  font-size: 1.4em;
}

nav a, 
nav a:visited, 
nav a:hover, 
nav a:active,
.top-nav a {
  text-decoration: none;
  color: currentColor;
}


header {
  padding: 1rem 1rem 3.5rem;
}

header h1 { 
  font-size: 3em;
  text-align: center;
  font-family: 'Faune Display', serif;
  font-style: italic;
  text-transform: uppercase;
  margin-top: 0em;
  line-height: 1.1;
}

@media (max-width: 640px) {
  header h1 { 
    font-size: 2.5em;
  }
} 

header h1 strong { 
  display: block;
  font-size: 2.5em;
  font-family: inherit;
}

@media (max-width: 825px) {
  header h1 strong { 
    font-size: 2em;
  }
} 

header h1 .subtitle {
  font-family: 'Faune', serif;
  font-style: italic;
}

.authors {
  font-family: 'Faune Display', serif;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.8em;
  margin: 0px 0px 0px;
}

.keywords { 
  font-weight: 200;
  font-style: normal;
  font-family: 'Source Serif 4 18pt', serif;
  max-width: 85ch;
  padding: 0px 0px 0px 10%;
}

.keywords a {
  text-decoration: none;
}

.keywords a::before { 
  content: "#";
}


.epigraphe {
  font-family: 'Source Serif 4 18pt', serif;
  max-width: 40ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: italic;
  text-align: right;
}

.quote {
  font-family: 'Source Serif 4 18pt', serif;
  max-width: 70ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: italic;
  text-align: right;
}

.text { 
  max-width: 65ch;
  padding: 0px 0px 0px 15%;
  color: var(--textcolor);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

.text p { 
  margin: 0;
}

.text p + p::before {
  content: '~✿~';
  display: block;
  text-align: center;
  font-size: 0.5 em;
  color: var(--textcolor);
  margin-bottom: 0;
  padding: 1em;
}

.text .quote,
.epigraphe { 
  --font-wght: 900;
  max-width: max(75%, 23em);
  align-self: flex-end;
}

.text,
.readmore > *,
.biography > *,
.footnotes > * {
  margin-inline: auto;
  max-width: var(--maxwidth);
}

.footnotes {
  font-family: 'Source Serif 4 18pt', serif;
  max-width: 70ch;
  padding: 0px 0px 0px 10%;
  font-weight: 350;
  font-style: italic;
  text-align: left;
}

ul {
  padding: 0px 0px 0px 15%;
  list-style-type: none;
}

ul li::before {
  content: "— ";
}


.readmore { 
  font-family: 'Source Serif 4 18pt', serif;
  max-width: 70ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: normal;
  text-align: left;
}

.biography {
  font-family: 'Source Serif 4 18pt', serif;
  font-style: italic;
  text-align: right;
  max-width: 85ch;
  padding: 0px 9px 0px 15%;
}



table {
  border-collapse: collapse;
}

th { 
  --font-wght: 600;
}

td, th {
  padding-block: .5em;
  vertical-align: top;  
  text-align: left;
  border-bottom: 1px solid var(--bordercolor);
}

td:not(:first-child),
th:not(:first-child) { 
  padding-left: .5em; 
  border-left: 1px solid var(--bordercolor);
}

td:not(:last-child),
th:not(:last-child) { 
  padding-right: .5em; 
  border-right: 1px solid var(--bordercolor);
}

tbody tr:last-child td, 
tbody tr:last-child th {
  border-bottom: none;
}


.footnotes { 
  padding: 1em;
}

.footnotes ol { 
  padding: 0;
  list-style-position: inside;
}

.footnotes li {
  text-indent: -2em;
  padding-left: 2em;
}


#footer {
  display: flex;
  flex-direction: column;
}

#footer > * {
  padding: 0.5em 0.5em;
}

.theme {
  padding: 1em;
  text-align: center;
}

.articles-prev-next {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  font-size: 1.2em;
}

@media (max-width: 640px) {
  .articles-prev-next { 
    font-size: 1em;
  }
} 

@media (max-width: 640px) {
  .text { 
    padding: 0;
    max-width: 90ch;
  }
  
  body { 
    font-size: 1em; 
  }
} 

@media (min-width: 640px) {
  body { 
    font-size: 1.25em; 
  }
  
  .text { 
    max-width: 90ch;
  }
}


body:not(:has(header)) p:not(.authors) {
  padding: 0px 0px 0px 5%;
}

.theme {
  position: fixed;
  top: 0;
  color: var(--backgroundcolor);
}


.theme input, 
.theme span {
  display: none;
}
.theme label {
 position: relative;
 top: .25em;
}
.theme label::before {
  content: "⏾";
  display: block;
  width: 1.2em;
  height: 1.2em;
  background-color: var(--textcolor);
}


@media screen and (prefers-color-scheme: dark) {
  .theme label::before {content: "☼";}
}
html[data-force-color-mode="dark"] {
  .theme label::before {content: "☼";}
}

.top-nav-intro {
  color: var(--textcolor) ;
}

::-moz-selection {
  background-color: var(--backgroundcolor) ;
  color: var(--selection) ;
} 

::selection {
  background-color: var(--backgroundcolor) ;
  color:var(--selection);
}