/* @link https://utopia.fyi/grid/calculator?c=317,17,1.125,1302,21,1.2,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl|3xs-s|xl-3xl&g=s,l,xl,12 */
:root {
  --grid-max-width: 81.38rem;
  --grid-gutter: var(
    --space-s-l,
    clamp(1.0625rem, 0.5596rem + 2.5381vw, 2.625rem)
  );
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* @link https://utopia.fyi/space/calculator?c=317,17,1.125,1302,21,1.2,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl|3xs-s|xl-3xl&g=s,l,xl,12 */
:root {
  --space-3xs: clamp(0.25rem, 0.2299rem + 0.1015vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5223rem + 0.203vw, 0.6875rem);
  --space-xs: clamp(0.8125rem, 0.7522rem + 0.3046vw, 1rem);
  --space-s: clamp(1.0625rem, 0.982rem + 0.4061vw, 1.3125rem);
  --space-m: clamp(1.625rem, 1.5043rem + 0.6091vw, 2rem);
  --space-l: clamp(2.125rem, 1.9641rem + 0.8122vw, 2.625rem);
  --space-xl: clamp(3.1875rem, 2.9461rem + 1.2183vw, 3.9375rem);
  --space-2xl: clamp(4.25rem, 3.9282rem + 1.6244vw, 5.25rem);
  --space-3xl: clamp(6.375rem, 5.8923rem + 2.4365vw, 7.875rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1092rem + 0.7107vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4217rem + 0.7107vw, 1rem);
  --space-xs-s: clamp(0.8125rem, 0.6516rem + 0.8122vw, 1.3125rem);
  --space-s-m: clamp(1.0625rem, 0.7608rem + 1.5228vw, 2rem);
  --space-m-l: clamp(1.625rem, 1.3032rem + 1.6244vw, 2.625rem);
  --space-l-xl: clamp(2.125rem, 1.5417rem + 2.9442vw, 3.9375rem);
  --space-xl-2xl: clamp(3.1875rem, 2.5237rem + 3.3503vw, 5.25rem);
  --space-2xl-3xl: clamp(4.25rem, 3.0834rem + 5.8883vw, 7.875rem);
  /* Custom pairs */
  --space-s-l: clamp(1.0625rem, 0.5596rem + 2.5381vw, 2.625rem);
  --space-s-xl: clamp(1.0625rem, 0.1372rem + 4.6701vw, 3.9375rem);
  --space-3xs-s: clamp(0.25rem, -0.0919rem + 1.7259vw, 1.3125rem);
  --space-xl-3xl: clamp(3.1875rem, 1.6789rem + 7.6142vw, 7.875rem);
}

/* @link https://utopia.fyi/type/calculator?c=317,17,1.125,1302,21,1.2,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl|3xs-s|xl-3xl&g=s,l,xl,12 */
:root {
  --s--2: clamp(0.8395rem, 0.8163rem + 0.1169vw, 0.9115rem);
  --s--1: clamp(0.9444rem, 0.8964rem + 0.2425vw, 1.0938rem);
  --s-0: clamp(1.0625rem, 0.982rem + 0.4061vw, 1.3125rem);
  --s-1: clamp(1.1953rem, 1.0731rem + 0.6168vw, 1.575rem);
  --s-2: clamp(1.3447rem, 1.1692rem + 0.8857vw, 1.89rem);
  --s-3: clamp(1.5128rem, 1.2698rem + 1.2267vw, 2.268rem);
  --s-4: clamp(1.7019rem, 1.3738rem + 1.6563vw, 2.7216rem);
}

/* https://raw.githubusercontent.com/Andy-set-studio/modern-css-reset/master/src/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: inherit;
  word-break: break-word;
}

html {
  text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

ol,
ul {
  padding: 0;
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-block-size: 100%;
  max-inline-size: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.stack-2xl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack-2xl > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack-2xl > * + * {
  margin-top: var(--space-2xl);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space-l-xl);
}

.stack-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack-s > * + * {
  margin-block-start: var(--space-s);
}

.stack-2xs {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.stack-2xs > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack-2xs > * + * {
  margin-top: var(--space-3xs);
}

.cluster-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

/*
* The switcher
*/
.switcher-feed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l-xl);
  justify-content: space-between;
}

.switcher-feed > * {
  flex-basis: calc((100rem - 100%) * 999);
  flex-grow: 1;
}

.switcher-feed > :nth-last-child(n+3),
.switcher-feed > :nth-last-child(n+3) ~ * {
  flex-basis: 100%;
}

.switcher-feed h1[role=recent-posts] {
  min-width: 100%;
  margin-bottom: calc(-1 * var(--space-s));
}

nav {
  font-weight: 600;
}

nav ul {
  gap: var(--space-s);
}

:is(nav ul.cluster, ul.switcher-s) {
  line-height: 1;
  list-style: none;
}

/* link styling from Shopify site
.link-menu {
  width: fit-content;
  font-size: var(--s-1);
  grid-area: links;
  white-space: nowrap;
}

.link-menu ul {
  padding: 0;
  list-style-type: none;
}

.link-menu a {
  display: grid;
  align-items: baseline;
  color: $link;
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--space-s);
  text-decoration: none;
}

.link-menu a:hover {
  color: $link-heavy;
}

.link-menu ul li a i {
  transition:
    opacity 0.5s ease,
    transform 0.8s ease;
}

.link-menu ul li a i:nth-child(1) {
  grid-column: 1/1;
  grid-row: 1/1;
  opacity: 100%;
  scale: 1;
}

.link-menu ul li a i:nth-child(2) {
  grid-column: 1/1;
  grid-row: 1/1;
  opacity: 0%;
  transform: scale(0.6);
}

.link-menu ul li a:hover i:nth-child(1) {
  opacity: 0%;
  transform: scale(0.6);
}

.link-menu ul li a:hover i:nth-child(2) {
  opacity: 100%;
  transform: scale(1);
} */
:root {
  background-color: oklch(98.46% 0.0208 91.58deg);
  color: oklch(40.12% 0.1283 275.1deg);
}

body {
  font-family: var(--gh-font-body);
  font-size: var(--s-0);
}

@supports (text-box-trim: trim-both) {
  :is(p, article, span, h1, h2, h3, h4, h5, h6) {
    text-box-trim: trim-both;
    text-box-edge: cap text;
  }
}
.center {
  display: flex;
  box-sizing: content-box;
  flex-direction: column;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  padding-inline: var(--space-s-xl);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--gh-font-heading);
}

h2,
h3 {
  font-size: var(--s-2);
}

h4,
h5,
h6 {
  font-size: var(--s-2);
}

header h1 a {
  text-decoration: none;
}

a {
  text-decoration-color: oklch(40.12% 0.1283 275.1deg / 0.4);
  text-decoration-style: wavy;
  text-underline-offset: var(--space-3xs-2xs);
}

nav a {
  text-underline-offset: var(--space-3xs);
}

a:hover {
  color: oklch(87.36% 0.1336 91.16deg);
  text-decoration-color: oklch(87.36% 0.1336 91.16deg);
}

nav a {
  font-family: var(--gh-font-heading);
}

article p {
  max-width: 60ch;
}

.switcher-feed article {
  max-width: 40ch;
}

.meta {
  line-height: 1;
  font-size: var(--s--1);
}

.featured {
  box-sizing: content-box;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.with-sidebar {
  gap: var(--space-l);
  flex-wrap: wrap;
  display: flex;
}

.with-sidebar > :first-child {
  flex-grow: 999;
  flex-basis: 40ch;
  max-width: 40ch;
}

.with-sidebar > :last-child {
  flex-grow: 1;
  flex-basis: 20rem;
}

header h1 {
  margin-top: var(--space-s);
  font-size: var(--s-4);
  font-weight: 600;
}

:is(nav ul.cluster, ul.switcher-s):not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)) {
  margin-left: unset;
}

[role=recent-posts] {
  border-bottom: 2px solid oklch(40.12% 0.1283 275.1deg / 0.4);
  padding-block-end: var(--space-3xs-2xs);
}

/**
* 1. Makes the Ghost CMS warning stop
* 2. Once styled, has something to do with the Koenig editor?
*/
.kg-width-wide {
  color: red;
}

.kg-width-full {
  color: red;
}

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