/* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
    /* Type scale; step-0 == base */
    --step--2: clamp(0.6076rem, 0.5473rem + 0.3019vw, 0.7813rem);
    --step--1: clamp(0.7292rem, 0.6567rem + 0.3623vw, 0.9375rem);
    --step-0: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
    --step-1: clamp(1.05rem, 0.9457rem + 0.5217vw, 1.35rem);
    --step-2: clamp(1.26rem, 1.1348rem + 0.6261vw, 1.62rem);
    --step-3: clamp(1.512rem, 1.3617rem + 0.7513vw, 1.944rem);
    --step-4: clamp(1.8144rem, 1.6341rem + 0.9016vw, 2.3328rem);
    --step-5: clamp(2.1773rem, 1.9609rem + 1.0819vw, 2.7994rem);
    /* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
      --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
      --space-2xs: clamp(0.4375rem, 0.394rem + 0.2174vw, 0.5625rem);
      --space-xs: clamp(0.6875rem, 0.6223rem + 0.3261vw, 0.875rem);
      --space-s: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
      --space-m: clamp(1.3125rem, 1.1821rem + 0.6522vw, 1.6875rem);
      --space-l: clamp(1.75rem, 1.5761rem + 0.8696vw, 2.25rem);
      --space-xl: clamp(2.625rem, 2.3641rem + 1.3043vw, 3.375rem);
      --space-2xl: clamp(3.5rem, 3.1522rem + 1.7391vw, 4.5rem);
      --space-3xl: clamp(5.25rem, 4.7283rem + 2.6087vw, 6.75rem);
      /* One-up pairs */
      --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
      --space-2xs-xs: clamp(0.4375rem, 0.2853rem + 0.7609vw, 0.875rem);
      --space-xs-s: clamp(0.6875rem, 0.5353rem + 0.7609vw, 1.125rem);
      --space-s-m: clamp(0.875rem, 0.5924rem + 1.413vw, 1.6875rem);
      --space-m-l: clamp(1.3125rem, 0.9864rem + 1.6304vw, 2.25rem);
      --space-l-xl: clamp(1.75rem, 1.1848rem + 2.8261vw, 3.375rem);
      --space-xl-2xl: clamp(2.625rem, 1.9728rem + 3.2609vw, 4.5rem);
      --space-2xl-3xl: clamp(3.5rem, 2.3696rem + 5.6522vw, 6.75rem);
}

:root {
  color-scheme: dark light;
  --color-red-dark: oklch(0.25 0.14 0);
  --color-blue-dark: oklch(0.25 0.14 234);
  --color-violet-dark: oklch(0.25 0.14 284);
  --color-gold-dark: oklch(0.25 0.14 90);
  --color-green-dark:oklch(0.25 0.14 138);
  --color-medblue-dark:oklch(0.25 0.14 254);
  --colorAL: oklch(0.75 0.14 276);
  --color-blue-light: oklch(0.75 0.14 234);
  --color-violet-light: oklch(0.75 0.14 296);
  --color-gold-light: oklch(0.75 0.14 76);
  --color-green-light:oklch(0.75 0.14 132);
    --primary-text: light-dark(#222e, #fffe);
}
html {
    font-family: "Overpass", sans-serif;
    line-height: 1.5em;
  color: light-dark(#222e, #fffe);
  background-color: light-dark(var(--color-blue-light), var(--color-blue-dark));
  background-image: url(./what-the-hex.png);
  background-blend-mode: multiply;
}

body {
    display: flex;
    gap: 1lh;
}
aside {
    width: minmax(10rem, 100%);
}
main {
    max-width: 70ch;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "breadcrumbs breadcrumbs"
        "name name"
        "meta meta"
        "article article";
    background-color: light-dark(var(--colorAL), var(--color-red-dark));
    color: var(--primary-text);
    padding: 1lh;
    border-radius: 1em;
    grid-gap: 0.25em;
}
@view-transition {
  navigation: auto;
}
main :target {
    background-color: light-dark(var(--color-gold-light), var(--color-medblue-dark));
}
a {
  color: light-dark(var(--color-blue-dark), var(--color-blue-light));
  text-underline-offset: 0.15em;
  &:visited {
    color: light-dark(var(--color-violet-dark), var(--color-violet-light));
  }
}
header {
    grid-area: name;
}
h1 {
    font-family: "Nunito", sans-serif;
    text-align: center;
    font-size: 3em;
    line-height: 1em;
    color: --primary-text;
    text-wrap: balance;
}
h2,
h3 {
    font-family: "Nunito", sans-serif;
}
.recipe-meta {
    grid-area: meta;
}

main > section {
    grid-area: article;
}
main > article {
    grid-area: article;
}

.subtitle {
    text-align: center;
    margin: 0 0 1lh;
}

ul,
ol {
    margin: 0;
    padding-left: 1em;
}

li + li {
    margin-top: 1lh;
}

ul.recipe-meta {
    margin: 0 auto;
    padding: 1em 0 1em 0.5em;
    list-style-type: none;
    background-color: #82a3a1;
    color: #eee;
    width: max-content;
    text-align: center;
    border-radius: 0.5em;
}
ul.recipe-meta:empty {
    display: none;
}

.recipe-meta li {
    display: inline;
    padding-right: 0.5em;
}
.recipe-meta li + li {
    border-left: 1px solid black;
    padding-left: 0.5em;
}

.breadcrumbs {
    margin: 0;
    padding: 0;
    list-style-type: none;
    grid-area: breadcrumbs;
}
.breadcrumbs li {
    display: inline;
}
.breadcrumbs li + li:before {
    content: " / ";
}

pre code {
    display: block;
    overflow-x: auto;
    padding: 1.25rem 1.5rem;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.footnotes {
    border-top: 1px dotted light-dark(black, white);
}

sup, sub {
    line-height: 0;
}

ul.tags {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: center;
    li {
        font-size: smaller;
        font-weight: bold;
        text-transform: uppercase;
        border: 1px solid grey;
        border-radius: 3px;
        background: light-dark(var(--color-green-light), var(--color-medblue-dark));
        padding: 0.1875rem 0.375rem;
        display: flex;
        gap: 0.25rem;
        margin: 0;
    }
}

.footnote-reference a{
  line-height: 0;
  text-decoration: none;
  font-weight: bold;
  color: light-dark(var(--color-blue-dark), var(--color-gold-light));
  &:hover {
    text-decoration: underline;
  }
}

aside > nav {
    padding: 1rlh;
    border-radius: 1rem;
    color: light-dark(#fffe, #222e);
    background-color: light-dark(var(--color-red-dark), var(--color-gold-light));
    background-image: url(./full-bloom.webp);
    background-blend-mode: multiply;
}
nav > ul {
    list-style: none;
    padding: 0;
    width: 100%;
    & li + li {
        margin-block-start: 0.5lh;
    }
    & a {
        color: light-dark(var(--color-blue-light), var(--color-blue-dark));
    }
    & a:visited {
        color: light-dark(var(--color-violet-light), var(--color-violet-dark));
    }
}

.bowtie {
    aspect-ratio: 16/9;
    width: 6em;
    view-transition-name: bowtie;
}

@media (prefers-color-scheme: light) {
    .bowtie{
        filter: sepia(1) saturate(4) brightness(2) hue-rotate(340deg);
    }
}
@view-transition {
  navigation: auto;
}