/* axel feduzka — dopaminauta.dev
   solve et coagula. serif para la prosa, mono para lo técnico y los márgenes.
   papel y tinta, sin color, sin sigilos. escrito a mano. */

@font-face{
  font-family:"EB Garamond";
  src:url("fonts/EBGaramond.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}

:root{
  --paper:#f2efe6;
  --ink:#1c1a17;
  --ink-soft:#5a544c;
  --rule:#cec7b8;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

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

html{background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;
  font-size:21px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.sheet{
  max-width:44rem;
  margin:0 auto;
  padding:12vh 7vw 14vh;
}

/* ---- header ---- */
h1{
  font-weight:600;
  font-size:2.4rem;
  letter-spacing:-.01em;
  line-height:1.1;
}
.handle{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:.6rem 0 2.4rem;
}
.opening{
  font-size:1.12rem;
  margin-bottom:1.1rem;
  max-width:34rem;
}
.opening:first-of-type{margin-top:1.6rem}
.opening em{font-style:italic}

/* ---- sections ---- */
section{
  margin-top:4.5rem;
  padding-top:2.2rem;
  border-top:1px solid var(--rule);
  position:relative;
}
.mark{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:1.6rem;
}
section p{margin-bottom:1.15rem;max-width:34rem}
section p:last-child{margin-bottom:0}

.intro{font-style:italic;color:var(--ink-soft)}

/* ---- coagula work list ---- */
.work{margin:1.8rem 0 1.4rem}
.work p{
  padding-left:1.2rem;
  border-left:1px solid var(--rule);
  margin-bottom:1.4rem;
}
.work strong{font-weight:600}
.wip{
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  border-left-color:transparent !important;
}

.aside{
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.6;
  color:var(--ink-soft);
  background:rgba(0,0,0,.03);
  padding:.7rem .9rem;
  max-width:32rem;
}

/* ---- links: one gesture ---- */
a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:border-color .12s;
}
a:hover{border-bottom-color:var(--ink)}

/* ---- footer ---- */
footer{
  margin-top:4.5rem;
  padding-top:2.2rem;
  border-top:1px solid var(--rule);
}
footer ul{list-style:none;font-family:var(--mono);font-size:.82rem;line-height:2}
.colophon{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1.8rem;
}

/* ---- margin notes on wide screens: pull the section mark into the left margin ---- */
@media (min-width:1080px){
  .sheet{max-width:52rem;padding-left:0;padding-right:0;margin-left:16rem}
  section .mark,
  header .handle{
    position:absolute;
    left:-11rem;
    width:9rem;
    text-align:right;
    margin:0;
  }
  header{position:relative}
  header .handle{top:.55rem}
  section .mark{top:2.2rem}
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#17150f;
    --ink:#e9e3d4;
    --ink-soft:#9a9384;
    --rule:#3a352c;
  }
}