/* -*-CSS-*- */
/*@media print { 
  .logo { display: none; }
}*/

body { 
  margin: auto;
  max-width: 51em;
}
div#content {  }
h1 { 
  margin-left: auto; 
  margin-right: auto;
  /*  margin-top: 1.5em;		*/
  margin-top: 0;
  margin-bottom: 0;
  clear: left;
}
h2.subtitle {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
h2:not(.subtitle), footer {
    padding-top: 0.25em;		    
    border-top: 1px solid black;
}
h1,h2,h3,h4,h5,h6 { margin-bottom: 0; }
h1 + p { margin-top: .5em; }
h2 + p { margin-top: 0; }
h3 + p { margin-top: 0; }
h4 + p { margin-top: 0; }
h2 + h3 { margin-top: .25em; }
h3 + h4 { margin-top: .25em; }
h3 + dl { margin-top: 0; }

/* link styling, remember order: a, link, visited, focus, hover, active */
/* our text logo, glows blue on MO, red glow and text on activation */
a:link#tlogo, a:visited#tlogo {color: black}
a:focus:not(:active)#tlogo,
a:hover:not(:active)#tlogo { text-shadow: 0 0 1em #0000ff; }
a:active#tlogo { color: red;  text-shadow: 0 0 1em #ff0000; } 

/* maybe use :not([class]) vs :not(.knotcard)? */
/* currently defining content as inside sections or the footer */
/*section a:link, footer a:link { text-decoration-style: double; } */
section a:link, footer a:link {
    text-decoration-style: double;
    /* these don't work to contain text shadow
    clip-path: padding-box;
    clip-box-block: padding-box;
    clip-box-inline: content-box;
    overflow-y: hidden;
    background-clip: content-box;
    */
}
section a:link:not(.knotcard), footer a:link:not(.knotcard) {
/*    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 1.5em currentColor;*/
/*    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 -0.2em 1.0em currentColor;*/
    /* for the box-shadow:
       blur-radius increases the coverage with 8em seeming the max effective size
       lighten with negative spread-radius */
    box-shadow: inset 0 -1.125em 5em -4.5em currentColor; 
    padding: 2px 2px 0;
/*    text-shadow: 0 0 1px white, 0 -1px 1px white, 0 0 2px white, 0 -2px 2px white, 0 0 3px white, 0 -3px 3px white, 0 -4px 6px white, 0 -6px 8px white;*/
}
section a:focus:not(.knotcard), footer a:focus:not(.knotcard),
section a:hover:not(.knotcard), footer a:hover:not(.knotcard) {
    /*    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 0.75em currentColor, 0 0 1em currentColor; */
    text-decoration: underline overline double currentColor;
}      

/* external link styling */
section a[href*="knottynotions.com"]:link,
footer a[href*="knottynotions.com"]:link {
    text-decoration-style: double;
}
section a[href^="https://archive.org/"]:link,
footer a[href^="https://archive.org/"]:link {
    text-decoration-style: dotted;
}
a[href^="http"]:link { text-decoration-style: solid; }

/* nav positioning */
#tlogo {  /* top logo */
    position: fixed;
    margin-left: -10.5rem;
    top: 0.5rem;
/*    margin-left: -2.2em;	
    top: 0.2em;
<span style="padding: 20px 0 15px 5px; border: 2px solid red; border-radius: 4px; font-size: 240%; display: inline-block; line-height: 0.55;">
*/

    padding: 0.18em 0 0.04em 0.05em;
    border: 2px solid red;
    border-radius: 4px;
    font-size: 150%;
    display: inline-block;
    line-height: 0.55;
}

#site-nav {    /* bottom left corner */
    width: 5.5rem;
    position: fixed;
    margin-left: -10.5rem;
    border-top: none;
    bottom: 0.5rem;
}
#page-nav {   /* top left corner */
    width: 6.5rem;
    position: fixed;
    margin-left: -10.5rem;
    border-top: none;
    top: 4rem;
}
nav#site-nav a, nav#page-nav a {
    display: block;
    text-align: right;
    text-decoration: none;
    font: smaller Optima, Gill Sans, Arial, sans-serif;
    padding: 2px 4px 2px 0;
    margin-top: 2px;
    background: #ddd;
    color: #000;
}
nav#site-nav a:hover, nav#page-nav a:hover { background: #bbf; }
nav#site-nav a:active, nav#page-nav a:active { background: #fbb; }


/* clock and counter wise arrow + handedness/mirror styling */
.this.dir { font-size: 300%; }
.that.dir { font-size: 275%; }
.this.hand { font-size: 300%; }
.that.hand { font-size: 275%; }
.mirror {
    display: inline-block;
    transform: scaleX(-1);
}

.less { font-size: smaller; }

div#top-matter { 
  width: 100%;
  border-style: solid none;
  border-color: red;
}
div#tagline { 
  font-size: 1.4em; 
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
}
div#viewcart { 
  position: fixed;
  top: 15px;
  width: 130px;
  height: 32px;
  right: 0;
}
div#supertag { 
  font-size: smaller;
}

div#breadcrumb a { 
  text-decoration: none; 
  color: inherit;
}
div#breadcrumb a:hover { color: blue; }
div#breadcrumb a:active { color: red; }

p.intro { margin-top: 4px; }

div#top-nav {
  position: fixed;
  width: 10em;
/*  margin: 0 0 0 -10em;*/
  top: 5.1em;
  left: 0;
}
div#top-nav a {
  display: block; 
  text-align: center; 
  font: bold 1em sans-serif; 
  padding: 5px 10px; 
  margin: 2px 6px 2px 0;
  border-width: 0; 
  text-decoration: none; 
  background: #999;
  color: #000;
}
div#top-nav a:hover { background: #99f; }
div#top-nav a:active { background: #f99; }


#about a#tm-about, 
#catalog a#tm-catalog, 
#traditions a#tm-traditions, 
#workshops a#tm-workshops,
#new a#tm-new
{ 
  background: inherit;  
  padding: 2px 10px;
  border-width: 2px 0px;
  border-style: solid;
  border-color: #999;
}

#about a:hover#tm-about, 
#catalog a:hover#tm-catalog, 
#traditions a:hover#tm-traditions, 
#workshops a:hover#tm-workshops,
#new a:hover#tm-new
{ 
  color: inherit; 
  background: inherit;
  text-decoration: none;
}
#about a:active#tm-about, 
#catalog a:active#tm-catalog, 
#traditions a:active#tm-traditions, 
#workshops a:active#tm-workshops,
#new a:active#tm-new
{ 
  color: inherit; 
  background: inherit;
  text-decoration: none;
}

/* how 2 tile stylings */
/* <a href/name class=knotcard> <figure><img><figcaption> */
/*a.knotcard figcaption {		
    display: table-caption;	
    caption-side: bottom;	
}*/



/* display: grid;
grid-auto-flow: row;
gap: 1em;
// if columns are uneven, add grid-auto-columns: 1fr;
// add in a media query to change grid-auto-flow: column; at breakpoint
*/
section#knots {
    display: grid;
    --card-size: 12em;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-size, 12em), auto));
    gap: 0.25em;
}

section#knots > h2 { grid-column: 1/-1; }

a.knotcard { text-decoration: none; }
a.knotcard figure {
    margin: 0;  /* wonder why default figure margins are massive? */
    display: flex;
    flex-flow: column;
    justify-content: end;
    height: 100%;
} 
a.knotcard figure > img {
    width: 100%;
    object-fit: contain;
    max-height: calc(var(--card-size, 12em) * 1.5);
}

a.knotcard figure > figcaption {
    --readability-margin: 0.25em;
    margin: var(--readability-margin, 0.25em);
}

/* outline the tiles */
a.knotcard > figure { border: 0.5px solid currentColor; }
/* glow the tiles when interacting */
a.knotcard > figure:hover,
a.knotcard > figure:focus{
    /* box-shadow: 0 0 2px white, 0 0 1em #aaa; */
    box-shadow: 0 0 2px white, 0 0 1.5em -0.5em currentColor;
}
/* gradient behind any figure inside a link */
a.knotcard > figure { /* adding :link makes them all black?? */
    /* background: linear-gradient(white var(--card-size, 12em), #bbf, #bbf 66%, #f6f6ff 85%, white); */
    background: linear-gradient(white var(--card-size, 12em), white 68%, currentColor 68%, 68.1%, white 91%)
}

/* how 2 popup */
figcaption span.how2pop {
    display: none;    /* invisible by default */
    background-color: white;
    opacity: 1;
    position: absolute;
    /* calc(0 - var) doesn't work */
    margin: 0 0 0 calc(-1 * var(--readability-margin, 0.25em));
    max-width: 25%;
    border: 1px solid black;
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 0 2px white, 0 0 1em #fff;
}  
a[name].knotcard > figure:hover span.how2pop,
a[name].knotcard > figure:focus span.how2pop,
a[href].knotcard > figure:hover span.how2pop,
a[href].knotcard > figure:focus span.how2pop {
    display: block;
    z-index: 50;
}

/* how 2 step stylings */
ol[property="steps"] { list-style-type: none; }
ol[property="steps"] li {
    display: block;
    float: left;
    clear: both;
}
li strong+p { margin-top: 0; }

/*ol.howto li::before { content: "Step "; } */

/* igkt logo, currently only on the front page */
#igkt-logo {    /* bottom left corner */
    position: relative;
    bottom: -90px;
    right: 0;
}