@charset "UTF-8";
/*

Variables

*/
:root {
  /*
  Font size is the basis of all other measurements.
  It's either constant or viewport-relative. Choose one.

  Constant: */
  /*   --fontSize: 16px; */
  /*   Veiwport-relative (100% / EMs-across-viewport)  */
  --fontSize: calc(100vw / 80);
}

@media only screen and (max-width: 600px) {
  :root {
    --fontSize: calc(100vw / 30);
  }
}
:root {
  --sansFont: "Inter", sans-serif;
  --monoFont: "iaw-mono"; /* "IBM Plex Mono" */
  /* CSS */
  /* heading size */
  --h1-size: 2.8rem;
  --h2-size: 2.2rem;
  --h3-size: 1.4rem;
  --h4-size: 1.1rem;
  --unit:calc(var(--fontSize)*0.5);
  /* line height is the basis for vertical spacing */
  --line-height:calc(var(--fontSize)*1.5);
  --lineHeight:var(--line-height);
  /* horizontal and vertical spacing basis */
  --baseline:var(--unit);
  --body-padding-x:calc(var(--unit)*8);
  --body-padding-y:calc(var(--unit)*8);
  --body-bleed:calc(var(--unit)*16);
  --body-max-width:calc(var(--unit)*152);
  --blockSpacingTop:0px;
  --blockSpacingBottom:var(--line-height);
  --hr-weight:1px;
  --hrThickness:var(--hr-weight);
  --h1-margin-bottom:var(--line-height);
  --h3-margin-bottom:calc(var(--unit)*0.5);
  /* grid spacing */
  --column-gap:calc(var(--unit)*4); /* changed from: 8 */
  --row-gap:calc(var(--unit)*4); /* changed from: 8 */
  --column-gap-compact:calc(var(--unit)*4);
  --row-gap-compact:calc(var(--unit)*2);
  /* 1 pixel */
  --displayScale: 1;
  --pixel: 1px;
  /* Colors */
  --foreground-color-rgb:0,0,0;
  --foreground-color-a:1;
  --foreground-color-a-dimmed:0.4;
  --foreground-color:rgba(var(--foreground-color-rgb),var(--foreground-color-a));
  --foreground-color-dimmed:rgba(var(--foreground-color-rgb),var(--foreground-color-a-dimmed));
  --rule-color:rgba(var(--foreground-color-rgb),var(--foreground-color-a));
  --background-color:#fff;
  --letterbox-color:#333;
  --box-link-hover-color:rgba(var(--foreground-color-rgb),0.07);
  --accent-color:var(--blue);
  --accent-color-darkmode:#9ac9fe;
  --menu-active-color:var(--foreground-color);
  --menu-inactive-color:rgba(0,0,0,0.3);
  --red:#f03009;
  --red-orange:#ff2e00;
  --hot-orange:#ff5c00;
  --orange:#ff7105;
  --brown:#716558;
  --warm-yellow:#ffe310;
  --yellow:#fff310;
  --light-yellow:#ffffb3;
  --green:#12c05b;
  --ocean-green:#008f5d;
  --pear-green:#77dd86;
  --blue:#0366d6;
  --sunset-pink:#ff7b81;
  --light-pink:#ffb3ba;
  --xlight-pink:#ffd1d9 ;
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --red:color(display-p3 0.94 0.19 0.04);
    --red-orange:color(display-p3 0.97 0.26 0.11);
    --hot-orange:color(display-p3 1.0 0.36 0.0);
    --orange:color(display-p3 0.99 0.49 0.16);
    --brown:color(display-p3 0.44 0.393 0.341);
    --warm-yellow:color(display-p3 1.0 0.87 0.05);
    --yellow:color(display-p3 1.0 0.96 0.05);
    --light-yellow:color(display-p3 1.0 1.0 0.7);
    --ocean-green:color(display-p3 0.0 0.55 0.37);
    --sunset-pink:color(display-p3 1 0.495 0.54);
    --light-pink:color(display-p3 1 0.69 0.718);
    --xlight-pink:color(display-p3 1 0.845 0.869);
    --grey-light:color(display-p3 .95 0.95 0.95);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  :root {
    --displayScale:1.5;
    --pixel:0.75px ;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
  :root {
    --displayScale:2;
    --pixel:0.5px ;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
  :root {
    --displayScale:2.5;
    --pixel:0.4px ;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 3dppx) {
  :root {
    --displayScale:3;
    --pixel:0.3333333333px ;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
  :root {
    --displayScale:4;
    --pixel:0.25px ;
  }
}
/*@media only screen and (max-device-width: 812px) and (orientation: landscape) { :root {
  --fontSize: 1.7vw;
}}*/
/* reset */
* {
  font: inherit;
  line-height: inherit;
}

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

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, a:active, a:visited {
  color: inherit;
}

r-grid {
  display: grid;
  --grid-tc:repeat(4,1fr);
  grid-template-columns: var(--grid-tc);
  --grid-cs:1;
  --grid-ce:-1;
  grid-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
}

r-grid.compact {
  --column-gap:var(--column-gap-compact);
  --row-gap:var(--row-gap-compact) ;
}

r-cell {
  display: block;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

r-grid[columns="1"] {
  --grid-tc:repeat(1,1fr) ;
}

r-grid[columns="2"] {
  --grid-tc:repeat(2,1fr) ;
}

r-grid[columns="3"] {
  --grid-tc:repeat(3,1fr) ;
}

r-grid[columns="4"] {
  --grid-tc:repeat(4,1fr) ;
}

r-grid[columns="5"] {
  --grid-tc:repeat(5,1fr) ;
}

r-grid[columns="6"] {
  --grid-tc:repeat(6,1fr) ;
}

r-grid[columns="7"] {
  --grid-tc:repeat(7,1fr) ;
}

r-grid[columns="8"] {
  --grid-tc:repeat(8,1fr) ;
}

r-grid[columns="9"] {
  --grid-tc:repeat(9,1fr) ;
}

r-grid[columns="10"] {
  --grid-tc:repeat(10,1fr) ;
}

r-grid[columns="11"] {
  --grid-tc:repeat(11,1fr) ;
}

r-grid[columns="12"] {
  --grid-tc:repeat(12,1fr) ;
}

r-grid[columns="13"] {
  --grid-tc:repeat(13,1fr) ;
}

r-grid[columns="14"] {
  --grid-tc:repeat(14,1fr) ;
}

r-grid[columns="15"] {
  --grid-tc:repeat(15,1fr) ;
}

r-grid[columns="16"] {
  --grid-tc:repeat(16,1fr) ;
}

r-cell[span^="1"] {
  --grid-cs:1 ;
}

r-cell[span^="2"] {
  --grid-cs:2 ;
}

r-cell[span^="3"] {
  --grid-cs:3 ;
}

r-cell[span^="4"] {
  --grid-cs:4 ;
}

r-cell[span^="5"] {
  --grid-cs:5 ;
}

r-cell[span^="6"] {
  --grid-cs:6 ;
}

r-cell[span^="7"] {
  --grid-cs:7 ;
}

r-cell[span^="8"] {
  --grid-cs:8 ;
}

r-cell[span^="9"] {
  --grid-cs:9 ;
}

r-cell[span^="10"] {
  --grid-cs:10 ;
}

r-cell[span^="11"] {
  --grid-cs:11 ;
}

r-cell[span^="12"] {
  --grid-cs:12 ;
}

r-cell[span^="13"] {
  --grid-cs:13 ;
}

r-cell[span^="14"] {
  --grid-cs:14 ;
}

r-cell[span^="15"] {
  --grid-cs:15 ;
}

r-cell[span^="16"] {
  --grid-cs:16 ;
}

r-cell[span$="+1"],
r-cell[span="1"] {
  --grid-ce:1 ;
}

r-cell[span$="+2"],
r-cell[span$="-1"],
r-cell[span="2"] {
  --grid-ce:2 ;
}

r-cell[span$="+3"],
r-cell[span$="-2"],
r-cell[span="3"] {
  --grid-ce:3 ;
}

r-cell[span$="+4"],
r-cell[span$="-3"],
r-cell[span="4"] {
  --grid-ce:4 ;
}

r-cell[span$="+5"],
r-cell[span$="-4"],
r-cell[span="5"] {
  --grid-ce:5 ;
}

r-cell[span$="+6"],
r-cell[span$="-5"],
r-cell[span="6"] {
  --grid-ce:6 ;
}

r-cell[span$="+7"],
r-cell[span$="-6"],
r-cell[span="7"] {
  --grid-ce:7 ;
}

r-cell[span$="+8"],
r-cell[span$="-7"],
r-cell[span="8"] {
  --grid-ce:8 ;
}

r-cell[span$="+9"],
r-cell[span$="-8"],
r-cell[span="9"] {
  --grid-ce:9 ;
}

r-cell[span$="+10"],
r-cell[span$="-9"],
r-cell[span="10"] {
  --grid-ce:10 ;
}

r-cell[span$="+11"],
r-cell[span$="-10"],
r-cell[span="11"] {
  --grid-ce:11 ;
}

r-cell[span$="+12"],
r-cell[span$="-11"],
r-cell[span="12"] {
  --grid-ce:12 ;
}

r-cell[span$="+13"],
r-cell[span$="-12"],
r-cell[span="13"] {
  --grid-ce:13 ;
}

r-cell[span$="+14"],
r-cell[span$="-13"],
r-cell[span="14"] {
  --grid-ce:14 ;
}

r-cell[span$="+15"],
r-cell[span$="-14"],
r-cell[span="15"] {
  --grid-ce:15 ;
}

r-cell[span$="+16"],
r-cell[span$="-15"],
r-cell[span="16"] {
  --grid-ce:16 ;
}

r-cell[span$="-16"] {
  --grid-ce:17 ;
}

r-cell[span] {
  grid-column-end: span var(--grid-ce);
}

r-cell[span*="+"],
r-cell[span*="-"],
r-cell[span*=".."] {
  grid-column-start: var(--grid-cs);
}

r-cell[span*="-"],
r-cell[span*=".."] {
  grid-column-end: var(--grid-ce);
}

r-cell[span=row] {
  grid-column: 1/-1;
}

r-cell[order="-16"] {
  order: -16;
}

r-cell[order="-15"] {
  order: -15;
}

r-cell[order="-14"] {
  order: -14;
}

r-cell[order="-13"] {
  order: -13;
}

r-cell[order="-12"] {
  order: -12;
}

r-cell[order="-11"] {
  order: -11;
}

r-cell[order="-10"] {
  order: -10;
}

r-cell[order="-9"] {
  order: -9;
}

r-cell[order="-8"] {
  order: -8;
}

r-cell[order="-7"] {
  order: -7;
}

r-cell[order="-6"] {
  order: -6;
}

r-cell[order="-5"] {
  order: -5;
}

r-cell[order="-4"] {
  order: -4;
}

r-cell[order="-3"] {
  order: -3;
}

r-cell[order="-2"] {
  order: -2;
}

r-cell[order="-1"] {
  order: -1;
}

r-cell[order="0"] {
  order: 0;
}

r-cell[order="1"] {
  order: 1;
}

r-cell[order="2"] {
  order: 2;
}

r-cell[order="3"] {
  order: 3;
}

r-cell[order="4"] {
  order: 4;
}

r-cell[order="5"] {
  order: 5;
}

r-cell[order="6"] {
  order: 6;
}

r-cell[order="7"] {
  order: 7;
}

r-cell[order="8"] {
  order: 8;
}

r-cell[order="9"] {
  order: 9;
}

r-cell[order="10"] {
  order: 10;
}

r-cell[order="11"] {
  order: 11;
}

r-cell[order="12"] {
  order: 12;
}

r-cell[order="13"] {
  order: 13;
}

r-cell[order="14"] {
  order: 14;
}

r-cell[order="15"] {
  order: 15;
}

r-cell[order="16"] {
  order: 16;
}

@media (max-width: 1024px) {
  r-grid[columns-s="1"] {
    --grid-tc:repeat(1,1fr) ;
  }
  r-grid[columns-s="2"] {
    --grid-tc:repeat(2,1fr) ;
  }
  r-grid[columns-s="3"] {
    --grid-tc:repeat(3,1fr) ;
  }
  r-grid[columns-s="4"] {
    --grid-tc:repeat(4,1fr) ;
  }
  r-grid[columns-s="5"] {
    --grid-tc:repeat(5,1fr) ;
  }
  r-grid[columns-s="6"] {
    --grid-tc:repeat(6,1fr) ;
  }
  r-grid[columns-s="7"] {
    --grid-tc:repeat(7,1fr) ;
  }
  r-grid[columns-s="8"] {
    --grid-tc:repeat(8,1fr) ;
  }
  r-grid[columns-s="9"] {
    --grid-tc:repeat(9,1fr) ;
  }
  r-grid[columns-s="10"] {
    --grid-tc:repeat(10,1fr) ;
  }
  r-grid[columns-s="11"] {
    --grid-tc:repeat(11,1fr) ;
  }
  r-grid[columns-s="12"] {
    --grid-tc:repeat(12,1fr) ;
  }
  r-grid[columns-s="13"] {
    --grid-tc:repeat(13,1fr) ;
  }
  r-grid[columns-s="14"] {
    --grid-tc:repeat(14,1fr) ;
  }
  r-grid[columns-s="15"] {
    --grid-tc:repeat(15,1fr) ;
  }
  r-grid[columns-s="16"] {
    --grid-tc:repeat(16,1fr) ;
  }
  r-cell[span-s^="1"] {
    --grid-cs:1 ;
  }
  r-cell[span-s^="2"] {
    --grid-cs:2 ;
  }
  r-cell[span-s^="3"] {
    --grid-cs:3 ;
  }
  r-cell[span-s^="4"] {
    --grid-cs:4 ;
  }
  r-cell[span-s^="5"] {
    --grid-cs:5 ;
  }
  r-cell[span-s^="6"] {
    --grid-cs:6 ;
  }
  r-cell[span-s^="7"] {
    --grid-cs:7 ;
  }
  r-cell[span-s^="8"] {
    --grid-cs:8 ;
  }
  r-cell[span-s^="9"] {
    --grid-cs:9 ;
  }
  r-cell[span-s^="10"] {
    --grid-cs:10 ;
  }
  r-cell[span-s^="11"] {
    --grid-cs:11 ;
  }
  r-cell[span-s^="12"] {
    --grid-cs:12 ;
  }
  r-cell[span-s^="13"] {
    --grid-cs:13 ;
  }
  r-cell[span-s^="14"] {
    --grid-cs:14 ;
  }
  r-cell[span-s^="15"] {
    --grid-cs:15 ;
  }
  r-cell[span-s^="16"] {
    --grid-cs:16 ;
  }
  r-cell[span-s$="+1"],
  r-cell[span-s="1"] {
    --grid-ce:1 ;
  }
  r-cell[span-s$="+2"],
  r-cell[span-s$="-1"],
  r-cell[span-s="2"] {
    --grid-ce:2 ;
  }
  r-cell[span-s$="+3"],
  r-cell[span-s$="-2"],
  r-cell[span-s="3"] {
    --grid-ce:3 ;
  }
  r-cell[span-s$="+4"],
  r-cell[span-s$="-3"],
  r-cell[span-s="4"] {
    --grid-ce:4 ;
  }
  r-cell[span-s$="+5"],
  r-cell[span-s$="-4"],
  r-cell[span-s="5"] {
    --grid-ce:5 ;
  }
  r-cell[span-s$="+6"],
  r-cell[span-s$="-5"],
  r-cell[span-s="6"] {
    --grid-ce:6 ;
  }
  r-cell[span-s$="+7"],
  r-cell[span-s$="-6"],
  r-cell[span-s="7"] {
    --grid-ce:7 ;
  }
  r-cell[span-s$="+8"],
  r-cell[span-s$="-7"],
  r-cell[span-s="8"] {
    --grid-ce:8 ;
  }
  r-cell[span-s$="+9"],
  r-cell[span-s$="-8"],
  r-cell[span-s="9"] {
    --grid-ce:9 ;
  }
  r-cell[span-s$="+10"],
  r-cell[span-s$="-9"],
  r-cell[span-s="10"] {
    --grid-ce:10 ;
  }
  r-cell[span-s$="+11"],
  r-cell[span-s$="-10"],
  r-cell[span-s="11"] {
    --grid-ce:11 ;
  }
  r-cell[span-s$="+12"],
  r-cell[span-s$="-11"],
  r-cell[span-s="12"] {
    --grid-ce:12 ;
  }
  r-cell[span-s$="+13"],
  r-cell[span-s$="-12"],
  r-cell[span-s="13"] {
    --grid-ce:13 ;
  }
  r-cell[span-s$="+14"],
  r-cell[span-s$="-13"],
  r-cell[span-s="14"] {
    --grid-ce:14 ;
  }
  r-cell[span-s$="+15"],
  r-cell[span-s$="-14"],
  r-cell[span-s="15"] {
    --grid-ce:15 ;
  }
  r-cell[span-s$="+16"],
  r-cell[span-s$="-15"],
  r-cell[span-s="16"] {
    --grid-ce:16 ;
  }
  r-cell[span-s$="-16"] {
    --grid-ce:17 ;
  }
  r-cell[span-s] {
    grid-column-end: span var(--grid-ce);
  }
  r-cell[span-s*="+"],
  r-cell[span-s*="-"],
  r-cell[span-s*=".."] {
    grid-column-start: var(--grid-cs);
  }
  r-cell[span-s*="-"],
  r-cell[span-s*=".."] {
    grid-column-end: var(--grid-ce);
  }
  r-cell[span-s=row] {
    grid-column: 1/-1;
  }
  r-cell[order-s="-16"] {
    order: -16;
  }
  r-cell[order-s="-15"] {
    order: -15;
  }
  r-cell[order-s="-14"] {
    order: -14;
  }
  r-cell[order-s="-13"] {
    order: -13;
  }
  r-cell[order-s="-12"] {
    order: -12;
  }
  r-cell[order-s="-11"] {
    order: -11;
  }
  r-cell[order-s="-10"] {
    order: -10;
  }
  r-cell[order-s="-9"] {
    order: -9;
  }
  r-cell[order-s="-8"] {
    order: -8;
  }
  r-cell[order-s="-7"] {
    order: -7;
  }
  r-cell[order-s="-6"] {
    order: -6;
  }
  r-cell[order-s="-5"] {
    order: -5;
  }
  r-cell[order-s="-4"] {
    order: -4;
  }
  r-cell[order-s="-3"] {
    order: -3;
  }
  r-cell[order-s="-2"] {
    order: -2;
  }
  r-cell[order-s="-1"] {
    order: -1;
  }
  r-cell[order-s="0"] {
    order: 0;
  }
  r-cell[order-s="1"] {
    order: 1;
  }
  r-cell[order-s="2"] {
    order: 2;
  }
  r-cell[order-s="3"] {
    order: 3;
  }
  r-cell[order-s="4"] {
    order: 4;
  }
  r-cell[order-s="5"] {
    order: 5;
  }
  r-cell[order-s="6"] {
    order: 6;
  }
  r-cell[order-s="7"] {
    order: 7;
  }
  r-cell[order-s="8"] {
    order: 8;
  }
  r-cell[order-s="9"] {
    order: 9;
  }
  r-cell[order-s="10"] {
    order: 10;
  }
  r-cell[order-s="11"] {
    order: 11;
  }
  r-cell[order-s="12"] {
    order: 12;
  }
  r-cell[order-s="13"] {
    order: 13;
  }
  r-cell[order-s="14"] {
    order: 14;
  }
  r-cell[order-s="15"] {
    order: 15;
  }
  r-cell[order-s="16"] {
    order: 16;
  }
}
@media (max-width: 640px) {
  r-grid[columns-xs="1"] {
    --grid-tc:repeat(1,1fr) ;
  }
  r-grid[columns-xs="2"] {
    --grid-tc:repeat(2,1fr) ;
  }
  r-grid[columns-xs="3"] {
    --grid-tc:repeat(3,1fr) ;
  }
  r-grid[columns-xs="4"] {
    --grid-tc:repeat(4,1fr) ;
  }
  r-grid[columns-xs="5"] {
    --grid-tc:repeat(5,1fr) ;
  }
  r-grid[columns-xs="6"] {
    --grid-tc:repeat(6,1fr) ;
  }
  r-grid[columns-xs="7"] {
    --grid-tc:repeat(7,1fr) ;
  }
  r-grid[columns-xs="8"] {
    --grid-tc:repeat(8,1fr) ;
  }
  r-grid[columns-xs="9"] {
    --grid-tc:repeat(9,1fr) ;
  }
  r-grid[columns-xs="10"] {
    --grid-tc:repeat(10,1fr) ;
  }
  r-grid[columns-xs="11"] {
    --grid-tc:repeat(11,1fr) ;
  }
  r-grid[columns-xs="12"] {
    --grid-tc:repeat(12,1fr) ;
  }
  r-grid[columns-xs="13"] {
    --grid-tc:repeat(13,1fr) ;
  }
  r-grid[columns-xs="14"] {
    --grid-tc:repeat(14,1fr) ;
  }
  r-grid[columns-xs="15"] {
    --grid-tc:repeat(15,1fr) ;
  }
  r-grid[columns-xs="16"] {
    --grid-tc:repeat(16,1fr) ;
  }
  r-cell[span-xs^="1"] {
    --grid-cs:1 ;
  }
  r-cell[span-xs^="2"] {
    --grid-cs:2 ;
  }
  r-cell[span-xs^="3"] {
    --grid-cs:3 ;
  }
  r-cell[span-xs^="4"] {
    --grid-cs:4 ;
  }
  r-cell[span-xs^="5"] {
    --grid-cs:5 ;
  }
  r-cell[span-xs^="6"] {
    --grid-cs:6 ;
  }
  r-cell[span-xs^="7"] {
    --grid-cs:7 ;
  }
  r-cell[span-xs^="8"] {
    --grid-cs:8 ;
  }
  r-cell[span-xs^="9"] {
    --grid-cs:9 ;
  }
  r-cell[span-xs^="10"] {
    --grid-cs:10 ;
  }
  r-cell[span-xs^="11"] {
    --grid-cs:11 ;
  }
  r-cell[span-xs^="12"] {
    --grid-cs:12 ;
  }
  r-cell[span-xs^="13"] {
    --grid-cs:13 ;
  }
  r-cell[span-xs^="14"] {
    --grid-cs:14 ;
  }
  r-cell[span-xs^="15"] {
    --grid-cs:15 ;
  }
  r-cell[span-xs^="16"] {
    --grid-cs:16 ;
  }
  r-cell[span-xs$="+1"],
  r-cell[span-xs="1"] {
    --grid-ce:1 ;
  }
  r-cell[span-xs$="+2"],
  r-cell[span-xs$="-1"],
  r-cell[span-xs="2"] {
    --grid-ce:2 ;
  }
  r-cell[span-xs$="+3"],
  r-cell[span-xs$="-2"],
  r-cell[span-xs="3"] {
    --grid-ce:3 ;
  }
  r-cell[span-xs$="+4"],
  r-cell[span-xs$="-3"],
  r-cell[span-xs="4"] {
    --grid-ce:4 ;
  }
  r-cell[span-xs$="+5"],
  r-cell[span-xs$="-4"],
  r-cell[span-xs="5"] {
    --grid-ce:5 ;
  }
  r-cell[span-xs$="+6"],
  r-cell[span-xs$="-5"],
  r-cell[span-xs="6"] {
    --grid-ce:6 ;
  }
  r-cell[span-xs$="+7"],
  r-cell[span-xs$="-6"],
  r-cell[span-xs="7"] {
    --grid-ce:7 ;
  }
  r-cell[span-xs$="+8"],
  r-cell[span-xs$="-7"],
  r-cell[span-xs="8"] {
    --grid-ce:8 ;
  }
  r-cell[span-xs$="+9"],
  r-cell[span-xs$="-8"],
  r-cell[span-xs="9"] {
    --grid-ce:9 ;
  }
  r-cell[span-xs$="+10"],
  r-cell[span-xs$="-9"],
  r-cell[span-xs="10"] {
    --grid-ce:10 ;
  }
  r-cell[span-xs$="+11"],
  r-cell[span-xs$="-10"],
  r-cell[span-xs="11"] {
    --grid-ce:11 ;
  }
  r-cell[span-xs$="+12"],
  r-cell[span-xs$="-11"],
  r-cell[span-xs="12"] {
    --grid-ce:12 ;
  }
  r-cell[span-xs$="+13"],
  r-cell[span-xs$="-12"],
  r-cell[span-xs="13"] {
    --grid-ce:13 ;
  }
  r-cell[span-xs$="+14"],
  r-cell[span-xs$="-13"],
  r-cell[span-xs="14"] {
    --grid-ce:14 ;
  }
  r-cell[span-xs$="+15"],
  r-cell[span-xs$="-14"],
  r-cell[span-xs="15"] {
    --grid-ce:15 ;
  }
  r-cell[span-xs$="+16"],
  r-cell[span-xs$="-15"],
  r-cell[span-xs="16"] {
    --grid-ce:16 ;
  }
  r-cell[span-xs$="-16"] {
    --grid-ce:17 ;
  }
  r-cell[span-xs] {
    grid-column-end: span var(--grid-ce);
  }
  r-cell[span-xs*="+"],
  r-cell[span-xs*="-"],
  r-cell[span-xs*=".."] {
    grid-column-start: var(--grid-cs);
  }
  r-cell[span-xs*="-"],
  r-cell[span-xs*=".."] {
    grid-column-end: var(--grid-ce);
  }
  r-cell[span-xs=row] {
    grid-column: 1/-1;
  }
  r-cell[order-xs="-16"] {
    order: -16;
  }
  r-cell[order-xs="-15"] {
    order: -15;
  }
  r-cell[order-xs="-14"] {
    order: -14;
  }
  r-cell[order-xs="-13"] {
    order: -13;
  }
  r-cell[order-xs="-12"] {
    order: -12;
  }
  r-cell[order-xs="-11"] {
    order: -11;
  }
  r-cell[order-xs="-10"] {
    order: -10;
  }
  r-cell[order-xs="-9"] {
    order: -9;
  }
  r-cell[order-xs="-8"] {
    order: -8;
  }
  r-cell[order-xs="-7"] {
    order: -7;
  }
  r-cell[order-xs="-6"] {
    order: -6;
  }
  r-cell[order-xs="-5"] {
    order: -5;
  }
  r-cell[order-xs="-4"] {
    order: -4;
  }
  r-cell[order-xs="-3"] {
    order: -3;
  }
  r-cell[order-xs="-2"] {
    order: -2;
  }
  r-cell[order-xs="-1"] {
    order: -1;
  }
  r-cell[order-xs="0"] {
    order: 0;
  }
  r-cell[order-xs="1"] {
    order: 1;
  }
  r-cell[order-xs="2"] {
    order: 2;
  }
  r-cell[order-xs="3"] {
    order: 3;
  }
  r-cell[order-xs="4"] {
    order: 4;
  }
  r-cell[order-xs="5"] {
    order: 5;
  }
  r-cell[order-xs="6"] {
    order: 6;
  }
  r-cell[order-xs="7"] {
    order: 7;
  }
  r-cell[order-xs="8"] {
    order: 8;
  }
  r-cell[order-xs="9"] {
    order: 9;
  }
  r-cell[order-xs="10"] {
    order: 10;
  }
  r-cell[order-xs="11"] {
    order: 11;
  }
  r-cell[order-xs="12"] {
    order: 12;
  }
  r-cell[order-xs="13"] {
    order: 13;
  }
  r-cell[order-xs="14"] {
    order: 14;
  }
  r-cell[order-xs="15"] {
    order: 15;
  }
  r-cell[order-xs="16"] {
    order: 16;
  }
}
r-grid.debug > * {
  --color:rgba(248,110,91,0.3);
  background-image: linear-gradient(180deg, var(--color) 0, var(--color));
}

r-grid.debug > :nth-child(6n+2) {
  --color:rgba(103,126,208,0.3) ;
}

r-grid.debug > :nth-child(6n+3) {
  --color:rgba(224,174,72,0.3) ;
}

r-grid.debug > :nth-child(6n+4) {
  --color:rgba(77,214,115,0.3) ;
}

r-grid.debug > :nth-child(6n+5) {
  --color:rgba(217,103,219,0.3) ;
}

r-grid.debug > :nth-child(6n+6) {
  --color:rgba(94,204,211,0.3) ;
}

r-grid.debug > :nth-child(6n+7) {
  --color:rgba(248,110,91,0.3) ;
}

/* document */
:root {
  font-family: var(--sansFont);
  font-size: var(--fontSize);
  line-height: var(--line-height);
  color: var(--foreground-color);
  letter-spacing: -0.01em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-variant-ligatures: contextual common-ligatures;
  background-color: var(--letterbox-color);
}

@media (max-width: 640px) {
  :root {
    background-color: initial;
  }
}
body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--background-color);
  box-shadow: 0 0 0 var(--body-bleed) var(--background-color);
  margin: 0 auto;
  padding: var(--body-padding-y) var(--body-padding-x);
  max-width: var(--body-max-width);
  min-height: 100vh;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  body {
    --body-padding-y:calc(var(--unit)*4) ;
  }
}
@media (max-width: 640px) {
  body {
    --body-padding-x:calc(var(--unit)*3);
    --body-padding-y:calc(var(--unit)*2) ;
  }
}
/* column flow */
[flow-cols-l],
[flow-cols-s],
[flow-cols] {
  display: block;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: var(--column-gap);
  column-gap: var(--column-gap);
  -moz-column-fill: balance;
  column-fill: balance;
  orphans: 3;
  widows: 3;
}

[flow-cols-l] > h1,
[flow-cols-l] > h2,
[flow-cols-l] > hr,
[flow-cols-s] > h1,
[flow-cols-s] > h2,
[flow-cols-s] > hr,
[flow-cols] > h1,
[flow-cols] > h2,
[flow-cols] > hr {
  -moz-column-span: all;
  column-span: all;
}

[flow-cols="1"] {
  -moz-column-count: 1;
  column-count: 1;
}

[flow-cols="2"] {
  -moz-column-count: 2;
  column-count: 2;
}

[flow-cols="3"] {
  -moz-column-count: 3;
  column-count: 3;
}

[flow-cols="4"] {
  -moz-column-count: 4;
  column-count: 4;
}

[flow-cols="5"] {
  -moz-column-count: 5;
  column-count: 5;
}

[flow-cols="6"] {
  -moz-column-count: 6;
  column-count: 6;
}

[flow-cols="7"] {
  -moz-column-count: 7;
  column-count: 7;
}

[flow-cols="8"] {
  -moz-column-count: 8;
  column-count: 8;
}

@media (max-width: 1024px) {
  [flow-cols-s="1"] {
    -moz-column-count: 1;
    column-count: 1;
  }
  [flow-cols-s="2"] {
    -moz-column-count: 2;
    column-count: 2;
  }
  [flow-cols-s="3"] {
    -moz-column-count: 3;
    column-count: 3;
  }
  [flow-cols-s="4"] {
    -moz-column-count: 4;
    column-count: 4;
  }
  [flow-cols-s="5"] {
    -moz-column-count: 5;
    column-count: 5;
  }
  [flow-cols-s="6"] {
    -moz-column-count: 6;
    column-count: 6;
  }
  [flow-cols-s="7"] {
    -moz-column-count: 7;
    column-count: 7;
  }
  [flow-cols-s="8"] {
    -moz-column-count: 8;
    column-count: 8;
  }
}
@media (max-width: 640px) {
  [flow-cols-xs="1"] {
    -moz-column-count: 1;
    column-count: 1;
  }
  [flow-cols-xs="2"] {
    -moz-column-count: 2;
    column-count: 2;
  }
  [flow-cols-xs="3"] {
    -moz-column-count: 3;
    column-count: 3;
  }
  [flow-cols-xs="4"] {
    -moz-column-count: 4;
    column-count: 4;
  }
  [flow-cols-xs="5"] {
    -moz-column-count: 5;
    column-count: 5;
  }
  [flow-cols-xs="6"] {
    -moz-column-count: 6;
    column-count: 6;
  }
  [flow-cols-xs="7"] {
    -moz-column-count: 7;
    column-count: 7;
  }
  [flow-cols-xs="8"] {
    -moz-column-count: 8;
    column-count: 8;
  }
}
/* block */
address, article, aside, blockquote, dd, dl, dt, fieldset, figure, form,
r-grid, h1, h2, h3, h4, h5, h6, li, nav, ol, p, pre, table, tfoot, ul, video {
  margin-top: var(--blockSpacingTop);
  margin-bottom: var(--blockSpacingBottom);
}

/* first element has no top margin */
:first-child {
  margin-top: unset;
}

:last-child {
  margin-bottom: unset;
}

/* hr */
hr:first-child {
  margin-top: calc(var(--hrThickness) / -2);
  margin-bottom: calc(var(--lineHeight) - var(--hrThickness) / 2);
}

hr:last-child {
  margin-top: calc(var(--lineHeight) - var(--hrThickness) / 2);
  margin-bottom: calc(var(--hrThickness) / -2);
}

hr, hr:only-child {
  border: none;
  background: var(--foreground-color);
  height: var(--hrThickness);
  margin-top: calc(var(--lineHeight) - var(--hrThickness) / 2);
  margin-bottom: calc(var(--lineHeight) - var(--hrThickness) / 2);
}

* + hr:last-child {
  /* hr following block has hrThickness removed from its top spacing */
  margin-top: calc(var(--hrThickness) / -2);
}

hr:not(:first-child) {
  /* note: collapses with preceeding block bottom margin */
  margin-top: var(--lineHeight);
  margin-bottom: calc(var(--lineHeight) - var(--hrThickness));
}

r-grid > hr {
  grid-column: 1/-1;
}

r-grid > hr,
r-grid > hr:not(:first-child):not(:last-child) {
  /*margin: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)) 0; CENTER*/
  margin-top: calc(var(--lineHeight) - var(--hrThickness)); /* BOTTOM-bias */
  margin-bottom: 0;
}

/* collapse consecutive HRs into one */
/*r-grid > hr + hr,
r-grid > hr:not(:first-child):not(:last-child) + hr {
  display:none;
}*/
/* text style modifiers */
b, strong, .bold {
  font-weight: 600;
}

i, em, .italic {
  font-style: italic;
}

/* preformatted text */
pre, code, tt, .code, .monospace {
  font-family: var(--monoFont), Inconsolata, Menlo, monospace;
  font-weight: 430;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/*pre { white-space: pre-wrap; }*/
/*code { white-space: nowrap; }*/
b pre, b code, b tt, b .code, b .monospace {
  font-weight: 600;
}

pre b, code b, tt b, .code b, .monospace b {
  font-weight: 600;
  font-weight: 580;
}

pre {
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
  display: block;
}
pre code, pre tt {
  white-space: pre;
  word-wrap: normal;
}

/* headings */
h {
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

h, h1, .h1 {
  font-weight: 720;
  letter-spacing: -0.01em;
  font-size: var(--h1-size);
  line-height: calc(var(--lineHeight) * 2);
  margin-left: calc(var(--h1-size) / -22);
  margin-top: calc(var(--lineHeight) * 2);
  margin-bottom: var(--lineHeight);
  word-break: break-word;
}

h1.single-line {
  margin-top: var(--lineHeight);
  padding-top: calc(var(--lineHeight) * 0.5);
  padding-bottom: calc(var(--lineHeight) * 0.5);
}

h1.single-line:first-child {
  margin-top: 0;
  padding-bottom: calc(var(--lineHeight) * 0.5);
}

h2, .h2 {
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: var(--h2-size);
  line-height: calc(var(--lineHeight) * 2);
  margin-left: calc(var(--h2-size) / -26);
  margin-bottom: var(--lineHeight);
}

* + h2, h2.single-line {
  margin-top: var(--lineHeight);
  padding-top: calc(var(--lineHeight) * 0.5);
  padding-bottom: calc(var(--lineHeight) * 0.5);
  margin-bottom: 0;
}

h2.single-line:first-child {
  margin-top: unset;
}

h3, .h3, h4, .h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--h3-size);
  padding-top: calc(var(--baseline) * 0.75);
  padding-bottom: calc(var(--baseline) * 0.25);
  margin-bottom: var(--baseline);
}

h4, .h4 {
  font-weight: 700;
  letter-spacing: -0.012em;
  font-size: var(--h4-size);
}

h3.single-line, h4.single-line {
  padding-bottom: calc(var(--baseline) * 1.25);
  margin-bottom: 0;
}

h3 + h1,
h4 + h1,
h3 + h1.single-line,
h4 + h1.single-line {
  margin-top: calc(var(--baseline) * 3);
}

h3.single-line + h1.single-line,
h4.single-line + h1.single-line,
h3.single-line + h1,
h4.single-line + h1,
h3.single-line + h2.single-line,
h4.single-line + h2.single-line,
h3.single-line + h2,
h4.single-line + h2 {
  margin-top: var(--lineHeight);
}

h3 + h2,
h4 + h2,
h3 + h2.single-line,
h4 + h2.single-line {
  margin-top: var(--baseline);
}

h5, h6, .h5, .h6 {
  font-weight: 670;
  letter-spacing: -0.015em;
  margin-bottom: 0;
}

r-grid > r-cell.h1, r-grid > r-cell.h2, r-grid > r-cell.h3,
r-grid > r-cell.h4, r-grid > r-cell.h5, r-grid > r-cell.h6 {
  margin-bottom: 0;
}

/* large headers */
h1.large, .h1.large {
  --h1-size: 4rem;
  line-height: calc(var(--lineHeight) * 3);
  font-weight: 730;
}

h1.xlarge, .h1.xlarge {
  --h1-size: 5.5rem;
  line-height: calc(var(--lineHeight) * 4);
  font-weight: 740;
}

h1.xxlarge, .h1.xxlarge {
  --h1-size: 7.5rem;
  line-height: calc(var(--lineHeight) * 5);
  font-weight: 750;
}

h1.xxxlarge, .h1.xxxlarge {
  --h1-size: 10.5rem;
  line-height: calc(var(--lineHeight) * 7);
  font-weight: 760;
}

.lead {
  padding-top: calc(var(--baseline) * 0.75);
  letter-spacing: -0.02em;
  font-size: var(--h3-size);
  line-height: calc(var(--lineHeight) * 1.3);
}

/* small text */
.small {
  font-size: 0.85rem;
  line-height: var(--lineHeight);
}

.xsmall {
  font-size: 0.8em;
  line-height: calc(var(--lineHeight) * 0.75);
  padding-top: calc(var(--lineHeight) * 0.25);
}

.xxsmall {
  font-size: 0.65em;
  line-height: calc(var(--lineHeight) * 0.7);
  padding-top: calc(var(--lineHeight) * 0.3);
}

.xxxsmall {
  font-size: 0.5em;
  line-height: calc(var(--lineHeight) * 0.5);
  padding-bottom: calc(var(--lineHeight) * 0.25);
}

@media (max-width: 1024px) {
  .small-s {
    font-size: 1rem;
    line-height: var(--lineHeight);
  }
}
/* anchor */
a {
  text-decoration: underline;
  text-decoration: underline rgba(0, 0, 0, 0.3);
  /*   white-space: nowrap; */
}

a:hover {
  color: var(--blue);
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
.h1 > a, .h2 > a, .h3 > a, .h4 > a, .h5 > a, .h6 > a {
  text-decoration: none;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover,
h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover,
.h4 > a:hover, .h5 > a:hover, .h6 > a:hover {
  text-decoration: underline;
  text-decoration: underline rgba(0, 0, 0, 0.3);
  color: inherit;
}

/* image */
img, img:first-child, img:last-child {
  display: block;
  margin-top: var(--baseline);
  margin-bottom: var(--baseline);
}

img:only-child, picture:only-child {
  margin: 0;
}

* + img {
  margin-top: calc(var(--baseline) * -1);
}

img.fill, img.cover {
  object-fit: cover;
}

r-grid > r-cell > img,
r-grid > r-cell > p > img {
  object-fit: contain;
  max-width: 100%;
}

/* list */
li {
  margin-left: 0.2em;
  margin-bottom: var(--baseline);
}

li > p + ul,
li > p + ol {
  /* <ul>|<ol> inside <li> that directly follows a <p> */
  /* shave off 1 baseline from space in between paragraph and list */
  margin-top: calc(var(--baseline) * -1);
}

li.task-list-item {
  list-style-type: none;
}
li.task-list-item > input[type=checkbox] {
  list-style: none;
  margin-right: 0.5em;
  margin-left: -1.4em;
  background: none;
  appearance: none;
  width: 1.5em;
  height: var(--baseline);
  display: inline-block;
  position: relative;
  border: none;
  opacity: 1;
  --outlineSvgUrl: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1.75" y="1.75" width="14.5" height="14.5" rx="0.5" stroke="black" stroke-width="1.5"/></svg>');
  --checkSvgUrl: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.7 9.3L8.1 12.6L13.8 6.9L12.3 5.3L8.1 9.5L6.3 7.7L4.7 9.3Z" fill="black"/></svg>');
}
li.task-list-item > input[type=checkbox]:before, li.task-list-item > input[type=checkbox]:after {
  display: block;
  position: absolute;
  content: "X";
  color: transparent;
  left: 0;
  top: -0.25em;
  bottom: -0.25em;
  width: 1.1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  --webkit-touch-callout: none;
}
li.task-list-item > input[type=checkbox]:after {
  /* box aligned with checkmark */
  background-image: var(--outlineSvgUrl);
}
li.task-list-item > input[type=checkbox]:checked:before {
  /* checkmark aligned with box */
  background-image: var(--checkSvgUrl);
}

@supports (mask-image: linear-gradient(rgb(0, 0, 0), red)) {
  /* use mask so that check boxes matches --foreground-color */
  li.task-list-item > input[type=checkbox]:before, li.task-list-item > input[type=checkbox]:after {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
  }
  li.task-list-item > input[type=checkbox]:after {
    /* box aligned with checkmark */
    background: var(--foreground-color);
    mask-image: var(--outlineSvgUrl);
  }
  li.task-list-item > input[type=checkbox][checked]:before {
    /* checkmark aligned with box */
    background: var(--foreground-color);
    mask-image: var(--checkSvgUrl);
  }
}
.compact > li > p + ul,
.compact > li > p + ol {
  /* like above but for lists inside compact lists */
  margin-top: calc(var(--blockSpacingBottom) * -1);
}

ul, ol {
  list-style-position: outside;
  --list-indentation: 2em;
}

ul.compact > li, ol.compact > li {
  margin-bottom: 0;
}

ul {
  padding-left: 1.3em;
}

ul.service-list {
  list-style-type: none;
  padding-left: 0;
}

ul.service-list li {
  position: relative;
  padding-left: 1.3em;
  text-indent: 0px;
  margin-left: 0;
  margin-bottom: 0;
}

ul.service-list li::before {
  content: "•";
  position: absolute;
  left: 0px;
  line-height: var(--lineHeight);
  font-size: 2.1em;
}

/* custom start number -- undo reset */
ol[start] {
  padding-inline-start: var(--list-indentation);
  /*list-style-position: inside;*/
  /*& li {
    color: red;
  }*/
}

ol:not([start]) {
  list-style: none;
  counter-reset: ol-counter;
  padding-left: var(--list-indentation);
}

ol:not([start]) > li {
  counter-increment: ol-counter;
  position: relative;
}

ol:not([start]) > li::before {
  content: counter(ol-counter) ". ";
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  position: absolute;
  --space: 0.5em;
  --width: calc(var(--list-indentation) - var(--space));
  left: calc(-1 * (var(--width) + var(--space)));
  width: var(--width);
  height: var(--lineHeight);
  text-align: left;
}

/* table */
table {
  --border-width: 1px;
  --border-opacity: 0.15;
  --border-color:
    rgba(var(--foreground-color-rgb), calc(var(--foreground-color-a) * var(--border-opacity)));
  /*width: 100%;*/
  overflow: auto;
  border-spacing: 0;
  border-collapse: collapse;
  /*box-sizing: border-box;*/
  border-top: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  position: relative;
  margin-top: calc(var(--lineHeight) * 1 + var(--border-width) * -1);
  margin-bottom: calc(var(--lineHeight) * 1.5);
}
table:first-child {
  margin-top: calc(var(--lineHeight) * 0.5 + var(--border-width) * -1);
  margin-bottom: calc(var(--lineHeight) * 0.5);
}
table * {
  box-sizing: border-box;
}
table th, table td {
  position: relative;
  padding: var(--baseline) 1em;
  /*box-shadow: inset 1px 0 0 0 var(--border-color);*/
  /*border-left: var(--border-width) solid var(--border-color);*/
  /*border-right: var(--border-width) solid var(--border-color);*/
  /*&:last-child {
    box-shadow:
      inset 1px 0 0 0 var(--border-color),
      inset -1px 0 0 0 var(--border-color);
  }*/
  background-image: linear-gradient(90deg, var(--border-color), var(--border-color) 1px, transparent 1px, transparent calc(var(--baseline) / 2));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 -1px;
}
table th:after, table td:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: var(--border-width);
  background: var(--border-color);
  content: "A";
  color: transparent;
  pointer-events: none;
}
table th {
  text-align: left;
  font-weight: 600;
}
table th[align=center] {
  text-align: center;
}
table th[align=right] {
  text-align: right;
}

p + table {
  margin-top: calc(var(--lineHeight) * 1.5 + var(--border-width) * -1);
  /*margin-bottom: calc(var(--lineHeight) * 1.5);*/
}

/* conditional window size */
@media only screen and (max-width: 600px) {
  .only-large-window {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  .only-small-window {
    display: none;
  }
}
.span-hidden {
  display: none;
}

.span-s-hidden {
  display: none;
}

.span-xs-hidden {
  display: none;
}

/* xsmall */
@media (max-width: 640px) {
  .span-s-hidden {
    display: none;
  }
  .span-xs-hidden {
    display: inline;
  }
  .span-hidden {
    display: none;
  }
}
/* small */
@media (min-width: 641px) {
  .span-xs-hidden {
    display: none;
  }
  .span-hidden {
    display: none;
  }
  .span-s-hidden {
    display: inline;
  }
}
/* large */
@media (min-width: 1025px) {
  .span-xs-hidden {
    display: none;
  }
  .span-hidden {
    display: inline;
  }
  .span-s-hidden {
    display: none;
  }
}
/* visualize base grid */
:root {
  --base-grid-color1: rgba(20, 230, 245, 0.3);
  --base-grid-color2: rgba(120, 120, 120, 0.05);
}

.show-base-grid {
  background-image: repeating-linear-gradient(0deg, var(--base-grid-color2), var(--base-grid-color2) 1px, transparent 1px, transparent calc(var(--baseline) / 2), var(--base-grid-color1) calc(var(--baseline) / 2), var(--base-grid-color1) calc(var(--baseline) / 2 + 1px), transparent calc(var(--baseline) / 2 + 1px), transparent var(--baseline));
  background-repeat: repeat-y;
  background-size: 100% var(--baseline);
  background-position: 0 0.5px;
}

/* text */
.single-line {
  white-space: nowrap;
  overflow: hidden; /* note: safari shows scrollbars unless y=hidden */
  text-overflow: ellipsis;
}

/* layout mode */
.block {
  display: block;
}

.inline {
  display: inline-block;
}

.flex-h {
  display: flex;
  flex-direction: row;
}

.flex-v {
  display: flex;
  flex-direction: column;
}

/* Flex Helpers */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--grey-light);
}

/* relative positioning */
.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.flex-v.center {
  align-self: center;
}

.flex-h .bottom {
  align-self: flex-end;
}

img.top {
  object-position: center top;
  align-self: center;
}

img.center {
  object-position: center center;
  align-self: center;
}

img.bottom {
  object-position: center bottom;
  align-self: center;
}

img.left.top {
  object-position: left top;
  align-self: flex-start;
}

img.left.center {
  object-position: left center;
  align-self: flex-start;
}

img.left.bottom {
  object-position: left bottom;
  align-self: flex-start;
}

img.right.top {
  object-position: right top;
  align-self: flex-end;
}

img.right.center {
  object-position: right center;
  align-self: flex-end;
}

img.right.bottom {
  object-position: right bottom;
  align-self: flex-end;
}

/* Borders */
.border-t {
  border-top: 1px solid var(--rule-color);
}

.border-b {
  border-bottom: 1px solid var(--rule-color);
}

/* spacing */
.padding0 {
  padding: 0;
}

.padding1 {
  padding: calc(var(--lineHeight) * 1);
}

.padding1-t {
  padding-top: calc(var(--lineHeight) * 1);
}

.padding1-b {
  padding-bottom: calc(var(--lineHeight) * 1);
}

.padding1-x {
  padding-left: calc(var(--lineHeight) * 1);
  padding-right: calc(var(--lineHeight) * 1);
}

.padding2 {
  padding: calc(var(--lineHeight) * 2);
}

.padding2-t {
  padding-top: calc(var(--lineHeight) * 2);
}

.padding2-b {
  padding-bottom: calc(var(--lineHeight) * 2);
}

.padding2-x {
  padding-left: calc(var(--lineHeight) * 2);
  padding-right: calc(var(--lineHeight) * 2);
}

.padding3 {
  padding: calc(var(--lineHeight) * 3);
}

.padding3-t {
  padding-top: calc(var(--lineHeight) * 3);
}

.padding3-b {
  padding-bottom: calc(var(--lineHeight) * 3);
}

.padding4 {
  padding: calc(var(--lineHeight) * 4);
}

.padding5 {
  padding: calc(var(--lineHeight) * 5);
}

.padding5 {
  padding: calc(var(--lineHeight) * 6);
}

.padding5 {
  padding: calc(var(--lineHeight) * 7);
}

.padding5 {
  padding: calc(var(--lineHeight) * 8);
}

.margin0 {
  margin: 0;
}

.margin1 {
  margin: calc(var(--lineHeight) * 1);
}

.margin1-t {
  margin-top: calc(var(--lineHeight) * 1);
}

.margin2 {
  margin: calc(var(--lineHeight) * 2);
}

.margin2-b {
  margin-bottom: calc(var(--lineHeight) * 2);
}

.margin3 {
  margin: calc(var(--lineHeight) * 3);
}

.margin3-b {
  margin-bottom: calc(var(--lineHeight) * 3);
}

.margin4 {
  margin: calc(var(--lineHeight) * 4);
}

.margin5 {
  margin: calc(var(--lineHeight) * 5);
}

.margin5 {
  margin: calc(var(--lineHeight) * 6);
}

.margin5 {
  margin: calc(var(--lineHeight) * 7);
}

.margin5 {
  margin: calc(var(--lineHeight) * 8);
}

/* size */
.w-1 {
  width: calc(var(--lineHeight) * 1);
}

.w-2 {
  width: calc(var(--lineHeight) * 2);
}

.w-3 {
  width: calc(var(--lineHeight) * 3);
}

.w-4 {
  width: calc(var(--lineHeight) * 4);
}

.w-5 {
  width: calc(var(--lineHeight) * 5);
}

.w-6 {
  width: calc(var(--lineHeight) * 6);
}

.w-7 {
  width: calc(var(--lineHeight) * 7);
}

.w-8 {
  width: calc(var(--lineHeight) * 8);
}

.w-9 {
  width: calc(var(--lineHeight) * 9);
}

.w-10 {
  width: calc(var(--lineHeight) * 10);
}

.w-11 {
  width: calc(var(--lineHeight) * 11);
}

.w-12 {
  width: calc(var(--lineHeight) * 12);
}

.w-13 {
  width: calc(var(--lineHeight) * 13);
}

.w-14 {
  width: calc(var(--lineHeight) * 14);
}

.w-15 {
  width: calc(var(--lineHeight) * 15);
}

.w-16 {
  width: calc(var(--lineHeight) * 16);
}

.w-17 {
  width: calc(var(--lineHeight) * 17);
}

.w-18 {
  width: calc(var(--lineHeight) * 18);
}

.w-19 {
  width: calc(var(--lineHeight) * 19);
}

.w-20 {
  width: calc(var(--lineHeight) * 20);
}

.w-21 {
  width: calc(var(--lineHeight) * 21);
}

.w-22 {
  width: calc(var(--lineHeight) * 22);
}

.w-23 {
  width: calc(var(--lineHeight) * 23);
}

.w-24 {
  width: calc(var(--lineHeight) * 24);
}

.w-25 {
  width: calc(var(--lineHeight) * 25);
}

.w-26 {
  width: calc(var(--lineHeight) * 26);
}

.w-27 {
  width: calc(var(--lineHeight) * 27);
}

.w-28 {
  width: calc(var(--lineHeight) * 28);
}

.w-29 {
  width: calc(var(--lineHeight) * 29);
}

.w-30 {
  width: calc(var(--lineHeight) * 30);
}

.w-31 {
  width: calc(var(--lineHeight) * 31);
}

.w-32 {
  width: calc(var(--lineHeight) * 32);
}

.w-33 {
  width: calc(var(--lineHeight) * 33);
}

.w-34 {
  width: calc(var(--lineHeight) * 34);
}

.w-35 {
  width: calc(var(--lineHeight) * 35);
}

.w-36 {
  width: calc(var(--lineHeight) * 36);
}

.w-37 {
  width: calc(var(--lineHeight) * 37);
}

.w-38 {
  width: calc(var(--lineHeight) * 38);
}

.w-39 {
  width: calc(var(--lineHeight) * 39);
}

.w-40 {
  width: calc(var(--lineHeight) * 40);
}

.w-full {
  width: 100%;
}

.h-1 {
  height: calc(var(--lineHeight) * 1);
}

.h-2 {
  height: calc(var(--lineHeight) * 2);
}

.h-3 {
  height: calc(var(--lineHeight) * 3);
}

.h-4 {
  height: calc(var(--lineHeight) * 4);
}

.h-5 {
  height: calc(var(--lineHeight) * 5);
}

.h-6 {
  height: calc(var(--lineHeight) * 6);
}

.h-7 {
  height: calc(var(--lineHeight) * 7);
}

.h-8 {
  height: calc(var(--lineHeight) * 8);
}

.h-9 {
  height: calc(var(--lineHeight) * 9);
}

.h-10 {
  height: calc(var(--lineHeight) * 10);
}

.h-11 {
  height: calc(var(--lineHeight) * 11);
}

.h-12 {
  height: calc(var(--lineHeight) * 12);
}

.h-13 {
  height: calc(var(--lineHeight) * 13);
}

.h-14 {
  height: calc(var(--lineHeight) * 14);
}

.h-15 {
  height: calc(var(--lineHeight) * 15);
}

.h-16 {
  height: calc(var(--lineHeight) * 16);
}

.h-17 {
  height: calc(var(--lineHeight) * 17);
}

.h-18 {
  height: calc(var(--lineHeight) * 18);
}

.h-19 {
  height: calc(var(--lineHeight) * 19);
}

.h-20 {
  height: calc(var(--lineHeight) * 20);
}

.h-21 {
  height: calc(var(--lineHeight) * 21);
}

.h-22 {
  height: calc(var(--lineHeight) * 22);
}

.h-23 {
  height: calc(var(--lineHeight) * 23);
}

.h-24 {
  height: calc(var(--lineHeight) * 24);
}

.h-25 {
  height: calc(var(--lineHeight) * 25);
}

.h-26 {
  height: calc(var(--lineHeight) * 26);
}

.h-27 {
  height: calc(var(--lineHeight) * 27);
}

.h-28 {
  height: calc(var(--lineHeight) * 28);
}

.h-29 {
  height: calc(var(--lineHeight) * 29);
}

.h-30 {
  height: calc(var(--lineHeight) * 30);
}

.h-31 {
  height: calc(var(--lineHeight) * 31);
}

.h-32 {
  height: calc(var(--lineHeight) * 32);
}

.h-33 {
  height: calc(var(--lineHeight) * 33);
}

.h-34 {
  height: calc(var(--lineHeight) * 34);
}

.h-35 {
  height: calc(var(--lineHeight) * 35);
}

.h-36 {
  height: calc(var(--lineHeight) * 36);
}

.h-37 {
  height: calc(var(--lineHeight) * 37);
}

.h-38 {
  height: calc(var(--lineHeight) * 38);
}

.h-39 {
  height: calc(var(--lineHeight) * 39);
}

.h-40 {
  height: calc(var(--lineHeight) * 40);
}

/* opacity */
.opacity0 {
  opacity: 0;
}

.opacity1 {
  opacity: 0.1;
}

.opacity2 {
  opacity: 0.2;
}

.opacity3 {
  opacity: 0.3;
}

.opacity4 {
  opacity: 0.4;
}

.opacity5 {
  opacity: 0.5;
}

.opacity6 {
  opacity: 0.6;
}

.opacity7 {
  opacity: 0.7;
}

.opacity8 {
  opacity: 0.8;
}

.opacity9 {
  opacity: 0.9;
}

.opacity10 {
  opacity: 1;
}

/* colors */
:root {
  --red: rgb(238, 39, 17);
  --blue: rgb(24, 113, 233);
  --green: rgb(18, 192, 91);
  --yellow: rgb(249, 191, 15);
}

.red {
  color: var(--red);
}

.bg-red {
  background-color: var(--red);
}

.blue {
  color: var(--blue);
}

.bg-blue {
  background-color: var(--blue);
}

.green {
  color: var(--green);
}

.bg-green {
  background-color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.bg-yellow {
  background-color: var(--yellow);
}

:root {
  --debugGrey05:hsla(0,0%,47.1%,0.05);
  --debugGrey1:hsla(0,0%,47.1%,0.1);
  --debugGrey2:hsla(0,0%,47.1%,0.2);
  --debugRed2:rgba(238,39,17,0.2);
  --debugBlue2:rgba(24,113,233,0.2);
  --debugGreen2:rgba(18,192,91,0.2);
  --debugYellow2:rgba(249,191,15,0.2);
  --debugPink2:rgba(255,0,255,0.2);
  --debugCyan2:rgba(20,230,245,0.2);
  --debugCyan3:rgba(20,230,245,0.3);
  --debugGrey4:hsla(0,0%,47.1%,0.4);
  --debugRed4:rgba(238,39,17,0.4);
  --debugBlue4:rgba(24,113,233,0.4);
  --debugGreen4:rgba(18,192,91,0.4);
  --debugYellow4:rgba(249,191,15,0.4);
  --debugPink4:rgba(255,0,255,0.4);
  --debugCyan4:rgba(20,230,245,0.4);
  --debugGrey8:hsla(0,0%,47.1%,0.8);
  --debugRed8:rgba(238,39,17,0.8);
  --debugBlue8:rgba(24,113,233,0.8);
  --debugGreen8:rgba(18,192,91,0.8);
  --debugYellow8:rgba(249,191,15,0.8);
  --debugPink8:rgba(255,0,255,0.8);
  --debugCyan8:rgba(20,230,245,0.8);
  --wireWeight:var(--pixel) ;
}

.debug-base-grid {
  background-size: var(--unit) var(--unit);
  background-repeat: repeat;
  background-position: calc(var(--unit) * -0.5) calc(var(--unit) * -0.5);
  background-image: radial-gradient(hsla(0, 0%, 49.8%, 0.15) calc(var(--pixel) * 2), transparent 0);
}

:root.debug address,
:root.debug article,
:root.debug aside,
:root.debug blockquote,
:root.debug canvas,
:root.debug dd,
:root.debug div,
:root.debug dl,
:root.debug dt,
:root.debug fieldset,
:root.debug figcaption,
:root.debug figure,
:root.debug footer,
:root.debug form,
:root.debug grid,
:root.debug h1,
:root.debug h2,
:root.debug h3,
:root.debug h4,
:root.debug h5,
:root.debug h6,
:root.debug header,
:root.debug hr,
:root.debug li,
:root.debug main,
:root.debug nav,
:root.debug noscript,
:root.debug ol,
:root.debug p,
:root.debug pre,
:root.debug section,
:root.debug table,
:root.debug tfoot,
:root.debug ul,
:root.debug video {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugPink4), 0 0 0 var(--wireWeight) var(--debugPink4), 0 var(--blockSpacingBottom) 0 0 var(--debugYellow2), 0 calc(var(--blockSpacingTop) * -1) 0 0 var(--debugYellow2);
}

:root.debug hr {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4), 0 0 0 var(--wireWeight) var(--debugGreen4);
}

:root.debug :first-child {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4), 0 0 0 var(--wireWeight) var(--debugGreen4), 0 var(--blockSpacingBottom) 0 0 var(--debugYellow2);
}

:root.debug :last-child {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4), 0 0 0 var(--wireWeight) var(--debugGreen4), 0 calc(var(--blockSpacingTop) * -1) 0 0 var(--debugYellow2);
}

:root.debug :first-child:last-child {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4), 0 0 0 var(--wireWeight) var(--debugGreen4);
}

:root.debug r-grid > * {
  box-shadow: inset 0 0 0 var(--wireWeight) var(--debugBlue8), 0 0 0 var(--wireWeight) var(--debugBlue8);
}

:root {
  --grey4:hsla(0,0%,47.1%,0.4);
}

.color-grey {
  color: var(--grey4);
}

:root.about {
  --background-color:var(--hot-orange);
  --foreground-color-rgb:255,255,255;
  --menu-inactive-color:rgba(0,0,0,0.5);
  --box-link-hover-color:#fff;
  --accent-color:var(--yellow);
  --letterbox-color:#222 ;
}

:root.about body {
  padding-bottom: 0;
}

:root.about r-grid.main {
  margin-bottom: 0;
}

:rootaboutk r-grid.main .menu {
  height: calc(var(--unit) * 35);
}

:root.about .intro {
  font-weight: 440;
  padding-bottom: calc(var(--unit) * 6);
}

:root.about .contrib-list {
  --foreground-color:var(--orange);
  --background-color:var(--light-yellow);
  --font-size:3.33333vw;
  --accent-color:var(--foreground-color);
  --box-link-hover-color:var(--accent-color);
  background-color: var(--background-color);
  --shadow-x:calc(var(--body-padding-x) + var(--body-bleed));
  box-shadow: var(--shadow-x) 0 0 0 var(--background-color), calc(var(--shadow-x) * -1) 0 0 0 var(--background-color);
  font-family: var(--titleFont);
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.5rem;
  font-size: var(--font-size);
  line-height: 1.2;
  color: var(--foreground-color);
}

@media (min-width: 1215px) {
  :root.about .contrib-list {
    --font-size:2.5rem ;
  }
}
@media (max-width: 640px) {
  :root.about .contrib-list {
    --font-size:5vw ;
  }
}
:root.about .contrib-list ::-moz-selection {
  background: #cc5800;
}

:root.about .contrib-list ::selection {
  background: #cc5800;
}

:root.about .contrib-list r-grid {
  /*   --row-gap:cal(var(--font-size)*2); */
  padding-bottom: calc(var(--font-size) * 4);
}

:root.about .contrib-list r-grid p {
  color: inherit;
}

:root.about .contrib-list r-grid p a:hover {
  color: #000;
  text-decoration: none;
}

@media (hover: none) {
  :root.about .contrib-list r-grid p a,
  :root.about .contrib-list r-grid p a:hover {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--red);
    text-decoration-color: var(--red);
  }
}
:root.about .contrib-list h2 {
  font-family: var(--titleFont);
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.5rem;
  font-size: inherit;
  color: #000;
  margin-top: calc(var(--unit) * 16);
  margin-bottom: calc(var(--unit) * 12);
}

:root.work-detail {
  --background-color:#000;
  --foreground-color-rgb:255,255,255;
  --rule-color:rgba(var(--foreground-color-rgb),0.15);
  --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
  --box-link-hover-color:#000;
  --letterbox-color:#111;
  --accent-color:var(--accent-color-darkmode);
  --menu-inactive-color:rgba(var(--foreground-color-rgb),0.6) ;
}

/* 
:root.about {
  --menu-inactive-color:#fff;
  --box-link-hover-color:#fff;
  --background-color:#a6e8aa;
  --accent-color:#004287
}
@supports (color:color(display-p3 1 1 1)) {
  :root.about {
    --background-color:color(display-p3 0.693 0.865 0.666);
    --accent-color:color(display-p3 0 0.346 0.47)
  }
}
:root.about .intro {
  font-family:var(--titleFont);
  font-weight:500;
  font-size:1.5rem;
  line-height:2rem;
  letter-spacing:.01em
}
@media (max-width:640px) {
  :root.about .bio {
    padding-bottom:calc(var(--unit)*4);
    border-bottom:.15rem solid var(--foreground-color)
  }
}
:root.about .bio>img {
  margin-top:calc(var(--unit)*0.5);
  border-radius:calc(var(--unit)*0.25)
}
:root.about .bio .link-list {
  font-family:var(--titleFont);
  font-weight:500;
  font-size:1.5rem;
  line-height:2rem;
  letter-spacing:.01em;
  margin-top:calc(var(--unit)*6)
}
:root.about .bio .link-list a {
  display:block;
  color:inherit
}
:root.about .tidbit {
  border-top:var(--hr-weight) solid #000;
  padding-top:calc(var(--unit)*5)
}
:root.about .tidbit p {
  font-weight:440
}
:root.about .tidbit p code,
:root.about .tidbit p pre,
:root.about .tidbit p tt {
  font-weight:400
}
 */
.logo {
  font-weight: 800;
}

.logo a {
  text-decoration: none;
}

r-grid.main .menu {
  height: calc(var(--unit) * 26);
}

@media (max-width: 640px) {
  r-grid.main .menu {
    padding-top: 0;
    height: calc(var(--unit) * 30);
  }
}
r-grid.main .menu > div {
  margin: 0;
  padding: 0;
  color: var(--menu-inactive-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /*   padding-top:calc(var(--unit)*0.75); */
  /*   margin-top:calc(var(--unit)*14) */
}

r-grid.main .menu > div.focus0 a:first-child {
  color: var(--menu-active-color);
}

r-grid.main .menu > div.focus1 {
  margin-top: calc(var(--unit) * 10);
}

r-grid.main .menu > div.focus1 a:nth-child(2) {
  color: var(--menu-active-color);
}

r-grid.main .menu > div.focus2 {
  margin-top: calc(var(--unit) * 6);
}

r-grid.main .menu > div.focus2 a:nth-child(3) {
  color: var(--menu-active-color);
}

r-grid.main .menu > div.focus3 {
  margin-top: calc(var(--unit) * 2);
}

r-grid.main .menu > div.focus3 a:nth-child(4) {
  color: var(--menu-active-color);
}

r-grid.main .menu > div.focus4 {
  margin-top: calc(var(--unit) * -2);
}

r-grid.main .menu > div.focus4 a:nth-child(5) {
  color: var(--menu-active-color);
}

r-grid.main .menu > div.focus5 {
  margin-top: calc(var(--unit) * -6);
}

r-grid.main .menu > div.focus5 a:nth-child(6) {
  color: var(--menu-active-color);
}

@media (max-width: 640px) {
  r-grid.main .menu > div.focus0,
  r-grid.main .menu > div.focus1,
  r-grid.main .menu > div.focus2,
  r-grid.main .menu > div.focus3,
  r-grid.main .menu > div.focus4,
  r-grid.main .menu > div.focus5 {
    margin-top: 0;
  }
}
r-grid.main .menu > div a {
  font-family: var(--titleFont);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.01em;
  color: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  flex: 0 0 auto;
}

/* r-grid.main .menu>div a:first-child {
  font-size:2em;
  padding-bottom:calc(var(--unit)*0.25);
  margin-top:calc(var(--unit)*-0.25)
} */
r-grid.main .menu > div a:hover {
  color: var(--menu-active-color);
}

@media (max-width: 640px) {
  r-grid.main {
    padding-top: calc(var(--unit) * 2);
  }
}
r-grid.main iframe {
  border: none;
}

r-grid.main img {
  max-width: 100%;
}

r-grid.main [align=right] {
  margin: 0 0 calc(var(--unit) * 2) calc(var(--unit) * 3);
}

r-grid.main [align=left] {
  margin: 0 calc(var(--unit) * 3) calc(var(--unit) * 2) 0;
}

@media (prefers-color-scheme: dark) {
  :root.allow-dark-mode,
  :root.home {
    --background-color:#333;
    --foreground-color-rgb:255,255,255;
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
    --box-link-hover-color:#000;
    --letterbox-color:#111;
    --accent-color:var(--accent-color-darkmode);
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.6) ;
  }
}
:root.allow-dark-mode .menu a:first-child,
:root.home .menu a:first-child {
  color: var(--hot-orange) !important;
}

@media (max-width: 640px) {
  :root.allow-dark-mode .intro,
  :root.home .intro {
    padding-bottom: calc(var(--unit) * 4);
    border-bottom: 0.15rem solid var(--foreground-color);
  }
}
:root.allow-dark-mode .intro > p,
:root.home .intro > p {
  font-family: var(--titleFont);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.01em;
}

:root.allow-dark-mode .intro .quick-links,
:root.home .intro .quick-links {
  margin-top: calc(var(--unit) * 6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

:root.allow-dark-mode .intro .quick-links a,
:root.home .intro .quick-links a {
  font-size: inherit;
  font-weight: 600;
  display: block;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
  background: rgba(var(--foreground-color-rgb), 0.07);
  margin-bottom: calc(var(--unit) * 2);
  color: inherit;
  border-radius: 2px;
  word-break: break-word;
}

:root.allow-dark-mode .intro .quick-links a:hover,
:root.home .intro .quick-links a:hover {
  text-decoration: none;
  background: var(--hot-orange);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root.archive {
    --background-color:#333;
    --foreground-color-rgb:255,255,255;
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
    --box-link-hover-color:#000;
    --letterbox-color:#111;
    --accent-color:var(--accent-color-darkmode) ;
  }
}
:root.archive r-grid.main {
  grid-row-gap: calc(var(--unit) * 3);
}

:root.archive r-grid.main hr.section {
  margin-top: calc(var(--unit) * 4);
}

:root.archive r-grid.main .post,
:root.archive r-grid.main .year {
  margin-bottom: calc(var(--unit) * 2);
}

:root.archive r-grid.main .post .excerpt {
  word-break: break-word;
}

@media (prefers-color-scheme: dark) {
  :root.post {
    --background-color:#333;
    --foreground-color-rgb:255,255,255;
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
    --box-link-hover-color:#000;
    --letterbox-color:#111;
    --accent-color:var(--accent-color-darkmode) ;
  }
}
:root.post r-grid.main {
  margin-top: calc(var(--unit) * 6);
}

:root.post r-grid.main time {
  font-weight: 500;
}

:root.post r-grid.main .home {
  font-weight: 500;
  opacity: 0.4;
  color: inherit;
}

:root.post r-grid.main .home:hover {
  opacity: 1;
  color: inherit;
  text-decoration: none;
}

:root.post r-grid.main h1 {
  margin-top: calc(var(--unit) * 5);
}

r-grid.main.simple {
  margin-top: calc(var(--unit) * 6);
}

r-grid.main.simple .home {
  font-weight: 500;
  opacity: 0.4;
  color: inherit;
}

r-grid.main.simple .home:hover {
  opacity: 1;
  color: inherit;
  text-decoration: none;
}

r-grid.main.simple h1 {
  margin-top: calc(var(--unit) * -1);
}

:root.projects {
  --background-color:var(--xlight-pink);
  --foreground-color-rgb:0,0,0;
  --menu-inactive-color:var(--sunset-pink);
  --box-link-hover-color:#fff ;
}

:root.projects p {
  opacity: 0.5;
}

:root.projects .project {
  border-radius: 2px;
}

:root.projects .project .image {
  display: block;
  margin-top: calc(var(--unit) * 1.5);
  margin-bottom: calc(var(--unit) * 1.5);
  border: calc(var(--unit) * 1) solid #fff;
  box-sizing: border-box;
  border-radius: calc(var(--unit) * 0.25);
  background: #fff;
}

:root.projects .project .image img {
  height: calc(var(--unit) * 16);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(1);
}

:root.projects .project .image img:hover {
  opacity: 1;
  filter: none;
}

:root.workpage r-grid.main .aside {
  color: var(--foreground-color-dimmed);
  margin-top: calc(var(--line-height) * 2.1);
}

:root.workpage r-grid.main .aside h3 a:hover {
  background-color: var(--orange);
  color: #000;
}

:root.workpage r-grid.main .aside a {
  color: inherit;
}

:root.workpage r-grid.main .aside a:hover {
  color: var(--foreground-color);
  text-decoration: none;
}

:root.workpage r-grid.main .aside .pagelist {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  margin-top: calc(var(--line-height) * 1.9 - var(--h3-margin-bottom));
}

@media (max-width: 1024px) {
  :root.workpage r-grid.main .aside .pagelist {
    display: none;
  }
}
:root.workpage r-grid.main .aside .pagelist li {
  padding: 0;
  margin: 0;
}

:root.workpage r-grid.main .aside .pagelist li.current {
  --icon-offset:1.5em;
  display: flex;
  margin-left: calc(var(--icon-offset) * -1);
}

:root.workpage r-grid.main .aside .pagelist li.current:before {
  display: inline-block;
  margin: 0;
  content: "→";
  width: var(--icon-offset);
}

:root.workpage r-grid.main h1 {
  margin-top: calc(var(--line-height) * 2);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  :root.workpage r-grid.main h1 {
    margin-top: 0;
  }
}
:root.workpage r-grid.main .body {
  grid-column-start: 2;
  grid-column-end: span 4;
}

@media (max-width: 1024px) {
  :root.workpage r-grid.main .body {
    grid-column: 1/-1;
  }
}
:root.workpage r-grid.main .body r-grid.compact {
  --fontSize:13px;
  --line-height:calc(var(--fontSize)*1.4);
  --blockSpacingBottom:var(--line-height);
  font-size: var(--fontSize);
  line-height: var(--line-height);
  letter-spacing: 0;
  margin-bottom: calc(var(--blockSpacingBottom) * 2);
}

:root.workpage r-grid.main .body r-grid.compact h2 {
  font-size: 1.5em;
  font-weight: 600;
}

:root.workpage r-grid.main .body r-grid.compact h3 {
  letter-spacing: 0;
}

:root.workpage r-grid.main .body r-grid.compact small {
  font-size: 11px;
}

:root.workpage r-grid.main .body small {
  color: var(--foreground-color-dimmed);
  display: block;
}

:root.workpage r-grid.main .body small:first-child {
  margin-top: calc(var(--line-height) * -1);
  margin-bottom: var(--blockSpacingBottom);
}

:root.workpage r-grid.main > img,
:root.workpage r-grid.main > picture {
  grid-column: 1/-1;
  --margin-y:calc(var(--row-gap)*-1 + var(--line-height)*1);
  margin-top: var(--margin-y);
  margin-bottom: var(--margin-y);
  width: 100%;
}

:root.photos {
  --background-color:#fff ;
}

@media (prefers-color-scheme: dark) {
  :root.photos {
    --background-color:#333;
    --foreground-color-rgb:255,255,255;
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
    --box-link-hover-color:#000;
    --letterbox-color:#111;
    --accent-color:var(--accent-color-darkmode) ;
  }
}
:root.photos body {
  padding-bottom: 0;
}

:root.photos r-grid.main {
  margin-bottom: 0;
}

:root.photos r-grid.main .menu {
  height: calc(var(--unit) * 35);
}

:root.photos .intro {
  font-weight: 440;
}

:root.photos .gallery {
  background-color: var(--background-color);
  --shadow-x:calc(var(--body-padding-x) + var(--body-bleed));
  box-shadow: var(--shadow-x) 0 0 0 var(--background-color), calc(var(--shadow-x) * -1) 0 0 0 var(--background-color);
  min-height: 100vh;
  padding-top: var(--body-padding-y);
  padding-bottom: calc(var(--body-padding-y) * 2);
}

.tiles {
  --minTileWidth:320px;
  --aspectRatio:1/1;
  --fontSizeS:11px;
  --fontSizeM:13px;
  --fontSizeL:14px;
  --borderWidth:1px;
  --borderOpacity:0.2;
  --avatarSize:24px;
  --metaHeightBase:24px;
  --metaHeightExtra:24px;
  --propertiesBarHeight:72px;
  --row-gap:calc(var(--unit)*4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--minTileWidth), 1fr));
  grid-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
}

.tiles .tile {
  position: relative;
  font-size: var(--fontSizeS);
  display: flex;
  flex-direction: column;
}

.tiles .tile:hover {
  text-decoration: none;
}

.tiles .tile * {
  cursor: default;
}

.tiles .tile:before {
  content: "";
  opacity: 0;
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(var(--aspectRatio) * 100% - var(--row-gap) / 2);
}

.tiles .tile .filler {
  flex: 1 1 auto;
  visibility: hidden;
}

.tiles .tile .art,
.tiles .tile .filler {
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.tiles .tile .art {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.tiles .tile:focus {
  outline: none;
  box-shadow: 0 0 0 4px #fff;
}

.tiles .tile:focus .art {
  box-shadow: inset 0 0 0 4px var(--background-color);
}

@media (prefers-color-scheme: dark) {
  :root.shop {
    --background-color:#333;
    --foreground-color-rgb:255,255,255;
    --menu-inactive-color:rgba(var(--foreground-color-rgb),0.3);
    --box-link-hover-color:#000;
    --letterbox-color:#111;
    --accent-color:var(--accent-color-darkmode) ;
  }
}
:root.notfound404 {
  --background-color:var(--ocean-green);
  --foreground-color-rgb:255,255,255;
  --menu-inactive-color:rgba(0,0,0,0.5);
  --box-link-hover-color:#000;
  --accent-color:var(--orange);
  background-color: initial;
}

:root.notfound404 r-grid r-cell:first-child {
  color: #fff;
}

:root.notfound404 h1 {
  --font-size:50vw;
  font-size: var(--font-size);
  font-weight: 400;
  font-feature-settings: "cv02" on;
  margin: 0;
  padding: 0;
  line-height: 0.7;
  text-align: center;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--hot-orange);
  mix-blend-mode: multiply;
  z-index: 2;
  margin-top: calc(var(--line-height) * 2);
}

r-grid.main .title {
  height: calc(var(--line-height) * 4);
  margin-top: calc(var(--unit) * 10);
}

.logo-svg g path {
  fill: color(display-p3 0.94 0.19 0.04);
}

@media (max-width: 640px) {
  r-grid {
    --row-gap:calc(var(--unit)*6) ;
  }
}

/*# sourceMappingURL=style.css.map */