@import url('https://api.fontshare.com/v2/css?f[]=lora@1,2&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=supreme@1,2&display=swap');
/* Modern reset: 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;
  scroll-behavior: smooth;
}
/* 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%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: 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;
}
:root{
  --color-dark: #2D3039;
  --color-dark-glare: #6B7280;
  --color-mid: #DDD8D0;
  --color-light: #FAF8F5;
  --color-primary: #2B6B5E;
  --color-primary-glare: #C4915E;
  --color-primary-shade: #1E5A4F;
  --color-light-glare: #F3EFE9;
  --color-accent: #8B5E3C;
  --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem);
  --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
  --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
  --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
  --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem);
  --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem);
  --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
  --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
  --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem);
  --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem);
  --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem);
  --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem);
  --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem);
  --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem);
  --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem);
  --size-step-00: clamp(0.88875rem, 0.83rem + 0.27vw, 1.041875rem);
  --size-step-0: clamp(1rem, 0.91rem + 0.44vw, 1.25rem);
  --size-step-1: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  --size-step-2: clamp(1.265625rem, 1.07rem + 0.95vw, 1.8rem);
  --size-step-3: clamp(1.42375rem, 1.15rem + 1.31vw, 2.16rem);
  --size-step-4: clamp(1.601875rem, 1.24rem + 1.76vw, 2.591875rem);
  --size-step-5: clamp(1.801875rem, 1.32rem + 2.33vw, 3.110625rem);
  --size-step-6: clamp(2.0275rem, 1.40rem + 3.03vw, 3.7325rem);
  --size-step-7: clamp(2.280625rem, 1.47rem + 3.91vw, 4.47875rem);
  --size-step-8: clamp(2.565625rem, 1.54rem + 4.99vw, 5.375rem);
  --size-step-9: clamp(2.88625rem, 1.58rem + 6.34vw, 6.45rem);
  --size-step-10: clamp(3.2475rem, 1.60rem + 7.99vw, 7.739375rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: Lora,Georgia,Times New Roman,serif;
  --font-heading: Supreme,Inter,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: DM Mono,monospace;
  --font-thin: 100;
  --font-extra-light: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --gutter: var(--space-s-m);
  --gutter-inline: var(--space-s);
  --transition-base: 250ms ease;
  --transition-movement: 200ms ease-out;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --stroke: var(--stroke-width) solid var(--color-mid);
  --stroke-width: 1px;
  --radius-s: 0.2rem;
  --radius-m: 0.75rem;
  --radius-l: 2.5rem;
  --uppercase-kerning: 0.04ch;
  --shadow-s: 0 1px 3px rgba(45, 48, 57, 0.04), 0 4px 12px rgba(45, 48, 57, 0.03);
  --shadow-m: 0 2px 8px rgba(45, 48, 57, 0.08), 0 8px 24px rgba(45, 48, 57, 0.06);
  --shadow-l: 0 4px 16px rgba(45, 48, 57, 0.1), 0 16px 48px rgba(45, 48, 57, 0.08);
}
/* 
  Global styles 

  Low-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html
*/
body {
  background: var(--color-light);
  color: var(--color-dark);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  font-size-adjust: from-font;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  margin: 0;
}
/* Headings */
:is(h1, h2, h3, h4) {
  line-height: var(--leading-fine);
  text-wrap: balance;
  letter-spacing: -0.02em;
}
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
}
h1 {
  font-size: var(--size-step-6);
  font-weight: var(--font-medium);
  max-width: 20ch;
}
h2 {
  font-size: var(--size-step-5);
  font-weight: var(--font-semi-bold);
  max-width: 35ch;
}
h3 {
  font-size: var(--size-step-3);
  max-width: 35ch;
}
:is(h4, h5, h6) {
  font-size: var(--size-step-3);
}
small {
  font-size: var(--size-step-0);
}
/* Interactive styles */
a:not([class]) {
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--transition-base),
              text-underline-offset var(--transition-base);
}
a:not([class]):hover {
  text-decoration-color: var(--color-primary-shade);
  text-underline-offset: 0.25em;
}
/* External link icon (arrow pointing up-right) */
a[target="_blank"]::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-inline-start: 0.15em;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5L12.5 3.5M12.5 3.5H6.5M12.5 3.5v6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5L12.5 3.5M12.5 3.5H6.5M12.5 3.5v6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}
:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}
:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}
/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
*/
@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}
:target {
  scroll-margin-block: 5lh;
}
::selection {
  color: var(--color-light);
  background: var(--color-primary);
}
/* Text and code */
ins {
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-dark);
  padding-inline: 0.3em;
}
:is(code, kbd, samp) {
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
}
/* This is quite a new property, so we want code styles to at least, not be huge or tiny */
@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}
pre:has(code) {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
pre code {
  border: none;
  background: none;
  padding: 0;
}
kbd {
  border: 1px solid;
  padding-block-end: 0.1em;
}
var {
  font-style: normal;
  font-weight: var(--font-medium);
}
q {
  font-style: italic;
}
/* Lists */
ul:not([class]) {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}
ul:not([class]) > li {
  padding-inline-start: var(--space-xs);
}
:is(ol, ul):not([class]) li + * {
  margin-block-start: var(--flow-space, var(--space-xs));
}
ul ::marker {
  font-size: 0.8lh;
}
ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}
/* Lists with classes and roles will be out of standard flow, so remove the default spacing */
[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}
/* Blockquotes */
blockquote {
  margin-inline: 0;
  color: var(--color-dark-glare);
}
blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-primary);
  font-size: var(--size-step-0);
}
blockquote q {
  font-style: normal;
}
/* Media */
:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
img {
  height: auto;
  max-width: 100%;
  display: block;
}
figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
  font-family: monospace;
}
/* Tables */
table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}
thead th {
  padding-block: var(--space-s);
}
td,
th {
  padding: var(--space-xs) var(--space-s);
}
th:not(:only-of-type) {
  border-block-end: var(--stroke);
}
th:only-of-type {
  border-inline-end: var(--stroke);
}
:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}
tr + tr :is(th, td) {
  border-block-start: var(--stroke);
}
dt {
  font-weight: var(--font-medium);
}
dt + dd {
  margin-block-start: var(--space-xs);
}
dd + dt {
  margin-block-start: var(--space-s);
}
dd {
  margin-inline-start: 1.5ch;
}
caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}
/* Some misc. elements */
hr {
  border: none;
  border-block-start: var(--hr-stroke, var(--stroke));
  margin-block: var(--flow-space, var(--space-xl));
}
svg:not([class]) {
  width: auto;
  height: 1lh;
}
svg {
  flex-shrink: 0;
}
svg[role='img'][width][height] {
  width: revert;
  height: revert;
  background: var(--color-light);
  padding: var(--space-xs);
}
/* Forms */
/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */
form > * + * {
  margin-top: var(--flow-space, 1rem);
}
:is(input, select, textarea) {
  accent-color: var(--color-primary);
}
:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
  padding: 0.5em 0.8em;
  border-radius: var(--radius-s);
  border: var(--stroke);
  background: var(--color-dark-glare);
  color: var(--color-light);
  width: 100%;
}
:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::placeholder {
    color: var(--color-mid);
    opacity: 1;
  }
label {
  line-height: var(--leading-fine);
  font-weight: var(--font-medium);
}
label::after {
  content: '\A';
  white-space: pre;
}
/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */
label:has(input) {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-weight: var(--font-normal);
}
label:has(input) + label:has(input) {
  --flow-space: var(--space-s-m);
}
/* Slightly adjusts the vertical position of the check/radio */
label:has(input) input {
  transform: translateY(-0.1ex);
}
input:disabled {
  background: var(--color-mid);
}
input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}
fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}
legend {
  font-weight: var(--font-medium);
  padding-inline: var(--space-xs);
}
summary {
  font-weight: var(--font-bold);
  cursor: pointer;
}
details[open] summary {
  margin-block-end: var(--space-s);
}
/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: calc(var(--size-step-00) * 0.9);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--uppercase-kerning);
  color: var(--color-primary);
  background: rgba(43, 107, 94, 0.08);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-s);
  padding: 0.15em 0.6em;
  vertical-align: middle;
  white-space: nowrap;
  margin-block-end: var(--space-s);
}
.button {
  --button-bg: var(--color-dark);
  --button-text: var(--color-light);
  --button-border: 2px solid var(--color-dark);
  --button-border-radius: var(--radius-s);
  --button-x-padding: 1.1em;
  --button-y-padding: 1.1em;
  --button-gutter: 0.5ch;

  display: inline-flex;
  gap: var(--button-gutter);
  align-items: center;
  line-height: var(--leading-flat);
  position: relative;
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  padding: var(--button-y-padding) var(--button-x-padding);
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--size-step-00);
  font-weight: var(--font-medium);
  letter-spacing: 0.1em;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-movement);
}
.button:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light);
}
.button:active {
  transform: scale(0.98);
}
/* Variant exceptions */
.button[data-button-variant='secondary'] {
  --button-bg: var(--color-light);
  --button-text: var(--color-dark);
  --button-border: 2px solid var(--color-dark);
  --focus-color: var(--color-mid);
}
.button[data-button-variant='secondary']:hover {
  background: var(--color-light-glare);
  border-color: var(--color-dark);
}
.card {
  --focus-color: var(--color-primary);

  background: var(--color-light);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m) var(--space-m);
  position: relative;
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
  display: flex;
  flex-direction: column;
}
.card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: var(--flow-space, 1em);
}
/* Gap replaces flow margins inside card content */
.card__content.flow > * + * {
  margin-top: 0;
}
.card__content > .button {
  margin-top: auto;
}
.card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}
.card__heading {
  font-weight: var(--font-semi-bold);
}
/* --- Subgrid alignment for halves cards --- */
.grid[data-layout='halves'] > .card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}
.grid[data-layout='halves'] > .card > .card__content {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--flow-space, 1em);
}
.grid[data-layout='halves'] .card__content > .button {
  align-self: end;
}
/* Prevent badge margin from inflating the heading row */
.card__heading .badge {
  margin-block-end: 0;
}
.gallery {
  --grid-placement: auto-fit;
  --flow-space: var(--space-m);
}
.hero {
  display: grid;
  place-items: center;
  min-block-size: 80vh;
  background-color: var(--color-light);
  position: relative;
}
.hero h1 {
  font-family: var(--font-base);
  font-size: var(--size-step-5);
  font-weight: var(--font-light);
  max-width: 24ch;
  margin-block-start: 0;
  margin-block-end: var(--space-xl-2xl);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.hero__highlight {
  font-style: italic;
  font-weight: var(--font-semi-bold);
}
/* Scroll indicator — positioned above the gradient line */
.hero__scroll {
  position: absolute;
  bottom: var(--space-l);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  text-decoration: none;
  color: var(--color-dark-glare);
  font-family: var(--font-heading);
  font-size: var(--size-step-00);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color var(--transition-base);
}
.hero__scroll:hover {
  color: var(--color-dark);
}
/* Bouncing arrow */
.hero__scroll-arrow {
  display: block;
  animation: hero-bounce 2.5s ease-in-out infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.nav {
  --flow-space: var(--space-m);
  --gutter: var(--space-m) var(--space-l);

  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  line-height: var(--leading-flat);
}
.nav a {
  text-decoration: none;
  color: var(--color-dark-glare);
  transition: color var(--transition-base);
  position: relative;
}
.nav a:hover {
  color: var(--color-dark);
}
.nav a[aria-current='page'] {
  color: var(--color-dark);
  font-weight: var(--font-semi-bold);
}
.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}
@media (max-width: 47.49em) {
  .nav a {
    font-size: var(--size-step-3);
    color: var(--color-light);
  }

  .nav a:hover {
    color: var(--color-primary-glare);
  }

  .nav a[aria-current='page'] {
    color: var(--color-light);
  }

  .nav a[aria-current='page']::after {
    background-color: var(--color-primary-glare);
  }
}
.prose {
  --flow-space: var(--space-s);
}
.prose :is(h1, h2, h3) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.prose :is(p, li, dl, figcaption, blockquote) {
  max-width: 60ch;
  text-wrap: pretty;
}
.prose :is(h1, h2, h3, h4) + *:not([class]) {
  --flow-space: var(--space-m);
}
/* Add more space on and around figures and tables */
.prose :is(figure, table),
.prose :is(figure, table) + * {
  --flow-space: var(--space-2xl);
}
/* Add more space to headings on block start */
.prose * + :is(h1, h2, h3, h4):not([class]) {
  --flow-space: var(--space-xl);
}
.prose :is(ul, ol):not([class]) li + li,
.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
  --flow-space: var(--space-xs);
}
.prose hr {
  --flow-space: var(--space-2xl);
}
.prose :is(img, picture, video) {
  border: var(--stroke);
}
@media (min-width: 47.5em) {
  .prose :is(h1, h2, h3) {
    overflow-wrap: unset;
    hyphens: unset;
  }
}
.research-list {
  --flow-space: var(--space-xl);
  padding-block-start: var(--space-m);
}
.research-list__item {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-m);
  padding-block: var(--space-s);
}
.research-list__item + .research-list__item {
  margin-block-start: var(--space-xl);
}
.research-list__title {
  margin-block-start: 0;
  font-weight: var(--font-semi-bold);
  letter-spacing: -0.01em;
}
.research-list__identifiers {
  display: flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: var(--size-step-00);
  letter-spacing: var(--uppercase-kerning);
  text-transform: uppercase;
  padding-block-start: var(--space-xs);
  color: var(--color-dark-glare);
}
.research-list__wp-number {
  font-weight: var(--font-bold);
}
.research-list__date {
  font-weight: var(--font-regular);
}
.research-list__separator {
  margin-inline: 0.4em;
}
.research-list__authors {
  font-family: var(--font-heading);
  font-size: var(--size-step-00);
  letter-spacing: var(--uppercase-kerning);
  text-transform: uppercase;
  color: var(--color-dark-glare);
}
.research-list__abstract-heading,
.research-list__download {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--size-step-00);
  letter-spacing: var(--uppercase-kerning);
  text-transform: uppercase;
  padding-block-start: var(--space-s);
}
.research-list__abstract {
  color: var(--color-dark-glare);
  font-size: var(--size-step-00);
  line-height: var(--leading-standard);
}
/* Abstract collapse/expand */
.research-list__abstract-container {
  position: relative;
}
.research-list__abstract-container[data-collapsed="true"] .research-list__abstract {
  max-height: 15em;
  overflow: hidden;
}
.research-list__abstract-container[data-collapsed="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(to bottom, transparent, var(--color-light));
  pointer-events: none;
}
.research-list__abstract-toggle {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--size-step-00);
  letter-spacing: var(--uppercase-kerning);
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 0;
  margin-block-start: var(--space-2xs);
}
.research-list__abstract-toggle:hover {
  color: var(--color-primary-shade);
}
.research-list__keywords,
.research-list__jel {
  padding-block-start: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  align-items: center;
}
.research-list__keywords-label,
.research-list__jel-label {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--size-step-00);
  letter-spacing: var(--uppercase-kerning);
  text-transform: uppercase;
  color: var(--color-dark-glare);
  margin-right: var(--space-3xs);
}
.research-list__keyword-tag,
.research-list__jel-tag {
  font-family: var(--font-heading);
  font-size: calc(var(--size-step-00) * 0.9);
  background: var(--color-light-glare);
  color: var(--color-dark-glare);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-mid);
  white-space: nowrap;
}
.research-list__jel-tag {
  font-family: var(--font-mono);
  font-size: calc(var(--size-step-00) * 0.85);
}
.site-footer__inner {
  background: var(--color-dark);
  color: var(--color-mid);
  font-family: var(--font-heading);
  font-size: var(--size-step-00);
  line-height: var(--leading-standard);
  padding-block: var(--space-xl);
  padding-inline: var(--gutter-inline);
}
.site-footer__inner a {
  color: var(--color-light);
  text-decoration: none;
  transition: color var(--transition-base);
}
.site-footer__inner a:hover {
  color: var(--color-primary-glare);
}
.site-footer__logo svg {
  height: var(--size-step-6);
  width: auto;
}
.site-footer__logo svg path {
  fill: var(--color-light);
}
.site-head {
  --flow-space: var(--space-xs-s);
  --repel-vertical-alignment: end;
  --gutter: var(--space-m);

  line-height: var(--leading-flat);
  font-size: var(--size-step-00);
  font-weight: var(--font-bold);
  padding-block-start: var(--space-s);
}
.site-head__logo,
.site-head__nav {
  padding-inline: var(--gutter-inline);
}
.site-head__nav {
  margin-block-end: 0.4em;
}
.site-head__logo svg {
  height: var(--size-step-6);
  width: auto;
}
.site-head__logo svg path {
  fill: var(--color-dark);
}
/* Burger button — mobile only */
.site-head__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px var(--gutter-inline) 8px 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
  position: relative;
}
.site-head__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: 1px;
  transition: transform var(--transition-fade), opacity var(--transition-fade);
}
/* Animate burger to X when open */
.site-head[data-menu-open] .site-head__burger span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.site-head[data-menu-open] .site-head__burger span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.site-head[data-menu-open] .site-head__burger span {
  background-color: var(--color-light);
}
@media (max-width: 47.49em) {
  .site-head__burger {
    display: flex;
  }

  .site-head__nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fade), visibility var(--transition-fade);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 0;
    padding-inline: 0;
  }

  .site-head[data-menu-open] .site-head__nav {
    opacity: 1;
    visibility: visible;
  }

  .site-head__nav .nav__list {
    flex-direction: column;
    text-align: center;
    gap: var(--space-l);
  }
}
/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  padding: 1rem;
}
.cover > * {
  margin-block: 1rem;
}
.cover > :first-child:not(h1) {
  margin-block-start: 0;
}
.cover > :last-child:not(h1) {
  margin-block-end: 0;
  margin: auto;
}
.cover > h1 {
  margin-block: auto;
  margin: auto;
}
/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */
.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}
/* A split 50/50 layout */
.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
  grid-auto-rows: auto 1fr auto;
}
/* Three column grid layout */
.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}
/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}
.repel[data-nowrap] {
  flex-wrap: nowrap;
}
/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}
.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}
/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}
/* Max 2 items,
so anything greater than 2 is full width */
.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}
/*
WRAPPER COMPOSITION 
A common wrapper/container
*/
.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
  padding-inline-start: var(--gutter);
  padding-inline-end: var(--gutter);
  position: relative;
}
/**
 * DIVIDER UTILITY
 * Adds a soft horizontal line at the bottom of a section.
 * The line fades from transparent to --color-mid and back,
 * inset by --gutter on each side.
 */
.divider {
  position: relative;
}
.divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-mid),
    transparent
  );
}
/* 
REGION UTILITY
Consistent block padding for page sections
*/
.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}
.region[data-region-bg='muted'] {
  background-color: var(--color-light-glare);
}
/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.block{
  display: block;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}