/* https://piccalil.li/blog/a-more-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* The bare minimum English subset, plus copyright & arrows (← ↑ → ↓) & quotes (“ ” ‘ ’) & bullet (•) */
@font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_english_basic.woff2')
    format('woff2');
  unicode-range:
    U+0020-007F, U+00A9, U+2190-2193, U+2018, U+2019, U+201C, U+201D, U+2022;
}

/* unicode latin-1 letters, basic european diacritics */
/* @font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_latin_1.woff2')
    format('woff2');
  unicode-range: U+00C0-00FF;
} */

/* unicode latin-1, punc/symbols & arrows (↔ ↕ ↖ ↗ ↘ ↙) */
/* @font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_latin_1_punc.woff2')
    format('woff2');
  unicode-range: U+00A0-00A8, U+00AA-00BF, U+2194-2199;
} */

/* unicode latin A extended */
/* @font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_latin_ext.woff2')
    format('woff2');
  unicode-range: U+0100-017F;
} */

/* unicodes for vietnamese */
/* @font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_vietnamese.woff2')
    format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
} */

/* remaining Unicodes */
@font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive/Recursive_VF_1.085--subset_range_remaining.woff2')
    format('woff2');
  unicode-range:
    U+2007, U+2008, U+2009, U+200A, U+200B, U+D, U+2010, U+2012, U+2013, U+2014,
    U+2015, U+201A, U+201E, U+2020, U+2021, U+2026, U+2030, U+2032, U+2033,
    U+2039, U+203A, U+203E, U+2044, U+2052, U+2070, U+2074, U+2075, U+2076,
    U+2077, U+2078, U+2079, U+207B, U+2080, U+2081, U+2082, U+2083, U+2084,
    U+2085, U+2086, U+2087, U+2088, U+2089, U+20A1, U+20A6, U+20A8, U+20A9,
    U+20AA, U+20AC, U+20AD, U+20B1, U+20B2, U+20B4, U+20B5, U+20B8, U+20B9,
    U+20BA, U+20BC, U+20BD, U+20BF, U+F8FF, U+2113, U+2116, U+2122, U+2126,
    U+212E, U+E132, U+E133, U+2153, U+2154, U+215B, U+215C, U+215D, U+215E,
    U+18F, U+192, U+19D, U+1C4, U+1C5, U+1C6, U+1C7, U+1C8, U+1C9, U+1CA, U+1CB,
    U+1CC, U+1E6, U+1E7, U+1EA, U+1EB, U+1F1, U+1F2, U+1F3, U+1FA, U+1FB, U+1FC,
    U+1FD, U+1FE, U+1FF, U+200, U+201, U+202, U+203, U+204, U+205, U+206, U+207,
    U+208, U+209, U+20A, U+20B, U+20C, U+20D, U+20E, U+20F, U+210, U+211, U+212,
    U+213, U+214, U+215, U+216, U+217, U+218, U+219, U+21A, U+21B, U+2215,
    U+2219, U+221E, U+221A, U+22A, U+22B, U+22C, U+22D, U+222B, U+230, U+231,
    U+232, U+233, U+2236, U+237, U+2248, U+259, U+2260, U+2261, U+2264, U+2265,
    U+272, U+2B9, U+2BA, U+2BB, U+2BC, U+2BE, U+2BF, U+2C6, U+2C7, U+2C8, U+2C9,
    U+2CA, U+2CB, U+2D8, U+2D9, U+2DA, U+2DB, U+2DC, U+2DD, U+300, U+301,
    U+FB02, U+FB03, U+302, U+303, U+304, U+FB01, U+306, U+307, U+308, U+309,
    U+30A, U+30B, U+30C, U+30F, U+311, U+312, U+315, U+31B, U+2202, U+323,
    U+324, U+325, U+326, U+327, U+328, U+329, U+2205, U+32E, U+2206, U+331,
    U+335, U+220F, U+2211, U+2212, U+391, U+392, U+393, U+394, U+398, U+39B,
    U+39C, U+39D, U+3A0, U+3A6, U+3B1, U+3B2, U+3B3, U+3B4, U+3B8, U+3BB, U+3BC,
    U+3BD, U+3C0, U+3C6, U+25A0, U+25A1, U+25B2, U+25B3, U+25B6, U+25B7, U+25BC,
    U+25BD, U+25C0, U+25C1, U+25C6, U+25C7, U+25CA, U+1E08, U+1E09, U+1E0C,
    U+1E0D, U+1E0E, U+1E0F, U+2610, U+2611, U+1E14, U+1E15, U+1E16, U+1E17,
    U+1E1C, U+1E1D, U+1E20, U+1E21, U+1E24, U+1E25, U+1E2A, U+1E2B, U+1E2E,
    U+1E2F, U+1E36, U+1E37, U+1E3A, U+1E3B, U+E3F, U+1E42, U+1E43, U+1E44,
    U+1E45, U+1E46, U+1E47, U+1E48, U+1E49, U+1E4C, U+1E4D, U+1E4E, U+1E4F,
    U+1E50, U+1E51, U+1E52, U+1E53, U+1E5A, U+1E5B, U+1E5E, U+1E5F, U+1E60,
    U+2661, U+1E61, U+1E62, U+1E63, U+1E64, U+1E65, U+1E66, U+1E67, U+1E68,
    U+1E69, U+2665, U+1E6C, U+1E6D, U+1E6E, U+1E6F, U+1E78, U+1E79, U+1E7A,
    U+1E7B, U+1E80, U+1E81, U+1E82, U+1E83, U+1E84, U+1E85, U+1E8E, U+1E8F,
    U+1E92, U+1E93, U+1E97, U+1E9E, U+2713, U+27E8, U+27E9;
}


/**
 * Font sizing (Utopia)
 */

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

:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
}

/**
 * Spacing (Utopia)
 */

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

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
  --space-xs-m: clamp(0.875rem, 0.4659rem + 1.8182vw, 1.875rem);
  --space-2xs-s: clamp(0.5625rem, 0.2813rem + 1.25vw, 1.25rem);
  --space-l-2xl: clamp(2.25rem, 1.125rem + 5vw, 5rem);
}

:root {
  --font-sans:
    'Recursive', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --font-mono:
    'Recursive', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --gap: var(--space-xs-m);
  /* --gap-s: var(--space-2xs-s); */

  /* https://coolors.co/fff5ee-156615-99ebed-e8c5d0-674228 */
  --color-bg: white;
  --color-text: black;
  --color-link: currentColor;
  --color-accent: #156615;
  --color-accent-bg: seashell;
  /* --bg-image-color: #99ebed; */
  /* --bg-image-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4'%3E%3Cpath fill='black' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); */
  --bg-image-display: none;
}

body[data-theme='dots-mint'] {
  --bg-image-display: block;
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4'%3E%3Cpath fill='%2399ebed' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

body[data-theme='plain-ink'] {
  --bg-image-display: none;
}

body[data-theme='dots-lavender'] {
  --bg-image-display: block;
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4'%3E%3Cpath fill='%23E8C5D0' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  --color-accent-bg: #99ebed;
  --color-accent: #674228;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-variation-settings:
    'MONO' 0.5,
    'CASL' 0.1,
    'slnt' 0,
    'CRSV' 0.5,
    'wght' 400;
  margin: 0;
  padding: var(--space-2xs-s) var(--gap);
  color: var(--color-text);
  background: var(--color-bg);
  position: relative;
}

body::before {
  content: '';
  display: var(--bg-image-display);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-image);
  filter: url('#distort');
}

em {
  font-variation-settings: 'slnt' -15;
}

strong {
  font-variation-settings: 'wght' 700;
}

.meta {
  text-transform: uppercase;
  font-variation-settings:
    'MONO' 1,
    'CASL' 1,
    'slnt' 0,
    'CRSV' 0.5,
    'wght' 500;
  font-size: var(--step--1);
  color: var(--color-accent);
  rotate: 0.8deg;
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--color-accent-bg);
}

.wrapper {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-s);
}

.site-header,
.site-footer {
  position: relative;
}

.site-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  filter: url('#hand-drawn');
}

.site-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: currentColor;
  filter: url('#hand-drawn');
}

.site-header__inner,
.site-footer__inner {
  position: relative;
}

.site-header__inner::before,
.site-header__inner::after,
.site-footer__inner::before,
.site-footer__inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: currentColor;
  filter: url('#hand-drawn');
}

.site-header__inner::before,
.site-footer__inner::before {
  left: 0;
}

.site-header__inner::after,
.site-footer__inner::after {
  right: 0;
}

.site-footer__inner {
  padding-block-start: var(--space-s);
}

.site-header p {
  font-size: var(--step--1);
  /* font-variation-settings:
    'MONO' 0,
    'CASL' 1,
    'CRSV' 0.5,
    'slnt' 0,
    'wght' 400,
    'CRSV' 1; */
  margin: 0;
  margin-block-end: var(--space-xs);
  rotate: -1deg;
  z-index: -1;
}

.site-logo {
  position: relative;
  margin-top: -1.25em;
}

.mono-super {
  font-variation-settings:
    'MONO' 1,
    'CASL' 0,
    'CRSV' 0.5,
    'slnt' 0,
    'wght' 1000;
  font-size: var(--step-4);
  /* font-size: var(--step-3); */
  line-height: 1;
}

.site-nav {
  font-size: var(--step-0);
  margin-block-start: clamp(-3.25rem, -5vw, -0.85rem);
  margin-block-start: clamp(-5rem, -6vw, 0rem);
  padding-block-end: var(--space-s);
  padding-inline-end: 3em;
  position: relative;
}

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  font-variation-settings:
    'MONO' 1,
    'CASL' 0.1,
    'CRSV' 0.5,
    'slnt' 0,
    'wght' 550;
  /* text-transform: uppercase; */
  line-height: 1;
}

.site-nav a {
  color: currentColor;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-accent);
}

:is(h1, h2, h3, h4, h5, h6, p) {
  margin-block-start: 0;
}

.flow > * + * {
  margin-block-start: 1em;
}

.flow > .meta + .page-title {
  margin-block-start: 0;
}

.flow--small > * + * {
  margin-block-start: 0.5em;
}

.flow--super > * + * {
  margin-block-start: 4em;
}

/* .u-pad-block {
  padding-block: var(--space-s);
} */

.filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.prose > *:not(.meta) {
  max-width: 70ch;
}


.gallery--stagger > * + * {
  margin-top: var(--space-md, 1.5rem);
}

.gallery--stagger figure {
  margin-inline: 0;
}

.gallery--stagger img {
  height: auto;
}

@media screen and (min-width: 600px) {
  .gallery--stagger > * + * {
    margin-top: 0;
  }

  .gallery--stagger {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: var(--gap, 1.5rem);
    row-gap: 0;
  }

  .gallery--stagger figure {
    /* By default, expand to the end of the grid */
    grid-column-end: 11;
    margin-block-end: var(--gap, 1.5rem);
  }

  .gallery--stagger figure:last-of-type {
    margin-block-end: 0;
  }

  /**
  * At medium widths, simplify the collage:
  * small-ish items become half-width,
  * large-ish items become full-width.
  */
  .gallery--stagger figure[data-colspan='2'],
  .gallery--stagger figure[data-colspan='3'],
  .gallery--stagger figure[data-colspan='4'],
  .gallery--stagger figure[data-colspan='5'] {
    grid-column-end: span 5;
  }

  .gallery--stagger figure[data-colspan='6'],
  .gallery--stagger figure[data-colspan='7'],
  .gallery--stagger figure[data-colspan='8'],
  .gallery--stagger figure[data-colspan='10'],
  .gallery--stagger figure[data-colspan='full'] {
    grid-column-end: span 10;
  }

  /**
  * At medium widths, collapse custom starts into left/right halves.
  */
  .gallery--stagger figure[data-colstart='1'],
  .gallery--stagger figure[data-colstart='2'],
  .gallery--stagger figure[data-colstart='3'],
  .gallery--stagger figure[data-colstart='4'] {
    grid-column-start: 1;
  }

  .gallery--stagger figure[data-colstart='5'],
  .gallery--stagger figure[data-colstart='6'] {
    grid-column-start: 6;
  }

  /**
  * Push/pull vertical margins
  */
  .gallery--stagger figure[data-margin='2'] {
    margin-block-start: calc(var(--gap, 1.5rem) * 2);
  }

  .gallery--stagger figure[data-margin='3'] {
    margin-block-start: calc(var(--gap, 1.5rem) * 3);
  }

  .gallery--stagger figure[data-margin='6'] {
    margin-block-start: calc(var(--gap, 1.5rem) * 6);
  }

  .gallery--stagger figure[data-margin='-2'] {
    margin-block-start: -3.5em;
  }

  .gallery--stagger figure[data-margin='-3'] {
    margin-block-start: calc(var(--gap, 1.5rem) * -3);
  }

  .gallery--stagger figure[data-margin='-6'] {
    margin-block-start: 0;
  }

  /**
  * Vertical self alignment on grid
  */
  .gallery--stagger figure[data-align='end'] {
    align-self: end;
  }

  .gallery--stagger figure[data-align='center'] {
    align-self: center;
  }
}

@media screen and (min-width: 800px) {
  /**
  * At larger widths, use the exact 10-column collage values.
  */
  .gallery--stagger figure[data-colspan='2'] {
    grid-column-end: span 2;
  }

  .gallery--stagger figure[data-colspan='3'] {
    grid-column-end: span 3;
  }

  .gallery--stagger figure[data-colspan='4'] {
    grid-column-end: span 4;
  }

  .gallery--stagger figure[data-colspan='5'] {
    grid-column-end: span 5;
  }

  .gallery--stagger figure[data-colspan='6'] {
    grid-column-end: span 6;
  }

  .gallery--stagger figure[data-colspan='7'] {
    grid-column-end: span 7;
  }

  .gallery--stagger figure[data-colspan='8'] {
    grid-column-end: span 8;
  }

  .gallery--stagger figure[data-colspan='10'],
  .gallery--stagger figure[data-colspan='full'] {
    grid-column-end: span 10;
  }

  .gallery--stagger figure[data-colstart='1'] {
    grid-column-start: 1;
  }

  .gallery--stagger figure[data-colstart='2'] {
    grid-column-start: 2;
  }

  .gallery--stagger figure[data-colstart='3'] {
    grid-column-start: 3;
  }

  .gallery--stagger figure[data-colstart='4'] {
    grid-column-start: 4;
  }

  .gallery--stagger figure[data-colstart='5'] {
    grid-column-start: 5;
  }

  .gallery--stagger figure[data-colstart='6'] {
    grid-column-start: 6;
  }

  .gallery--stagger figure[data-margin='-6'] {
    margin-block-start: calc(var(--gap, 1.5rem) * -6);
  }
}