/* Custom properties */
@import url("/assets/css/ui.css");
:root {
  --color-paper-light: #fcfcfb;
  --color-dark-gray: #18181b;
  --color-gray: #898989;
  --color-light-gray: #f0f0f0;
  --color-blue: #14218c;
  --color-light-blue: #e0f0ff;
  --color-purple: #5407a2;
  --color-red: #ff4444;
  --color-warm-dark-gray: #504747;
  --color-brick-red: #AE3932;
  --color-blue: #2D5795;
  --color-yellow: hsl(54, 100%, 85%);
  --ui-bg-primary: var(--color-paper-light);
  --ui-bg-secondary: var(--color-light-gray);
  --ui-bg-bright: #ffffff;
  --color-a-link: var(--color-blue);
  --color-a-visited: var(--color-purple);
  --color-a-hover: var(--color-brick-red);
  --color-a-focus: var(--color-brick-red);
  --color-a-active: var(--color-brick-red);
  --color-text-primary: var(--color-dark-gray);
  --color-text-accent: var(--color-warm-dark-gray);
  --publication-title-color: var(--color-dark-gray);
  --publication-subtitle-color: var(--color-blue);
  --publication-author-color: var(--color-brick-red);
  --pageMaskColor: rgba(255, 255, 255, 0.90);
  --type-sans: oso-sans-variable, 'Adjusted Arial Fallback', 'Adjusted Verdana Fallback', "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-serif: oso-serif-variable, "Times New Roman", Georgia, Times, serif;
  --text-h1-size-min: 2.75rem;
  --text-h1-size-max: 4.25rem;
  --text-h1-line-height-min: 1.15em;
  --text-h1-line-height-max: 1.25em;
  --text-h1-weight: 875;
  --text-h1-width: 90;
  --text-h2-size-min: 1.75rem;
  --text-h2-size-max: 2rem;
  --text-h2-line-height-min: 1.15em;
  --text-h2-line-height-max: 1.25em;
  --text-h2-weight: 650;
  --text-h2-width: 85;
  --text-h3-size-min: 1.5rem;
  --text-h3-size-max: 1.75rem;
  --text-h3-line-height-min: 1.15em;
  --text-h3-line-height-max: 1.25em;
  --text-h3-weight: 550;
  --text-h3-width: 85;
  --text-p-size-min: 1rem;
  --text-p-size-max: 1.25rem;
  --text-p-line-height-min: 1.35em;
  --text-p-line-height-max: 1.4em;
  --text-p-weight: 375;
  --text-p-width: 100;
  --word-spacing: calc( 1em * var(--wordSpaceModifier) );
}

:root {
  --content-width: min(35rem, 90vw);
  --margin-left: calc( (100vw - var(--content-width)) / 2 );
  --margin-right: calc( (100vw - var(--content-width)) / 2 );
}

/* Responsive text properties */
@media screen {
  :root {
    --text-h1-width: 75;
    --text-p-width: 90;
  }
}
@media screen and (min-width: 28em) {
  :root {
    --text-h1-width: 85;
    --text-p-width: 95;
  }
}
@media screen and (min-width: 47em) {
  :root {
    --text-h1-width: 100;
    --text-p-width: 100;
  }
}
:root {
  --body-text-spacer: var(--text-p-size-min);
}

.visually-hidden {
  clip: rect(0 0 0 0); /* Legacy support for older browsers */
  clip-path: inset(50%); /* Modern approach */
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --ui-bg-primary: var(--color-dark-gray);
    --ui-bg-secondary: var(--color-warm-dark-gray);
    --color-text-primary: var(--color-paper-light);
    --color-text-accent: var(--color-light-gray);
    --color-a-link: var(--color-light-blue);
    --color-a-visited: var(--color-light-gray);
    --color-a-hover: var(--color-red);
    --color-a-focus: var(--color-red);
    --color-a-active: var(--color-red);
    --color-yellow: hsl(54, 100%, 10%);
    --publication-title-color: var(--color-light-gray);
    --publication-subtitle-color: var(--color-light-blue);
    --publication-author-color: var(--color-red);
    --pageMaskColor: rgba(0, 0, 0, 0.70);
  }
  html:not(.light) p {
    font-weight: 350;
    letter-spacing: 0.0015em;
  }
}
.dark {
  --ui-bg-primary: var(--color-dark-gray);
  --ui-bg-secondary: var(--color-warm-dark-gray);
  --color-text-primary: var(--color-paper-light);
  --color-text-accent: var(--color-light-gray);
  --color-a-link: var(--color-light-blue);
  --color-a-visited: var(--color-light-gray);
  --color-a-hover: var(--color-red);
  --color-a-focus: var(--color-red);
  --color-a-active: var(--color-red);
  --color-yellow: hsl(54, 100%, 10%);
  --publication-title-color: var(--color-light-gray);
  --publication-subtitle-color: var(--color-light-blue);
  --publication-author-color: var(--color-red);
  --pageMaskColor: rgba(0, 0, 0, 0.70);
}
.dark p {
  font-weight: 350;
  letter-spacing: 0.0015em;
}

/* Reset */
html {
  box-sizing: border-box;
}

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

/* HTML elements */
body {
  background: var(--ui-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--type-serif);
  margin: 0;
  padding: 0;
}

.fallback {
  font-family: "Adjusted Arial Fallback", "Adjusted Verdana Fallback", "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1 {
  font-family: var(--type-sans);
  font-size: calc(clamp(var(--text-h1-size-min), 0.5833rem + 4.6667vw, var(--text-h1-size-max)) * var(--fontSizeModifier));
  line-height: calc(clamp(var(--text-h1-line-height-min), 0.4217rem + 1.4533vw, var(--text-h1-line-height-max)) * var(--lineHeightModifier));
  font-weight: var(--text-h1-weight);
  font-variation-settings: "wdth" var(--text-h1-width);
  margin: 0 var(--margin-right) 0 var(--margin-left);
  padding: 0;
  text-wrap: balance;
  word-spacing: var(--word-spacing);
}

h2 {
  font-family: var(--type-sans);
  font-size: calc(clamp(var(--text-h2-size-min), 0.2833rem + 0.5vw, var(--text-h2-size-max)) * var(--fontSizeModifier));
  line-height: calc(clamp(var(--text-h2-line-height-min), 0.4217rem + 1.533vw, var(--text-h2-line-height-max)) * var(--lineHeightModifier));
  font-weight: var(--text-h2-weight);
  font-variation-settings: "wdth" var(--text-h2-width);
  margin: 1.25rem var(--margin-right) 0 var(--margin-left);
  padding: 0;
  text-wrap: balance;
  word-spacing: var(--word-spacing);
}

h3 {
  font-family: var(--type-sans);
  font-size: calc(clamp(var(--text-h3-size-min), 0.2833rem + 0.5vw, var(--text-h3-size-max)) * var(--fontSizeModifier));
  line-height: calc(clamp(var(--text-h3-line-height-min), 0.4217rem + 1.533vw, var(--text-h3-line-height-max)) * var(--lineHeightModifier));
  font-weight: var(--text-h3-weight);
  font-variation-settings: "wdth" var(--text-h3-width);
  margin: 1.25rem var(--margin-right) 0 var(--margin-left);
  padding: 0;
  text-wrap: balance;
  word-spacing: var(--word-spacing);
}

p {
  font-size: calc(clamp(var(--text-p-size-min), 0.5833rem + 0.6667vw, var(--text-p-size-max)) * var(--fontSizeModifier));
  line-height: calc(clamp(var(--text-p-line-height-min), 0.4217rem + 1.4533vw, var(--text-p-line-height-max)) * var(--lineHeightModifier));
  font-weight: var(--text-p-weight);
  font-variation-settings: "wdth" var(--text-p-width);
  max-width: min(60ch, 90vw);
  margin: 0 var(--margin-right) 0 var(--margin-left);
  padding: 0;
  hanging-punctuation: first allow-end last;
  text-wrap: pretty;
  word-spacing: var(--word-spacing);
}

* + p {
  margin-top: 1.25rem;
}

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

figure {
  margin: 0;
  padding: 0;
}

* + figure {
  margin-top: 1.25rem;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typographic details */
article > p:first-of-type:first-line {
  font-weight: 675;
  font-variant-caps: all-small-caps;
}
.page-type--meta article > p:first-of-type:first-line {
  font-weight: inherit;
  font-variant-caps: unset;
}

.emphasis {
  font-size: 1.25em;
  font-variant-caps: inherit;
}

blockquote {
  font-family: "oso-sans-variable", "Adjusted Arial Fallback", "Adjusted Verdana Fallback", "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0 1.5em 0 1.5em;
}

p + blockquote {
  margin-top: 1.25rem;
}

blockquote p {
  font-weight: 375;
  font-stretch: 85%;
  hanging-punctuation: first allow-end last;
}
blockquote p + p {
  margin-top: 0.75rem;
}

/* Layout */
/* Components */
.homepage {
  --ui-bg-primary: var(--color-yellow);
}
.homepage main {
  max-width: min(90ch, 90vw);
  margin: 0 auto;
}

.publication-author {
  color: var(--publication-author-color);
  text-transform: uppercase;
  grid-area: author;
  --text-h3-width: 100;
  --text-h3-weight: 600;
  margin-left: 0;
  margin-right: 0;
}

.publication-subtitle {
  color: var(--publication-subtitle-color);
  font-family: var(--type-serif);
  font-style: italic;
  --text-h2-weight: 550;
  margin: 0.5rem 0 0 0;
}

.publication-title {
  color: var(--publication-title-color);
  margin: 0;
}

.publication-title-wrapper {
  display: grid;
  grid-template-areas: "author" "title";
  margin: 0;
}

.title-group {
  grid-area: title;
}

.title-page figure,
.title-page figure.large {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.title-page figure img,
.title-page figure.large img {
  width: 100%;
  height: auto;
}

figure:has(.image-shape-wrap) {
  margin-top: 0;
}

.image-shape-wrap {
  shape-image-threshold: 0.2;
  shape-margin: 1.5em;
  width: 32vw;
  display: block;
  margin-top: 2.5vh;
  padding-bottom: 0.5em;
}

.image-shape-wrap.left {
  padding-right: 1vw;
}

.image-shape-wrap.right {
  padding-left: 1vw;
}

@media screen and (min-width: 28em) {
  .image-shape-wrap.left {
    float: left;
  }
  .image-shape-wrap.right {
    float: right;
  }
}
footer {
  text-align: center;
  padding: 1rem 0;
  width: 100%;
}
footer p {
  max-width: none;
}

figure {
  padding: 0;
  max-width: var(--content-width);
  width: 100%;
}
figure img {
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 0;
  width: auto;
}
figure.wide {
  margin-left: calc(var(--margin-left) / 2);
  margin-right: calc(var(--margin-left) / 2);
  max-width: calc(100vw - var(--margin-left));
  width: 100%;
}
figure.small {
  --figure-width: calc( var(--content-width) / 3);
  --centering-margin: calc( var(--content-width) / 3);
  width: var(--figure-width);
}
figure.medium {
  --figure-width: calc( var(--content-width) / 2);
  --centering-margin: calc( var(--content-width) / 4);
  width: var(--figure-width);
}
figure.large {
  max-width: var(--content-width);
  width: 100%;
  margin-left: var(--margin-left);
  margin-right: var(--margin-right);
}
figure.center {
  margin-left: calc(var(--margin-left) + var(--centering-margin));
}
figure.left {
  clear: left;
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--body-text-spacer);
}
figure.right {
  clear: right;
  float: right;
  margin-left: 1.5rem;
  margin-right: var(--margin-right);
  margin-bottom: 1rem;
  margin-bottom: var(--body-text-spacer);
}
* + figure {
  margin-top: 1rem;
  margin-top: var(--body-text-spacer);
}