:root {
  color-scheme: light dark;
  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --gutter: var(--space-md);
  --fluid-size-xs: clamp(0.81rem, calc(0.79rem + 0.11vw), 0.88rem);
  --fluid-size-sm: clamp(0.91rem, calc(0.87rem + 0.25vw), 1.05rem);
  --fluid-size-md: clamp(1.03rem, calc(0.94rem + 0.42vw), 1.26rem);
  --fluid-size-lg: clamp(1.16rem, calc(1.03rem + 0.65vw), 1.51rem);
  --fluid-size-xl: clamp(1.30rem, calc(1.11rem + 0.93vw), 1.81rem);
  --fluid-size-2xl: clamp(1.46rem, calc(1.21rem + 1.30vw), 2.18rem);
  --fluid-size-3xl: clamp(1.65rem, calc(1.30rem + 1.76vw), 2.61rem);
  --fluid-size-4xl: clamp(1.85rem, calc(1.39rem + 2.33vw), 3.14rem);
  --fluid-size-5xl: : clamp(2.09rem, calc(1.48rem + 3.05vw), 3.76rem);
  --size-fluid-xs: clamp(.5rem, 1vw, 1rem);
  --size-fluid-sm: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-md: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-lg: clamp(2rem, 4vw, 3rem);
  --size-fluid-xl: clamp(2.5rem, 4vw, 5rem);
  --size-fluid-2xl: clamp(4rem, 5vw, 5rem);
  --size-fluid-3xl: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-4xl: clamp(3rem, 12vw, 12rem);
  --size-3xs: 0.25rem;
  --size-2xs: 0.5rem;
  --size-xs: 0.75rem;
  --size-sm: 0.85rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5rem;
  --size-2xl: 1.75rem;
  --size-3xl: 2rem;
  --size-4xl: 3rem;
  --size-5xl: 4rem;
  --size-6xl: 6rem;
  --size-content-sm: 25ch;
  --size-content-md: 45ch;
  --size-content-lg: 70ch;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: calc(0.25rem + 1em + 0.25rem);
}

html {
  font-size: var(--fluid-size-md);
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
  font-family: system-sans-ui, sans-serif;
  font-weight: 400;
  caret-color: var(--color-primary);
  scrollbar-color: var(--color-primary) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  font-family: "GambettaMedium", serif;
}

body {
  text-rendering: optimizeSpeed;
  margin: 0;
  max-width: 150rem;
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

:where(p, ul, ol) {
  max-inline-size: 60ch;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

:where(p, h1, h2, h3, h4, ul, ol) {
  overflow-wrap: break-word;
  margin-block: 0;
  padding-block: 0;
}

:where(ul, ol) {
  padding-inline-start: var(--size-sm);
}

:where(li) {
  padding-inline-start: var(--size-xs);
  padding-block-end: var(--size-2xs);
}

blockquote {
  margin-inline-start: 0;
}

/* Webfont: MeshedDisplay-Bold */
@font-face {
  font-family: "MeshedDisplay";
  src: url("fonts/MeshedDisplay-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
  font-display: swap;
}
@font-face {
  font-family: "EmberlyMedium";
  src: url("fonts/Emberly-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}
@font-face {
  font-family: "GambettaMedium";
  src: url("fonts/Gambetta-Medium.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "GambettaItalic";
  src: url("fonts/Gambetta-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}
h1,
h2 {
  font-family: "MeshedDisplay", sans-serif;
}

h1 {
  font-size: clamp(4rem, 3.6667rem + 1.5238vw, 5rem);
  line-height: 0.5;
}
h1 small {
  font-size: var(--size-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h2 {
  font-size: clamp(2rem, 1.7333rem + 1.219vw, 2.8rem);
  line-height: 1.1;
}

blockquote {
  font-size: clamp(1.225rem, 1.2rem + 0.1143vw, 1.3rem);
}
blockquote p {
  font-family: "GambettaItalic", sans-serif;
  font-style: italic;
}

.lead,
.close {
  font-family: "EmberlyMedium", sans-serif;
  font-size: clamp(1.8rem, 1.4667rem + 1.5238vw, 2.8rem);
}

.lead {
  max-inline-size: 40ch;
  margin-inline-start: clamp(2.5rem, 8vw, 8rem);
}

.text-md {
  font-size: var(--fluid-size-md);
}

cite {
  font-size: var(--size-lg);
  font-family: "EmberlyMedium", sans-serif;
  display: block;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.04em;
  max-inline-size: 45ch;
}
cite small {
  font-weight: normal;
  display: block;
}
cite small::before {
  content: "";
  display: block;
  margin-block: 0.5em;
  width: 3em;
  height: 0.15em;
  background-color: currentColor;
}

:root {
  --color-bg: var(--color-white);
  --color-fg: var(--color-dark);
  --color-primary-lighter: #de8189;
  --color-primary-light: #d45863;
  --color-primary: #3c3e71;
  --color-primary-dark: #751e26;
  --color-primary-darker: #4c1419;
  --color-secondary-lighter: #eacde0;
  --color-secondary-light: #d76cb2;
  --color-secondary: #960462;
  --color-secondary-dark: #690345;
  --color-accent-lighter: #caecf1;
  --color-accent-light: #4fc0cf;
  --color-accent: #0495a8;
  --color-accent-dark: #07434b;
  --color-dark: hsl(210, 11%, 15%);
  --color-white: #faf5ff;
}

html {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.color-accent {
  color: var(--ca, var(--color-accent));
}

.color-secondary {
  color: var(--cs, var(--color-secondary));
}

.color-primary {
  color: var(--cs, var(--color-primary));
}

html {
  background-size: 1em 1em;
  background-image: radial-gradient(var(--color-accent-lighter) 1px, var(--color-white) 1px);
}

html[data-theme=dark] {
  --color-bg: var(--color-dark);
  --color-fg: var(--color-white);
  --cs: var(--color-secondary-light);
  --ca: var(--color-accent-light);
  background-image: radial-gradient(var(--color-accent-dark) 1px, var(--color-dark) 1px);
}
html[data-theme=dark] [data-region-theme=accent] {
  color: var(--color-dark);
}
html[data-theme=dark] [data-region-theme=secondary] {
  background-color: var(--color-secondary-light);
  color: var(--color-dark);
}
html[data-theme=dark] a {
  color: var(--color-secondary-lighter);
  text-decoration-color: var(--color-secondary);
}
html[data-theme=dark] a:hover,
html[data-theme=dark] a:focus-visible {
  color: var(--color-white);
  text-decoration-color: var(--color-secondary-light);
}

@media (prefers-color-scheme: dark) {
  html:not[data-theme=dark] {
    --color-bg: var(--color-dark);
    --color-fg: var(--color-white);
    --cs: var(--color-secondary-light);
    --ca: var(--color-accent-light);
    background-image: radial-gradient(var(--color-accent-dark) 1px, var(--color-dark) 1px);
  }
  html:not[data-theme=dark] [data-region-theme=accent] {
    color: var(--color-dark);
  }
  html:not[data-theme=dark] [data-region-theme=secondary] {
    background-color: var(--color-secondary-light);
    color: var(--color-dark);
  }
  html:not[data-theme=dark] a {
    color: var(--color-secondary-lighter);
    text-decoration-color: var(--color-secondary);
  }
  html:not[data-theme=dark] a:hover,
html:not[data-theme=dark] a:focus-visible {
    color: var(--color-white);
    text-decoration-color: var(--color-secondary-light);
  }
}
a {
  color: var(--color-secondary);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.125em;
  text-decoration-color: var(--color-secondary-lighter);
  transition: all 0.4s;
}

a:hover,
a:focus-visible {
  color: var(--color-dark);
}

li::marker {
  color: var(--color-accent);
}

[data-region-theme=accent] {
  background-color: var(--color-accent-light);
}

[data-region-theme=primary] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

[data-region-theme=secondary] {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

header {
  position: relative;
}

.content {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(70rem, 100% - var(--gap) * 2);
  --popout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);
  display: grid;
  grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
}

.content > * {
  grid-column: content;
}

.popout {
  grid-column: popout;
}

.feature {
  grid-column: feature;
}

.full {
  grid-column: full;
}

.full\@sm {
  margin-block-end: var(--size-fluid-md);
}
@media (max-width: 599px) {
  .full\@sm {
    grid-column: full;
    margin-block-end: 0;
  }
}

.start {
  grid-column-start: full-start;
  grid-column-end: content-end;
}
@media (max-width: 599px) {
  .start {
    grid-column-end: full-end;
  }
}

.end {
  grid-column-end: full-end;
}
@media (max-width: 599px) {
  .end {
    grid-column-start: full-start;
  }
}

[data-margins=page],
:is(.start, .end, .full) .row {
  padding-inline: var(--gap);
}

.row {
  --columns: 4;
  display: grid;
  gap: calc(var(--gap) / 2);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

.one-column {
  --columns: 1;
}

.two-columns {
  --columns: 2;
}

.three-columns {
  --columns: 3;
}

.four-columns {
  --columns: 4;
}

.five-columns {
  --columns: 5;
}

.six-columns {
  --columns: 6;
}

.column,
.row > * {
  --span: 2;
  --offset: 1;
  grid-column-end: span var(--span);
  grid-column-start: var(--offset);
}
.column[data-column-span="1"],
.row > *[data-column-span="1"] {
  --span: 1;
}
.column[data-column-span="2"],
.row > *[data-column-span="2"] {
  --span: 2;
}
.column[data-column-span="3"],
.row > *[data-column-span="3"] {
  --span: 3;
}
.column[data-column-span="4"],
.row > *[data-column-span="4"] {
  --span: 4;
}
.column[data-column-span="5"],
.row > *[data-column-span="5"] {
  --span: 5;
}
.column[data-column-span="6"],
.row > *[data-column-span="6"] {
  --span: 6;
}
.column[data-offset="1"],
.row > *[data-offset="1"] {
  --offset: 1;
}
.column[data-offset="2"],
.row > *[data-offset="2"] {
  --offset: 2;
}
.column[data-offset="1"],
.row > *[data-offset="1"] {
  --offset: 1;
}
.column[data-offset="2"],
.row > *[data-offset="2"] {
  --offset: 2;
}
.column[data-offset="3"],
.row > *[data-offset="3"] {
  --offset: 3;
}
.column[data-offset="4"],
.row > *[data-offset="4"] {
  --offset: 4;
}
.column[data-offset="5"],
.row > *[data-offset="5"] {
  --offset: 5;
}
.column[data-offset="6"],
.row > *[data-offset="6"] {
  --offset: 6;
}
@media (min-width: 600px) {
  .column[data-column-span-md="1"],
.row > *[data-column-span-md="1"] {
    --span: 1;
  }
  .column[data-column-span-md="2"],
.row > *[data-column-span-md="2"] {
    --span: 2;
  }
  .column[data-column-span-md="3"],
.row > *[data-column-span-md="3"] {
    --span: 3;
  }
  .column[data-column-span-md="4"],
.row > *[data-column-span-md="4"] {
    --span: 4;
  }
  .column[data-column-span-md="5"],
.row > *[data-column-span-md="5"] {
    --span: 5;
  }
  .column[data-column-span-md="6"],
.row > *[data-column-span-md="6"] {
    --span: 6;
  }
  .column[data-offset-md="1"],
.row > *[data-offset-md="1"] {
    --offset: 1;
  }
  .column[data-offset-md="2"],
.row > *[data-offset-md="2"] {
    --offset: 2;
  }
  .column[data-offset-md="3"],
.row > *[data-offset-md="3"] {
    --offset: 3;
  }
  .column[data-offset-md="4"],
.row > *[data-offset-md="4"] {
    --offset: 4;
  }
  .column[data-offset-md="5"],
.row > *[data-offset-md="5"] {
    --offset: 5;
  }
  .column[data-offset-md="6"],
.row > *[data-offset-md="6"] {
    --offset: 6;
  }
}
@media (min-width: 980px) {
  .column[data-column-span-lg="1"],
.row > *[data-column-span-lg="1"] {
    --span: 1;
  }
  .column[data-column-span-lg="2"],
.row > *[data-column-span-lg="2"] {
    --span: 2;
  }
  .column[data-column-span-lg="3"],
.row > *[data-column-span-lg="3"] {
    --span: 3;
  }
  .column[data-column-span-lg="4"],
.row > *[data-column-span-lg="4"] {
    --span: 4;
  }
  .column[data-column-span-lg="5"],
.row > *[data-column-span-lg="5"] {
    --span: 5;
  }
  .column[data-column-span-lg="6"],
.row > *[data-column-span-lg="6"] {
    --span: 6;
  }
  .column[data-offset-lg="1"],
.row > *[data-offset-lg="1"] {
    --offset: 1;
  }
  .column[data-offset-lg="2"],
.row > *[data-offset-lg="2"] {
    --offset: 2;
  }
  .column[data-offset-lg="3"],
.row > *[data-offset-lg="3"] {
    --offset: 3;
  }
  .column[data-offset-lg="4"],
.row > *[data-offset-lg="4"] {
    --offset: 4;
  }
  .column[data-offset-lg="5"],
.row > *[data-offset-lg="5"] {
    --offset: 5;
  }
  .column[data-offset-lg="6"],
.row > *[data-offset-lg="6"] {
    --offset: 6;
  }
}

.text-columns {
  columns: 2 18em;
  column-gap: var(--gap);
}
.text-columns p {
  break-inside: avoid-column;
}

.theme-toggle {
  position: absolute;
  right: 1em;
  top: 1em;
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center center;
}

.sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill-hover);
}

.sun-and-moon > .sun-beams {
  stroke: var(--icon-fill);
  stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
  stroke: var(--icon-fill-hover);
}

[data-theme=dark] .sun-and-moon > .sun {
  transform: scale(1.75);
}

[data-theme=dark] .sun-and-moon > .sun-beams {
  opacity: 0;
}

[data-theme=dark] .sun-and-moon > .moon > circle {
  transform: translate(-7px);
}

@supports (cx: 1) {
  [data-theme=dark] .sun-and-moon > .moon > circle {
    transform: translate(0);
    cx: 17;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform 0.5s var(--ease-elastic-3);
  }
  .sun-and-moon > .sun-beams {
    transition: transform 0.5s var(--ease-elastic-4), opacity 0.5s var(--ease-3);
  }
  .sun-and-moon .moon > circle {
    transition: transform 0.25s var(--ease-out-5);
  }
  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx 0.25s var(--ease-out-5);
    }
  }
  [data-theme=dark] .sun-and-moon > .sun {
    transform: scale(1.75);
    transition-timing-function: var(--ease-3);
    transition-duration: 0.25s;
  }
  [data-theme=dark] .sun-and-moon > .sun-beams {
    transform: rotate(-25deg);
    transition-duration: 0.15s;
  }
  [data-theme=dark] .sun-and-moon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}
.theme-toggle {
  --size: 2rem;
  --icon-fill: hsl(210 10% 30%);
  --icon-fill-hover: hsl(210 10% 15%);
  background: none;
  border: none;
  padding: 0;
  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}

.theme-toggle > svg {
  inline-size: 100%;
  block-size: 100%;
  stroke-linecap: round;
}

[data-theme=dark] .theme-toggle {
  --icon-fill: hsl(210 10% 70%);
  --icon-fill-hover: hsl(210 15% 90%) ;
}

@media (hover: none) {
  .theme-toggle {
    --size: 32px ;
  }
}
.text-end {
  text-align: right;
}

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

.flex {
  display: flex;
}

.wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.padding-block-lg {
  padding-block: var(--size-fluid-4xl);
}

.padding-block-md {
  padding-block: var(--size-fluid-xl);
}

.padding-md {
  padding: var(--size-fluid-xl);
}

.margin-block-lg {
  margin-block: var(--size-fluid-4xl);
}

.margin-block-md {
  margin-block: var(--size-fluid-xl);
}

.margin-start-lg {
  margin-block-start: var(--size-fluid-4xl);
}

.margin-start-md {
  margin-block-start: var(--size-fluid-xl);
}

.margin-end-lg {
  margin-block-end: var(--size-fluid-4xl);
}

.margin-end-md {
  margin-block-end: var(--size-fluid-xl);
}

@media (min-width: 600px) {
  .accented-image {
    clip-path: polygon(0 5%, 100% 0, 95% 100%, 0 95%);
  }
  .right-arrow {
    clip-path: polygon(0 0, 100% 10%, 95% 90%, 0 100%);
    box-shadow: var(--shadow-sm);
  }
  .left-arrow {
    clip-path: polygon(0 10%, 100% 0%, 100% 100%, 5% 90%);
    box-shadow: var(--shadow-sm);
  }
}