@charset "UTF-8";


@font-face {
  font-family: 'CooperHewitt';
  font-weight: 100;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Thin.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 100;
  font-style: italic;
  src: url('../cooper/CooperHewitt-ThinItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 300;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Light.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 300;
  font-style: italic;
  src: url('../cooper/CooperHewitt-LightItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 400;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Book.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 400;
  font-style: italic;
  src: url('../cooper/CooperHewitt-BookItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 500;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Medium.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 500;
  font-style: italic;
  src: url('../cooper/CooperHewitt-MediumItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 600;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Semibold.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 600;
  font-style: italic;
  src: url('../cooper/CooperHewitt-SemiboldItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 700;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Bold.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 700;
  font-style: italic;
  src: url('../cooper/CooperHewitt-BoldItalic.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 800;
  font-style: normal;
  src: url('../cooper/CooperHewitt-Heavy.woff') format('woff');
}

@font-face {
  font-family: 'CooperHewitt';
  font-weight: 800;
  font-style: italic;
  src: url('../cooper/CooperHewitt-HeavyItalic.woff') format('woff');
}

@font-face{
    font-family: 'SourceHanSansK';
    font-weight: 100 900;
    font-style: normal;
    src: url('../source-han-sans/SourceHanSansK-VF.otf.woff2') format('woff2-variations');
}

@font-face{
    font-family: 'mononoki';
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    src: url('../mononoki/mononoki-Regular.woff2') format('woff2');
}

@font-face{
    font-family: 'mononoki';
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    src: url('../mononoki/mononoki-Bold.woff2') format('woff2');
}

@font-face{
    font-family: 'Source Code VF';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    src: url('../source-code/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
         url('../source-code/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'),
         url('/../source-code/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
         url('/../source-code/SourceCodeVF-Italic.ttf.woff') format('woff supports variations');
}

:root {
    --sans: "CooperHewitt", "SourceHanSansK", "Helvetica", sans-serif;
    --condensed: "CooperHewitt", "SourceHanSansK", "Helvetica", sans-serif;
    --monospace: "mononoki", monospace;
    
}

html { font-size: 2.2vw;
     max-height: 100%}
@media all and (min-width:1000px) { html { font-size: 22px; } }
@media all and (max-width:520px) { html{ font-size: 16px; } }


* {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
}

.hideme {
    display: none;
}

li {
    break-inside: avoid-column;
}


html {
    height: 100%;
}


body {
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    max-width: 1000px;
    min-height: 100%;
    position: relative;
    z-index: -10000;
    -webkit-font-smoothing: subpixel-antialiased; /* corrects safari rendering */
    color: var(--text);
    background: var(--bg);
	hyphens: none;
	text-align: left;
  hanging-punctuation: first allow-end last;
}


footer {
    max-width: 1000px;
    text-transform: lowercase;
      text-align: right;
      font-family: var(--condensed);
      font-size: 100%;
      font-weight: 400;
      line-height: 1.5em;
    padding: 4rem 0 0 0;

    position: relative;
    overflow: hidden;
}



header { /* wraps both main and subnavigation */
    padding: 1rem 0 0 0;
    margin-left: 14rem;
    margin-right: 2.5rem;
}

header nav {
    text-align: right;
    font-family: var(--condensed);
    text-transform: lowercase;
    font-size: 85%;
    font-weight: 400;
}

header nav a + a:before{
    content: " ← ";
}

div#content { /* wraps both main and subnavigation */
    padding: 2rem 0 6rem 0;
    margin-left: 14rem;
    margin-right: 2.5rem;

}

div#doc p {
  font-family: var(--sans);
    line-height: 1.5;
}

div#doc {

}


div#doc-meta {
    font-family: var(--sans);
    line-height: 1.2;
    font-size: 80%;
    border-top: 1px solid var(--accent);
    padding: 1.5rem 0 1rem 0;
}

title-block + * {
    margin-top: 0em !important
}

.first {
    margin-top: 0px;
}


h1, h2, h3 {
    text-transform: uppercase;
	  text-align: right;
    margin-top: 2em;
	  hyphens: none;
    font-family: var(--sans);

}

h1, h2 {
    font-weight: bold;
}



article + h1 {
    margin-top: 0em;
}

h1 + ul,
h1 + dl,
h1 + ol,
h2 + ul,
h2 + dl,
h2 + ol,
h3 + dl,
h3 + ul,
h3 + ol {
    margin-top: .65rem;
}

h1 {
    font-size: 125%;
    border-bottom: 1px solid var(--text);
    margin-bottom: .5rem;
}


h2 {
    font-size: 110%;
    margin-bottom: .25em;
}

h3 {
    font-size: 110%;
    font-weight: 300;
}

hr {
  border: none;
  color: var(--text-light);
  overflow: visible;
  text-align: center;
  height: 1.5em;
  margin-top: 2.5em;
  margin-left: auto;
  margin-right: auto;
}

hr:after {
  content: '⩕  ⨇  ⩕  ⨇  ⩕  ⨇  ⩕  ⨇  ⩕  ⨇  ⩕';
  position: relative;
  top: -13px;
}

sup {
    vertical-align: top;
    font-size: .8em;
}
sup a {
   border-bottom:1px solid var(--footnote-border);
  text-decoration-color:currentColor;
  padding-inline:.15em; /* .3em */
  margin-inline:.1em;
  z-index:-1;
  position:relative;
  font-weight: 600;
}
sub { vertical-align: bottom; font-size: .8em; }

em {
  font-style: oblique;
   
}

em:lang(ko), em:lang(zh), em:lang(ja) {
    font-style: normal;
    font-weight: 600;
}

.csl-entry {
	hyphens: none;
	text-align: left;
}

@media all and (max-width:520px) {
    div#content, header {
        margin: 1.5rem;
        padding: 0;
    }

    div#content {
        padding: 0 0 4rem 0;
    }

    header nav {
        text-align: left;
    }

}

a[href^='https']::after, a[href^='http']::after {
    content: "⤴";
    font-size: 65%;
}

a[href^='https://giraffleur.org']::after, a[href^='giraffleur.org']::after {
    content: "";
}

a.a-img::after {
    content: "";
}


address {
    font-style: normal;
  }
div#course-info p {
  font-family: var(--sans);
  line-height: 1rem;
  font-size: 80%;
  margin-bottom: 0;
  margin-top: 0.25rem;
}


div#course-info a:before {
  content: none;

}



title-block h1 {
    display: block;
    font-family: var(--condensed);
    letter-spacing: inherit;
    line-height: 1.10;
margin-top: 0rem;
margin-bottom: 0.5rem;
font-weight: 600;
padding-top: 0;
text-transform: uppercase; 
hyphens: none;
overflow-wrap: break-word;
    border: none;
}



title-block h2 {
        display: block;
        font-family: var(--condensed);
        font-weight: 300;
letter-spacing: inherit;
font-size: 95%;
line-height: 1.2;
margin-top: 0rem;
margin-bottom: 0.25rem;
padding-top: 0;
text-transform: uppercase; 
hyphens: none;
overflow-wrap: break-word;
}

title-block .p-summary {
        display: block;
    font-family: var(--condensed);
line-height: 1.2em;
font-size: 100%;
font-weight: 300;
margin-top: 0rem;
margin-bottom: .25rem;
hyphens: none;
overflow-wrap: break-word;
text-transform: lowercase;
}

title-block time {
    text-transform: uppercase;
    font-size: 95%;
    font-weight: 500;
    font-family: var(--condensed);
}



#posts  .genre {
    font-size: 1rem;
    font-weight: 600;
}

title-block .p-category {
    font-size: 1em;
    font-weight: 600;
}

title-block nav {
    font-family: var(--condensed);
    font-size: 85%;
    text-transform: lowercase;
}

nav.formats {
    font-family: var(--condensed);
    font-weight: 350;
    text-align: center;
}

nav.formats a + a:before {
    content: " ◦ ";
}

topic + p {
font-size: 110%;
}



aside {
    font-family: var(--condensed);
    font-weight: 300;
font-size: 0.8rem;
line-height: 1.15;
color: var(--text-light);
letter-spacing: 0.015em;
hyphens: none;
}

aside.ko {
  line-break: auto;
}


title-block, aside {
display: block;
float: left;
position: absolute;
margin-left: 0;
left: 2.0rem;
width: calc(3.5rem * 3);
text-align: right;
list-style-type: none;
clear:both; margin-bottom: 1rem; font-variant-numeric: normal;
}


@media all and (min-width:521px) {
    title-block {
        border-right: 2px solid #ccc;
        border-color: var(--accent);
        padding-right: 9px;
      }
  }
@media all and (max-width:520px) {
    title-block, aside { float: inherit;
    position: inherit;
    width: 100%;
    }

    aside {
        margin-left: .75rem;
        padding: 0.3rem 0.5rem;
        width: 90%;
        border-left: 2px dashed gray;
        border-color: var(--text-light);
        text-align: left;
    }

    title-block {
        border-bottom: 2px solid #ccc;
        border-color: var(--accent);
        padding-bottom: 5px;
      }

    aside > p:last-child {
        margin-bottom: 0;
    }

}

title-block {
margin-bottom: 2em;
}


publication {
    font-size: 85%;
    line-height: 1.25;
font-family: var(--condensed);
hyphens: none;
font-variant: small-caps;
}


p#pub-info {
    font-size: 85%;
    line-height: 1; 
}


#abstract {
    font-size: 85%; 
    font-family: var(--condensed) !important;
    margin-bottom: 1.5em;
    margin-left: 1em;
    margin-right: 1em;
    
}

small {
    font-size: .95rem;
}

.list-title {
    text-transform: lowercase;
    hyphens: none;
    font-size: 1.2rem;
}

.list-time {
    text-transform: uppercase;
    font-size: 95%;
    font-weight: 600;
    font-family: var(--condensed);
}

.list-desc {
    font-family: var(--condensed);
    font-weight: 350;
    text-transform: lowercase;
}

#posts .series {
    font-weight: 500;
    font-size: .9rem;
}

.footnote-ref {
    font-size: 85%;
}
.footnotes{
    font-family: var(--sans);
    font-weight: 400;
    font-size: 90%;
    color: var(--text-light)

}

.footnotes ol li:before {
    font-size: 90%;

}

.csl-entry {
    text-indent: -1.5em;
    margin-left: 1.5em;
}

.csl-entry a {
    word-wrap:break-word;
}

p, li, dd{
margin-bottom: .65em;
}



li > ul,
li > ol,
li > dl {
    margin-top: .65em;
}

ol, ul, dl {
    counter-reset: foobar;
    font-family: var(--sans);

}

dl dt {
    text-transform: uppercase;
    margin-bottom: .25em;
    font-weight: 300;

}

dl dd {
    font-size: 100%;

}

ol li, ul li, dl dd {
    margin-left: 2.5rem; list-style: none;

}



ol li:before {
    counter-increment: foobar;
    content: counter(foobar);
    font-family: var(--sans);
    font-size: 1.10rem;
    position: absolute;
    margin-left: -1.5rem;
}

ul li:before {
    content: "❍";
    position: absolute;
    margin-left: -1.65rem;
    font-size: 1.1rem;
    color: var(--text-light);
}


ul.children { font-size: 95%;
column-count: 2;
column-gap: 2.5rem;

list-style-type: none;
}

ul.children li {
    margin-left: 2em;
}

ul.children li:before {
    margin-left: -2em;
    padding-right: 1.5em;
    position: static; /* because they're in columns */
}

#posts li {
    margin-bottom: 1em;
    border-left: 2px solid var(--text-light);
    padding-left: .5em;
    margin-left: 0rem;
    hyphens: none;
    text-align: left;

}

#posts li:before {
         content: "";
     }


@media all and (max-width:520px) {
ul.children {
font-size: 100%;
column-count: 1;
column-gap: 2em;

}
}



ul.children li {
margin-bottom: 0;
padding-bottom: 1em;

}

aside em{
font-weight: bolder;
font-style: normal;
letter-spacing: 0px;
}

aside img {
    margin-bottom: 0.25em;
}

code {
    font-family: var(--monospace);
    font-size: 90%;
    color: var(--text-light);    
}

pre {
    margin-bottom: 1.5em;
    padding: 0 1em 0 1em;
    border-color: var(--text-light);
    border-style: solid;
    border-width: .05em .15em .15em .05em;
    font-size: 90%;
}

pre code {
    display: block;
    color: var(--text-light);
    overflow-x: auto;
    padding: 1.5em 0 1.5em 0;
}

:not(pre) > code {
    text-size: 100%;
    color: var(--text-light);
    font-weight: bold;
}

blockquote {
    margin-left: .75em;
    margin-right: .75em;


}

blockquote p {
    font-size: 95%;
    font-family: var(--condensed) !important;
    font-weight: 350;
}

blockquote p strong {
    font-weight: 400;
}

table { margin-bottom: 1.5em;
        border-collapse: collapse;
        font-family: var(--condensed);
        font-weight: 300;
        font-size: 90%;
        width: 95%;
}

table tr + tr {
border-top: 1px solid var(--table-border);
}
table td + td {
border-left: 1px solid var(--table-border);
}


table td {
padding: 0.4em;
text-align: center;
hyphens: none;
}

table th {
    text-transform: lowercase;
    font-weight: bold;
    font-size: 95%;
    padding: 0.3rem 0.5rem ;
    line-height: 1.05;
}

img {
max-width: 100%;
}


image-caption {
display: block;
font-family: var(--condensed);
text-transform: lowercase;
}

figure {
    margin-bottom: 1.15em;
    text-align: center;
}

footer figure {
    text-align: right;
    margin: 0;
}

figure svg {
    max-width: 100%;
    height: auto;
}

.svg-icon {
  display: inline-flex;
  align-self: center;
    top: .125em;
  position: relative;
}
.svg-icon svg {
  height:1em;
  width:1em;
}

figcaption {
    font-family: var(--condensed);
    font-size: 85%;
    font-weight: 400;
    text-align: center;
}

ui {
font-style: normal;
hyphens: none;
}

ui:before {
    content: "‹";
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

ui:after {
    content: "›";
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}



a {
text-decoration: none;
color: var(--accent);
transition-property: background;
transition-duration: 0.2s;

}


a:active { color: #777; }

a:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: .125em;
    text-decoration-skip-ink: all;
}


p.image a img {
    border: 1px solid gray;
}


p.image a:hover img {
    background: none;
    outline: 1px solid gray;
}



/* internet explorer hider */

.ie {
    display: none;
}