:root{
  --bg:#ffffff;
  --fg:#111111;
  --link:#0000ee;
  --muted:#666666;
  --header-bg:#e0e0e0;
  --header-fg:#111111;
  --header-link:#0000ee;
  --header-border:#bbbbbb;
  --header-pad-y:80px;
  --header-pad-x:24px;
  --col:70ch;
  --pad:24px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Georgia", ui-serif, Cambria, "Times New Roman", Times, serif;
}

html { overflow-anchor: none; }

html{
  font-size: 100%;
}

html,
body{
  margin:0;
  padding:0;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
}

a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

body.diary{
  --bg:#0B0A0E;
  --fg:#F0EDE6;
  --link:#CFBA9F;
  --muted:#B9A792;
  --header-bg:#14110F;
  --header-fg:#F2EEE9;
}

body.bio{
  --bg:#330004;
  --fg:#FDEFF1;
  --link:#C53A4D;
  --muted:#C399A1;
  --header-bg:#190002;
  --header-fg:#FDEFF1;
}

body.meandher{
  --bg:#0C1120;
  --fg:#ECEFF4;
  --link:#8FA2C4;
  --muted:#8198CC;
  --header-bg:#080D18;
  --header-fg:#EEF4FF;
}

body.abrasions{
  --bg:#E6EDE8;      /* pierre claire, poussière de pierre */
  --fg:#161718;      /* graphite doux */
  --link:#2F745C;    /* vert minéral */
  --muted:#688A86;   /* givre végétal */
  --header-bg:linear-gradient(
    90deg,
    #86D8A1 0%,
    #1E6B3A 100%
  );

  --header-fg:#F1FBF4;
}


.site-header{
  background:var(--header-bg);
  color:var(--header-fg);
  border-bottom:0;
  position:static;
}

.header-inner{
  padding:var(--header-pad-y) var(--header-pad-x);
  display:flex;
  justify-content:center;
  align-items:center;
}

.nav-title{
  color:inherit;
  text-decoration:none;
  font-size:18px;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.nav-title,
.section-title,
.post-section,
.post h1,
.post h2{
  font-family: var(--font-serif);
}

.post > .top-post-h2subtitle{
  text-align: center;
}

.site-header a{
  color:var(--header-fg);
  text-decoration:none;
  font-weight:600;
}

.site-main{
  padding:40px var(--pad);
}

.container{
  max-width:var(--col);
  margin:0 auto;
}

.section-title{
  text-align:center;
  margin:0 0 80px 0;
  line-height:1.1;
  font-size:clamp(2rem, 5vw, 3.25rem);
}

.site-main nav ul{
  direction: rtl;
  text-align: center;
  list-style-position: inside;
  margin: 20px;
  padding: 0;
  list-style: none;
}

.site-main nav li{
  text-align: center;
  font-size: clamp(1.2rem, 1.25vw, 2rem);
  margin-bottom: 32px;
}

.site-main nav li a{
  direction: rtl;
  unicode-bidi: plaintext;
}

.site-main nav li a,
.nav-title,
.post-section,
.faded-txt a{
  position: relative;
  text-decoration: none;
}

.site-main nav li a::after,
.nav-title::after,
.post-section::after,
.faded-txt a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 2.6s ease;
}

.site-main nav li a:hover::after,
.nav-title:hover::after,
.post-section:hover::after,
.faded-txt a:hover::after{
  opacity: 1;
}

.site-main nav li a::after,
.nav-title::after,
.post-section::after,
.faded-txt a:after{
  transition-delay: 0s;
}

.site-main nav li a:not(:hover)::after,
.nav-title:not(:hover)::after,
.post-section:not(:hover)::after,
.faded-txt a:not(:hover)::after{
  transition-delay: 0.12s;
}

.post-top{
  margin:0 0 30px 0;
  text-align:center;
}

.post-section{
  display:inline-block;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--link);
}

.post-section:hover{
  text-decoration: none;
}

.post h1{
  margin:60px 0 80px 0;
  line-height:1.1;
  font-size:clamp(2rem, 5vw, 3.25rem);
  text-align:center;
}

.post-content h2{
  margin:32px 0 32px 0;
  line-height:1.2;
}

.post-content .h1subtitle {
  text-align:center;
  margin: -32px 0 16px 0;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: bold;
}

.post-content-tcw{
  text-align: center; 
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #ffffff;
}

body.bio .factsbio > p{
  color:rgb(255, 255, 255);
  font-size: 1rem;
}

.post-content p{
  margin:0 0 24px 0;
}

.post-content .faded-txt{
  color: var(--muted);
}
body.abrasions .post-content .faded-txt{
  letter-spacing: 0.025em;
}
.post-content .faded-txt a{
  color: var(--fg);
}

.post-content ul{
  margin:0 0 16px 1.2em;
  padding:0;
}

.post-content hr{
  border:0;
  height:0;
  margin:28px 0;
  color:var(--fg);
  border-top:2px solid currentColor;
}


.centered-image{
  width: min(90%, 900px);
  margin: 56px auto;
}

.centered-image img{
  display: block;
  width: 100%;
  height: auto;
  object-position: center;
}

.site-footer{
  padding:128px var(--header-pad-x) 40px;
}

.footer-inner{
  max-width:none;
  margin:0;
}

.footer-text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}

.post-content .gap-v80{
  margin-top: 80px;
}
.post-content .gap-v60{
  margin-top: 60px;
}
.post-content .gap-v40{
  margin-top: 40px;
}

.smallcaps { 
  font-variant: small-caps; 
}

.commentary { 
  font-size: 0.8rem;
  color: var(--muted);
}
.commentary .comment-title {
  margin:0;
}
.commentary > hr{
  margin-top: 6px;
  color: currentColor;
}

.frt{
  color: var(--muted);
}

.underline {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.centered-sep{
  text-align: center;
}