/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem);--space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem);--space-xs: clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem);--space-s: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);--space-m: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);--space-l: clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem);--space-xl: clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem);--space-2xl: clamp(4rem, 3.6522rem + 1.7391vi, 5rem);--space-3xl: clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem);--space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vi, 0.625rem);--space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vi, 0.9375rem);--space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vi, 1.25rem);--space-s-m: clamp(1rem, 0.6957rem + 1.5217vi, 1.875rem);--space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vi, 2.5rem);--space-l-xl: clamp(2rem, 1.3913rem + 3.0435vi, 3.75rem);--space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vi, 5rem);--space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vi, 7.5rem);--space-s-l: clamp(1rem, 0.4783rem + 2.6087vi, 2.5rem);
}

:root {
  --line-height: 1.5em;
}

html {
  background-color: #f3f3ef;
}

body {
  color: #333333;
  padding: 0 3px;
  line-height: var(--line-height);
  max-width: 60ch;
  margin: 0 auto;
}

@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_bold.woff2');
  font-weight: bold;
}

@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_italic.woff2');
  font-style: italic;
}

@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_bold_italic.woff2');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_regular.woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Charis';
}

/*@font-face {*/

/*font-family: "Comfortaa";*/

/*src: url('/static/fonts/Comfortaa-VariableFont_wght.ttf');*/

/*}*/

/*@font-face {*/

/*font-family: "Montserrat";*/

/*font-style: normal;*/

/*src: url('/static/fonts/Montserrat-VariableFont_wght.ttf');*/

/*}*/

:root {--step-5: clamp(2.4883rem, 2.027rem + 2.3067vi, 3.8147rem);--step-4: clamp(2.0736rem, 1.7334rem + 1.7011vi, 3.0518rem);--step-3: clamp(1.728rem, 1.4799rem + 1.2407vi, 2.4414rem);--step-2: clamp(1.44rem, 1.2615rem + 0.8924vi, 1.9531rem);--step-1: clamp(1.2rem, 1.0739rem + 0.6304vi, 1.5625rem);--step-0: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vi, 1rem);--step--2: clamp(0.6944rem, 0.6577rem + 0.1836vi, 0.8rem);
}

:root {
  --text-color: #333333;
  --heading-color: #333333;
  --link-color: #333333;
  --link-color-visited: #333333;
  --link-color-hover: #4794d1;
}

html {
  font-family: 'Charter', serif;
  font-style: normal;
  font-size: var(--step-0);
  color: var(--text-color);
  line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6, header, .hero-text {
  color: var(--heading-color);
  font-weight: bold;
  line-height: initial;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

/*From css-tricks: https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/*/

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub {
  top: 0.4em;
}

.emphasis {
  font-style: italic;
}

/*stack: vertical spacing between elements*/

/*.stack * {*/

/*margin-block-end: 0;*/

/*}*/

/*The basics of stacking or flow. All 'joining' elements get a leading margin of line-height.*/

.stack > * + * {
  --space: var(--line-height);
  margin-block-start:  var(--space);
}

h1, h2, h3, h4, h5 {
  margin-block-end: calc(var(--space) * 0.58);
}

/*In the following, we will override this setting for flow items which should  have more spacing.
 * This is mostly headings.
 * instead of growing from line-height, though, we are going to use the utopia-generated fluid space variables.
 * The key is that the --space variable gets reassigned for each type.*/

.stack h1{
  --space: var(--space-xl-2xl);
}

/*.stack h1 + * {*/

/*--space: calc(var(--space) * 0.666);*/

/*}*/

.stack h2{
  --space: var(--space-l-xl);
}

/*.stack h2 + * {*/

/*--space: calc(var(--space) * 0.666);*/

/*}*/

.stack h3 {
  --space: var(--space-l);
}

/*.stack h3 + * {*/

/*--space: calc(var(--space) * 0.666);*/

/*}*/

.stack h4 {
  --space: var(--space-m);
}

/*.stack h4 + * {*/

/*--space: calc(var(--space) * 0.666)*/

/*}*/

/*This special case seems necessary because the * + * selector doesn't match the first item.*/

.stack > :nth-child(1) {
  margin-block-start: var(--space);
}

/*.header_layout {*/

/*display: flex;*/

/*flex-direction: row;*/

/*justify-content: space-between;*/

/*align-items:  baseline;*/

/*}*/

header {
  background-image: url('/static/img/water1.jpg');
  background-image: url('/static/media/boot_demo_2048.jpg');
  background-size: cover;
  background-position-y: center;
  background-position-x: left;
}

/*For images part of template, not content*/

.template-img {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  max-width: var(--space-xl-2xl);
}

ul.menu {
  background-color: tkn('colors.text.main');
  list-style: none;
}

/*ul.menu li {*/

/*padding: 0 var(--space-2xs);*/

/*}*/

/*Now add flex for menu*/

ul.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 var(--space-xs);
}

header > .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

header > .wrapper > .logo-group {
  min-width: 100px;
  flex-grow: 1;

}

/*Could we make the menu wrap with the same kind of technique?*/

nav {
  max-width: 90%;
}

ul.menu {
  width: 100%;
  --modifier: calc(650px - 100%);
}

ul.menu li {
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex-grow: 1;
  padding: var(--space-xs);
  flex-basis: calc(var(--modifier) * 999);
}

/*I think the menu needs some breakpointing ...*/

footer h1 {
  font-size: 1.5rem;
}

footer > .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xl);
}

/*A single top-level import of design tokens suffices.
 * All @import-ed files have access to the `tkn()` function,
 * because design-tokens processes all @design-tokens declarations
 * in one go and thus they are available to entire final CSS.*/

/*Reset links!*/

a {
  outline-color: transparent;
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-color-visited);
}

a:focus {
  text-decoration: none;
  color: var(--link-color);
}

a:hover , a:hover p, a:hover h3{
  color: var(--link-color-hover);
}

a:hover:visited , a:visited:hover p, a:visited:hover h3{
  color: #4794d1;
}

a:active {
  color: tkn('colors.white');
}

.grid-item:hover{
  background-color:  #4794d1;
}

/*override link styling in page header*/

header a:link {
    color: var(--link-color);
    text-decoration: none;
  }

header a:visited {
    color: var(--link-color);
  }

header a:focus {
    text-decoration: none;
    color: var(--link-color);
  }

header a:hover, header a:hover p, header a:hover h3{
    color: tkn('colors.rust');
    text-decoration: underline;
  }

header a:active {
    background-color:  var(--link-color);
    color: tkn('colors.white');
  }

header a.current {
      font-weight: bold;
      text-decoration: underline;
  }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*Set the max width of the body ...
 * incompatible with later grid-based wrapping*/

main, .wrapper {
  max-width: calc(var(--space-3xl) * 4.5);
  width: 90vw;
  margin: 0 auto;
  /*hyphens: auto;*/
}

main {
  flex: 1
}

main img {
  max-width: 100%;
}

.item_layout a:hover img{
  transition: all 300ms ease-out;
}

.item_layout a:hover img{
  transform: scale(1.04)
}

.footnotes {
  font-size: var(--step--1);
}

.footnotes h2 {
    font-size: var(--step-1);
  }

.next-prev-links {
  font-size: var(--step--1);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.next-prev-links > * {
    max-width: 100%;
    min-width: 30%;
    width: calc((500px - 100%) * 999);
  }

.flex {
  display: flex;
}

.stretch {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.article-list {
  gap: var(--space-l);
}

.article-list > :last-child {
  flex-grow: 1;
  max-width: 50%;
  text-align: end;
}

/*metadata paragraph should hug closer to next (override stack/flow spacing)*/

.metadata-paragraph {
  font-size: var(--step--1);
  margin-block-end: var(--space-2xs);
  font-style: italic;
  background-color: lightgray;
  border-radius: 5px;
  padding: 3px 7px;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.metadata-paragraph + * {
  margin-block-start: 0;
  line-height: 1.1em;
}

.draft-content{
  border-left: 5px solid #eee;
  border-right: 5px solid #eee;
  padding: 0 3px;
}

.draft-content p {
  color: #555;
}

.draft-content summary{
  color: #bbb;
  background-color: #eee;
}

.draft-content details[open]::after {
  color: #bbb;
  display: block;
  content: 'END DRAFT MATERIAL';
  text-align: center;
  background-color: #eee;
}

.note-content {
  border-left: 5px solid red;
  border-right: 5px solid red;
  padding: 0 3px;

}

.note-content::before  {
  display: block;
  content: 'PRIVATE NOTES';
  text-align: center;
  background-color: red;
}

#lang-toggle {
  display: none;
}

.lang-toggle-container {
  display: flex;
  
}

.lang-toggle-container * {
    padding: 0 1rem;
    cursor: pointer;
  }


code {
  background-color: #ddd;
  padding-inline: .2rem;
  border-radius: 3px;
}