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

/*:::::::::::::::::::::::::::::::::::::::: THEME.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. */

/*——————————————————————————————————————— font import must be first */
/* ital, wght corresponds to 0,300, where 0 means binary no */

@import url('https://fonts.googleapis.com/css2?\
family=IBM+Plex+Sans:ital,wght@0,400;1,400;0,600;1,600&\
family=Titillium+Web:wght@700;600&\
family=Schoolbell:wght@400&\
display=swap');

/**/
/*——————————————————————————————————————— 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;

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

  --mainMarginDesktop:1rem; /* @media */
  --mainPaddingDesktop:4rem; /* @media */

  --mainMarginMobile:3vw; /* @media */
  --mainPaddingMobile:7vw; /* @media */
  
  --mainPaddingTopDesktop:3rem; /* @media */
  --mainPaddingTopMobile:3vw; /* @media */
  --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;
}
/**/
/*——————————————————————————————————————— 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 */


@media (width >= 48em){
  margin-left:var(--mainMarginDesktop);
  margin-right:var(--mainMarginDesktop);
  padding-top:var(--mainPaddingTopDesktop);
  padding-left:var(--mainPaddingDesktop);
  padding-right:var(--mainPaddingDesktop);
}
@media (width < 48em){
  margin-left:var(--mainMarginMobile);
  margin-right:var(--mainMarginMobile);
  padding-top:var(--mainPaddingTopMobile);
  padding-left:var(--mainPaddingMobile);
  padding-right:var(--mainPaddingMobile);
}












  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{
  font:var(--hxFont);
  font-size:3rem;
  line-height:2rem;
  color:var(--h1Fg);
}

h2{
  font:var(--hxFont);
  font-size:1.5rem;
  line-height:1.7;
  color:var(--h2Fg);
}
h3{
  font:var(--hxFont);
  font-size:1.5rem;
  line-height:1.7;
  color:var(--h3Fg);
}
  h2{
    padding-top:0px;
    padding-bottom:0px;
    margin:0px;
  }

 h3{
   padding-top:0px;
   padding-bottom:0px;
   margin:0px;
 }
/**/
  /*——————————————————————————————————————— 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 */