html { box-sizing: border-box; } 
*, *::before, *::after { box-sizing: inherit; } 

body { line-height: 1.25; } 
img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }

:root{
  --p: clamp(2em, 7vw, 8em)
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body > nav { flex: 1 }
body > main { flex: 3 }
sup, sub {line-height:1}
body {
  line-height: 1.5;
  text-decoration-skip-ink: skip;
  font-kerning: normal;
  font-family: "JetBrains Mono";
  margin: 2rem;
  font-size:1em;
  overflow-x: hidden;
  display:flex;
  gap: var(--p);
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
  font-kerning: normal;
}
* {
  font-variation-settings: "wght" var(--jetbrains-mono-wght, 350);
}


@font-face{
  font-family: "JetBrains Mono";
  src: url("/w/media/fonts/jetbrainsmono.woff2") format("woff2 supports variations"),
    url("/w/media/fonts/jetbrainsmono.woff2") format("woff2-variations");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "JetBrains Mono";
  src: url("/w/media/fonts/jetbrainsmono-italic.woff2") format("woff2 supports variations"),
    url("/w/media/fonts/jetbrainsmono-italic.woff2") format("woff2-variations");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}



button, input, label { 
    line-height: 1.1;
}

a { color: #3695ce; }
h1.title {
  font-size: 3.75em;
  --jetbrains-mono-wght: 800;
}
.w {
  text-decoration: none;
  font-size: 3.75em;
  font-family: xanhmono;
  line-height: 1;
  color:black;
}
.w {
  font-style: italic;
  text-transform:lowercase;
}
.w:hover { color:#3695ce }
.meta ul {
  margin-block-start: var(--flow-space, 1.5em);
  list-style-position: inside;
  ::marker {content: ""}
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.flow > * {
  max-width: 48rem
}
.meta,
.prose {
  font-family: "JetBrains Mono";
  --flow-space: 1em;
}
h1, h2, h3, h4 { 
    line-height: 1.1;
    font-variant-numeric: lining-nums;
}

h1 {
  font-size: 1.35em;
  text-transform: uppercase;
}


h2 {
  font-size:1.85em;
  text-transform: uppercase;
  --jetbrains-mono-wght: 450;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: .1em;
  
}
h3 {
  font-size: 1.35em;
  text-transform: uppercase;
  --jetbrains-mono-wght: 450;
}
hr {
  margin: 1em 0;
}

blockquote { 
  border-left: 1px solid #3695ce;
  padding-left: 2em;
  p + p { text-indent: 2em }
}

.prose ul, 
.prose ol {
  padding-left: 1.5em;
}

.prose ul {
  list-style:none;
}
.prose ul li::before {
  content: "●";
  position: absolute;
  left: -1.5em;
}
.prose li {
  margin: 0 0 .75em 0;
  position: relative;
}

code {
  background: #eee
}

/*
5. OpenType utility classes
*/

.dlig { font-variant-ligatures: discretionary-ligatures; }
.hlig { font-variant-ligatures: historical-ligatures; }
.dlig.hlig { font-variant-ligatures: discretionary-ligatures historical-ligatures; }
.pnum { font-variant-numeric: proportional-nums; }
.tnum { font-variant-numeric: tabular-nums;    }
.lnum { font-variant-numeric: lining-nums; }
.onum { font-variant-numeric: oldstyle-nums; }
.zero { font-variant-numeric: slashed-zero; }
.pnum.zero { font-variant-numeric: proportional-nums slashed-zero; }
.tnum.zero { font-variant-numeric: tabular-nums slashed-zero; }
.onum.zero { font-variant-numeric: oldstyle-nums slashed-zero; }
.lnum.zero { font-variant-numeric: lining-nums slashed-zero; }
.tnum.lnum.zero { font-variant-numeric: tabular-nums lining-nums slashed-zero; }
.frac { font-variant-numeric: diagonal-fractions; }
.afrc { font-variant-numeric: stacked-fractions; }
.ordn { font-variant-numeric: ordinal; }
.smcp { font-variant-caps: small-caps; }
.hist { font-variant-alternates: historical-forms; }

:root {
    --opentype-case: "case" off;
    --opentype-sinf: "sinf" off;
}
.case { --opentype-case: "case" on; }
.sinf { --opentype-sinf: "sinf" on; }



/*
6. Generic helper classes
*/

.centered {
    text-align: center;
    text-wrap: balance;
}

.uppercase {
    text-transform: uppercase;
    --opentype-case: "case" on;
}

.smallcaps {
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;    
}


/*
7. Prose styling defaults
*/

.prose {
    text-wrap: pretty;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-size-adjust: 0.507;
}

strong, b, th { 
    font-weight: bold;
    font-size-adjust: 0.514; /* Check for the different weights you may be using */
}




:lang(fr) > * { quotes: '«\00202F' '\00202F»' '“' '”'; } /* « French “style” » */
:lang(en-GB) > * { quotes: '‘' '’' '“' '”' ; } /* ‘British “style”’ */

q::before { content: open-quote }
q::after  { content: close-quote }


.prose {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-lines: 2;
    
    hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
    hyphenate-limit-lines: 2;    
    hyphenate-limit-zone: 8%;
    hyphenate-limit-last: always;
}

.prose pre, .prose code, .prose var, .prose samp, .prose kbd,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    -webkit-hyphens: manual;
    hyphens: manual;
}