@charset "UTF-8";

:root
{
  --color-bg: #FFFFFF;
  --color-bg-highlight: #DDD;
  --color-fg: #042037;
  --color-fg-medium: #444;
  --color-fg-light: #777;
  --color-rule: #2F3236;
  --color-link: #BBB;
  --color-link-hover: #777;
  --color-link-light: #AAA;
  --color-link-extra-light: #EEE;
  --color-link-visited: #BBB;
  --font-headings: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-body: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-mono: "Mono";
  --size-font: 1rem;
  --size-font-micro: calc(0.675 * var(--size-font));
  --size-font-tiny-ratio: 0.75;
  --size-font-tiny:  calc(var(--size-font-tiny-ratio) * var(--size-font));
  --size-font-small: calc(0.875 * var(--size-font));
  --size-font-large: calc(1.25 * var(--size-font));
  --size-font-big:   calc(1.5 * var(--size-font));
  --size-font-huge:  calc(1.75 * var(--size-font));
  --size-font-mono-ratio: 0.87097;
  --size-line-ratio: 1.4;
  --size-line: calc(var(--size-line-ratio) * var(--size-font));
  --size-half-line: calc(0.5 * var(--size-line));
  --size-fourth-line: calc(0.25 * var(--size-line));
}


/* Reset a few things. */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,select,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,time,mark,audio,video,button,input
{ margin: 0; padding: 0; border: 0; /* outline: 0; */
  font-size: inherit; font: inherit; font-weight: inherit;
  line-height: inherit; vertical-align: baseline;
  text-align: inherit; color: inherit; background: transparent; }

table { border-collapse: collapse; border-spacing: 0; }
*,  *:before,  *:after { box-sizing: border-box; }

body { background-color: var(--color-bg); color: var(--color-fg);
       width: 100vw; height: 100vh; }

/* Page geometry */

article
{ min-height: 100%;
  font-size: var(--size-font);
  font-family: var(--font-body), sans-serif;
  font-weight: 400;
  line-height: var(--size-line);
  text-align: left;
  display: grid;
  max-width: 120ch;
  margin: 0 auto;
  grid-template-columns: 22ch auto;
  grid-template-rows: auto 1fr auto;
  grid-column-gap: 3rem;
  grid-template-areas: "ui body"
                       "ui body"
                       "ui footer";
  padding-top: calc(1.5 * var(--size-line));
  padding-bottom: calc(1.5 * var(--size-line));
  padding-left: calc(3 * var(--size-line));
  padding-right: calc(3 * var(--size-line)); }


.header { /* border-left: 1px solid #EEE; */ padding-left: var(--size-line)}
.header { grid-area: ui;  }
.header div {
  /* Unclear why we need a nesting div here */
  position: -webkit-sticky;
  position: sticky; top: calc(1.5 * var(--size-line)); }
section { grid-area: body;  max-width: 72ch; }
footer { grid-area: footer; padding-top: var(--size-half-line); }

/* Basic markup */

h1, h2, h3
{ font-family: var(--font-headings), sans-serif; text-transform: uppercase;
  font-size: var(--size-font-large);
  font-weight: bold;
  margin-bottom: var(--size-half-line);
  color: black /* var(--color-fg-medium) */;
}

h1 { line-height: calc(1.5 * var(--size-line)); }
h1 { font-size: var(--size-font-big); }
h2 { font-size: var(--size-font-large); }
h3 { font-size: var(--size-font);   margin-bottom: 0; }

* + h1, * + h2, * + h3  { padding-top: calc(1.5 * var(--size-line)); }
h1 + h3 { padding-top: var(--size-half-line); }
h4
{ font-family: var(--font-headings), sans-serif;
  padding-top: var(--size-half-line);
  font-weight: 300;
  text-transform: none; }

div, nav, p, ol, ul, dl, pre, table { margin-bottom: var(--size-half-line); }
ul, ol { list-style-position: outside }
ul { list-style-type: disc }
ul > li { margin-left: 2.25ch; }
ol > li { margin-left: 2ch; }
em { font-style: italic }
b, strong { font-weight: 700;  color: var(--color-fg-medium);  }
small { font-size: var(--size-font-tiny); }
sup { vertical-align: super; }
sub { vertical-align: sub; }
sup, sub { font-size : calc(1em * var(--size-font-tiny-ratio));
           line-height: 0; margin-left: 0.2ex; }

small
{ font-size: var(--size-font-tiny);
  color: var(--color-fg-light);
  display: block;
  line-height: calc(1.5 * var(--size-font-tiny)); }

blockquote {
  padding-top: var(--size-half-line);
  padding-bottom: var(--size-half-line);
  font-size: var(--size-font-tiny);
  color: var(--color-fg-light);
  display: block;
  line-height: calc(1.5 * var(--size-font-tiny)); }


img { display: block; width: 100%;  }
* + div.caption
{ font-size: var(--size-font-tiny); color: var(--color-fg-light);
  margin-top: calc(-1 * var(--size-half-line));
  line-height: calc(1.5 * var(--size-font-tiny));
}

.caption.before { margin-top: 0; margin-bottom: 0}
.caption.before + * { margin-top: 0; }

#iiif-image { margin-top: calc(1.5 * var(--size-line));
              margin-bottom: calc(1 * var(--size-line));
              border: 1px solid black;
              box-sizing: content-box; }

/* Links and anchors. */

a { color:inherit; text-decoration:none;
    border-bottom: 1px solid var(--color-link); }
a:visited { border-bottom: 1px solid var(--color-link-visited); }
a:hover
{ color: var(--color-link-hover);
  border-bottom-color: var(--color-link-hover); }

a.anchor:before { content: "#" }
a.anchor:hover { text-decoration: underline; }
*:hover > a.anchor { visibility: visible }
a.anchor
{ visibility: hidden; position: absolute;
  font-weight: normal; font-style: normal;
  margin-left: -2.5ch;
  padding-right: 1ch; padding-left: 1ch; /* To remain selectable */
  color: var(--color-link-hover);
  border: none; }

section > button a { border: none }
section > button a:hover { color:inherit; border:none; }
section > button a:visited { border:none; }

/* Header */

header h1 a { border: none; }
header h1 img { width: 50%; }
header h1
{ font-size: var(--size-font-large);
  line-height: calc(1.0 * var(--size-line));
  text-transform: none;
  margin-bottom: var(--size-half-line); }

/* Toc & social & lang */

nav a { border-bottom: none }
nav a:hover { color:black; }
nav li { margin: 0}
nav ul
{ font-size: var(--size-font);
  line-height: var(--size-line);
  font-weight: 700;
  text-transform: uppercase;
  list-style-position: inside;
  color: var(--color-fg-light);
  list-style-type: none; margin: 0; padding:0;
  margin-top: var(--size-line);
}

.social
{
  font-family: "fab";
}

li.social { display: inline-block; color: #999; }

.lang
{ font-size: var(--size-font-small);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0; padding:0; }

span.lang:not(:last-child):after { content:"/"; padding-left:0.2ex; }

/* Video */

.video {
  position:relative; width: 100%;
  padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden; }
.video iframe {
  position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%; }

/* Form */

form { margin-bottom: var(--size-line); }
form > * { display: block; align:right }
label { font-weight: 700;
        color: var(--color-fg-medium); margin-bottom: 0.25rem}
input[type=email], input[type=text]
{
  -webkit-appearance: none;
  border-radius:0;
  width: 100%;
  background-color: #DDD;
  padding: 0.2rem;
  border: 1px solid #999;
}

section > button, input[type=submit]
{ -webkit-appearance: none;
  border-radius:0;
  background-color: #CCC;
  margin-top: var(--size-half-line);
  padding-left: 0.5rem; padding-right: 0.5rem;
  padding-top: 0.2rem; padding-bottom: 0.25rem;
  cursor:pointer;
  border: 1px solid #999;
}
section > button { margin: 0 }
section > button:hover, input[type=submit]:hover:enabled { background: #AAA; }
section > button:active, input[type=submit]:active:enabled { background: #AAA; color: #333; }

/* Footer */

footer { font-size: var(--size-font-tiny); color: var(--color-fg-light); }

/* Media adjustments */

@media only screen and (min-width:160ch) /* and (min-height: 60rem) */
{
  :root { --size-font: 1.25rem; } /* consider using vmin units */
}

@media only screen and (max-width:80ch)
{
  article {
    padding: var(--size-line);
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "ui"
                         "body"
                         "footer"; }
  header, section, footer, .toc, .header { padding: 0; border: none }
  nav ul {
    font-size: var(--size-font);
    line-height: calc(1.0 * var(--size-line)); }
  nav ul { display: inline-block; margin-top:0 }
  header h1 img { width: 65%; margin: 0; }

  section h1:first-child, section h2:first-child, section h3:first-child
  { padding-top: var(--size-half-line) }
  .header { position: initial; margin-bottom:0; }
  .header div { display: flex; border-bottom: 1px solid #EEE; }
  .header ul li { display: inline-block; margin-right: 1ex; }
  .header header { flex : 1; margin-top:0.5ex; }
  .header nav
  { flex : 1;
/*    border-top: 1px solid #EEE; */
/*    border-bottom: 1px solid #EEE; */
/*    padding-top: var(--size-half-line); */
/*    padding-bottom: var(--size-half-line) */ }

  .lang { font-size: var(--size-font-tiny); }


  footer { padding-top: var(--size-line) }
}

@media print
{
  * { -webkit-print-color-adjust: exact; }

  body > * { width: 100%; }
  article {
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "ui"
                         "body"
                         "footer"; }

  header, section, footer, .header { padding: 0; border: none }
  header { border-bottom: 1px solid #EEE; }
  section { padding-top: var(--size-line) }
  .toc { display: none }
}