/* vim: set foldmethod=marker fmr=/*\—,/**\/: */

/*:::::::::::::::::::::::::::::::::::::::: BASE.css

   Version 1.0, 23 September 2026
   by Andrew Swift (see github for contact info)
 
   built with mdsite for time-proof simple websites
   it should be possible to change everything by changing variables;
   you shouldn't have to mess with actual elements

   generally speaking, any values that might get updated when a theme is
   customized should be set as variables — customizing a theme becomes
   updating a list of variables rather than digging through
   the whole stylesheet.

   every site links this file first, then its own theme.css, which
   overrides what it needs to — mostly by redefining variables. The
   fonts named here are loaded by theme.css, with @import */

/*——————————————————————————————————————— modified defaults 

     */

* { box-sizing:border-box; }

body, nav, main{
  margin:0;
  font-synthesis: none; /* don't fake italics if font missing */
  }

body{
  font:var(--bodyFont);
  }

nav, main{
  display:flow-root;
  }

main > :first-child{
  margin-top:0;
}

main blockquote{
  margin:0;
}

a:link{
  text-decoration:none;
  }

a:hover{
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-thickness:1px;
  text-decoration-style:dotted;
}

/**/

/*:::::::::::::::::::::::::::::::::::::::: variables */

/*——————————————————————————————————————— geometry */

:root{
  --navLiGapDt:1.5rem;

  --navTopPaddingTop:2rem;
  --navTopPaddingBottom:1rem;
  --navTopPaddingLeft:6rem;
  --navTopPaddingRight:1rem;

  --navBottomPaddingVert:1rem;
  --navBottomPaddingSides:2rem;

/****************************************/

  @media (width >= 48em){
  --mainMargin:1rem;
  --mainPadding:4rem;
  --mainPaddingTop:3rem;
  }

  @media (width < 48em){
  --mainMargin:3vw;
  --mainPadding:7vw;
  --mainPaddingTop:3vw;
  }

  --mainPaddingBottom:4rem;

  --mainLineHeightt:1.7rem;
  --mainStrongWeight:600;

  --blockquoteMarginTop:2rem;
  --blockquoteMarginBottom:2rem;;

  --listMarginTop:1rem;
  --listMarginBottom:1rem;
  --listItemHeight:1.7rem;

  --hrBorder:0.5px dotted var(--hrColor);
  --hrMarginTop:30px;
  --hrMarginBottom:30px;

  --imgMarginTop:10px;
  --imgMarginBottom:10px;
  --imgWidth:75%;
  --imgRadius:15px;
  --imgBorder:0.5px solid var(--imgBorderColor);
  --imgShadow:0rem 0.33rem 1.0rem #0003;

}
/**/
/*——————————————————————————————————————— fonts */

:root{
  --titleFont: 700 1.8rem/2.1rem Titillium Web, sans-serif;
  --hxFont: 600 3rem/4rem Titillium Web, sans-serif;
  --bodyFont: 400 1rem/1.3rem IBM Plex Sans, sans-serif;
  --postDateFont: 400 1.2rem/1.7rem Schoolbell, sans-serif;
  --postListFont: 400 1rem/1.3rem IBM Plex Sans, sans-serif;

  @media (width >= 48em){
  --h1Size:2.0rem;
  --h1Height:2.0rem;
  --h2Size:1.7rem;
  --h2Height:1.7rem;
  --h3Size:1.4rem;
  --h3Height:1.4rem;
  }

  @media (width < 48em){
  --h1Size:10vw;
  --h1Height:10vw;
  --h2Size:9vw;
  --h2Height:9vw;
  --h3Size:8vw;
  --h3Height:8vw;
  }
}
/**/
/*——————————————————————————————————————— colors · additional */

:root {
  --charcoal:hsl(0, 0%, 10%);
  --anthracite:hsl(0, 0%, 20%);
  --darkergray:hsl(0, 0%, 30%);
}
/**/
/*——————————————————————————————————————— colors · nav 

  any color on site can be changed here
  https://enes.in/sorted-colors/ */

:root{
  --navTopFg: teal;
  --navTopBg: transparent;
  --logoHoverScale:1.1;
  --logoHoverTime:0.2s;

  --navTopUlBg: transparent;
  --navTopLiBg: transparent;

  --navTopALink: royalblue;
  --navTopALinkVisited: gray;
  --navTopALinkActive: magenta;

  --navLiTopPrevBg:transparent;
  --navLiTopUpBg:transparent;
  --navLiTopNextBg:transparent;
  
  --navLiBottomPrevBg:transparent;
  --navLiBottomUpBg:transparent;
  --navLiBottomHomeBg:transparent;
  --navLiBottomNextBg:transparent;

  --navBottomFg: teal;
  --navBottomBg: transparent;
  --navBottomUlBg: transparent;
  --navBottomLiBg: transparent;
  --navBottomALink: purple;
  --navBottomVisitedFg: gray;
  --navBottomActiveFg: black;
}
/**/
/*——————————————————————————————————————— colors · body & main */

:root{
  --bodyFg: var(--darkergray);
  --bodyBg: transparent;
  --postDateBg:transparent;
  --mainBord: var(--charcoal);
  --mainBg:transparent;
  --titleFg: royalblue;
  --h1Fg: royalblue;
  --h2Fg: mediumvioletred;
  --h3Fg: slateblue;

  --mainALink:royalblue;
  --mainALinkVisited:gray;
  --mainALinkActive:magenta;

  --postDateFg: var(--anthracite);
  --imgBorderColor:gray;
  --tagFg:gray;
  --hrColor:black;
  --blockquoteFg:var(--bodyFg);
  --blockquoteBar:gainsboro;

  --postListFg:darkslategray;
  --postListALink:royalblue;
  --postListVisitedFg:gray;
  --postListActiveFg:magenta;

}
/**/

/*:::::::::::::::::::::::::::::::::::::::: references */

/*———————————————————————————————————————— body */

body{
  background-color:var(--bodyBg);
  color:var(--bodyFg);
  }

/**/
/*———————————————————————————————————————— logo */
a.logo, a.logo img {
  display: block;
}

@media (width >= 48em){
  a.logo, a.logo img {
    position:absolute;
    left:0.5rem;
    top:0.5rem;
    height: 2.5rem; width: auto;
    }
  
  a.logo img{
    transition:transform var(--logoHoverTime) ease-out;
    }
  
  a.logo:hover img{
    transform:scale(var(--logoHoverScale));
    }
}
/* on narrow screens the logo sits centered on its own line, above the
   top nav, instead of floating in the corner */

@media (width < 48em){
  a.logo{
    display:block;
    margin:10vw 10vw 0;
    }
  a.logo img{
    display:block;
    width:100%;
    height:auto;
    }
}
/**/
/*———————————————————————————————————————— nav */

nav{

/*——————————————————————————————————————— top */

&.top{
  padding-top:var(--navTopPaddingTop);
  padding-bottom:var(--navTopPaddingBottom);
  padding-left:var(--navTopPaddingLeft);
  padding-right:var(--navTopPaddingRight);
}

&.pagenav.top, &.postnav.top{
  background-color:var(--navTopBg);
  }

/**/
/*——————————————————————————————————————— bottom */

&.bottom{
  padding-top:var(--navBottomPaddingVert);
  padding-bottom:var(--navBottomPaddingVert);
  padding-left:var(--navBottomPaddingSides);
  padding-right:var(--navBottomPaddingSides);
}

&.pagenav.bottom, &.postnav.bottom{
  background-color:var(--navBottomBg);
  }

/**/
/*———————————————————————————————————————— ul & li */

ul{
  list-style-type:"";
  margin:0;
  padding:0;
  }

li{
  list-style:none;
  font:var(--bodyFont);
}

@media (width < 48em){
  li{
    display:block;
    }
}

@media (width >= 48em){ /* responsive */
  ul{
    display:flex;
    flex-wrap:wrap;
    gap:0 var(--navLiGapDt);
    }
}

&.pagenav, &.postnav{
  ul{
  background-color:var(--navTopUlBg);
  }

  li{
  background-color:var(--navTopLiBg);
  }

  li a:link{
  color:var(--navTopALink);
  }
  li a:visited{
  color:var(--navTopALinkVisited);
  }
  li a:hover, li a:active{
  color:var(--navTopALinkActive);
  }
}
/**/
/*——————————————————————————————————————— nav subclasses (posts only) */

&.postnav.top{
  li.prev{
    background-color:var(--navLiTopPrevBg);
  }
  li.up{
    background-color:var(--navLiTopUpBg);
  }
  li.next{
    background-color:var(--navLiTopNextBg);
  }
}

&.postnav.bottom{
  li.prev{
    background-color:var(--navLiBottomPrevBg);
  }
  li.up{
    background-color:var(--navLiBottomUpBg);
  }
  li.home{
    background-color:var(--navLiBottomHomeBg);
  }
  li.next{
    background-color:var(--navLiBottomNextBg);
  }
}
/**/

}
/**/
/*———————————————————————————————————————— main */

main{

/*———————————————————————————————————————— main root */


  margin-left:var(--mainMargin);
  margin-right:var(--mainMargin);
  padding-top:var(--mainPaddingTop);
  padding-left:var(--mainPadding);
  padding-right:var(--mainPadding);

  padding-bottom:var(--mainPaddingBottom);

  strong{
    font-weight:var(--mainStrongWeight);
  }
  border-top:1px dotted var(--mainBord);
  border-bottom:1px dotted var(--mainBord);
  background-color:var(--mainBg);

/**/
/*———————————————————————————————————————— links */
  a:link{
  color:var(--mainALink);
  }
  a:visited{
  color:var(--mainALinkVisited);
  }
  a:hover, a:active{
  color:var(--mainALinkActive);
  }
/**/
/*——————————————————————————————————————— post date */

p.postDate{
  font:var(--postDateFont);
  color:var(--postDateFg);
  background-color:var(--postDateBg);
}
  /**/
/*———————————————————————————————————————— hX tags */

h1.pageTitle{
  font:var(--titleFont);
  color:var(--titleFg);
}

h1,h2,h3{
  font:var(--hxFont);
}

h1{
  color:var(--h1Fg);
}

h2{
  color:var(--h2Fg);
  padding-top:0px;
  padding-bottom:0px;
  margin:0px;
}
h3{
  color:var(--h3Fg);
  padding-top:0px;
  padding-bottom:0px;
  margin:0px;
}

  h1{
    font-size:var(--h1Size);
    line-Height:var(--h1Height);
  }
  h2{
    font-size:var(--h2Size);
    line-Height:var(--h2Height);
  }
  h3{
    font-size:var(--h3Size);
    line-Height:var(--h3Height);
  }

  h1{
    font-size:var(--h1Size);
    line-Height:var(--h1Height);
    }
  h2{
    font-size:var(--h2Size);
    line-Height:var(--h2Height);
  }
  h3{
    font-size:var(--h3Size);
    line-Height:var(--h3Height);
  }

/**/
  /*——————————————————————————————————————— post lists */
  
  ul.posts li a:link{
    color:var(--postListFg);
    font:var(--postListFont);
    color:var(--postListALink);
    }
  
  ul.posts li a:visited{
    color:var(--postListVisitedFg);
    }
  
  ul.posts li a:hover, ul.posts li a:active{
    color:var(--postListActiveFg);
    }

/**/
/*———————————————————————————————————————— lists */

ul, ol{
  margin-top:var(--listMarginTop);
  margin-bottom:var(--listMarginBottom);
  }

ul li, ol li{
  line-height:var(--listItemHeight);
}
/**/
/*——————————————————————————————————————— tags */

.tags{
  color:var(--tagFg);
  text-transform:uppercase;
  letter-spacing:0.2rem;
  font-size:smaller
}

/**/
/*——————————————————————————————————————— images */

img{
  display:block;
  border-radius:var(--imgRadius);
  border:var(--imgBorder);
  box-shadow:var(--imgShadow);
}

/**/
/*——————————————————————————————————————— lines */

hr{
  display:block;
  width:var(--imgWidth);
  height:auto;
  margin-inline:auto;
  border:var(--hrBorder);
  margin-top:var(--hrMarginTop);
  margin-bottom:var(--hrMarginBottom);
}
/**/
/*———————————————————————————————————————— blockquote */
blockquote{
  margin-top:var(--blockquoteMarginTop);
  margin-bottom:var(--blockquoteMarginBottom);
  border-left:10px solid var(--blockquoteBar);
  padding-left:20px;
}


blockquote p{
  color:var(--blockquoteFg);
  line-height:var(--mainLineHeightt);
  }
/**/
/*——————————————————————————————————————— img */

img{
  display:block;
  width:var(--imgWidth);
  height:auto;
  margin-inline:auto;
  border-radius:var(--imgRadius);
  border:var(--imgBorder);
  box-shadow:var(--imgShadow);
  margin-top:var(--imgMarginTop);
  margin-bottom:var(--imgMarginBottom);
  }

/* low resolution images

   pictures under 800px (class added by BUILD.py) stay at their own
   size, with no rounding, border or shadow */

img.lowResolution{
  width:auto;
  max-width:100%;
  border-radius:0;
  border:none;
  box-shadow:none;
}
/**/

}
/**/

/*::::::::::::::::::::::::::::::::::::::: end */

@media (width >= 48em){}
@media (width < 48em){}

/* use margin not padding between paragraphs */