/* FONTS */

/* Successor */

@font-face {
	font-family: "Successor";
	src: url("./fonts/Successor/Successor-Extralight-Web.woff2") format("woff2"),
		 url("./fonts/Successor-Extralight-Web.woff") format("woff");
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: "Successor";
	src: url("./fonts/Successor/Successor-ExtralightItalic-Web.woff2") format("woff2"),
		 url("./fonts/Successor-ExtralightItalic-Web.woff") format("woff");
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: "Successor";
	src: url("./fonts/Successor/Successor-Light-Web.woff2") format("woff2"),
		 url("./fonts/Successor-Light-Web.woff") format("woff");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Successor";
	src: url("./fonts/Successor/Successor-LightItalic-Web.woff2") format("woff2"),
		 url("./fonts/Successor-LightItalic-Web.woff") format("woff");
	font-weight: 300;
	font-style: italic;
}

/* MD IO */

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-Regular.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-Italic.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-Medium.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-MediumItalic.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-Semibold.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-SemiboldItalic.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-SemiboldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-Bold.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "MD IO";
  src:  url("./fonts/MD\ IO/MDIO-BoldItalic.woff2") format("woff2"),
      url("./fonts/MD\ IO/MDIO-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

/* MD System */

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Regular.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Italic.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Medium.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-MediumItalic.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Semibold.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-SemiboldItalic.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-SemiboldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Bold.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-BoldItalic.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-Black.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "MD System";
  src:  url("./fonts/MD\ System/MDSystem-BlackItalic.woff2") format("woff2"),
      url("./fonts/MD\ System/MDSystem-BlackItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
}

/* GLOBAL STYLES */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html, 
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  /* --fill: rgb(53, 115, 90); */
  /* --fill: rgb(98, 140, 69); */
  /* --fill: rgb(56, 112, 125); */
  /* --fill: rgb(69, 112, 88); */
  /* --fill: #33724f; */
  /* --illumination: #3b5a77; */
  /* --illumination: #3f5c97; */
  /* --illumination: #1e2033; */
  /* --illumination: #224d67; */
  --illumination: #a35827;
  --fill: var(--illumination);
  --frame-stroke: lab(from var(--fill) calc(l - 5) a b);
  --frame-stroke-off: rgb(from var(--frame-stroke) r g b / 0);
  --frame-stroke-on: rgb(from var(--frame-stroke) r g b / 1);
  --frame-fill: lab(from var(--fill) calc(l + 8) a b);
  --frame-fill-off: rgb(from var(--frame-fill) r g b / 0);
  --frame-fill-on: rgb(from var(--frame-fill) r g b / 0.5);
  --shadow-fill: lab(from var(--fill) calc(l - 15) a b);
  --shadow-opacity: 0.5;
  --text: rgb(255, 255, 255);
  --skew: -33.69deg;
  --resolution: 32;
  --header-row-height: 3.5rem;
  --transition: 0.15s;
  --home-transition: 0.15s;
  --slope: 0.5;
  font-family: "MD IO", Helvetica, sans-serif;
  font-feature-settings: "zero" on;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25rem;
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--fill);
}

.home {
  --val-set: 40;
  --val-adj: 0.5;
  --chr-adj: 0.75;
  --fill: lab(from var(--illumination) calc(var(--val-set) + ((l - var(--val-set)) * var(--val-adj))) calc(a * var(--chr-adj)) calc(b * var(--chr-adj)));
}

body {
  flex: 1;
  position: relative;
  gap: 2rem;
  height: auto;
}

a, 
a:visited, 
a:focus, 
a:hover {
  color: inherit;
  -webkit-transition: color var(--transition) ease-in-out;
  -moz-transition: color var(--transition) ease-in-out;
  -ms-transition: color var(--transition) ease-in-out;
  transition: color var(--transition) ease-in-out;
}

h1, h2, h3, h4, h5, h6, p {
  margin: unset;
}

/* h1 {
  --font-size: 1.5rem;
  --line-height: calc(var(--font-size) * 0.8125);
  font-weight: 200;
  font-size: var(--font-size);
  line-height: var(--line-height);
  background-color: transparent;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  letter-spacing: -0.05rem;
  margin: calc(var(--font-size) * 0.5);
} */

/* .char:nth-child(1) {font-weight: 900}
.char:nth-child(2) {font-weight: 800}
.char:nth-child(3) {font-weight: 700}
.char:nth-child(4) {font-weight: 600}
.char:nth-child(5) {font-weight: 500}
.char:nth-child(6) {font-weight: 400}
.char:nth-child(7) {font-weight: 300}

.string:nth-child(2n) .char:nth-child(1) {font-weight: 300}
.string:nth-child(2n) .char:nth-child(2) {font-weight: 400}
.string:nth-child(2n) .char:nth-child(3) {font-weight: 500}
.string:nth-child(2n) .char:nth-child(4) {font-weight: 600}
.string:nth-child(2n) .char:nth-child(5) {font-weight: 700}
.string:nth-child(2n) .char:nth-child(6) {font-weight: 800}
.string:nth-child(2n) .char:nth-child(7) {font-weight: 900} */

h1 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1.25rem;
  line-height: 1.375rem;
  margin: 1.25rem;
}

h2 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 2rem;
  line-height: 2.5rem;
}

h3 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1.75rem;
}

h4 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1.125rem;
  line-height: 1.375rem;
}

h5 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.25rem;
}

h6 {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.25rem;
}

/* ICONS */

.glyph {
  --size: 0.875rem;
  --aspect: 1;
  --width: calc(var(--size) * var(--aspect));
  --height: var(--size);
  width: var(--width);
  height: var(--height);
  transform: translateY(-0.5px);
}

.glyph svg {
  width: 100%;
  height: 100%;
  -webkit-transition: background-color var(--transition) ease-in-out;
  -moz-transition: background-color var(--transition) ease-in-out;
  -ms-transition: background-color var(--transition) ease-in-out;
  transition: background-color var(--transition) ease-in-out;
}

/* LAYOUT */

header, 
main {
  position: relative;
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

header {
  --reduction: 1;
  --link-spacing: 0.5rem;
  --link-fill: lab(from var(--fill) calc(l - 5) calc(a * 1.0625) calc(b * 1.0625));
  --link-fill-off: rgb(from var(--link-fill) r g b / 0);
  --link-fill-on: rgb(from var(--link-fill) r g b / 1);
  --link-text-off: lab(from var(--fill) calc(l + 40) a b);
  --link-text-on: lab(from var(--fill) calc(l + 50) calc(a * 1.25) calc(b * 1.25));
  --link-glyph-fill-off: var(--link-text-off);
  --link-glyph-fill-on: var(--link-text-on);
  --menu-stroke-off: lab(from var(--fill) calc(l - 10) calc(a * var(--reduction)) calc(b * var(--reduction)));
  --menu-stroke-on: var(--menu-stroke-off);
  --menu-stroke-active: var(--menu-stroke-on);
  --menu-fill-off: var(--fill);
  --menu-fill-on: rgb(from var(--accent) r g b / 0.75);
  --menu-fill-active: var(--menu-stroke-off);
  --menu-text: lab(from var(--accent) calc(l + 5) a b);
  --menu-stroke-weight: 1.5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-theme="light"] header {
  --link-fill: lab(from var(--fill) calc(l + 7.5) calc(a * 1.0625) calc(b * 1.0625));
  --menu-stroke-off: lab(from var(--fill) calc(l - 15) a b);
  --menu-fill-on: var(--accent);
  --menu-text: lab(from var(--menu-fill-on) calc(l + 15) calc(a * 1.125) calc(b * 1.125));
}

[data-chroma="1"] header {
  --reduction: 0.75;
}

header nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  width: 100%;
  height: var(--header-row-height);
  background-color: transparent;
}

header a, 
header a:visited, 
header a:hover, 
header a:focus {
  color: inherit;
  text-decoration: none;
}

header a:focus {
  outline: 0;
}

.links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--link-spacing);
  padding: var(--link-spacing);
  min-width: 20%;
  max-width: 20%;
  height: 100%;
  background-color: transparent;
}

.links.left {
  justify-content: flex-start;
}

.links.right {
  justify-content: flex-end;
}

.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--link-spacing);
  padding: var(--link-spacing) calc(var(--link-spacing) * 1.5);
  border-radius: calc(var(--link-spacing) * 0.5);
  height: calc(var(--header-row-height) - (var(--link-spacing) * 2));
  background-color: var(--link-fill-off);
  color: var(--link-text-off);
  white-space: nowrap;
  -webkit-transition: all var(--transition) ease-in-out;
  -moz-transition: all var(--transition) ease-in-out;
  -ms-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
}

.link.root h1 {
  transform: translateY(-0.125rem);
}

.link.fathom {
  font-size: 1rem;
  line-height: 1.25rem;
}

.link .glyph svg {
  fill: var(--link-glyph-fill-off);
}

.link:hover, 
.link:focus {
  background-color: var(--link-fill-on);
  color: var(--link-text-on);
}

.link:hover .glyph svg, 
.link:hover .glyph svg {
  fill: var(--link-glyph-fill-on);
}

.link > * {
  color: inherit;
  margin: 0;
}

menu {
  --height: calc(var(--header-row-height) * 0.75);
  --width: calc(var(--header-row-height) * 0.3125);
  --pane-width: var(--width);
  --pane-height: calc(var(--width) * 0.75);
  --overlap: calc(var(--menu-stroke-weight) * -1);
  --label-size: 0.75rem;
  --cover-offset-x: calc(var(--width) * 0.25);
  --cover-offset-y: calc(var(--label-size) * -0.5);
  --cover-width: calc((var(--width) + var(--overlap)) * (var(--count) + 2));
  --cover-height: calc(var(--label-size) * 2 + (var(--cover-offset-y) * -2));
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  height: var(--header-row-height);
  background-color: transparent;
  transform: translateX(calc(var(--pane-height) * (1 / 6)));
}

menu li {
  position: relative;
  z-index: 0;
  width: var(--width);
  height: var(--height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: var(--label-size);
  line-height: var(--label-size);
  color: var(--menu-text);
  background-color: transparent;
}

menu li + li {
  margin-left: var(--overlap);
}

menu a {
  display: flex;
  flex-direction: inherit;
  justify-content: inherit;
  align-items: inherit;
  width: auto;
  height: 100%;
  transform-origin: center center;
  transform: skew(var(--skew)) translateY(1px);
}

menu .pane {
  width: var(--pane-width);
  height: var(--pane-height);
  box-sizing: border-box;
  border: var(--menu-stroke-weight) solid var(--menu-stroke-off);
  background-color: var(--menu-fill-off);
}

menu li.active .pane {
  background-color: var(--menu-fill-active);
}

menu a:hover .pane, 
menu a:focus .pane {
  background-color: var(--menu-fill-on);
}

menu .label {
  position: absolute;
  top: 100%;
  left: 0;
  overflow: visible;
  right: unset;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transform: translateX(var(--width)) skew(calc(var(--skew) * -1));
  pointer-events: none;
}

menu .cover {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  right: unset;
  width: var(--cover-width);
  height: var(--cover-height);
  transform: skew(var(--skew)) translate(calc(-50% + var(--cover-offset-x)), calc((var(--height) * 0.5) + var(--cover-offset-y)));
  background-color: var(--fill);
  border: var(--menu-stroke-weight) solid var(--fill);
  pointer-events: none;
  opacity: 0;
}

menu .label span {
  text-align: left;
  white-space: nowrap;
  opacity: 0;
}

menu .label.align-right {
  left: unset;
  right: 0;
  align-items: flex-end;
}

menu .label.align-right span {
  text-align: right;
}

menu:hover .cover {
  opacity: 1;
}

menu:hover li:hover {
  z-index: 2;
}

menu a:hover .label span, 
menu a:focus .label span {
  opacity: 1;
}

menu li.previous,
menu li.next {
  --link-width: calc(var(--width) * 3);
  --pane-width: var(--link-width);
  width: var(--link-width);
  display: none;
}

menu li.previous a, 
menu li.next a {
  justify-content: center;
  align-items: center;
  width: var(--link-width);
  height: 100%;
  transform: none;
}

menu li.previous a .pane, 
menu li.next a .pane {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: none;
  background-color: transparent;
  overflow: visible;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: var(--menu-stroke-off);
}

menu li.previous:hover a .pane, 
menu li.previous:focus a .pane, 
menu li.next:hover a .pane, 
menu li.next:focus a .pane {
  color: var(--menu-fill-on);
}

main {
  /* flex: 1; */
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 0;
}

section {
  width: 100%;
  /* max-width: 60rem; */
}

section {
  display: flex;
  flex-direction: column;
}

.home main {
  --accent: lab(from var(--fill) calc(l + 50) calc(a * 2) calc(b * 2));
}

/* TREATS and ILLUSTRATIONS */

.kitchen {
  --compression: 0.75;
  --treat-width: 18rem;
  --treat-height: calc(var(--treat-width) * var(--compression));
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
}

[data-columns] {
  --max-columns: 1;
  width: calc(var(--treat-width) * var(--max-columns));
}

.treat {
  --padding: 1rem;
  --hover-offset: 1rem;
  --stagger: calc(var(--treat-width) * 0.5);
  --frame-top: 62.5%;
  --frame-left: 50%;
  --frame-x-offset: -1.125rem;
  --frame-x: calc(-50% + var(--frame-x-offset));
  --frame-y: -50%;
  --frame-scale-x: 1;
  --frame-skew-x: var(--skew);
  --frame-stroke-weight: 1.5px;
  --frame-corner: 0;
  --text-height: 37.5%;
  --text-bottom: -12.5%;
  --text-left: 50%;
  --text-x-frame-align: calc(var(--treat-width) * var(--slope) * -0.5);
  --text-x-offset: calc(var(--frame-x-offset) * -1);
  --text-x: calc(var(--frame-x) + var(--text-x-frame-align) + var(--text-x-offset));
  --text-y: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: var(--treat-width);
  height: var(--treat-height);
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1rem;
  overflow: visible;
  transform-origin: center center;
  transform: scaleX(var(--frame-scale-x)) skewX(var(--frame-skew-x));
}

.treat:focus {
  outline: 0;
  border: 0;
}

.treat .interior {
  --interior-x: calc(var(--frame-x-offset) * -1);
  --interior-y: calc(50% - var(--frame-top));
  position: absolute;
  display: inherit;
  flex-direction: inherit;
  justify-content: inherit;
  align-items: inherit;
  gap: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform: scaleX(calc( 1 / var(--frame-scale-x))) skewX(calc(var(--frame-skew-x) * -1)) translate(var(--interior-x), var(--interior-y));
  background-color: transparent;
  overflow: visible;
  pointer-events: none;
}

.treat .drawing {
  --width: var(--treat-width);
  --height: var(--treat-height);
  position: relative;
  width: var(--width);
  height: var(--height);
  background-color: transparent;
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.state, 
.effect {
  --duration: 6s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--width);
  height: var(--height);
  transform-origin: center center;
  transform: translate(-50%, -50%);
  background-color: transparent;
  overflow: visible;
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

.state {
  --layer-opacity-on: 1;
  animation-duration: var(--duration);
  animation-direction: alternate;
}

.state.shadow {
  --layer-opacity-on: 0.25;
}

.treat:hover .state.shadow, 
.treat:focus .state.shadow {
  --layer-opacity-on: 0.28125;
}

.effect {
  --layer-opacity-on: 0.125;
  --layer-blur-on: calc(var(--block) * 0.375);
  --block: calc(var(--width) / var(--resolution));
  --effect-delay: calc(var(--duration) * 0.5);
  animation-duration: var(--duration);
}

.s0 {animation-name: baking_0}
.s1 {animation-name: baking_1}
.s2 {animation-name: baking_2}
.s3 {animation-name: baking_3}
.s4 {animation-name: baking_4}

[data-extension="2"] .state {
  animation-duration: calc(var(--duration) * 2);
}

[data-extension="2"] .s0 {animation-name: baking_doubled_0}
[data-extension="2"] .s1 {animation-name: baking_doubled_1}
[data-extension="2"] .s2 {animation-name: baking_doubled_2}
[data-extension="2"] .s3 {animation-name: baking_doubled_3}
[data-extension="2"] .s4 {animation-name: baking_doubled_4}

[data-reverse="false"] .state {
  animation-direction: normal;
}

[data-reverse="false"] .s0 {animation-name: baking_looped_0}
[data-reverse="false"] .s1 {animation-name: baking_looped_1}
[data-reverse="false"] .s2 {animation-name: baking_looped_2}
[data-reverse="false"] .s3 {animation-name: baking_looped_3}
[data-reverse="false"] .s4 {animation: none}

.e0 {animation-delay: 0s}
.e1 {animation-delay: calc(var(--effect-delay))}
.e2 {animation-delay: calc(var(--effect-delay) * 2)}
.e3 {animation-delay: calc(var(--effect-delay) * 3)}
.e4 {animation-delay: calc(var(--effect-delay) * 4)}

.effect.glow {
  animation-name: glow_up;
  animation-direction: alternate;
  filter: blur(var(--layer-blur-on));
}

.effect.haze {
  --layer-opacity-on: 0.125;
  animation-name: haze;
  animation-direction: alternate;
  mix-blend-mode: plus-lighter;
}

.effect.heat {
  --layer-opacity-on: 0.0625;
  animation-name: heat;
  animation-direction: alternate;
  filter: blur(var(--layer-blur-on));
  mix-blend-mode: overlay;
}

.effect.steam {
  animation-name: steam;
  animation-direction: normal;
}

.effect.smoke {
  --effect-delay: calc(var(--duration) / 3);
  animation-name: smoke;
  animation-direction: normal;
  opacity: 1;
}

.effect.gleam {
  --duration: 12s;
  --effect-delay: calc(var(--duration) / 4);
  --layer-opacity-on: 1;
  animation-name: gleam_slow;
  animation-direction: alternate;
}

.effect.gleam.e0, 
.effect.gleam.e1 {
  display: block;
}

.effect.gleam.e2, 
.effect.gleam.e3 {
  display: none;
}

.effect.twinkle {
  --effect-delay: calc(var(--duration) / 4);
  --layer-opacity-on: 1;
  animation-name: twinkle_slow;
  animation-direction: alternate;
}

@keyframes baking_0 {
    0%     {opacity: var(--layer-opacity-on)}
    0.025% {opacity: var(--layer-opacity-on)}
   12.499% {opacity: var(--layer-opacity-on)}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_1 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: var(--layer-opacity-on)}
   37.499% {opacity: var(--layer-opacity-on)}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_2 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: var(--layer-opacity-on)}
   62.499% {opacity: var(--layer-opacity-on)}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_3 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: var(--layer-opacity-on)}
   87.499% {opacity: var(--layer-opacity-on)}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_4 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: var(--layer-opacity-on)}
  100%     {opacity: var(--layer-opacity-on)}
}

@keyframes baking_doubled_0 {
    0%      {opacity: var(--layer-opacity-on)}
    0.0250% {opacity: var(--layer-opacity-on)}
    6.2499% {opacity: var(--layer-opacity-on)}
    6.2750% {opacity: 0}
   18.7499% {opacity: 0}
   18.7750% {opacity: 0}
   31.2499% {opacity: 0}
   31.2750% {opacity: 0}
   43.7499% {opacity: 0}
   43.7750% {opacity: 0}
   56.2499% {opacity: 0}
   56.2750% {opacity: 0}
   68.7499% {opacity: 0}
   68.7750% {opacity: 0}
   81.2499% {opacity: 0}
   81.2750% {opacity: 0}
   93.7499% {opacity: 0}
   93.7750% {opacity: var(--layer-opacity-on)}
  100%      {opacity: var(--layer-opacity-on)}
}

@keyframes baking_doubled_1 {
    0%      {opacity: 0}
    0.0250% {opacity: 0}
    6.2499% {opacity: 0}
    6.2750% {opacity: var(--layer-opacity-on)}
   18.7499% {opacity: var(--layer-opacity-on)}
   18.7750% {opacity: 0}
   31.2499% {opacity: 0}
   31.2750% {opacity: 0}
   43.7499% {opacity: 0}
   43.7750% {opacity: 0}
   56.2499% {opacity: 0}
   56.2750% {opacity: var(--layer-opacity-on)}
   68.7499% {opacity: var(--layer-opacity-on)}
   68.7750% {opacity: 0}
   81.2499% {opacity: 0}
   81.2750% {opacity: 0}
   93.7499% {opacity: 0}
   93.7750% {opacity: 0}
  100%      {opacity: 0}
}

@keyframes baking_doubled_2 {
    0%      {opacity: 0}
    0.0250% {opacity: 0}
    6.2499% {opacity: 0}
    6.2750% {opacity: 0}
   18.7499% {opacity: 0}
   18.7750% {opacity: var(--layer-opacity-on)}
   31.2499% {opacity: var(--layer-opacity-on)}
   31.2750% {opacity: 0}
   43.7499% {opacity: 0}
   43.7750% {opacity: 0}
   56.2499% {opacity: 0}
   56.2750% {opacity: 0}
   68.7499% {opacity: 0}
   68.7750% {opacity: var(--layer-opacity-on)}
   81.2499% {opacity: var(--layer-opacity-on)}
   81.2750% {opacity: 0}
   93.7499% {opacity: 0}
   93.7750% {opacity: 0}
  100%      {opacity: 0}
}

@keyframes baking_doubled_3 {
    0%      {opacity: 0}
    0.0250% {opacity: 0}
    6.2499% {opacity: 0}
    6.2750% {opacity: 0}
   18.7499% {opacity: 0}
   18.7750% {opacity: 0}
   31.2499% {opacity: 0}
   31.2750% {opacity: var(--layer-opacity-on)}
   43.7499% {opacity: var(--layer-opacity-on)}
   43.7750% {opacity: 0}
   56.2499% {opacity: 0}
   56.2750% {opacity: 0}
   68.7499% {opacity: 0}
   68.7750% {opacity: 0}
   81.2499% {opacity: 0}
   81.2750% {opacity: var(--layer-opacity-on)}
   93.7499% {opacity: var(--layer-opacity-on)}
   93.7750% {opacity: 0}
  100%      {opacity: 0}
}

@keyframes baking_doubled_4 {
    0%      {opacity: 0}
    0.0250% {opacity: 0}
    6.2499% {opacity: 0}
    6.2750% {opacity: 0}
   18.7499% {opacity: 0}
   18.7750% {opacity: 0}
   31.2499% {opacity: 0}
   31.2750% {opacity: 0}
   43.7499% {opacity: 0}
   43.7750% {opacity: var(--layer-opacity-on)}
   56.2499% {opacity: var(--layer-opacity-on)}
   56.2750% {opacity: 0}
   68.7499% {opacity: 0}
   68.7750% {opacity: 0}
   81.2499% {opacity: 0}
   81.2750% {opacity: 0}
   93.7499% {opacity: 0}
   93.7750% {opacity: 0}
  100%      {opacity: 0}
}

@keyframes baking_looped_0 {
    0%     {opacity: var(--layer-opacity-on)}
    0.025% {opacity: var(--layer-opacity-on)}
   12.499% {opacity: var(--layer-opacity-on)}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: var(--layer-opacity-on)}
  100%     {opacity: var(--layer-opacity-on)}
}

@keyframes baking_looped_1 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: var(--layer-opacity-on)}
   37.499% {opacity: var(--layer-opacity-on)}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_looped_2 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: var(--layer-opacity-on)}
   62.499% {opacity: var(--layer-opacity-on)}
   62.525% {opacity: 0}
   87.499% {opacity: 0}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes baking_looped_3 {
    0%     {opacity: 0}
    0.025% {opacity: 0}
   12.499% {opacity: 0}
   12.525% {opacity: 0}
   37.499% {opacity: 0}
   37.525% {opacity: 0}
   62.499% {opacity: 0}
   62.525% {opacity: var(--layer-opacity-on)}
   87.499% {opacity: var(--layer-opacity-on)}
   87.525% {opacity: 0}
  100%     {opacity: 0}
}

@keyframes glow_up {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: var(--layer-opacity-on);
  }
  100% {
    opacity: var(--layer-opacity-on);
  }
}

@keyframes haze {
  0% {
    opacity: 0;
    filter: blur(0);
    margin-top: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  49.499% {
    opacity: 0;
    filter: blur(0);
    margin-top: 0;
  }
  50.525% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  62.525% {
    opacity: 0;
    filter: blur(var(--layer-blur-on));
    margin-top: calc(var(--block) * -2);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: var(--layer-opacity-on);
    filter: blur(var(--layer-blur-on));
    margin-top: calc(var(--block) * -2);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes heat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(1);
  }
  62.5% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(1);
  }
  100% {
    opacity: var(--layer-opacity-on);
    transform: translate(-50%, -53.125%) rotate(5deg) scaleY(1.25);
  }
}

@keyframes steam {
  0% {
    opacity: 0;
    margin-left: 0;
    margin-top: 0;
  }
  25% {
    opacity: var(--layer-opacity-on);
    margin-left: calc(var(--block) * 3);
    margin-top: calc(var(--block) * -1.5);
  }
  50% {
    margin-left: calc(var(--block) * 6);
    margin-top: calc(var(--block) * -3);
  }
  75% {
    opacity: var(--layer-opacity-on);
  }
  100% {
    opacity: 0;
    margin-left: calc(var(--block) * 12);
    margin-top: calc(var(--block) * -6);
  }
}

@keyframes smoke {
  0% {
    opacity: 0;
    margin-left: 0;
    margin-top: 0;
  }
  12.5% {
    opacity: var(--layer-opacity-on);
  }
  25% {
    margin-left: calc(var(--block) * 3);
    margin-top: calc(var(--block) * -1.5);
  }
  50% {
    margin-left: calc(var(--block) * 6);
    margin-top: calc(var(--block) * -3);
  }
  62.5% {
    opacity: var(--layer-opacity-on);
  }
  100% {
    opacity: 0;
    margin-left: calc(var(--block) * 12);
    margin-top: calc(var(--block) * -6);
  }
}

@keyframes gleam_slow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: var(--layer-opacity-on);
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gleam_fast {
  0% {
    opacity: 0;
  }
  22.5% {
    opacity: 0;
  }
  25% {
    opacity: var(--layer-opacity-on);
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes twinkle_slow {
  0% {
    opacity: 0;
  }
  93.75% {
    opacity: 0;
  }
  100% {
    opacity: var(--layer-opacity-on);
  }
}

@keyframes twinkle_fast {
  0% {
    opacity: 0;
  }
  31.25% {
    opacity: 0;
  }
  43.75% {
    opacity: var(--layer-opacity-on);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

[data-illusion="levitation"] {
  --levitation: 1rem;
  --blocks-x-off: -50%;
  --blocks-y-off: -50%;
  --blocks-x-on: var(--blocks-x-off);
  --blocks-y-on: calc(var(--blocks-y-off) - var(--levitation));
  --shadow-x-off: -50%;
  --shadow-y-off: -50%;
  --shadow-x-on: calc(var(--shadow-x-off) - (var(--levitation) / var(--slope)));
  --shadow-y-on: calc(var(--shadow-y-off) + var(--levitation));
}

[data-illusion="levitation"] .blocks, 
[data-illusion="levitation"] .shadow {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-direction: alternate;
}

[data-illusion="levitation"] .blocks {
  animation-name: levitate-blocks;
}

[data-illusion="levitation"] .shadow {
  animation-name: levitate-shadow;
}

@keyframes levitate-blocks {
  0% {
    transform: translate(var(--blocks-x-off), var(--blocks-y-off));
  }
  100% {
    transform: translate(var(--blocks-x-on), var(--blocks-y-on));
  }
}

@keyframes levitate-shadow {
  0% {
    transform: translate(var(--shadow-x-off), var(--shadow-y-off));
  }
  100% {
    transform: translate(var(--shadow-x-on), var(--shadow-y-on));
  }
}

[data-illusion="transmutation-from"], 
[data-illusion="transmutation-to"] {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
  animation-duration: 12s;
  animation-direction: alternate;
}

[data-illusion="transmutation-from"] {
  animation-name: transmutate-from;
}

[data-illusion="transmutation-to"] {
  animation-name: transmutate-to;
}

@keyframes transmutate-from {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes transmutate-to {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.home, 
.treat, 
.treat .interior, 
/* .treat .layer,  */
.treat .frame, 
.treat .text, 
.treat .text .chef {
  -webkit-transition: all var(--home-transition) ease-in-out;
  -moz-transition: all var(--home-transition) ease-in-out;
  -ms-transition: all var(--home-transition) ease-in-out;
  transition: all var(--home-transition) ease-in-out;
}

.treat .layer {
  -webkit-transition: transform var(--home-transition) ease-in-out;
  -moz-transition: transform var(--home-transition) ease-in-out;
  -ms-transition: transform var(--home-transition) ease-in-out;
  transition: transform var(--home-transition) ease-in-out;
}

/* .treat .frame {
  -webkit-transition: background-color var(--home-transition) ease-in-out, border-color var(--home-transition) ease-in-out;
  -moz-transition: background-color var(--home-transition) ease-in-out, border-color var(--home-transition) ease-in-out;
  -ms-transition: background-color var(--home-transition) ease-in-out, border-color var(--home-transition) ease-in-out;
  transition: background-color var(--home-transition) ease-in-out, border-color var(--home-transition) ease-in-out;
} */

.treat .layer {
  --image-size: calc(var(--treat-width) * 2);
  --image-x: -50%;
  --image-y: -50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(var(--image-x), var(--image-y));
  width: var(--image-size);
  height: var(--image-size);
}

.treat .shadow .layer {
  background-color: var(--shadow-fill);
  mask-size: 100% 100%;
  mask-clip: content-box;
}

.treat .text {
  position: absolute;
  /* z-index: 3; */
  top: unset;
  bottom: var(--text-bottom);
  left: var(--text-left);
  right: unset;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--treat-width) - 2px);
  height: var(--text-height);
  padding-top: 1.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  background-color: transparent;
  /* background-color: rgb(from hotpink r g b / 0.5); */
  color: var(--text);
  transform: translate(var(--text-x), var(--text-y));
}

.treat .text span {
  display: inline-block;
  width: max-content;
}

.treat .text .chef {
  /* font-style: italic; */
  margin-top: 0.375rem;
  opacity: 0;
  color: var(--accent);
}

.treat .frame {
  position: absolute;
  top: var(--frame-top);
  left: var(--frame-left);
  transform-origin: center center;
  transform: translate(var(--frame-x), var(--frame-y)) scaleX(var(--frame-scale-x)) skewX(var(--frame-skew-x));
  width: calc(100% + var(--frame-stroke-weight));
  height: calc(100% + var(--frame-stroke-weight));
  box-sizing: border-box;
  background-color: var(--frame-fill-off);
  border-radius: var(--frame-corner);
  border: var(--frame-stroke-weight) solid var(--frame-stroke-on);
}

.treat:hover .frame, 
.treat:focus .frame {
  background-color: var(--frame-fill-on);
}

.treat:hover .text .chef, 
.treat:focus .text .chef {
  opacity: 1;
}

.treat:hover .blocks .layer, 
.treat:focus .blocks .layer, 
.treat:hover .effect .layer, 
.treat:focus .effect .layer {
  --image-y: calc(-50% - var(--hover-offset));
}

.treat:hover .shadow .layer, 
.treat:focus .shadow .layer {
  --image-x: calc(-50% - (var(--hover-offset) / var(--slope)));
  --image-y: calc(-50% + var(--hover-offset));
}

.treat:hover .text, 
.treat:focus .text {
  --text-y: calc(var(--hover-offset) * -1);
}

/* GREETING */

.treat.greeting {
  --text-height: 100%;
  --text-static: lab(from var(--accent) calc(l + 40) calc(a * 0.5) calc(b * 0.5));
  --text-emphasis: lab(from var(--accent) 100 calc(a * 0.25) calc(b * 0.25));
  --link-text-static: lab(from var(--accent) calc(l + 4) calc(a * 1.5) calc(b * 1.5));
  --link-text-on: lab(from var(--link-text-static) calc(l + 24) a b);
  --underline-weight: calc(var(--frame-stroke-weight) * 0.5);
}

.treat.greeting .interior {
  pointer-events: all;
}

.treat.greeting .text {
  --gap: 0.375rem;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap);
  padding: 0 0 0 3rem;
  font-family: "MD System", Helvetica, sans-serif;
  font-feature-settings: "zero" off;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25rem;
  color: var(--text-static);
}

.treat.greeting b {
  font-weight: 600;
  color: var(--text-emphasis);
}

.treat.greeting .signoff {
  font-style: italic;
}

.treat.greeting .more {
  font-weight: 400;
  margin-top: calc(var(--gap) - 1px);
}

.treat .greeting a {
  -webkit-transition: all var(--transition) ease-in-out;
  -moz-transition: all var(--transition) ease-in-out;
  -ms-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
}

.treat.greeting a, 
.treat.greeting a:visited, 
.treat.greeting a:focus, 
.treat.greeting a:hover {
  text-decoration: none;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: var(--underline-weight) solid;
}

.treat.greeting a, 
.treat.greeting a:visited {
  color: var(--link-text-static);
}

.treat.greeting a:focus, 
.treat.greeting a:hover {
  color: var(--link-text-on);
}

.treat.greeting:hover .text, 
.treat.greeting:focus .text {
  --text-y: 0;
}

.treat.greeting:hover .frame {
  background-color: var(--frame-fill-off);
  border-left: none;
}

/* RECIPE */

.recipe {
  --shadow-fill: lab(from var(--fill) calc(l - 15) a b);
  --shadow-opacity: 0.5;
  --indent: 0.5rem;
  --outdent: calc(var(--indent) * -1);
  --inset: 1.1875rem;
  --corner: 0.25rem;
  --recipe-full-width: 40rem;
  --recipe-padding: 2rem;
  --recipe-full-padded-width: calc(var(--recipe-full-width) + var(--recipe-padding));
  color: var(--text);
  background-color: var(--fill);
}

[data-theme="light"] {--direction: -1}
[data-theme="dark"] {--direction: 1}

.recipe body {
  gap: 4rem;
}

.recipe main {
  z-index: 10;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5rem;
  max-width: var(--recipe-full-padded-width);
  margin: 2rem auto 6rem;
  padding: 0 var(--recipe-padding);
}

.recipe .keep {
  white-space: nowrap;
}

.recipe .strike {
  text-decoration: line-through;
  opacity: 0.6;
}

.recipe hr {
  width: 100%;
  height: 0;
  border: 1px dashed var(--column);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.recipe div.break {
  margin-top: calc(var(--gap) * -1);
  height: 0;
}

.recipe section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: inherit;
}

.recipe .illustration {
  --width: var(--recipe-full-width);
  --height: calc(var(--width) * 0.4);
  position: relative;
  width: var(--width);
  height: var(--height);
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.recipe .illustration[data-illusion="transmutation-from"] {
  position: absolute;
}

.recipe .illustration .dimension {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--width);
  height: var(--height);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.recipe .illustration .layer {
  --size: calc(var(--width) * 2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  pointer-events: none;
}

.recipe .poster .illustration .layer {
  transform: translate(calc(-50% + (1rem * var(--align-x))), calc(-50% + (1rem * var(--align-y))));
}

.recipe .illustration .shadow {
  opacity: var(--shadow-opacity);
}

.recipe .illustration .shadow .layer {
  background-color: var(--shadow-fill);
  mask-size: 100% 100%;
  mask-clip: content-box;
}

.recipe .illustration .effect {
  --duration: 9s;
}

.recipe .illustration .effect.glow {
  opacity: 0.1875;
  filter: blur(0.5rem);
  animation-name: none;
}

.recipe .illustration .effect.heat {
  --layer-opacity-on: 0.125;
}

.recipe .illustration .effect.steam {
  opacity: var(--layer-opacity-on);
  margin-left: calc(var(--block) * 3);
  margin-top: calc(var(--block) * -1.5);
}

.recipe .illustration .effect.smoke {
  --duration: 6s;
  --layer-opacity-on: 0.0625;
}

.recipe .illustration .effect.gleam {
  --effect-delay: calc(var(--duration) * 0.125);
  animation-name: gleam_fast;
}

.recipe .illustration .effect.gleam.e0, 
.recipe .illustration .effect.gleam.e1 {
  display: none;
}

.recipe .illustration .effect.gleam.e2, 
.recipe .illustration .effect.gleam.e3 {
  display: block;
}

.recipe .illustration .effect.twinkle {
  --duration: 6s;
  animation-name: twinkle_fast;
  animation-direction: alternate;
}

.recipe .banner {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 3rem;
  width: 100%;
}

.recipe .headlines {
  --gap: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap);
}

.recipe .headline {
  display: flex;
  flex-direction: column;
}

.recipe .main-title {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-style: normal;
  color: var(--title);
}

.recipe .fun-title {
  font-family: "Successor", Georgia, Times, serif;
  font-feature-settings: "zero" off;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-style: italic;
  color: var(--accent);
}

.recipe .quotation,
.recipe .quoted {
  display: inline-block;
}

.recipe .quotation.open {
  position: relative;
  margin-left: -0.375rem;
}

.recipe .headlines .characters {
  font-weight: 300;
}

.recipe .info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  font-weight: 500;
}

#print {
  --height: 2.5rem;
  --glyph-container-size: var(--height);
  --glyph-size: calc(var(--glyph-container-size) - 0.75rem);
  --padding-side: 0.75rem;
  --padding-inner: calc(var(--glyph-container-size) + 0.375rem);
  --glyph-left: calc(var(--padding-side) * 0.25);
  --corner: 0.25rem;
  --print-source: var(--accent);
  --print-fill-off: lab(from var(--print-source) calc(l - 10) calc(a * 0.875) calc(b * 0.875));
  --print-fill-on: var(--print-source);
  --print-text-off: lab(from var(--fill) calc(l - 20) a b);
  --print-text-on: lab(from var(--print-text-off) calc(l - 5) a b);
  --print-glyph-off: var(--print-text-off);
  --print-glyph-on: var(--print-text-on);
  --print-border-off: var(--print-fill-on);
  --print-border-on: var(--print-fill-on);
  position: relative;
  width: min-content;
  height: var(--height);
  gap: 0;
  margin: var(--inset);
}

[data-theme="light"] #print {
  --print-source: lab(from var(--fill) 90 a b);
}

#print .glyph {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--glyph-left);
  width: var(--glyph-container-size);
  height: var(--glyph-container-size);
  background-color: transparent;
}

#print .glyph svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--glyph-size);
  height: var(--glyph-size);
  transform: translate(-50%, -50%);
  fill: var(--print-glyph-off);
  -webkit-transition: all var(--transition) ease-in-out;
  -moz-transition: all var(--transition) ease-in-out;
  -ms-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
}

#print input {
  height: 100%;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0 var(--padding-side) 0 var(--padding-inner);
  border: 1px solid var(--print-border-off);
  outline: 0;
  border-radius: var(--corner);
  background-color: var(--print-fill-off);
  color: var(--print-text-off);
  cursor: pointer;
  -webkit-transition: all var(--transition) ease-in-out;
  -moz-transition: all var(--transition) ease-in-out;
  -ms-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
}

#print:hover input, 
#print:focus input {
  background-color: var(--print-fill-on);
  color: var(--print-text-on);
  border-color: var(--print-border-on);
}

#print:hover .glyph svg, 
#print:focus .glyph svg {
  fill: var(--print-glyph-on);
}

.recipe .info .items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}

.recipe .info .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  /* flex-wrap: wrap; */
  gap: 1rem;
}

.recipe .info .item.stamp {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
}

.recipe .info .label {
  --width: 0.625rem;
  min-width: calc(var(--width) * var(--units));
  max-width: calc(var(--width) * var(--units));
  color: var(--label);
  font-style: italic;
}

.recipe .info .badge {
  --badge: var(--column);
  gap: 0.625rem;
  font-weight: 700;
  color: var(--badge);
  margin-left: 0.125rem;
}

.recipe .info .badge .pin {
  --size: 1rem;
  --glyph-size: 1rem;
  content: var(--content);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 0.25rem;
  overflow: hidden;
  font-weight: 700;
  font-size: var(--glyph-size);
  line-height: var(--glyph-size);
  background-color: var(--badge);
  color: var(--fill);
}

.recipe .item .value.tiered {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.recipe .story {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: "MD System", Helvetica, sans-serif;
  font-feature-settings: "zero" off;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.625rem;
  text-align: left;
  color: var(--story);
}

.recipe .passage {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.recipe .passage .text, 
.recipe .passage .photo {
  display: inline-block;
}

.recipe .passage .photo {
  flex: 1;
  min-width: 55%;
  max-width: 55%;
  /* height: max-content; */
}

.recipe .passage a {
  --link-static: var(--accent);
  --link-on: lab(from var(--accent) calc(l + 20) calc(a * 0.875) calc(b * 0.875));
  color: var(--link-static);
  text-decoration: none;
}

.recipe .passage a:hover, 
.recipe .passage a:focus {
  color: var(--link-on);
}

.recipe .story .from {
  text-align: right;
  font-style: italic;
}

.recipe .details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
}

.recipe .row {
  width: 100%;
}

.recipe .column {
  --gap: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 12rem;
}

.recipe .column .title {
  color: var(--column);
}

.recipe .set {
  display: flex;
  flex-direction: column;
  gap: 1rem 0;
}

.recipe .title, 
.recipe .instruction .tag {
  font-family: "MD IO", Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.375rem;
}

.recipe .title {
  color: var(--accent);
}

.recipe .instruction .tag, 
.recipe .instruction .text {
  color: var(--column);
}

.recipe .instruction .text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* [data-theme="light"] .recipe .instruction .tag {
  font-weight: 600;
} */

.recipe .photo {
  border-radius: var(--corner);
  overflow: hidden;
}

.recipe .pictorial {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recipe .pictorial .photo {
  width: 100%;
  height: auto;
}

.recipe .comment {
  --border-shift: 10;
  --move-val: calc(15 * var(--direction));
  flex: 3;
  display: inline-block;
  width: unset;
  max-width: unset;
  padding: calc(var(--inset) - 0.125rem) 0 0 var(--inset);
  color: var(--text);
  border: 1px solid lab(from var(--fill) calc(l + var(--move-val)) a b);
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--corner) 0 0 0;
  font-size: 1rem;
  line-height: 1.25rem;
}

.recipe .comment p + p {
  margin-top: 0.5rem;
}

.recipe .comment, 
.recipe .caption {
  font-style: italic;
  text-align: left;
}

.recipe .comment i, 
.recipe .caption i {
  font-style: normal;
}

.recipe .comment a, 
.recipe .comment a:visited, 
.recipe .comment a:focus, 
.recipe .comment a:hover, 
.recipe .caption a,  
.recipe .caption a:visited,  
.recipe .caption a:focus,  
.recipe .caption a:hover {
  text-decoration: none;
}

.recipe .comment a, 
.recipe .comment a:visited, 
.recipe .caption a,  
.recipe .caption a:visited {
  color: var(--accent);
}

.recipe .comment a:focus, 
.recipe .comment a:hover, 
.recipe .caption a:focus, 
.recipe .caption a:hover {
  color: lab(from var(--accent) calc(l + var(--move-val)) calc(a * 1.1) calc(b * 1.1));
}

.recipe .editorial .comment a {
  white-space: nowrap;
}

.recipe .list {
  --gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: unset;
}

.recipe .list li, 
.recipe .list p, 
.recipe .comment, 
.recipe .caption, 
.recipe .directions .note, 
.recipe .directions .instruction {
  font-family: "MD System", Helvetica, sans-serif;
  font-feature-settings: "zero" off;
  font-weight: 400;
}

.recipe .list li, 
.recipe .list p, 
.recipe .directions .note {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.recipe .list .entry {
  --gap: 0.5rem;
  --reduction: 1;
  --item-pop: lab(from var(--item) calc(l + var(--pop)) calc(a * var(--reduction)) calc(b * var(--reduction)));
  --accent-pop: lab(from var(--accent) calc(l + var(--pop)) calc(a * var(--reduction)) calc(b * var(--reduction)));
}

[data-chroma="1"] .ingredients .list .entry {--reduction: 0.5;}

.recipe .list .entry span {
  position: relative;
}

.recipe .list .entry b {
  font-weight: 600;
}

.recipe .ingredients .list .entry b {
  font-weight: inherit;
}

.recipe .ingredients .list .entry em {
  font-style: normal;
  font-weight: 600;
  color: var(--item-pop);
}

[data-theme="light"] .ingredients .list .entry b {
  color: var(--item-pop);
}

[data-theme="dark"] .ingredients .list .entry {--pop: 12}
[data-theme="light"] .ingredients .list .entry {--pop: 0}

.recipe .list .entry .maybe {
  /* font-style: italic; */
  color: var(--accent-pop);
}

.recipe .list .entry .cue {
  position: absolute;
  bottom: 0;
  left: 100%;
  display: inline-block;
  margin-left: 1px;
  font-family: "MD IO", Helvetica, sans-serif;
  font-weight: inherit;
  color: var(--label);
}

.recipe .list .entry .cue.raised {
  transform: translateY(-0.25rem);
}

.recipe .directions .entry p + p {
  margin-top: calc(var(--gap) * 0.5);
}

.recipe .list .entry.tangent {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  color: var(--accent);
  list-style-type: none;
}

.recipe .list .entry.tangent p {
  color: inherit;
}

.recipe .list .entry ul {
  list-style-type: disc;
  padding-inline-start: 1rem;
  padding-inline-end: 2rem;
}

.recipe .list .entry ul li + li, 
.recipe .list .entry p + p, 
.recipe .list .entry p + ul, 
.recipe .list .entry ul + p {
  margin-top: var(--gap);
}

.recipe .ingredients {
  flex: 2;
  color: var(--item);
}

.recipe .ingredients .entry.tiered span {
  display: inline;
  white-space: normal;
}

.recipe .ingredients .entry.tiered span:first-child {
  display: block;
  white-space: nowrap;
}

.recipe .ingredients ul {
  list-style-type: none;
  padding: 0 0 0 var(--indent);
}

.recipe .ingredients ul > li > span:first-child {
  margin-left: var(--outdent);
}

.recipe .directions {
  flex: 3;
  color: var(--steps);
}

.recipe .directions ol {
  padding-inline-start: var(--inset);
}

.recipe .tag {
  font-style: italic;
}

.recipe .note {
  --gap: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: var(--gap);
  font-style: italic;
  color: var(--text);
}

.recipe .note.flush {
  padding-left: 0;
}

.recipe .note .tag {
  color: var(--label);
}

.recipe .note .text {
  --border: 1px;
  border-left: var(--border) solid var(--label);
  padding: 0 0.5rem;
}

.recipe .note.footnote .text {
  border-left: none;
}

.recipe .note em {
  text-decoration: underline;
}

.recipe .note b {
  font-weight: 600;
}

.recipe .note.footnote .cue {
  font-style: normal;
  color: var(--label);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -0.25rem);
}

.recipe .ingredients .note {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.recipe .instruction {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: var(--item);
  padding-left: var(--inset);
}

.recipe .instruction .tag:before {
  content: "\25C6";
  font-family: "MD System", Helvetica, sans-serif;
  font-feature-settings: "zero" off;
  font-weight: 800;
  position: absolute;
  display: inline-block;
  transform-origin: center center;
  transform: translateX(calc(var(--inset) * -1)) scale(0.625);
}

[data-theme] header {
  --header-chroma-on: 1.125;
}

[data-theme="light"] header {
  --header-val-static: 35;
  --header-val-on: calc(var(--header-val-static) + 15);
}

[data-theme="dark"] header {
  --header-val-static: 40;
  --header-val-on: calc(var(--header-val-static) + 20);
}

[data-theme] header {
  --header-link-static: lab(from var(--fill) calc(l + (35 * var(--direction))) a b);
  --header-link-on: lab(from var(--fill) calc(l + (50 * var(--direction))) calc(a * var(--header-chroma-on)) calc(b * var(--header-chroma-on)));
}

[data-theme] header .link, 
[data-theme] header .link:visited {
  color: var(--header-link-static);
}

[data-theme] header .link .glyph svg {
  --link-glyph-fill-off: var(--header-link-static);
  --link-glyph-fill-on: var(--header-link-on);
}

[data-theme] header .link:focus, 
[data-theme] header .link:hover {
  color: var(--header-link-on);
  outline: 0;
  border: 0;
}

/* FOOTER */

.recipe footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 0.5rem;
  width: var(--recipe-full-padded-width);
  height: auto;
  margin: 0 auto;
  padding: var(--recipe-padding);
}

.serving {
  --serving: lab(from var(--fill) l calc(a * 1.0625) calc(b * 1.0625));
  --serving-val-fill-off: -3;
  --serving-val-fill-on: -6;
  --serving-val-stroke-off: -12;
  --serving-val-stroke-on: -12;
  --serving-stroke-opacity-off: 0.5;
  --serving-stroke-opacity-on: 1;
  --serving-fill-off: lab(from var(--serving) calc(l + var(--serving-val-fill-off)) a b);
  --serving-fill-on: lab(from var(--serving) calc(l + var(--serving-val-fill-on)) a b);
  --serving-stroke-off: lab(from var(--serving) calc(l + var(--serving-val-stroke-off)) a b);
  --serving-stroke-on: lab(from var(--serving) calc(l + var(--serving-val-stroke-on)) a b);
  --sign-text: var(--accent);
  --post-text: var(--story);
  --link-glyph-fill-off: var(--sign-text);
  --link-glyph-fill-on: var(--sign-text);
  --serving-around-top: 0.5rem;
  --serving-around-side: 0;
  --serving-around-bottom: 1.5rem;
  --serving-gap: 0;
  --serving-stroke-weight: 1.5px;
  --corner: 0.375rem;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--serving-gap);
  width: auto;
  max-width: 24rem;
  height: 100%;
  overflow: hidden;
  padding: var(--serving-around-top) var(--serving-around-side) var(--serving-around-bottom);
  border-radius: var(--corner);
  background-color: var(--serving-fill-off);
  color: white;
  text-decoration: none;
  -webkit-transition: background-color var(--transition) ease-in-out, color var(--transition) ease-in-out;
  -moz-transition: background-color var(--transition) ease-in-out, color var(--transition) ease-in-out;
  -ms-transition: background-color var(--transition) ease-in-out, color var(--transition) ease-in-out;
  transition: background-color var(--transition) ease-in-out, color var(--transition) ease-in-out;
}

[data-theme="light"] .serving {
  --serving: var(--fill);
  --serving-val-fill-off: 4;
  --serving-val-fill-on: 10;
  --serving-val-stroke-off: 10;
  --serving-val-stroke-on: 10;
  --sign-text: var(--label);
  --post-text: var(--item);
}

.serving:hover, 
.serving:focus {
  background-color: var(--serving-fill-on);
}

/* .serving.next {
  flex-direction: row;
} */

.serving .illustration {
  /* --width: 6rem;
  --height: 5rem; */
  --width: 8rem;
  --height: 8rem;
  min-height: var(--height);
  max-height: var(--height);
  flex: 1;
  position: relative;
  z-index: 0;
}

/* .serving .illustration .layer {
  --size: calc(var(--width) * 3);
} */

.signpost {
  --gap: 0.5rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--gap);
  width: min-content;
  height: min-content;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1rem;
}

.sign {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.375rem;
  color: var(--sign-text);
  white-space: nowrap;
}

.serving.next .sign {
  flex-direction: row;
}

.sign .glyph {
  --size: 0.75rem;
  --offset: 0.25rem;
}

.sign .glyph svg {
  fill: var(--link-glyph-fill-off);
}

.serving.previous .glyph {
  margin-left: var(--offset);
}

.serving.next .glyph {
  margin-right: var(--offset);
}

.post {
  display: flex;
  flex-direction: column;
  color: var(--post-text);
}

.post span {
  white-space: nowrap;
}

.border {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: var(--serving-stroke-weight) solid rgb(from var(--serving-stroke-off) r g b / var(--serving-stroke-opacity-off));
  background-color: transparent;
  pointer-events: none;
  -webkit-transition: all var(--transition) ease-in-out;
  -moz-transition: all var(--transition) ease-in-out;
  -ms-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
}

.serving:hover .border, 
.serving:focus .border {
  border-color: rgb(from var(--serving-stroke-on) r g b / var(--serving-stroke-opacity-on));
}

/* PLACEHOLDER IMAGES */
 
.treat .drawing.unknown .blocks .layer {
  filter: brightness(0.9) saturate(0.2) hue-rotate(0deg);
}
 
.recipe main .illustration.unknown .blocks .layer {
  filter: brightness(0.9) saturate(0.1) hue-rotate(0deg);
}

.serving .illustration.unknown .blocks .layer {
  filter: brightness(0.9) saturate(0.1) hue-rotate(0deg);
}
 
/* .serving .illustration.unknown .layer {
  filter: brightness(0.9) saturate(0.1) hue-rotate(0deg);
}
 
.serving .illustration.unknown {
  filter: saturate(0.25) contrast(1.125);
  mix-blend-mode: hard-light;
} */

/* GRID QUERY */

@media (min-width: 1800px) {

  /* 5 COLUMNS MAX */

  [data-columns] {
    --max-columns: 5;
  }

  [data-columns="aligned"] .treat:nth-child(1) .frame, 
  [data-columns="aligned"] .treat:nth-child(5n + 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(1) .frame, 
  [data-columns="alternating"] .treat:nth-child(9n - 3) .frame, 
  [data-columns="alternating"] .treat:nth-child(9n + 1) .frame {
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:nth-child(5n) .frame, 
  [data-columns="alternating"] .treat:nth-child(9n - 4) .frame, 
  [data-columns="alternating"] .treat:nth-child(9n) .frame, 
  [data-columns] .treat:last-child .frame {
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="alternating"] .treat:nth-child(9n - 3) {
    margin-left: var(--stagger);
  }

  [data-columns="aligned"] .treat:hover .frame,
  [data-columns="aligned"] .treat:focus .frame, 
  [data-columns="alternating"] .treat:hover .frame,
  [data-columns="alternating"] .treat:focus .frame, 
  [data-columns] .treat:nth-child(9n - 4):last-child:hover .frame, 
  [data-columns] .treat:nth-child(9n - 4):last-child:focus .frame {
    border-top-color: var(--frame-stroke-on);
    border-left-color: var(--frame-stroke-on);
    border-right-color: var(--frame-stroke-on);
    border-bottom-color: var(--frame-stroke-on);
  }

}

@media (min-width: 1300px) and (max-width: 1799px) {

  /* 4 COLUMNS MAX */

  [data-columns] {
    --max-columns: 4;
  }

  [data-columns="aligned"] .treat:nth-child(1) .frame, 
  [data-columns="aligned"] .treat:nth-child(4n + 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(1) .frame, 
  [data-columns="alternating"] .treat:nth-child(7n - 2) .frame, 
  [data-columns="alternating"] .treat:nth-child(7n + 1) .frame {
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:nth-child(4n) .frame, 
  [data-columns="alternating"] .treat:nth-child(7n - 3) .frame, 
  [data-columns="alternating"] .treat:nth-child(7n) .frame, 
  [data-columns] .treat:last-child .frame {
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="alternating"] .treat:nth-child(7n - 2) {
    margin-left: var(--stagger);
  }

  [data-columns] .treat:nth-child(7n - 2):last-child .frame {
    border-top-color: var(--frame-stroke-off);
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:hover .frame,
  [data-columns="aligned"] .treat:focus .frame, 
  [data-columns="alternating"] .treat:hover .frame,
  [data-columns="alternating"] .treat:focus .frame, 
  [data-columns] .treat:nth-child(7n - 2):last-child:hover .frame, 
  [data-columns] .treat:nth-child(7n - 2):last-child:focus .frame {
    border-top-color: var(--frame-stroke-on);
    border-left-color: var(--frame-stroke-on);
    border-right-color: var(--frame-stroke-on);
    border-bottom-color: var(--frame-stroke-on);
  }

}

@media (min-width: 1000px) and (max-width: 1299px) {

  /* 3 COLUMNS MAX */

  [data-columns] {
    --max-columns: 3;
  }

  [data-columns="aligned"] .treat:nth-child(1) .frame, 
  [data-columns="aligned"] .treat:nth-child(3n + 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(1) .frame, 
  [data-columns="alternating"] .treat:nth-child(5n - 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(5n + 1) .frame {
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:nth-child(3n) .frame, 
  [data-columns="alternating"] .treat:nth-child(5n - 2) .frame, 
  [data-columns="alternating"] .treat:nth-child(5n) .frame, 
  [data-columns] .treat:last-child .frame {
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="alternating"] .treat:nth-child(5n - 1) {
    margin-left: var(--stagger);
  }

  [data-columns] .treat:nth-child(5n - 1):last-child .frame {
    border-top-color: var(--frame-stroke-off);
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:hover .frame,
  [data-columns="aligned"] .treat:focus .frame, 
  [data-columns="alternating"] .treat:hover .frame,
  [data-columns="alternating"] .treat:focus .frame, 
  [data-columns] .treat:nth-child(5n - 1):last-child:hover .frame,  
  [data-columns] .treat:nth-child(5n - 1):last-child:focus .frame {
    border-top-color: var(--frame-stroke-on);
    border-left-color: var(--frame-stroke-on);
    border-right-color: var(--frame-stroke-on);
    border-bottom-color: var(--frame-stroke-on);
  }

}

@media (min-width: 699px) and (max-width: 999px) {

  /* 2 COLUMNS MAX */

  [data-columns] {
    --max-columns: 2;
  }

  [data-columns="aligned"] .treat:nth-child(1) .frame, 
  [data-columns="aligned"] .treat:nth-child(2n + 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(1) .frame, 
  [data-columns="alternating"] .treat:nth-child(3n) .frame, 
  [data-columns="alternating"] .treat:nth-child(3n + 1) .frame {
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:nth-child(2n) .frame, 
  [data-columns="alternating"] .treat:nth-child(3n - 1) .frame, 
  [data-columns="alternating"] .treat:nth-child(3n) .frame, 
  [data-columns] .treat:last-child .frame {
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="alternating"] .treat:nth-child(3n) {
    margin-left: var(--stagger);
  }

  [data-columns] .treat:nth-child(3n):last-child .frame {
    border-top-color: var(--frame-stroke-off);
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns="aligned"] .treat:hover .frame, 
  [data-columns="aligned"] .treat:focus .frame, 
  [data-columns="alternating"] .treat:hover .frame, 
  [data-columns="alternating"] .treat:focus .frame, 
  [data-columns] .treat:nth-child(3n):last-child:hover .frame, 
  [data-columns] .treat:nth-child(3n):last-child:focus .frame {
    border-top-color: var(--frame-stroke-on);
    border-left-color: var(--frame-stroke-on);
    border-right-color: var(--frame-stroke-on);
    border-bottom-color: var(--frame-stroke-on);
  }

}

@media (min-width: 1000px) and (min-height: 700px) {

  .recipe footer {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 10;
  }

  .serving.previous,
  .serving.next {
    --width: 10rem;
    --illustration-size: 4.5rem;
    --lift: 1rem;
    --serving-around-top: 2rem;
    --serving-around-side: 4rem;
    --serving-around-bottom: var(--serving-around-top);
    --serving-gap: 1rem;
    position: fixed;
    bottom: calc(50% - var(--header-row-height));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--width);
    height: auto;
    transform: translateY(50%);
    background-color: transparent;
    overflow: visible;
    margin: 0;
    -webkit-transition: all var(--transition) ease-in-out;
    -moz-transition: all var(--transition) ease-in-out;
    -ms-transition: all var(--transition) ease-in-out;
    transition: all var(--transition) ease-in-out;
  }

  .serving.previous {
    left: 0;
    right: unset;
  }

  .serving.next {
    left: unset;
    right: 0;
  }

  .serving .illustration {
    --width: var(--illustration-size);
    --height: var(--illustration-size);
    min-width: var(--width);
    max-width: var(--width);
    min-height: var(--height);
    max-height: var(--height);
    filter: saturate(1);
  }

  .serving .illustration .layer {
    --size: calc(var(--width) * 3);
  }

  .signpost {
    --gap: 0.25rem;
    width: 100%;
    height: auto;
    font-size: 0.75rem;
    line-height: 0.8125rem;
    pointer-events: none;
  }
  
  .sign {
    margin-bottom: var(--gap);
  }

  .post {
    position: absolute;
    top: 100%;
    bottom: unset;
    opacity: 0;
    /* padding-bottom: 0; */
    -webkit-transition: all var(--transition) ease-in-out;
    -moz-transition: all var(--transition) ease-in-out;
    -ms-transition: all var(--transition) ease-in-out;
    transition: all var(--transition) ease-in-out;
  }

  .border {
    display: none;
  }

  .serving:hover, 
  .serving:focus {
    padding-bottom: calc(var(--serving-around-bottom) + calc(var(--lift) * 2));
  }

  .serving:hover .post, 
  .serving:focus .post {
    opacity: 1;
  }

  .serving .shadow, 
  .serving .shadow {
    opacity: var(--shadow-opacity);
    -webkit-transition: opacity var(--transition) ease-in-out;
    -moz-transition: opacity var(--transition) ease-in-out;
    -ms-transition: opacity var(--transition) ease-in-out;
    transition: opacity var(--transition) ease-in-out;
  }

  .serving .shadow .layer, 
  .serving .shadow .layer {
    -webkit-transition: transform var(--transition) ease-in-out;
    -moz-transition: transform var(--transition) ease-in-out;
    -ms-transition: transform var(--transition) ease-in-out;
    transition: transform var(--transition) ease-in-out;
  }

  .serving:hover .shadow, 
  .serving:focus .shadow {
    opacity: calc(var(--shadow-opacity) * 0.75);
  }


  .serving:hover .shadow .layer, 
  .serving:focus .shadow .layer {
    transform: translate(calc(-50% - (var(--lift) * 2)), calc(-50% + var(--lift)));
  }

}

@media (max-width: 799px) {

  .recipe header {
    height: calc(var(--header-row-height) * 2);
  }

  .recipe menu {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 30rem;
    padding: 0 calc(var(--link-spacing) * 2);
    margin: 0 auto;
  }

  .recipe menu li {
    flex: 1;
    width: auto;
    --pane-width: 1rem;
    --pane-height: var(--pane-width);
  }

  .recipe menu li a {
    transform: none;
    width: 100%;
    height: 100%;
  }

  .recipe main {
    margin-top: 0;
  }

}

@media screen and (max-width: 699px) {

  /* 1 COLUMN */

  .kitchen {
    --max-columns: 1;
    --compression: 0.875;
    --treat-height: calc(var(--treat-width) * var(--compression));
  }

  [data-columns] .treat .state, 
  [data-columns] .treat .effect {
    display: none;
    animation: none;
  }

  [data-columns] .treat .feature {
    display: block;
    opacity: var(--layer-opacity-on);
  }

  [data-columns] .treat {
    --hover-offset: 0px;
    --frame-x-offset: 0px;
    --frame-x: -50%;
    --frame-skew-x: 0;
    --frame-corner: 0.25rem;
    --text-left: 50%;
    --text-x-frame-align: 0px;
    --text-x-offset: 0px;
    --text-x: -50%;
    height: var(--treat-height);
    margin-top: calc(var(--frame-stroke-weight) * -1);
  }

  [data-columns] .treat .frame {
    width: 100%;
    height: 100%;
    border-left-color: var(--frame-stroke-off);
    border-right-color: var(--frame-stroke-off);
  }

  [data-columns] .treat .text {
    text-align: center;
  }

  [data-columns] .treat:first-child .frame {
    border-top-color: var(--frame-stroke-off);
  }

  [data-columns] .treat:last-child .frame {
    border-bottom-color: var(--frame-stroke-off);
  }

  [data-columns] .treat:first-child:hover .frame, 
  [data-columns] .treat:last-child:hover .frame, 
  [data-columns="aligned"] .treat:hover .frame, 
  [data-columns="aligned"] .treat:focus .frame, 
  [data-columns="alternating"] .treat:hover .frame, 
  [data-columns="alternating"] .treat:focus .frame {
    border-top-color: var(--frame-stroke-on);
    border-left-color: var(--frame-stroke-on);
    border-right-color: var(--frame-stroke-on);
    border-bottom-color: var(--frame-stroke-on);
  }

  /* HOME */

  .treat.greeting .text {
    text-align: left;
    padding-top: 1rem;
    padding-bottom: 0;
    padding-left: 3rem;
    justify-content: flex-start;
  }

  /* RECIPE */

  .recipe body {
    gap: 3rem;
  }

  .recipe main {
    gap: inherit;
    padding: 0 3rem;
    max-width: 36rem;
  }

  .recipe .illustration {
    width: 100%;
  }

  .recipe .poster .illustration .layer {
    --size: calc(var(--width) * 1.5);
  }

  .recipe .banner {
    flex-direction: column;
  }

  .recipe .details {
    flex-direction: column;
    gap: inherit;
  }

  .recipe .story {
    gap: 2rem;
  }

  .recipe .passage {
    flex-direction: column;
    align-items: center;
    gap: inherit;
  }

  .recipe .passage .photo {
    min-width: unset;
    max-width: unset;
    min-height: unset;
    max-height: unset;
    width: 100%;
    height: auto;
  }

  .recipe .column {
    flex: unset;
  }

  .recipe footer {
    width: 100%;
    max-width: unset;
  }

}

@media screen and (max-width: 499px) {

  /* GLOBAL STYLES */ 
  
  html {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  /* HEADER */

  h1 {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .link.fathom {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .link.fathom .glyph {
    --size: 0.75rem;
    transform: translateY(-1px);
  }

  /* RECIPE */

  .recipe .headline {
    display: inline;
  }

  .recipe .headline span + span:before {
    content: " ";
  }

  .recipe .main-title {
    font-size: 2rem;
    line-height: 2rem;
  }

  .recipe .fun-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  .recipe .story {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .serving.previous {
    display: none;
  }

  #print {
    --height: 3rem;
    --glyph-size: calc(var(--glyph-container-size) - 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  #print input {
    font-size: 1rem;
    line-height: 1rem;
  }

}

/* PRINTING RECIPES */

@media print {
  
  .recipe header, 
  .recipe header *, 
  .recipe footer, 
  .recipe footer *, 
  .serving,
  #print {
    display: none;
  }

  .home, 
  .home * {
    color: #000 !important;
  }

  .home .frame {
    display: none;
  }

  .home .treat .interior {
    background-color: none;
  }

  .recipe {
    print-color-adjust: exact;
    background-color: transparent;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    width: 8.5in;
    height: min-content;
  }

  .recipe, 
  .recipe * {
    --top-margin: 0.75in;
    --side-margin: 0.75in;
    --bottom-margin: 0;
    --print-width: calc(8.5in - (var(--side-margin) * 2));
    --print-height: calc(11in - (var(--top-margin) + var(--bottom-margin)));
    --main-gap: 0.4in;
    --center-gap: calc(var(--main-gap) * 1.5);
    --details-gap: calc(var(--main-gap) * 0.5);
    --illustration-width: 4in;
    --illustration-height: calc(var(--illustration-width) / 2);
    --banner-width: calc(var(--print-width) - var(--illustration-width) - var(--center-gap));
    --story-width: var(--banner-width);
    --details-width: var(--illustration-width);
    --corner: 0.0625in;
    --page-fill: transparent;
    --page-text: #000000;
    --page-text-fade: #333333;
    --title: var(--page-text);
    --accent: var(--page-text);
    --column: var(--page-text);
    --text: var(--page-text);
    --story: var(--page-text);
    --label: var(--page-text);
    --item: var(--page-text);
    --page-break-gap: var(--top-margin);
    background-color: var(--page-fill);
    color: var(--page-text);
    font-family: Georgia, Times, serif !important;
  }

  .recipe body {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
  }
  
  /* .recipe main,  */
  .recipe .poster, 
  .recipe .matter {
    width: var(--print-width);
    margin: 0 var(--side-margin);
    padding: 0;
  }
  
  .recipe main {
    gap: var(--main-gap);
    width: var(--print-width);
    min-height: var(--print-height);
    max-width: unset;
    min-width: unset;
    margin: var(--top-margin) var(--side-margin) 0;
    padding: 0;
  }

  .recipe .break {
    break-after: page;
  }

  .recipe .break + *, 
  .recipe .set.start-break {
    margin-top: var(--page-break-gap);
  }

  .recipe section {
    gap: inherit;
  }

  .recipe .poster, 
  .recipe .matter {
    justify-content: space-between;
    gap: var(--center-gap);
  }

  .recipe .poster {
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .recipe .matter {
    flex-direction: row;
    align-items: flex-start;
  }

  .recipe .poster .illustration {
    --width: var(--illustration-width);
    --height: var(--illustration-height);
    width: auto;
    height: auto;
    min-width: var(--width);
    max-width: var(--width);
    min-height: var(--height);
    max-height: var(--height);
    overflow: hidden;
    border-radius: var(--corner);
  }

  .recipe .poster .illustration .dimension {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
  }

  .recipe .poster .illustration .layer {
    --size: calc(var(--height) * var(--scale));
    display: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;
    width: var(--size);
    height: var(--size);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + (0.06667in * var(--realign-x))), calc(-50% + (0.06667in * var(--realign-y))));
  }

  .recipe .poster .illustration:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background-color: var(--fill);
  }

  .recipe .banner {
    flex: unset;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.26667in;
    width: var(--banner-width);
    height: 100%;
  }

  .recipe .headlines {
    flex: unset;
    margin-top: 0;
  }

  .recipe .main-title {
    display: inline;
    font-weight: bold;
    font-size: 0.2in;
    line-height: 0.2in;
  }

  .recipe .main-title > span:after {
    content: " ";
  }

  .recipe .fun-title {
    font-size: 0.13333in;
    line-height: 0.16667in;
  }

  .recipe .quotation.open {
    margin-left: -0.05in;
  }

  .recipe .fun-title.long {
    font-size: 0.1in;
    line-height: 0.1375in;
  }

  .recipe .fun-title.long .quotation.open {
    margin-left: -0.0375in;
  }

  .recipe .headlines .characters {
    font-weight: 400;
  }

  .recipe .info {
    --item-extra-gap: 0.05in;
    font-feature-settings: "zero" off;
    font-size: 0.1in;
    line-height: 0.116667in;
    gap: 0.05in;
    width: 100%;
  }

  .recipe .info .items {
    gap: inherit;
  }

  .recipe .info .item {
    gap: 0.06667in;
  }

  .recipe .info .item.stamp {
    display: flex;
    width: 100%;
    margin-top: var(--item-extra-gap);
  }

  .recipe .info .item.stamp, 
  .recipe .info .item.stamp * {
    color: var(--page-text-fade);
  }

  .recipe .info .item .label {
    white-space: nowrap;
    min-width: calc(var(--width) * var(--units) * 0.5);
    max-width: calc(var(--width) * var(--units) * 0.5);
  }

  .recipe .item .value.tiered {
    display: inline;
  }

  .recipe .info .badge {
    font-weight: unset;
    gap: 0.05in;
    margin-bottom: var(--item-extra-gap);
  }

  .recipe .info .badge .pin {
    --size: 0.125in;
    --glyph-size: 0.125in;
    font-family: "MD IO", Helvetica, sans-serif !important;
    font-weight: inherit;
    background-color: var(--page-fill);
    border: 0.02in solid var(--page-text);
    color: var(--page-text);
    transform: translate(-0.005in, 0.005in);
  }

  .recipe .story {
    width: unset;
    min-width: var(--story-width);
    max-width: var(--story-width);
    gap: 0.13333in;
    font-size: 0.125in;
    line-height: 0.15625in;
  }

  .recipe .passage {
    flex-direction: column;
    gap: inherit;
  }

  .recipe .passage .photo {
    width: 100%;
    min-width: unset;
    max-width: unset;
    border-radius: calc(var(--corner) * 0.5);
  }

  .recipe .comment {
    border-width: 0.02083333in;
    border-right: 0;
    border-bottom: 0;
    border-color: var(--page-text);
    border-radius: var(--corner) 0 0 0;
    padding: 0.125in 0 0 0.125in;
  }

  .recipe .comment, 
  .recipe .comment p, 
  .recipe .comment b {
    color: var(--page-text-fade);
  }

  .recipe .comment a {
    color: var(--page-text);
  }

  .recipe .details {
    width: unset;
    min-width: var(--details-width);
    max-width: var(--details-width);
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--details-gap);
  }

  .recipe .details.extensive {
    flex-direction: column;
  }

  .recipe .details.extensive .ingredients {
    --gap-x: 0.4in;
    --gap-y: 0;
    width: 106.25%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap-x) var(--gap-y);
    break-after: page;
  }

  .recipe .details.extensive .ingredients .set {
    /* --width: calc((100% - var(--gap-x)) / 2);
    min-width: var(--width);
    max-width: var(--width); */
    flex: 1;
    width: min-content;
    min-width: unset;
    max-width: unset;
  }

  .recipe .details.extensive .directions {
    max-width: 2.75in;
  }

  /* .recipe .details.extensive .directions .set:first-child {
    break-after: page;
  } */

  .recipe .details.extensive .directions {
    margin-top: var(--page-break-gap);
  }

  .recipe .column {
    --gap: 0.2in;
    min-width: unset;
    max-width: unset;
  }

  .recipe .set {
    gap: 0.15in 0;
  }

  .recipe .list {
    gap: 0.06in 0;
  }

  .recipe .list .entry {
    --gap: 0.045in;
  }

  .recipe .title {
    font-feature-settings: "zero" off;
    font-weight: normal;
    font-size: 0.125in;
    line-height: 0.125in;
    margin-top: 0.005in;
  }

  .recipe .instruction .tag {
    font-feature-settings: "zero" off;
    font-weight: 600;
  }

  .recipe .comment, 
  .recipe .instruction .tag, 
  .recipe .instruction .text, 
  .recipe .instruction .text p, 
  .recipe .list .entry, 
  .recipe .list li, 
  .recipe .list p, 
  .recipe .directions .note {
    font-size: 0.0875in;
    line-height: 0.1083333in;
  }

  .recipe .note {
    margin-top: 0;
    padding-right: 0.26667in;
  }

  .recipe .ingredients .note {
    font-size: 0.075in;
    line-height: 0.09in;
  }

  .recipe .ingredients .entry .cue {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
  }

  .recipe .ingredients .entry .cue.raised {
    transform: translateY(-0.03in)
  }

  .recipe .ingredients .entry.tiered .cue {
    top: unset;
    bottom: 0;
  }

  .recipe .note.footnote .cue {
    transform: translate(0, -0.02in);
  }

  .recipe .instruction {
    font-style: italic;
  }

  .recipe .instruction .tag:before {
    display: none;
  }

  .recipe .ingredients .list .entry em {
    font-weight: 700;
  }

  .illustration[data-illusion="transmutation-from"], 
  .illustration[data-illusion="transmutation-to"] {
    animation: none;
  }

  .illustration[data-illusion="transmutation-from"] {
    opacity: 0;
  }

  .illustration[data-illusion="transmutation-to"] {
    opacity: 1;
  }

}

@page {
  size: letter; 
  margin: 0in;
}