@charset "UTF-8";
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
@import url("https://rsms.me/inter/inter.css");
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select {
  font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
/*
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}
*/
/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

/**
 * Address styling not present in IE 6/7/8/9.
 */

/**
 * Address margins set differently in IE 6/7.
 */
p,
pre {
  margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
pre {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

/**
 * Address `quotes` property not supported in Safari 4.
 */

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/**
 * Address margins set differently in IE 6/7.
 */
dl,
ol,
ul {
  margin: 0em 0;
}

dd {
  margin: 0 0 0 0px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

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

/**
 * Correct list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
.list:after, .list-item:after, header:after, .primary-nav:after, .wrapper:after, .main:after, footer:after, .slab:after, .mpu-wrap:after, .breaking-banner:after, .weather-banner:after, .numbered-list__item:after, ol:after, .banner:after, video-teaser:after, .article__timestamp:after  .recommended-stories .teaser:after{
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
*/
p, ol, ul {
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

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

li {
  list-style-type: none;
}

ul {
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  padding: 0px;
  font-weight: normal;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  margin: 0;
  text-wrap-style: pretty;
}

p {
  text-wrap-style: pretty;
}

.ads {
  -webkit-transform: scale(2, 2);
}

html {
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

:root {
  --bp1: 640px;
  --bp2: 768px;
  --bp3: 1280px;
}

:root {
  --z-modal: 9000;
  --z-overlay: 9000;
  --z-dropdown: 7000;
  --z-header: 6000;
  --z-footer: 5000;
  --z-pinned: 8000;
}

:root {
  --bpm: 6s;
  --p-center: 50% 50%;
  --p1: 50% 0%;
  --p2: 75% 6.7%;
  --p3: 93.3% 25%;
  --p4: 100% 50%;
  --p5: 93.3% 75%;
  --p6: 75% 93.3%;
  --p7: 50% 100%;
  --p8: 25% 93.3%;
  --p9: 6.7% 75%;
  --p10: 0% 50%;
  --p11: 6.7% 25%;
  --p12: 25% 6.7%;
  --tl: 0% 0%;
  --tr: 100% 0;
  --br: 100% 100%;
  --bl: 0 100%;
  --square: polygon(

  		var(--tl),
  		var(--tl),
  		var(--tl),

  		var(--tr),
  		var(--tr),
  		var(--tr),

  		var(--br),
  		var(--br),
  		var(--br),

  		var(--bl),
  		var(--bl),
  		var(--bl),
  );
  --maj-all: polygon(


  		var(--p1),

  		var(--p1),
  		var(--p3),
  		var(--p3),

  		var(--p5),

  		var(--p6),
  		var(--p6),

  		var(--p8),
  		var(--p8),

  		var(--p10),
  		var(--p10),

  		var(--p12)
  		);
  --center: polygon(

  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center),
  	var(--p-center)


  );
  --maj: polygon(

  	var(--p1),
  	var(--p1),
  	var(--p1),
  	var(--p1),
  	var(--p1),

  	var(--p5),
  	var(--p5),
  	var(--p5),

  	var(--p8),
  	var(--p8),
  	var(--p8),
  	var(--p8)

  );
  --min: polygon(

  	var(--p1),
  	var(--p1),
  	var(--p1),
  	var(--p1),
  	var(--p1),

  	var(--p4),
  	var(--p4),
  	var(--p4),

  	var(--p8),
  	var(--p8),
  	var(--p8),
  	var(--p8)

  );
  --min7: polygon(

  	var(--p1),
  	var(--p1),
  	var(--p1),
  	var(--p1),

  	var(--p4),
  	var(--p4),
  	var(--p4),

  	var(--p8),
  	var(--p8),

  	var(--p10),
  	var(--p10),
  	var(--p10)

  );
  --maj7: polygon(

  		var(--p1),
  		var(--p1),
  		var(--p1),
  		var(--p1),

  		var(--p5),
  		var(--p5),
  		var(--p5),

  		var(--p8),
  		var(--p8),

  		var(--p12),
  		var(--p12),
  		var(--p12)

  	);
  --maj6: polygon(

  	var(--p1),
  	var(--p5),
  	var(--p8),
  	var(--p10)

  );
  --maj9: polygon(

  	var(--p1),
  	var(--p1),

  	var(--p3),
  	var(--p3),

  	var(--p5),
  	var(--p5),
  	var(--p5),

  	var(--p8),
  	var(--p8),

  	var(--p12),
  	var(--p12),
  	var(--p12)

  );
  --maj11: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p6),
  	var(--p8),
  	var(--p12)

  );
  --maj13: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p6),
  	var(--p8),
  	var(--p10),
  	var(--p12)

  );
  /*

  			--min: polygon(

  				var(--p1), 
  				var(--p4), 
  				var(--p8), 
  				var(--p8) 

  			);
  */
  --min6: polygon(

  		var(--p1),
  		var(--p4),
  		var(--p8),
  		var(--p10)

  	);
  /*
  			--min7: polygon(

  					var(--p1), 
  					var(--p4), 
  					var(--p8), 
  					var(--p11) 

  				);
  */
  --min7b5: polygon(

  		var(--p1),
  		var(--p4),
  		var(--p7),
  		var(--p11)

  	);
  --min9: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p4),
  	var(--p8),
  	var(--p11)

  );
  --min11: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p4),
  	var(--p6),
  	var(--p8),
  	var(--p11)

  );
  --min13: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p4),
  	var(--p6),
  	var(--p8),
  	var(--p8),
  	var(--p9),
  	var(--p11)

  );
  --dom7: polygon(

  	var(--p1),
  	var(--p5),
  	var(--p8),
  	var(--p11)


  );
  --dom9: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p8),
  	var(--p11)

  );
  --dom69: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p8),
  	var(--p10)

  );
  --dom11: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p6),
  	var(--p8),
  	var(--p11)

  );
  --dom13: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p6),
  	var(--p8),
  	var(--p10),
  	var(--p11)

  );
  --sus2: polygon(

  	var(--p1),
  	var(--p3),
  	var(--p5),
  	var(--p8)
  );
  --sus4: polygon(

  	var(--p1),
  	var(--p5),
  	var(--p6),
  	var(--p8)
  );
  --dim: polygon(

  	var(--p1),
  	var(--p1),
  	var(--p1),

  	var(--p4),
  	var(--p4),
  	var(--p4),

  	var(--p7),
  	var(--p7),
  	var(--p7),
  	var(--p7),
  	var(--p7),
  	var(--p7)

  );
  --dim7: polygon(

  	var(--p1),
  	var(--p4),
  	var(--p7),
  	var(--p10)

  );
  --fmaj: polygon(

  			var(--fourth),
  			var(--sixth),
  			var(--first),
  			var(--first)
  		);
  --cmaj: polygon(

  		var(--first),
  		var(--third),
  		var(--fifth),
  		var(--fifth)
  	);
  --cmaj9: polygon(

  		var(--first),
  		var(--second),
  		var(--third),
  		var(--fifth),
  		var(--seventh)
  	);
  --bmin7: polygon(


  	var(--second),
  	var(--third),
  	var(--fifth),
  	var(--sixth),
  	var(--seventh)
  );
  --fmaj7: polygon(
  		var(--second),
  		var(--fourth),
  		var(--sixth),
  		var(--first),
  		var(--second)

  	);
  --cmaj: polygon(

  		var(--first),
  		var(--first),
  		var(--third),
  		var(--fifth),
  		var(--fifth)
  	);
  --gmaj: polygon(

  			var(--fifth),
  			var(--seventh),
  			var(--second),
  			var(--second)
  		);
  --cmin: polygon(

  		var(--first),
  		var(--minthird),
  		var(--fifth),
  		var(--fifth)
  		);
  --dmin7: polygon(var(--second),
  		var(--fifth),
  		var(--sixth),
  		var(--seventh)
  		);
  --full: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

:root {
  --sp0: 2rem;
  --sp-ratio: 1.25;
  --sp-1: calc(var(--sp0) / var(--sp-ratio));
  --sp-2: calc(var(--sp-1) / var(--sp-ratio));
  --sp-3: calc(var(--sp-2) / var(--sp-ratio));
  --sp-4: calc(var(--sp-3) / var(--sp-ratio));
  --sp-5: calc(var(--sp-4) / var(--sp-ratio));
  --sp-6: calc(var(--sp-5) / var(--sp-ratio));
  --sp-7: calc(var(--sp-6) / var(--sp-ratio));
  --sp-8: calc(var(--sp-7) / var(--sp-ratio));
  --sp1: calc(var(--sp0) * var(--sp-ratio));
  --sp2: calc(var(--sp1) * var(--sp-ratio));
  --sp3: calc(var(--sp2) * var(--sp-ratio));
  --sp4: calc(var(--sp3) * var(--sp-ratio));
  --sp5: calc(var(--sp4) * var(--sp-ratio));
  --sp6: calc(var(--sp5) * var(--sp-ratio));
  --sp7: calc(var(--sp6) * var(--sp-ratio));
  --sp8: calc(var(--sp7) * var(--sp-ratio));
  /*
  --sz0: 2rem;
  --sz-ratio: 1.25;

  --sz-1: calc(var(--sz0) / var(--sz-ratio));
  --sz-2: calc(var(--sz-1) / var(--sz-ratio));
  --sz-3: calc(var(--sz-2) / var(--sz-ratio));
  --sz-4: calc(var(--sz-3) / var(--sz-ratio));
  --sz-5: calc(var(--sz-4) / var(--sz-ratio));
  --sz-6: calc(var(--sz-5) / var(--sz-ratio));
  --sz-7: calc(var(--sz-6) / var(--sz-ratio));
  --sz-8: calc(var(--sz-7) / var(--sz-ratio));

  --sz1: calc(var(--sz0) * var(--sz-ratio));
  --sz2: calc(var(--sz1) * var(--sz-ratio));
  --sz3: calc(var(--sz2) * var(--sz-ratio));
  --sz4: calc(var(--sz3) * var(--sz-ratio));
  --sz5: calc(var(--sz4) * var(--sz-ratio));
  --sz6: calc(var(--sz5) * var(--sz-ratio));
  --sz7: calc(var(--sz6) * var(--sz-ratio));
  --sz8: calc(var(--sz7) * var(--sz-ratio));
  */
}

.spacescale {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
          align-items: baseline;
  gap: 1em;
  zoom: 0.8;
}
.spacescale * {
  color: var(--accent);
  background: var(--ink-100);
  border-left: 1px dashed var(--ink-200);
  position: relative;
  aspect-ratio: 1/1;
  border-right: 1px dashed var(--ink-200);
  display: -webkit-flex;
  display: flex;
}
.spacescale *:before {
  position: absolute;
  width: 100%;
  content: "";
  text-align: center;
  -webkit-align-self: center;
          align-self: center;
  height: 1px;
  background: var(--accent);
}
.spacescale *:after {
  position: absolute;
  width: 100%;
  text-align: center;
  -webkit-align-self: end;
          align-self: end;
  font-size: var(--fs-02);
}
.spacescale .sp-1 {
  width: var(--sp6);
  height: var(--sp6);
}
.spacescale .sp-1:after {
  content: "--sp6";
}
.spacescale .sp-2 {
  width: var(--sp5);
  height: var(--sp5);
}
.spacescale .sp-2:after {
  content: "--sp5";
}
.spacescale .sp-3 {
  width: var(--sp4);
  height: var(--sp4);
}
.spacescale .sp-3:after {
  content: "--sp4";
}
.spacescale .sp-4 {
  width: var(--sp3);
  height: var(--sp3);
}
.spacescale .sp-5 {
  width: var(--sp2);
  height: var(--sp2);
}
.spacescale .sp-6 {
  width: var(--sp1);
  height: var(--sp1);
}

@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("../assets/fonts/Inter-upright.var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: "Italic";
  src: url("../assets/fonts/Inter-italic.var.woff2") format("woff2");
}
:root {
  --display-font-family: "Inter var", sans-serif;
  --base-font-family: "Inter var", sans-serif;
  --fw-bold: 700;
  --fw-semi: 600;
  --fw-regular: 400;
  --fw-light: 250;
  --fs-01: clamp(0.51rem, -0.02vw + 0.52rem, 0.5rem);
  --fs-02: clamp(0.64rem, 0.05vw + 0.63rem, 0.67rem);
  --fs-03: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --fs-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --fs-04: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --fs-05: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --fs-06: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --fs-07: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --fs-08: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
  /*
    --fs-01: clamp(0.576rem, 0.5174rem + 0.2931vw, 0.768rem);
    --fs-02: clamp(0.72rem, 0.6467rem + 0.3664vw, 0.96rem);
    --fs-03: clamp(0.9rem, 0.8084rem + 0.458vw, 1.2rem);
    --fs-base: clamp(1.125rem, 1.0105rem + 0.5725vw, 1.5rem);
    --fs-04: clamp(1.4063rem, 1.2631rem + 0.7156vw, 1.875rem);
    --fs-05: clamp(1.7578rem, 1.5789rem + 0.8946vw, 2.3438rem);
    --fs-06: clamp(2.1973rem, 1.9736rem + 1.1182vw, 2.9297rem);
    --fs-07: clamp(2.7466rem, 2.467rem + 1.3978vw, 3.6621rem);
    --fs-08: clamp(3.4332rem, 3.0838rem + 1.7472vw, 4.5776rem);
  */
  /*
    --fs-01: clamp(0.768rem, 0.7969rem + -0.0338vw, 0.7901rem);
    --fs-02: clamp(0.8889rem, 0.8672rem + 0.1086vw, 0.96rem);
    --fs-03: clamp(1rem, 0.9389rem + 0.3053vw, 1.2rem);
    --fs-base: clamp(1.125rem, 1.0105rem + 0.5725vw, 1.5rem);
    --fs-04: clamp(1.2656rem, 1.0796rem + 0.9303vw, 1.875rem);
    --fs-05: clamp(1.4238rem, 1.1429rem + 1.4045vw, 2.3438rem);
    --fs-06: clamp(1.6018rem, 1.1963rem + 2.0273vw, 2.9297rem);
    --fs-07: clamp(1.802rem, 1.2341rem + 2.8398vw, 3.6621rem);
    --fs-08: clamp(2.0273rem, 1.2486rem + 3.8937vw, 4.5776rem);
  */
  --lh: 1;
  --lh-ratio: 1.1;
  --lh1: calc(var(--lh) * var(--lh-ratio));
  --lh2: calc(var(--lh1) * var(--lh-ratio));
  --lh3: calc(var(--lh2) * var(--lh-ratio));
  --lh4: calc(var(--lh3) * var(--lh-ratio));
  --lh5: calc(var(--lh4) * var(--lh-ratio));
}

body {
  --base-font-size: var(--fs-base);
  font-family: var(--base-font-family);
  font-weight: var(--fw-regular);
  font-size: var(--base-font-size);
  line-height: var(--lh5);
  font-variant: lining-nums;
  color: var(--body-text);
}

.listing__desc {
  font-weight: var(--fw-regular);
  line-height: var(--lh5);
}

.article__heading {
  font-weight: var(--fw-semi);
  line-height: var(--lh3);
}

.intro__title {
  font-weight: var(--fw-bold);
  line-height: var(--lh1);
  margin-bottom: 0.25em;
  /*     text-transform: uppercase; */
  letter-spacing: -0.025rem;
}

.article__label, .new__label, .card__label {
  font-weight: var(--fw-regular);
  line-height: var(--lh1);
}

.article__title, .text-cols h3, .contact__title, .card__title {
  font-family: var(--display-font-family);
  font-weight: var(--fw-semi);
  font-weight: var(--fw-bold);
  line-height: var(--lh2);
  letter-spacing: -0.025rem;
}

a {
  color: var(--link-color);
  line-height: 1;
}
a:hover {
  color: var(--link-color--hover);
}

.typescale {
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
          align-items: baseline;
  gap: 1em;
  -webkit-justify-content: start;
          justify-content: start;
}
.typescale * {
  background: var(--ink-100);
  padding: 0.25em 0.5em;
}
.typescale .fs-01 {
  font-size: var(--fs-01);
}
.typescale .fs-02 {
  font-size: var(--fs-02);
}
.typescale .fs-03 {
  font-size: var(--fs-03);
}
.typescale .fs-04 {
  font-size: var(--fs-04);
}
.typescale .fs-05 {
  font-size: var(--fs-05);
}
.typescale .fs-06 {
  font-size: var(--fs-06);
}

:root {
  --white:#FFF;
  --off-white: hsl(60deg 66% 93%);
  --black: #222;
  --red: hsla(0deg 50% 50% / 100%);
  --mustard: hsl(50deg 100% 50%);
  --light-blue: #7ad3eb;
  --dark-teal: #14252f;
  --orange: color-mix(in hsla, var(--red) 20%, var(--mustard));
  --slate-green: hsla(169deg 7% 47% / 100%);
  --slate-green-l: hsla(169deg 7% 47% / 15%);
  --slate-green-d: hsla(169deg 5% 30% / 100%);
  --button-surface: color-mix(in hsl, var(--accent) 70%, var(--mustard));
  --button-text: color-mix(in hsl, var(--accent) 15%, var(--white));
  --button-surface--hover: color-mix(in hsl, var(--accent) 100%, var(--white));
  --button-text--hover: color-mix(in hsl, var(--accent) 25%, var(--white));
  --grey1: #F5F5F5;
  --grey2: #EBEBEB;
  --grey3: #DCDCDC;
  --grey4: #B9B9B9;
  --grey5: #969696;
  --grey6: #737373;
  --grey7: #505050;
  --grey8: #323232;
  --link-base: 170deg 60% 90%;
  --link: hsla(var(--link-base) / 90%);
  --link-100: hsla(var(--link-base) / 5%);
  --link-200: hsla(var(--link-base) / 50%);
  --link-300: hsla(var(--link-base) / 70%);
  --link-color: var(--link);
  --link-color--hover: var(--a2);
  --link-color--active: var(--a2);
  --link-color-bg: var(--link-100);
  --link-color-bg--hover: var(--a2-100);
  --text-link-color: var(--link);
  --text-link-underline: var(--a2);
  --accent-base: 30deg 82% 53%;
  --accent-100: hsla(var(--accent-base) / 5%);
  --accent-200: hsla(var(--accent-base) / 70%);
  --accent-300: hsla(var(--accent-base) / 90%);
  --accent: hsla(var(--accent-base) / 100%);
  --a2-base: 45deg 80% 50%;
  --a2-100: hsla(var(--a2-base) / 5%);
  --a2-200: hsla(var(--a2-base) / 70%);
  --a2-300: hsla(var(--a2-base) / 90%);
  --a2: hsla(var(--a2-base) / 100%);
  --ink-base: 45deg 60% 92%;
  --ink-100: hsla(var(--ink-base) / 5%);
  --ink-200: hsla(var(--ink-base) / 50%);
  --ink-300: hsla(var(--ink-base) / 70%);
  --ink: hsla(var(--ink-base) / 90%);
  --card-title-color: var(--ink);
  --card-meta-color: var(--ink-200);
  --card-bg: transparent;
  --card-image-lock-up: polygon(2rem 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);
  --card-lock-up: polygon(0% 0, 100% 0, 100% calc(100% - 16%), calc(100% - 9%) 100%, 0 100%, 0 16%);
  --intro-lock-up: polygon(3rem 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%, 0 3rem);
  --lock-up-1: polygon(10% 0%, 100% 0%, 100% 100%, 00% 100%, 0% 25%);
  --article-image-lock-up: polygon(3rem 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%, 0 3rem);
  --slide-image-lock-up: polygon(9% 0, 100% 0, 100% calc(100% - 16%), calc(100% - 9%) 100%, 0 100%, 0 16%);
  --blockquote-clip-path: polygon(0 0, 100% 0rem, 100% calc(100% - 2rem), calc(0% + 3rem) calc(100% - 2rem), calc(0% + 3rem) calc(100% - 0rem), calc(0% + 7rem) calc(100% - 2rem), 0 calc(100% - 2rem));
  --answer-clip-path: polygon(0 0, 100% 0rem, 100% calc(100% - 2rem), calc(100% - 3rem) calc(100% - 3rem), calc(100% - 3rem) calc(100% - 0rem), calc(100% - 7rem) calc(100% - 2rem), 0 calc(100% - 2rem));
  --bg-grad--bright: linear-gradient(30deg, #2602ff7d 20%, #ff2121 90%), linear-gradient(332deg, #2200f1a1 20%, #ff7800 91%);
  --stripes:linear-gradient(45deg,
  var(--ink-100) 2em,
  transparent 2em, transparent 5em,
  var(--ink-100) 5em, var(--ink-100) 8em,
  transparent 8em, transparent 11em,
  var(--ink-100) 11em, var(--ink-100) 13em);
  --surface: 0deg 0% 0%;
  --surface-500: var(--slate-green-d);
  --surface-400: var(--slate-green);
  --surface-300: color-mix(in hsl, var(--slate-green) 80%, var(--accent));
  --surface-200: color-mix(in hsl, var(--a2) 50%, var(--accent));
  --surface-100: color-mix(in hsl, var(--a2-300) 20%, var(--ink));
  --border-1: 1px solid var(--ink-100);
  --border-2: 4px solid var(--ink-100);
  --border-3: 6px solid var(--ink-100);
  --blockquote-bg-color: var(--ink-100);
  --blockquote-text-color: var(--ink-300);
  --blockquote-mark-color: var(--ink-300);
  --blockquote-cite-color: var(--ink);
  --blockquote-link-color: var(--link-color);
  --border-1: 1px solid var(--ink-100);
  --border-2: 4px solid var(--ink-100);
  --border-3: 6px solid var(--ink-100);
  --button-text-color: var(--link);
  --button-bg-color: var(--link-100);
  --button-text-color-hover: var(--accent);
  --button-bg-color-hover: var(--accent-100);
  --button-p-text-color: var(--off-white);
  --button-p-bg-color: var(--red);
  --button-p-text-color-hover: var(--off-white);
  --button-p-bg-color-hover: var(--black);
  --body-bg: var(--black);
  --title-text: var(--ink);
  --body-text: var(--ink-300);
  --meta-text: var(--ink-200);
  --desc-text: var(--ink-300);
  --body-bg: var(--white);
  --ink-base: 240deg 50% 20%;
  --ink-100: hsla(var(--ink-base) / 5%);
  --ink-200: hsla(var(--ink-base) / 70%);
  --ink-300: hsla(var(--ink-base) / 90%);
  --ink: hsla(var(--ink-base) / 100%);
  --link-base: 240deg 100% 26%;
  --link-100: hsla(var(--link-base) / 10%);
  --link-200: hsla(var(--link-base) / 70%);
  --link-300: hsla(var(--link-base) / 90%);
  --link: hsla(var(--link-base) / 100%);
  --accent-base: 360deg 82% 53%;
  --accent-100: hsla(var(--accent-base) / 10%);
  --accent-200: hsla(var(--accent-base) / 70%);
  --accent-300: hsla(var(--accent-base) / 90%);
  --accent: hsla(var(--accent-base) / 100%);
  --a2-base: 249deg 100% 66%;
  --a2-100: hsla(var(--a2-base) / 10%);
  --a2-200: hsla(var(--a2-base) / 70%);
  --a2-300: hsla(var(--a2-base) / 90%);
  --a2: hsla(var(--a2-base) / 100%);
  --minus-base: 360deg 82% 53%;
  --minus-100: hsla(var(--minus-base) / 10%);
  --minus-200: hsla(var(--minus-base) / 70%);
  --minus-300: hsla(var(--minus-base) / 90%);
  --minus: hsla(var(--minus-base) / 100%);
  --plus-base: 120deg 80% 40%;
  --plus-100: hsla(var(--plus-base) / 10%);
  --plus-200: hsla(var(--plus-base) / 70%);
  --plus-300: hsla(var(--plus-base) / 90%);
  --plus: hsla(var(--plus-base) / 100%);
  --footer-bg: var(--ink-100);
  --intro-title: var(--ink);
  --header-bg: var(--body-bg);
  --title-text: var(--ink);
  --body-text: var(--ink-300);
  --meta-text: var(--ink-200);
  --desc-text: var(--ink-300);
  --em-bg: var(--ink-100);
  --em-bg-plus: var(--plus-100);
  --em-bg-minus: var(--minus-100);
}

.ms {
  --ink-base: 0deg 0% 0%;
  --ink-100: hsla(var(--ink-base) / 5%);
  --ink-200: hsla(var(--ink-base) / 70%);
  --ink-300: hsla(var(--ink-base) / 90%);
  --ink: hsla(var(--ink-base) / 100%);
}

.scale {
  display: grid;
  gap: 3em;
}

.colorscale {
  -webkit-align-items: baseline;
          align-items: baseline;
  gap: 1em;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.colorscale div {
  gap: 1rem;
  height: auto;
  display: -webkit-flex;
  display: flex;
}
.colorscale div * {
  -webkit-flex-direction: row;
          flex-direction: row;
  display: -webkit-flex;
  display: flex;
  position: relative;
  aspect-ratio: 1/1;
  height: var(--sp4);
  width: var(--sp4);
  gap: 1em;
}
.colorscale div *:after {
  background: var(--ink-200);
  color: var(--white);
  line-height: var(--lh1);
  content: "100";
  padding: 0.175em;
  position: relative;
  text-align: center;
  -webkit-align-self: end;
          align-self: end;
  font-size: var(--fs-02);
}
.colorscale .a2-100 {
  background: var(--a2-100);
}
.colorscale .a2-100:after {
  content: "--a2-100";
}
.colorscale .a2-200 {
  background: var(--a2-200);
}
.colorscale .a2-200:after {
  content: "--a2-200";
}
.colorscale .a2-300 {
  background: var(--a2-300);
}
.colorscale .a2-300:after {
  content: "--a2-300";
}
.colorscale .accent-100 {
  background: var(--accent-100);
}
.colorscale .accent-100:after {
  content: "--accent-100";
}
.colorscale .accent-200 {
  background: var(--accent-200);
}
.colorscale .accent-200:after {
  content: "--accent-200";
}
.colorscale .accent-300 {
  background: var(--accent-300);
}
.colorscale .accent-300:after {
  content: "--accent-300";
}
.colorscale .ink-100 {
  background: var(--ink-100);
}
.colorscale .ink-100:after {
  content: "--ink-100";
}
.colorscale .ink-200 {
  background: var(--ink-200);
}
.colorscale .ink-200:after {
  content: "--ink-200";
}
.colorscale .ink-300 {
  background: var(--ink-300);
}
.colorscale .ink-300:after {
  content: "--ink-300";
}

:root {
  --masthead-height: 3.2rem;
  --body-height: calc(100vh - var(--masthead-height));
  --scrollbar: var(--grey2);
  --scrollbar-bg: var(--white);
  --scancheck: blur(3px) contrast(1.2);
  /*
  --ao-1: 200ms;
  --ao-2: 400ms;
  --ao-3: 600ms;

  --dur0: .2s;
  --dur-ratio: 1.25;


  --dur1: calc(var(--dur0) * var(--dur-ratio));
  --dur2: calc(var(--dur1) * var(--dur-ratio));
  --dur3: calc(var(--dur2) * var(--dur-ratio));
  --dur4: calc(var(--dur3) * var(--dur-ratio));
  --dur5: calc(var(--dur4) * var(--dur-ratio));
  --dur6: calc(var(--dur5) * var(--dur-ratio));
  --dur7: calc(var(--dur6) * var(--dur-ratio));
  --dur8: calc(var(--dur7) * var(--dur-ratio));
  */
}

:root {
  --grid-2-col: repeat(2, 1fr);
  --grid-3-col: repeat(3, 1fr);
  --grid-4-col: repeat(4, 1fr);
  --grid-5-col: repeat(5, 1fr);
  --grid-maj: 2fr 2fr 1fr 2fr 2fr 2fr 1fr;
  --grid-min: 2fr 1fr 2fr 2fr 1fr 2fr 2fr;
  --section-density-4: var(--sp-4);
  --section-density-3: var(--sp-3);
  --section-density-2: var(--sp-2);
  --section-density-1: var(--sp-1);
  --section-density: var(--sp0);
  --section-density1: var(--sp1);
  --section-density2: var(--sp2);
  --section-density3: var(--sp3);
  --section-density4: var(--sp4);
  --section-padding-v: var(--sp0);
  --section-padding-h: var(--sp2);
  --section-padding-t: var(--sp0);
  --section-padding-r: var(--sp2);
  --section-padding-l: var(--sp0);
  --section-padding-b: var(--sp0);
  --section-padding: var(--sp0) var(--sp2);
}

/*
%major-layout{
	display: grid;

	@include bp(lrg-min) {
		grid-template-columns: var(--grid-maj);
	}
}


%minor-layout{
	display: grid;

	@include bp(lrg-min) {
		grid-template-columns: var(--min);
	}
}	
*/
sup {
  font-size: 0.33em;
  line-height: 1;
  top: 0;
  position: absolute;
  font-weight: var(--fw-regular);
}

.new, .timeline__record, .overlay {
  --section-density: var(--sp-2);
  gap: var(--section-density);
}
@media (min-width: 768px) {
  .new, .timeline__record, .overlay {
    --section-density: var(--sp-1);
  }
}
@media (min-width: 1080px) {
  .new, .timeline__record, .overlay {
    --section-density: var(--sp4);
  }
}

.overlay {
  --section-padding-v: var(--sp2);
  --section-padding-h: var(--sp-1);
  --section-padding: var(--section-padding-v) var(--section-padding-h);
  padding: var(--section-padding);
}
@media (min-width: 768px) {
  .overlay {
    --section-padding-v: var(--sp2);
    --section-padding-h: var(--sp0);
  }
}
@media (min-width: 1080px) {
  .overlay {
    --section-padding-v: var(--sp4);
    --section-padding-h: var(--sp0);
  }
}

.slab {
  --section-padding-v: var(--sp2);
  --section-padding-h: 0;
  --section-padding-slab: var(--section-padding-v) var(--section-padding-h);
  padding: var(--section-padding-slab);
}
@media (min-width: 768px) {
  .slab {
    --section-padding-v: var(--sp4);
    --section-padding-h: 0;
  }
}
@media (min-width: 1080px) {
  .slab {
    --section-padding-v: var(--sp4);
    --section-padding-h: 0;
  }
}

.blocking span {
  display: inline;
  background-color: var(--accent);
  color: var(--ink-300);
  line-height: 1;
  padding: 0 0.25em 0em 0.25em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.slide-list {
  height: calc(100vh - var(--masthead-height));
  overflow: scroll;
}

html {
  scroll-behavior: smooth;
}

body {
  display: grid;
  margin: auto;
  background: var(--body-bg);
}

a:focus-visible {
  outline-offset: 1em;
  outline-color: var(--a2-200);
  outline-style: solid;
  outline-width: 6px;
}

figure img {
  width: 100%;
}

button, .button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--button-text-color);
  background: var(--button-bg-color);
  border: 0;
  padding: 0.75em 1em;
}
button:hover, .button:hover {
  color: var(--button-text-color-hover);
  background: var(--button-bg-color-hover);
}
button.dl, .button.dl {
  /*
      align-self: end;
  	    justify-self: end;
  */
}
button.primary, .button.primary {
  --button-text-color: var(--button-p-text-color);
  --button-bg-color: var(--button-p-bg-color);
  --button-bg-color-hover: var(--button-p-bg-color-hover);
  --button-text-color-hover: var(--button-p--text-color-hover) ;
}

.burger svg {
  stroke-width: 4px;
  stroke: var(--ink);
}

.sticky {
  display: none;
}
@media (min-width: 1080px) {
  .sticky {
    display: grid;
    grid-column: 5/span 2;
  }
}

.overlay {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 50000;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  display: none;
  background: #222222d6;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.overlay.open {
  display: -webkit-flex;
  display: flex;
}

header {
  background: var(--body-bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: none;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
  height: var(--masthead-height);
}
@media (min-width: 768px) {
  header {
    display: grid;
  }
}

.section__title {
  text-wrap-style: pretty;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  border-top: var(--border-3);
  font-size: var(--fs-04);
  color: var(--ink);
}
.section.intro .intro__text {
  font-size: var(--fs1);
  gap: var(--section-density);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gallery figure {
  aspect-ratio: 1/1;
  height: 100%;
  margin: 0;
  width: 100%;
  -webkit-clip-path: var(--maj-all);
          clip-path: var(--maj-all);
  transition: all 0.5s;
}
.gallery figure:hover {
  -webkit-clip-path: var(--square);
          clip-path: var(--square);
  transition: all 0.5s;
}
.gallery figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slide-glide {
  grid-area: page-content;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 70vh auto;
}
.slide-glide .slide-list {
  grid-area: initial !important;
  height: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
  overflow-y: none;
  display: flex;
  grid-row: 1/span 1;
  grid-column: 1/span 1;
}
.slide-glide .side-image {
  display: -webkit-flex;
  display: flex;
  position: relative;
  grid-row: 1/span 2;
  grid-column: 2/span 1;
}

.slide-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  overflow-y: scroll;
  display: flex;
  counter-reset: section;
}
@media (min-width: 768px) {
  .slide-list--staggered .slab:nth-child(2n) .slide {
    grid-template-columns: 2fr 3fr;
    grid-template-areas: "image text";
  }
}
.slide-list--user-stories .slide__text.intro {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-align-items: start;
          align-items: start;
}
.slide-list--user-stories .slide__text.intro:after {
  content: none;
}
.slide-list--user-stories .slide__text {
  padding: 2em;
  background: #eaeaea;
  border-radius: 0.5em;
  box-shadow: -1px 3px 3px #60606054;
}
.slide-list--user-stories .slide__text .slide__label {
  font-size: 1.2em;
}
.slide-list--user-stories .slide__text .slide__title {
  letter-spacing: -0.02em;
}
.slide-list--user-stories .slide__text:after {
  counter-increment: section;
  content: "AFD-000" counter(section);
  font-size: 1.2em;
  line-height: 1;
  opacity: 1;
  margin-top: 1em;
}
.slide-list .slab {
  padding: 0;
  position: relative;
  display: grid;
  scroll-snap-align: start;
  scroll-margin: 0;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: center;
          align-content: center;
}
.slide-list .slab:last-child {
  background: none;
}
.slide-list .slab:nth-child(odd) {
  background: var(--ink-100);
}
.slide-list .slide {
  overflow: hidden;
  height: var(--body-height);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "image" "text";
  scroll-snap-align: start;
  scroll-margin: 0;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: center;
          align-content: center;
}
@media (min-width: 768px) {
  .slide-list .slide {
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "text image";
  }
}
.slide-list .slide__visual {
  margin: auto;
  -webkit-align-content: center;
          align-content: center;
  grid-area: image;
  /* 		height: 100%; */
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1/1;
}
.slide-list .slide__text {
  grid-area: text;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: 0.5em;
}
.slide-list .slide__title {
  text-wrap-style: pretty;
  color: var(--title-text);
  font-size: var(--fs-07);
  font-weight: var(--fw-semi);
  line-height: var(--lh1);
}
.slide-list .slide__desc {
  color: var(--body-text);
  font-size: var(--fs-04);
  font-weight: var(--fw-regular);
  line-height: var(--lh3);
  text-wrap-style: pretty;
}

.intro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "text" "image";
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: center;
          align-content: center;
  gap: 3em;
}
@media (min-width: 768px) {
  .intro {
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "text image";
  }
  .article .intro {
    grid-template-columns: 1fr 4fr;
  }
}
.intro__visual {
  grid-area: image;
  width: 100%;
  /* 		aspect-ratio: 3/3; */
  -o-object-fit: contain;
     object-fit: contain;
  /* 		clip-path: polygon(5rem 0, 100% 0, 100% calc(100% - 5rem), calc(100% - 5rem) 100%, 0 100%, 0 5rem); */
  height: 100%;
}
.intro__visual .button {
  -webkit-align-self: flex-end;
          align-self: flex-end;
  display: -webkit-flex;
  display: flex;
}
@media (min-width: 768px) {
  .intro__visual .button {
    justify-self: center;
  }
}
.intro__text {
  grid-area: text;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: 1.5em;
}
.intro__label {
  color: var(--desc-text);
  font-size: var(--fs-04);
  font-weight: var(--fw-regular);
  line-height: var(--lh1);
}
.intro__title {
  color: var(--title-text);
  font-size: var(--fs-07);
  margin-bottom: 0;
}
.intro__desc {
  max-width: 65ch;
  color: var(--desc-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh3);
}
.intro__strap {
  max-width: 65ch;
  color: var(--desc-text);
  font-size: var(--fs-05);
  font-weight: var(--fw-regular);
  line-height: var(--lh3);
}
.intro:nth-child(odd) .slide__visual {
  -webkit-order: 3;
          order: 3;
}
@media (min-width: 768px) {
  .intro--sale {
    grid-template-columns: 2fr 3fr;
    -webkit-align-items: start;
            align-items: start;
    gap: var(--section-density);
  }
}
@media (min-width: 768px) {
  .intro--new {
    grid-template-columns: 2fr 2fr;
    grid-template-areas: "text image";
    -webkit-align-items: center;
            align-items: center;
    -webkit-align-content: center;
            align-content: center;
    overflow: hidden;
    margin-top: 0rem;
    height: 70vh;
  }
  .intro--new figure.clipped {
    padding: 3rem;
    margin: 3rem;
    aspect-ratio: 1/1;
    width: auto;
    margin-right: -10rem;
  }
}

/* Index and related items pages */
.card {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding: var(--section-density-4) 0;
  transition: all 0.2s ease-in;
  border-top: var(--border-3);
  height: var(--body-height);
}
.card__visual {
  aspect-ratio: 16/9;
  display: -webkit-flex;
  display: flex;
  background: var(--grey3);
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-order: 1;
          order: 1;
}
.card:hover {
  transition: all 0.2s ease-in;
  /*
     .card__text{ 

  	   &:before {
  			content: '\25BA';
  		    position: absolute;
  		    bottom: 0;
  		    font-size: 2em;

  		    line-height: 1;

  		    	@include bp(mid-min) 
  		    	{font-size: 5em;}

  				}
  	  }
  */
}
.card:hover img {
  transition: all 0.2s ease-in;
  border: 1em solid var(--link-color--hover);
}
.card__text {
  position: relative;
  top: 0;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding: var(--section-density-2) 0;
  line-height: var(--lh3);
  gap: 1rem;
}
.card__label {
  font-size: var(--fs-03);
  color: var(--body-text);
}
.card__flag {
  position: absolute;
  font-size: var(--fs-03);
  right: 0;
  font-weight: var(--fw-regular);
  background: var(--plus-100);
  padding: 0.25em 0.5em;
  border-radius: 1em;
}
.card__title {
  font-size: var(--fs-05);
}
.card p {
  opacity: 0.9;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh3);
  color: var(--body-text);
}

svg.heads {
  width: 100%;
  stroke-width: 1px;
  overflow: hidden;
  stroke: var(--grey8);
  stroke-linejoin: round;
  transition: all 0.2s;
}
svg.heads .left-head {
  stroke: #4bdec3;
}
svg.heads .right-head {
  stroke: var(--a2);
}
svg.heads .bulb {
  transition: all 0.1s;
  stroke: var(--mustard);
}
svg.heads .screw, svg.heads .contact {
  stroke: var(--grey4);
}
svg.heads .bulb-glow {
  stroke: var(--mustard);
}
svg.heads:hover .bulb-glow {
  transition: all 0.2s;
  stroke: var(--mustard);
  stroke-width: 3rem;
}
svg.heads:hover .bulb {
  fill: var(--mustard);
}

.contact {
  position: relative;
  display: grid;
  gap: 3em;
  grid-template-columns: 1fr;
  grid-template-areas: "text" "image" "links";
  text-align: center;
  padding: 3rem 0;
  grid-template-rows: auto 40vh auto;
}
.contact--no-img {
  grid-template-columns: 1fr;
  grid-template-areas: "text" "links";
  -webkit-align-content: center;
          align-content: center;
  -webkit-align-items: center;
          align-items: center;
  grid-template-rows: auto;
}
@media (min-width: 768px) {
  .contact {
    grid-template-columns: 4fr 2fr;
    grid-template-areas: "text image" "links image";
    -webkit-align-items: baseline;
            align-items: baseline;
    grid-template-rows: auto;
    text-align: start;
  }
  .article .contact {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "image" "links";
  }
}
.contact__visual {
  grid-area: image;
  height: 100%;
  margin: auto;
}
.contact__visual svg.heads {
  height: 100%;
  width: auto;
}
.contact__visual .chord-holder {
  height: 100%;
  width: auto;
}
.contact__text {
  grid-area: text;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: 1.5em;
  -webkit-align-items: left;
          align-items: left;
  align-self: end;
}
.contact__label {
  color: var(--desc-text);
  font-size: var(--fs-04);
  font-weight: var(--fw-regular);
  line-height: var(--lh1);
}
.contact__title {
  font-size: var(--fs-06);
  margin-bottom: 0.25em;
}
.contact__desc {
  color: var(--desc-text);
  font-size: var(--fs-04);
  font-weight: var(--fw-regular);
  line-height: var(--lh3);
}
.contact:nth-child(odd) .slide__visual {
  -webkit-order: 3;
          order: 3;
}
.contact .l-mo--list {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  justify-self: center;
}
@media (min-width: 768px) {
  .contact .l-mo--list {
    justify-self: start;
  }
}

.l-mo {
  display: -webkit-flex;
  display: flex;
  gap: 1em;
  -webkit-flex-direction: column;
          flex-direction: column;
  color: var(--link);
  font-size: var(--fs-base);
  -webkit-justify-content: center;
          justify-content: center;
  padding: 0.75em 1em;
  border-radius: 0rem;
  -webkit-flex-direction: row;
          flex-direction: row;
  background: var(--link-color-bg);
  transition: all 0.2s ease-in;
}
.l-mo--list {
  display: -webkit-flex;
  display: flex;
  gap: 2em;
  grid-area: links;
  justify-self: center;
}
@media (min-width: 1080px) {
  .l-mo--list {
    justify-self: start;
  }
}
.l-mo__title {
  text-align: center;
  color: var(--link-color);
  text-decoration: none;
}
.l-mo__img {
  height: 1em;
  width: auto;
  max-width: 60px;
  fill: var(--ink);
}
.l-mo:hover {
  border-radius: 3rem;
  background: var(--link-color-bg--hover);
}
.l-mo:hover .l-mo__title {
  color: var(--link-color--hover);
}

.timeline .slab {
  padding: 0;
  padding-bottom: var(--fs-08);
}
.timeline__record {
  /* 	@extend %section-padding--slab; */
  border-top: var(--border-2);
  gap: var(--section-density2);
  display: grid;
  position: relative;
  padding-top: var(--fs-06);
}
@media (min-width: 1080px) {
  .timeline__record {
    grid-template-columns: 250px 65ch 1fr;
    -webkit-align-items: baseline;
            align-items: baseline;
  }
}
.timeline__desc {
  max-width: 60ch;
}
.timeline__role {
  position: relative;
  line-height: var(--lh1);
  font-size: var(--fs-base);
  -webkit-order: -1;
          order: -1;
}
.timeline__date {
  -webkit-order: 3;
          order: 3;
  position: relative;
  font-size: var(--fs-base);
  color: var(--meta-text);
  line-height: var(--lh1);
  font-weight: var(--fw-light);
  /*
  		 &:before {
  		    border-radius: 1em;
  		    position: absolute;
  		    top: 0;
  		    right: -3em;
  		    content: "";
  		    width: 1em;
  		    height: 1em;		 
  		}
  */
}
.timeline__meta {
  font-size: var(--fs-03);
  color: var(--meta-text);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  gap: var(--sp-2);
  padding-bottom: 1em;
  z-index: 1;
  padding-bottom: 1rem;
}
.timeline__logo {
  position: relative;
  width: auto;
  height: var(--sp-1);
}
.timeline p {
  margin-bottom: 0.75em;
}
.timeline h4 {
  color: var(--ink);
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: var(--fw-bold);
}

.case-list {
  display: grid;
  gap: 3em 0;
  gap: 10vh 0;
  /*
  .col1 {
  		border: 0;
  		grid-row: 1 / span all;
  		grid-column: 1;

  		@include bp(mid-min) {
  			position: sticky;
  			top: 3em;
  			padding-top: var(--section-density-2);

  		}
  	}
  */
  /*
  .section__title {
  		border: 0;

  		&:before{
  			font-weight: var(--fw-bold);
  		    color: var(--ink-200);
  		    margin-left: -.25em;
  		    padding: 0 .5rem;
  		    content: '//';
  		    display: inline;
  		}

  }
  */
}
@media (min-width: 1080px) {
  .case-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .case-list.full {
    grid-template-columns: 1fr;
    gap: 3em 0;
  }
}
.case-list .card {
  gap: 2em;
  border-top: 6px solid var(--ink-100);
  grid-column: 1/span all;
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
  position: -webkit-sticky;
  position: sticky;
  top: var(--masthead-height);
  background: var(--body-bg);
}
.case-list .card__visual {
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .case-list .card {
    gap: 6em;
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-column: 2/span 1;
    padding: var(--section-density4) 0;
    padding-right: 0;
  }
  .case-list .card__visual {
    -webkit-flex: 0 0 60%;
            flex: 0 0 60%;
  }
}
.case-list .card--fwd {
  height: auto;
  -webkit-align-items: start;
          align-items: start;
  grid-template-columns: 1fr;
}
.case-list .card--fwd .card__text {
  background: var(--ink-100);
  padding: 3rem;
  -webkit-justify-content: center;
          justify-content: center;
  height: auto;
}
@media (min-width: 768px) {
  .case-list .card--fwd .card__text:before {
    content: "►";
    position: absolute;
    top: calc(50% - .5em);
    right: 1em;
    line-height: 1;
    font-size: 3em;
  }
}

.brand-list {
  gap: 2em;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
          justify-content: center;
}
@media (min-width: 1080px) {
  .brand-list {
    -webkit-justify-content: space-evenly;
            justify-content: space-evenly;
  }
}
.brand-list__logo {
  position: relative;
  width: auto;
  height: var(--sp0);
}
@media (min-width: 1080px) {
  .article--home .brand-list {
    -webkit-justify-content: space-evenly;
            justify-content: space-evenly;
  }
}

.skills {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-4);
}
.timeline .skills {
  -webkit-flex-direction: column;
          flex-direction: column;
  font-size: var(--fs-03);
  line-height: 1;
  color: var(--ink-300);
}

.related {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: var(--section-density-4);
}
.related__title {
  color: var(--ink);
  font-weight: var(--fw-semi);
  line-height: var(--lh2);
}

.related-list {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: 0 1em;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.related-list__item {
  position: relative;
  font-size: var(--fs-03);
  font-weight: var(--fw-light);
  line-height: var(--lh3);
}
.related-list__item:before {
  content: "-";
  position: absolute;
  left: -1em;
  top: 0;
}

.related-list {
  display: -webkit-flex;
  display: flex;
  gap: 0.5em;
  margin-bottom: 1rem;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.related-list__item {
  padding: 0.25em;
  line-height: 1;
  -webkit-clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - .25rem), calc(100% - .25rem) 100%, 0 100%, 0 0.25rem);
          clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - .25rem), calc(100% - .25rem) 100%, 0 100%, 0 0.25rem);
  color: var(--ink-300);
  background: var(--ink-100);
}

/*  Main Navigation */
nav {
  display: -webkit-flex;
  display: flex;
  gap: 1em;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
nav .burger line {
  stroke-width: 1px;
}
nav a.brand {
  -webkit-align-items: center;
          align-items: center;
  margin-left: -0.25rem;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-flex;
  display: flex;
  gap: 0.5rem;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  line-height: 1;
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
}
nav a.brand svg {
  height: 1.75rem;
  width: 1.75rem;
}
nav a.brand .brand__name {
  font-weight: var(--fw-semi);
  color: var(--ink);
}
nav a.brand:hover {
  color: transparent;
}
nav a.brand:hover:after {
  display: none;
}
nav ul.nav-links {
  display: none;
}
nav ul.nav-links.open {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  font-size: var(--fs0);
  -webkit-align-items: initial;
          align-items: initial;
  gap: 1px;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
  position: absolute;
  top: var(--masthead-height);
  left: 0;
  background: var(--body-bg);
}
nav ul.nav-links.open li {
  display: -webkit-flex;
  display: flex;
  line-height: 1;
  width: 100%;
}
nav ul.nav-links.open li:nth-child(3) {
  display: none;
}
nav ul.nav-links.open li a {
  font-size: var(--fs-base);
  background: var(--ink-100);
  width: 100%;
  position: relative;
  color: var(--link-color);
  padding: var(--sp-2) var(--sp0);
}
nav ul.nav-links.open li a:hover {
  background: var(--link-color);
  color: var(--body-bg);
}
@media (min-width: 768px) {
  nav ul.nav-links {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-align-self: self-start;
            align-self: self-start;
    font-size: var(--fs0);
    gap: var(--section-density-1);
    -webkit-align-self: center;
            align-self: center;
  }
  nav ul.nav-links li {
    line-height: 1;
    font-size: var(--fs-03);
  }
  nav ul.nav-links li:nth-child(3) {
    display: none;
  }
  nav ul.nav-links li a {
    position: relative;
    color: var(--link-color);
    /*
    			&.active:after {
    			    content: "";
    			    position: absolute;
    			    bottom: -.75em;
    			    height: 1px;
    			    width: 100%;
    			    background: var(--accent);
    			    left: 0;
    			}
    */
  }
  nav ul.nav-links li a:hover {
    color: var(--link-color--hover);
  }
  nav ul.nav-links li a:hover:after {
    content: "";
    position: absolute;
    bottom: -1.5em;
    height: 5px;
    width: 100%;
    background: var(--link-color--hover);
    left: 0;
    transition: all var(--dur-01);
  }
  nav ul.nav-links li a.active {
    color: var(--link-color--hover);
  }
  nav ul.nav-links li a.active:after {
    content: "";
    position: absolute;
    bottom: -1.5em;
    height: 5px;
    width: 100%;
    background: var(--link-color--hover);
    left: 0;
    transition: all var(--dur-01);
  }
}
@media (min-width: 768px) {
  nav .burger {
    display: none;
  }
}

/*  Experirmental Layouts */
.new {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: var(--section-density);
  padding-top: var(--section-density);
  gap: var(--section-density);
  border-top: var(--border-l);
}
@media (min-width: 768px) {
  .new {
    grid-template-columns: 1fr 1fr;
    padding-bottom: var(--section-density);
    padding-top: var(--section-density);
    gap: var(--section-density);
  }
}
.new__label {
  font-size: var(--fs0);
}

.listing {
  display: grid;
  /*
  .frame {
      position: relative;
      width: 100%;
  	aspect-ratio: 3/4;
      background: linear-gradient(
  45deg
  , hsla(0deg, 0%, 0%, 1) 30%, hsla(0deg, 0%, 0%, .8%) 40%);
      box-shadow: -3px 7px 4px -5px rgba(0, 0, 0, .1);
  }
  .mat {
    position: absolute;
    background: white;
    top: 3.0303%; bottom: 3.0303%; left: 2.5%; right: 2.5%;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0, .1) inset;
  }

  .art {
    position: absolute;
    top: 16.129%; bottom: 16.129%; left: 13.158%; right: 13.158%;
  }

  .art img {
    width: 100%;
  }
  */
}
.listing__text {
  -webkit-order: 1;
          order: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}
@media (min-width: 1080px) {
  .listing__text {
    -webkit-order: 0;
            order: 0;
    grid-column: 1/span 1;
    grid-column: 2/span 1;
  }
}
.listing__desc {
  font-size: var(--fs-base);
}
.listing .art:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5) inset;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) inset, -1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
}

/*Album ideas */
.album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-density);
}
@media (min-width: 768px) {
  .album-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.album-grid .cover {
  grid-column: unset;
  overflow: hidden;
}

.cover {
  grid-column: 4/span 2;
  --title-font: "";
  --title-color: ;
  --band-font: "";
  --band-color: ;
  --label-font: "";
  --label-color: "";
}

.cover__text {
  position: absolute;
  z-index: 400;
}

.rec-1 .cover__text {
  container-type: inline-size;
  mix-blend-mode: plus-lighter;
  text-shadow: 0em 0em 3em #ffffff;
  padding: 0.2em;
  -webkit-backdrop-filter: saturate(4.5) blur(2px);
  backdrop-filter: saturate(0.5) blur(px);
  text-transform: uppercase;
  line-height: 1;
  color: #ffffffa6;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.rec-1 .cover__label {
  font-size: 4cqw;
  font-weight: 200;
}
.rec-1 .cover__title {
  font-weight: 800;
  font-size: 24cqw;
}
.rec-1 .cover__band {
  font-size: 4cqw;
  font-weight: 200;
}
.rec-1 .cover .cover__img {
  position: absolute;
  z-index: 400;
}

.rec-2 .cover__text {
  container-type: inline-size;
  grid-template-rows: 1fr 2fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  display: grid;
  width: 100%;
  height: 100%;
  gap: 1em;
  padding: 1em;
  background: #ffefb2d9;
  mix-blend-mode: multiply;
}
.rec-2 .cover__label {
  font-size: 2cqw;
  font-weight: 400;
}
.rec-2 .cover__title {
  grid-column: 2/span 1;
  padding: 1em;
  text-align: center;
  grid-row: 1/span 4;
  grid-column: 1/span 4;
  /* font-weight: 800; */
  font-size: 6cqw;
  font-family: "Parisienne";
  color: #b2855b;
}
.rec-2 .cover__band {
  text-align: center;
  grid-row: 1/span 1;
  grid-column: 1/span 4;
  font-size: 3cqw;
  font-weight: 100;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.rec-2 .cover__img {
  background: white;
  -o-object-position: top;
     object-position: top;
}

.rec-3 .cover__text {
  container-type: inline-size;
  width: 100%;
  display: grid;
  gap: 1em;
  padding: 1em;
}
.rec-3 .cover__title {
  font-size: 2cqw;
  color: #ccc;
}
.rec-3 .cover__band {
  text-align: center;
  grid-row: 1/span 1;
  grid-column: 1/span 4;
  font-size: 3cqw;
  font-weight: 100;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.rec-3 .cover__img {
  background: white;
}

.rec-4 .cover {
  container-type: inline-size;
}
.rec-4 .cover__text {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--grid-maj);
  grid-template-rows: var(--grid-maj);
  gap: 0;
  width: 100%;
  height: 100%;
  font-family: "Saira Extra Condensed", sans-serif;
  text-transform: uppercase;
  padding: 0.5rem;
  mix-blend-mode: color-dodge;
  background: #70702a;
}
.rec-4 .cover__label {
  font-size: 3cqw;
  color: #fff;
  grid-column: 1/span 1;
  padding: 0;
  grid-row: 7;
  align-self: end;
}
.rec-4 .cover__title {
  padding-left: 0.1em;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(5px);
  color: #fdee00;
  line-height: 1;
  font-size: 15cqw;
  grid-column: 1/span all;
  grid-row: 1/span 1;
  /* background: #bb92ffa1; */
  text-shadow: -1px 1px #ccc, 1px 2px #ffffff80;
}
.rec-4 .cover__band {
  /* backdrop-filter: blur(5px); */
  /* backdrop-filter: blur(5px); */
  color: #fff;
  line-height: 1;
  font-size: 16cqw;
  grid-column: 1/span 1;
  grid-row: 2/span 6;
  /* background: #c68245b0; */
  /* display: none; */
  line-height: 75%;
  text-shadow: 1px 2px 2px var(--orange);
  font-weight: 200;
}
.rec-5 .block-1 {
  background: #74b1ff1f;
  grid-column: 2/span 3;
  grid-row: 2/span 5;
}
.rec-5 .block-2 {
  background: #cccccc73;
  grid-column: 4/span 1;
  grid-row: 7/span 1;
}
.rec-5 .block-3 {
  background: #3c61671c;
  grid-column: 4/span 1;
  grid-row: 7/span 1;
}
.rec-5 .block-4 {
  background: #990000;
  grid-column: 5/span 1;
  grid-row: 7/span 1;
}
.rec-5 .block-5 {
  box-shadow: inset 1px 1px 6px #454141, inset 0px 2px 2px #ffffff78, inset 0px -1px 20px #454141, 0px -1px 60px #454141;
  position: absolute;
  border-radius: 100%;
  background: #766161;
  /* grid-column: 5/span 1; */
  /* grid-row: 7/span 1; */
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  mix-blend-mode: overlay;
}
.rec-5 .block-6 {
  background: #3c61671c;
  border-radius: 50px;
}
.rec-5 .block-7 {
  background: #474747;
}
.rec-5 .cover {
  container-type: inline-size;
}
.rec-5 .cover__text {
  box-shadow: inset 0px 0px 20px #73737340;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--grid-maj);
  grid-template-rows: var(--grid-maj);
  gap: 1em;
  width: 100%;
  height: 100%;
  font-family: "Saira Extra Condensed", sans-serif;
  text-transform: uppercase;
  padding: 2rem;
  /* mix-blend-mode: saturation; */
  background: #ebebd5;
}
.rec-5 .cover__label {
  color: #eeeccf;
  line-height: 1;
  font-size: 5cqw;
  grid-column: 1/span 5;
  grid-row: 1/span 1;
  background: #dc0000cc;
  align-self: center;
}
.rec-5 .cover__title {
  align-self: center;
  z-index: 2;
  color: #fdee00;
  line-height: 90%;
  font-size: 15cqw;
  grid-column: 1/span 5;
  grid-row: 4/span 2;
  padding: 0 0 0 0.1em;
  background: #eaa40e;
}
.rec-5 .cover__band {
  color: #1c4b55d9;
  line-height: 1;
  font-size: 10cqw;
  grid-column: 2/span 5;
  grid-row: 6/span 1;
  align-self: center;
  z-index: 4;
  width: auto;
}
.rec-6 .cover {
  container-type: inline-size;
}
.rec-6 .cover__text {
  position: relative;
  container-type: inline-size;
  display: grid;
  gap: 1em;
  width: 100%;
  height: 100%;
  font-family: "Saira Extra Condensed", sans-serif;
  text-transform: uppercase;
}
.rec-6 .cover__label {
  color: #eeeccf;
  line-height: 1;
  font-size: 5cqw;
  grid-column: 1/span 5;
  grid-row: 1/span 1;
  background: #dc0000cc;
  align-self: center;
}
.rec-6 .cover__title {
  align-self: center;
  z-index: 2;
  color: #fdee00;
  line-height: 90%;
  font-size: 15cqw;
  grid-column: 1/span 5;
  grid-row: 4/span 2;
  padding: 0 0 0 0.1em;
  background: #eaa40e;
}
.rec-6 .cover__band {
  color: #1c4b55d9;
  line-height: 1;
  font-size: 10cqw;
  grid-column: 2/span 5;
  grid-row: 6/span 1;
  align-self: center;
  z-index: 4;
  width: auto;
}
.rec-6 .cover__img {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.cover {
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  border: 0;
  aspect-ratio: 1/1;
}
.cover__text {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.cover__img {
  width: 100%;
  position: absolute;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Animation hooks */
.h-split {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.h-split img {
  aspect-ratio: 10/4;
  -o-object-fit: cover;
     object-fit: cover;
}

.text-cols h3 {
  margin-bottom: 1em;
  font-size: var(--fs-04);
  line-height: var(--lh5);
}
.text-cols blockquote {
  margin-bottom: 1em;
}
@media (min-width: 768px) {
  .text-cols {
    display: block;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: var(--section-density4);
       -moz-column-gap: var(--section-density4);
            column-gap: var(--section-density4);
  }
}

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-density);
}
.card-list .card {
  padding: 0;
  border: none;
}
@media (min-width: 768px) {
  .card-list--2 {
    display: grid;
    grid-template-columns: var(--grid-2-col);
  }
}
@media (min-width: 768px) {
  .card-list--3 {
    display: grid;
    grid-template-columns: var(--grid-3-col);
  }
}
@media (min-width: 768px) {
  .card-list--4 {
    display: grid;
    grid-template-columns: var(--grid-4-col);
  }
}
.card-list--4 .card__title {
  font-size: var(--fs-base);
}
@media (min-width: 768px) {
  .card-list--5 {
    display: grid;
    grid-template-columns: var(--grid-5-col);
  }
  .card-list--5 .card__title {
    font-size: var(--fs-base);
  }
}
.card-list.stagger {
  background: #c00;
}
.card-list.stagger .card:nth-child(2n) {
  gap: var(--section-density);
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.l-ex > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s list infinite linear;
          animation: 1s list infinite linear;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.l-ex > *:nth-child(1) {
  -webkit-animation-delay: 0s !important;
          animation-delay: 0s !important;
}
.l-ex > *:nth-child(2) {
  -webkit-animation-delay: 0.05s !important;
          animation-delay: 0.05s !important;
}
.l-ex > *:nth-child(3) {
  -webkit-animation-delay: 0.1s !important;
          animation-delay: 0.1s !important;
}
.l-ex > *:nth-child(4) {
  -webkit-animation-delay: 0.15s !important;
          animation-delay: 0.15s !important;
}
.l-ex > *:nth-child(5) {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}

.l-ex--list {
  width: 100%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.l-ex--list > * {
  opacity: 1;
  width: 100%;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s a-list ease-out;
          animation: 1s a-list ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.l-ex--list > *:nth-child(1) {
  -webkit-animation-delay: 0s !important;
          animation-delay: 0s !important;
}
.l-ex--list > *:nth-child(2) {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}
.l-ex--list > *:nth-child(3) {
  -webkit-animation-delay: 0.4s !important;
          animation-delay: 0.4s !important;
}
.l-ex--list > *:nth-child(4) {
  -webkit-animation-delay: 0.6s !important;
          animation-delay: 0.6s !important;
}
.l-ex--list > *:nth-child(5) {
  -webkit-animation-delay: 0.8s !important;
          animation-delay: 0.8s !important;
}
.l-ex--list > *:nth-child(6) {
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}
.l-ex--list > *:nth-child(7) {
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.l-ex--list > *:nth-child(8) {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}
.l-ex--list > *:nth-child(9) {
  -webkit-animation-delay: 1.6s !important;
          animation-delay: 1.6s !important;
}
.l-ex--list > *:nth-child(10) {
  -webkit-animation-delay: 1.8s !important;
          animation-delay: 1.8s !important;
}
.l-ex--list > *:nth-child(11) {
  -webkit-animation-delay: 2s !important;
          animation-delay: 2s !important;
}
.l-ex--list > *:nth-child(12) {
  -webkit-animation-delay: 2.2s !important;
          animation-delay: 2.2s !important;
}
.l-ex--list > *:nth-child(13) {
  -webkit-animation-delay: 2.4s !important;
          animation-delay: 2.4s !important;
}
.l-ex--list > *:nth-child(14) {
  -webkit-animation-delay: 2.6s !important;
          animation-delay: 2.6s !important;
}
.l-ex--list > *:nth-child(15) {
  -webkit-animation-delay: 2.8s !important;
          animation-delay: 2.8s !important;
}
.l-ex--list > *:nth-child(16) {
  -webkit-animation-delay: 3s !important;
          animation-delay: 3s !important;
}
.l-ex--list > *:nth-child(17) {
  -webkit-animation-delay: 3.2s !important;
          animation-delay: 3.2s !important;
}
.l-ex--list > *:nth-child(18) {
  -webkit-animation-delay: 3.4s !important;
          animation-delay: 3.4s !important;
}
.l-ex--list > *:nth-child(19) {
  -webkit-animation-delay: 3.6s !important;
          animation-delay: 3.6s !important;
}
.l-ex--list > *:nth-child(20) {
  -webkit-animation-delay: 3.8s !important;
          animation-delay: 3.8s !important;
}

.l-ex--grid > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s a-grid ease-out;
          animation: 1s a-grid ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.l-ex--grid > *:nth-child(1) {
  -webkit-animation-delay: 0s !important;
          animation-delay: 0s !important;
}
.l-ex--grid > *:nth-child(2) {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}
.l-ex--grid > *:nth-child(3) {
  -webkit-animation-delay: 0.4s !important;
          animation-delay: 0.4s !important;
}
.l-ex--grid > *:nth-child(4) {
  -webkit-animation-delay: 0.6s !important;
          animation-delay: 0.6s !important;
}
.l-ex--grid > *:nth-child(5) {
  -webkit-animation-delay: 0.8s !important;
          animation-delay: 0.8s !important;
}
.l-ex--grid > *:nth-child(6) {
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}
.l-ex--grid > *:nth-child(7) {
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.l-ex--grid > *:nth-child(8) {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}
.l-ex--grid > *:nth-child(9) {
  -webkit-animation-delay: 1.6s !important;
          animation-delay: 1.6s !important;
}
.l-ex--grid > *:nth-child(10) {
  -webkit-animation-delay: 1.8s !important;
          animation-delay: 1.8s !important;
}
.l-ex--grid > *:nth-child(11) {
  -webkit-animation-delay: 2s !important;
          animation-delay: 2s !important;
}
.l-ex--grid > *:nth-child(12) {
  -webkit-animation-delay: 2.2s !important;
          animation-delay: 2.2s !important;
}
.l-ex--grid > *:nth-child(13) {
  -webkit-animation-delay: 2.4s !important;
          animation-delay: 2.4s !important;
}
.l-ex--grid > *:nth-child(14) {
  -webkit-animation-delay: 2.6s !important;
          animation-delay: 2.6s !important;
}
.l-ex--grid > *:nth-child(15) {
  -webkit-animation-delay: 2.8s !important;
          animation-delay: 2.8s !important;
}
.l-ex--grid > *:nth-child(16) {
  -webkit-animation-delay: 3s !important;
          animation-delay: 3s !important;
}
.l-ex--grid > *:nth-child(17) {
  -webkit-animation-delay: 3.2s !important;
          animation-delay: 3.2s !important;
}
.l-ex--grid > *:nth-child(18) {
  -webkit-animation-delay: 3.4s !important;
          animation-delay: 3.4s !important;
}
.l-ex--grid > *:nth-child(19) {
  -webkit-animation-delay: 3.6s !important;
          animation-delay: 3.6s !important;
}
.l-ex--grid > *:nth-child(20) {
  -webkit-animation-delay: 3.8s !important;
          animation-delay: 3.8s !important;
}
.persona__skills {
  display: -webkit-flex;
  display: flex;
  gap: 0.5em;
  margin-bottom: 1rem;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.persona__skills li {
  font-size: var(--fs-03);
  color: var(--ink-300);
  background: var(--ink-100);
  padding: 0.25em;
  line-height: 1;
  -webkit-clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - .25rem), calc(100% - .25rem) 100%, 0 100%, 0 0.25rem);
          clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - .25rem), calc(100% - .25rem) 100%, 0 100%, 0 0.25rem);
}

.blockquote {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: relative;
  font-family: var(--display-font-family);
  font-weight: var(--fw-bold);
  color: var(--blockquote-text-color);
  line-height: var(--lh3);
  font-size: var(--fs-04);
  margin: 0;
  font-style: italic;
  margin-bottom: var(--section-density);
  padding: var(--sp1) var(--sp2) var(--sp4) var(--sp2);
  gap: 1rem;
  -webkit-clip-path: var(--blockquote-clip-path);
          clip-path: var(--blockquote-clip-path);
  background: var(--blockquote-bg-color);
}
.blockquote__cite {
  position: relative;
  font-size: var(--fs-base);
  font-style: normal;
  font-weight: var(--fw-regular);
  padding: 0;
  bottom: 0rem;
  left: 0;
  color: var(--blockquote-cite-color);
}
.blockquote__cite a {
  color: var(--blockquote-link-color);
}

.clipped {
  height: auto;
  padding-top: 1rem;
  background: var(--a2-100);
  overflow: hidden;
  -webkit-clip-path: var(--maj-all);
          clip-path: var(--maj-all);
  aspect-ratio: 1/1;
}
.clipped:before {
  /*

  		    background-color: #091676d6;
  		    bottom: 0;
  		    content: '';
  		    height: 100%;
  		    left: 0;
  		    mix-blend-mode: screen;
  		    position: absolute;
  		    right: 0;
  		    top: 0;
  		    width: 100%;
  		    z-index: 1;
  */
}
.clipped img {
  -webkit-filter: grayscale(0.9) contrast(2.2);
          filter: grayscale(0.9) contrast(2.2);
  width: 100%;
  mix-blend-mode: darken;
}

.journey-map {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
.journey-map__row {
  display: grid;
  grid-template-columns: subgrid;
  font-size: var(--fs-03);
  padding: var(--sp-7);
  border-top: 1px solid;
  font-size: var(--fs-03);
  grid-column: 1/span all;
  background: var(--ink-100);
}
.journey-map__stage {
  font-size: var(--fs-03);
  padding: var(--sp-7);
  border-top: 2px solid;
  font-size: var(--fs-03);
  grid-row: 1/span all;
  background: var(--ink-100);
}
.journey-map .stage--1 {
  grid-column: 2/span 1;
}
.journey-map .stage--2 {
  grid-column: 3/span 1;
}
.journey-map .stage--3 {
  grid-column: 4/span 1;
}
.journey-map .stage--4 {
  grid-column: 5/span 1;
}
.journey-map .row--phase {
  grid-row: 2/span 1;
}
.journey-map .row--2 {
  grid-row: 3/span 1;
}
.journey-map .row--3 {
  grid-row: 4/span 1;
}
.journey-map .row--4 {
  grid-row: 5/span 1;
}
.journey-map .note {
  padding: var(--sp-7);
}
.journey-map .note p {
  font-size: var(--fs-02);
}
.journey-map .note__title {
  font-size: var(--fs-03);
}
.journey-map .stage__label {
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  line-height: var(--lh1);
}
.journey-map .row__label {
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  line-height: var(--lh1);
}
.journey-map .task-list li {
  list-style-type: none;
  font-size: var(--fs-02);
  line-height: var(--lh3);
}

.frame {
  justify-self: center;
  position: relative;
  height: 100%;
  aspect-ratio: 210/297;
  box-shadow: 0em 0em 0em 2.2em rgba(255, 255, 255, 0.92), 0em 0em 0 3em rgba(0, 0, 0, 0.9), -0.2em 0.4em 1em 1em rgba(0, 0, 0, 0.2);
  height: 70%;
}

.flip-gallery {
  gap: 1em;
  display: grid;
  grid-template-columns: var(--grid-2-col);
}
.flip-gallery .card {
  aspect-ratio: 4/3;
  border: 0;
  padding: 0;
  overflow: hidden;
}
.flip-gallery .card__visual {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: none;
          clip-path: none;
}
.flip-gallery .card__text {
  display: -webkit-flex;
  display: flex;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--ink-300);
  z-index: 1;
  transition: all 0.2s;
  -webkit-transform: scale(3);
          transform: scale(3);
  padding: 1em;
  -webkit-clip-path: var(--card-image-lock-up);
          clip-path: var(--card-image-lock-up);
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.flip-gallery .card__label {
  display: none;
}
.flip-gallery .card__title {
  color: var(--white);
}
.flip-gallery .card:hover .card__text {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-clip-path: var(--card-image-lock-up);
          clip-path: var(--card-image-lock-up);
}
.flip-gallery .card:hover:before {
  content: none;
}

em {
  font-weight: var(--fw-semi);
  font-style: normal;
  background: var(--ink-100);
}

.outcomes em {
  background: var(--plus-100);
}

.challenges em {
  background: var(--minus-100);
}

.lo-list {
  display: grid;
  gap: var(--section-density4);
}

.btn + .tooltip {
  position: relative;
  display: none;
}
.btn:hover {
  background: red;
}
.btn:hover .tooltip {
  display: block;
}

.hotspot {
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 9000;
  padding: 1em;
}
.hotspot button {
  opacity: 0;
  content: "TLDR";
}
.hotspot:hover button {
  opacity: 1;
}
.on .hotspot:hover button {
  content: "Close";
}

.article--tidy {
  grid-area: page-body;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  grid-template-areas: "article-header" "article-body";
  margin-bottom: 3rem;
}
.article--tidy .article__header {
  display: grid;
  grid-area: article-header;
  grid-template-areas: "text" "image";
  grid-template-rows: auto;
  gap: 3rem;
  padding-top: 1rem;
}
@media (min-width: 768px) {
  .article--tidy .article__header {
    grid-template-columns: subgrid;
    grid-template-areas: "text image";
    margin-bottom: 3rem;
    background: linear-gradient(270deg, var(--slate-green-l), transparent);
  }
}
.article--tidy .article__text {
  display: grid;
  grid-area: text;
  -webkit-align-content: center;
          align-content: center;
  gap: 1em;
}
.article--tidy .article__title {
  font-size: var(--fs-06);
}
.article--tidy .article__visual {
  grid-area: image;
}
.article--tidy .article__visual img {
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.article--tidy .article__nav {
  grid-area: article-nav;
  display: none;
}
@media (min-width: 768px) {
  .article--tidy .article__nav {
    display: grid;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--masthead-height) + 2em);
    align-self: start;
  }
}
.article--tidy .article__nav li {
  position: relative;
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  padding-left: 0;
}
.article--tidy .article__nav li:before {
  content: "-";
  position: absolute;
  left: -1rem;
  top: 0;
  color: var(--ink-200);
}
.article--tidy .article__nav li:first-of-type {
  display: none;
}
.article--tidy .article__nav li:hover:after {
  content: "";
  color: var(--ink);
  position: relative;
  right: -1em;
  color: var(--ink-200);
}
.article--tidy .article__nav li:last-child {
  font-size: var(--fs-03);
  margin-top: 1em;
}
.article--tidy .article__nav li:last-child:hover:after {
  content: "↑";
  color: var(--ink);
  position: relative;
  right: -1em;
  color: var(--ink-200);
}
.article--tidy .article__body {
  grid-area: article-body;
}
.article--tidy .article__body p:first-of-type {
  font-size: var(--fs-04);
  line-height: var(--lh5);
  max-width: 43ch;
}
@media (min-width: 768px) {
  .article--tidy {
    margin: 0 auto;
    grid-template-columns: 2fr 7fr;
    grid-template-areas: "article-header article-header" "article-nav article-body";
    grid-template-rows: auto;
    gap: var(--section-density2) var(--section-density4);
    padding-bottom: 8rem;
  }
}
.article--bio {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--section-density);
  grid-template-areas: "intro" "image" "body";
  padding: 0;
}
@media (min-width: 768px) {
  .article--bio {
    grid-template-rows: calc(100vh - var(--masthead-height)) auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "intro image" "body .";
    padding-bottom: 0;
    padding-top: 0;
    gap: var(--section-density4);
  }
}
.article--bio .article__intro {
  grid-area: intro;
  grid-template-columns: 1fr;
  padding: 3em 0 0 0;
}
.article--bio .article__intro .intro__visual {
  aspect-ratio: 1/1;
  background: var(--orange);
  aspect-ratio: 1/1;
  mix-blend-mode: normal;
}
@media (min-width: 768px) {
  .article--bio .article__intro {
    grid-template-columns: 1fr;
    padding-bottom: 0;
    padding-top: 0;
  }
}
.article--bio .article__container {
  display: grid;
  grid-area: body;
  grid-template-columns: 1fr;
  justify-self: flex-start;
}
.article--bio .article__side-image {
  height: 100%;
  width: 100%;
  grid-area: image;
  overflow: hidden;
  margin: auto;
  -webkit-align-content: center;
          align-content: center;
}
@media (min-width: 768px) {
  .article--bio .article__side-image {
    /* 	padding: 5rem; */
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: var(--masthead-height);
    overflow: visible;
  }
}
.article--bio .article__body {
  grid-area: body;
}
.article--home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3em;
  grid-template-areas: "image" "body" "case";
  grid-template-rows: 60vh auto auto;
  padding: 0;
}
@media (min-width: 768px) {
  .article--home {
    gap: 3em;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "body image" "body ." "case case";
    padding-bottom: 0;
    padding-top: 0;
  }
}
.article--home .article__slab {
  position: -webkit-sticky;
  position: sticky;
  top: var(--masthead-height);
  background: var(--body-bg);
  height: var(--body-height);
}
.article--home .article__side-image {
  height: 100%;
  width: auto;
  z-index: -1;
  position: -webkit-sticky;
  position: sticky;
  grid-area: image;
  overflow: hidden;
  /* height: var(--body-height); */
  top: var(--masthead-height);
}
@media (min-width: 768px) {
  .article--home .article__side-image {
    position: -webkit-sticky;
    position: sticky;
    overflow: visible;
    height: var(--body-height);
  }
}
.article--home .article__body {
  grid-area: body;
}
.article--home .article__title {
  font-size: var(--fs-07);
}
@media (min-width: 768px) {
  .article--home .article__title {
    font-size: var(--fs-08);
  }
}
.article--home .article__label {
  font-size: var(--fs-05);
}
.article--code {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--section-density4);
  grid-template-areas: "intro" "body" "image";
  padding: 0;
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .article--code {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "intro intro" "body image";
    padding-bottom: 0;
    padding-top: 0;
  }
}
.article--code .article__intro {
  padding: 3em 0;
  grid-template-columns: subgrid;
  display: grid;
  -webkit-align-items: center;
          align-items: center;
  grid-area: intro;
  min-height: 10vh;
  grid-template-columns: 1fr;
  gap: 1em;
}
@media (min-width: 768px) {
  .article--code .article__intro {
    grid-template-columns: subgrid;
    padding-bottom: 0;
    padding-top: 0;
  }
}
.article--code .article__visual {
  -webkit-align-items: center;
          align-items: center;
  aspect-ratio: 3/2;
  display: -webkit-flex;
  display: flex;
}
.article--code .article__body {
  display: grid;
  grid-area: body;
  grid-template-columns: 1fr;
  justify-self: flex-start;
}
.article--code .article__images {
  grid-area: image;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: var(--section-density);
}
.article--code .article__body {
  grid-area: body;
  display: -webkit-flex;
  display: flex;
}
.article .slab-list {
  z-index: 2;
}
.article .slab-list .article__slab {
  padding: 10% 0;
  -webkit-justify-content: center;
          justify-content: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: var(--masthead-height);
}
.article .slab-list .article__slab p, .article .slab-list .article__slab .brand-list {
  padding: 4rem 0;
  background: var(--body-bg);
  font-weight: var(--fw-regular);
}
@media (min-width: 768px) {
  .article .slab-list .article__slab {
    -webkit-flex: 0 0 var(--body-height);
            flex: 0 0 var(--body-height);
  }
}
.article.on {
  margin-top: -6rem;
  z-index: 8999;
  BACKGROUND: var(--grey7);
  grid-template-columns: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 10rem 0;
}
.article.on p, .article.on .article__comment, .article.on .article__header, .article.on .article__heading, .article.on dl, .article.on ul, .article.on pre, .article.on blockquote {
  opacity: 0;
  display: none;
}
.article.on figure {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "text image";
}
.article.on figure figcaption {
  line-height: var(--lh3);
  font-size: var(--fs-base);
}
.article__meta {
  display: grid;
  grid-gap: 1em;
  -webkit-align-content: start;
          align-content: start;
  -webkit-align-content: space-evenly;
          align-content: space-evenly;
  color: var(--ink-300);
}
@media (min-width: 768px) {
  .article__meta {
    grid-gap: auto;
    border-top: 0;
  }
}
.article__meta li {
  font-size: var(--fs-03);
}
.article__meta li span {
  font-weight: var(--fw-semi);
  display: block;
}
.article__type {
  z-index: 1;
  font-size: var(--fs-base);
  color: var(--meta-text);
}
.article__time {
  color: var(--meta-text);
  font-size: var(--fs-base);
}
.article__desc {
  color: var(--desc-text);
  font-size: var(--fs-base);
  font-weight: 400;
  display: inherit;
}
.article__label {
  font-size: var(--fs-04);
}
@media (min-width: 768px) {
  .article__label {
    font-size: var(--fs-04);
  }
}
.article__label span {
  font-size: 0.5em;
  font-weight: var(--fw-regular);
  display: inherit;
  margin-top: 1em;
  line-height: var(--lh5);
}
.article__title {
  max-width: 45ch;
  color: var(--title-text);
  /* 		text-transform: uppercase; */
  font-size: var(--fs-06);
  /*

  		@include bp(lrg-min) {

  		    font-size: var(--fs4);
  	    }
  */
}
@media (min-width: 768px) {
  .article__title {
    font-size: var(--fs-07);
  }
}
.article__title span {
  font-size: 0.5em;
  font-weight: var(--fw-regular);
  display: inherit;
  margin-top: 1em;
  line-height: var(--lh5);
}
.article__comment {
  font-size: var(--fs-03);
  max-width: 77ch;
}
.article__description {
  line-height: var(--lh3);
  font-size: var(--fs-base);
}
.article__cta {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding: 30% 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-justify-content: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .article__cta {
    -webkit-flex: 0 0 calc(90vh - var(--masthead-height));
            flex: 0 0 calc(90vh - var(--masthead-height));
    display: -webkit-flex;
    display: flex;
    padding: 0;
    -webkit-flex-direction: column;
            flex-direction: column;
  }
}
.article :target {
  scroll-margin-top: var(--masthead-height);
}
.article__heading {
  /*
  		position: sticky;
  		top: calc(var(--masthead-height) + 2em);
  */
  font-size: var(--fs-04);
  padding: var(--section-density2) 0 0;
  border-top: 1px solid var(--ink-100);
  background: var(--body-bg);
  color: var(--ink);
}
.article__body {
  position: relative;
  display: grid;
  color: var(--body-text);
  -webkit-flex-direction: column;
          flex-direction: column;
  display: -webkit-flex;
  display: flex;
  /* 	WYSIWYG */
  /*
  			h2 {
  					@extend %text-set-1;	
  					font-size: var(--fs-base);

  				}

  			h3 {
  					@extend %text-set-1;
  					font-size: var(--fs-04);

  				}
  */
}
.article__body > * + * {
  margin-bottom: 1.5em;
}
.article__body .gallery {
  grid-column: 1/span 3;
}
.article__body a {
  color: var(--link-color);
  -webkit-text-decoration: 1px underline;
          text-decoration: 1px underline;
}
.article__body a:hover {
  color: var(--link-color--hover);
}
.article__body em {
  font-weight: var(--fw-semi);
  font-style: normal;
  background: var(--ink-100);
}
.article__body .blockquote {
  text-wrap-style: pretty;
  max-width: 40ch;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: relative;
  font-family: var(--display-font-family);
  font-weight: var(--fw-bold);
  color: var(--blockquote-text-color);
  line-height: var(--lh3);
  font-size: var(--fs-04);
  margin-top: 1em;
  font-style: italic;
  margin-bottom: var(--section-density);
  padding: 1em 1em 2.5em 1em;
  gap: 1rem;
  -webkit-clip-path: var(--blockquote-clip-path);
          clip-path: var(--blockquote-clip-path);
  background: var(--blockquote-bg-color);
}
.article__body .blockquote__cite {
  position: relative;
  font-size: var(--fs-base);
  font-style: normal;
  font-weight: var(--fw-regular);
  padding: 0;
  bottom: 0rem;
  left: 0;
  color: var(--blockquote-cite-color);
}
.article__body .blockquote__cite a {
  color: var(--blockquote-link-color);
}
.article__body dl {
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--ink-100);
  padding: 2em;
}
.article__body dl dt {
  font-weight: var(--fw-bold);
}
.article__body dl dd {
  font-style: italic;
  margin-bottom: 1em;
}
.article__body ol {
  list-style: none;
  counter-reset: standard;
}
.article__body ol li {
  counter-increment: standard;
  position: relative;
  margin-bottom: 1em;
  font-style: italic;
  list-style-position: outside;
  margin-left: 1.5em;
  color: var(--accent-300);
  line-height: var(--lh3);
  max-width: 65ch;
  font-weight: var(--fw-bold);
}
.article__body ol li:before {
  content: counter(standard);
  color: red;
  position: absolute;
  margin-left: -1.5em;
  /* font-weight: bold; */
}
.article__body ul {
  margin-bottom: var(--section-density);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.article__body ul li {
  margin-left: 1.5em;
  position: relative;
  margin-bottom: 1em;
  color: var(--ink);
  max-width: 65ch;
}
.article__body ul li:before {
  position: absolute;
  content: "-";
  left: -1.5em;
}
.article__body ul li ul {
  margin-top: 1em;
  margin-bottom: 0;
}
.article__body ul li ul li {
  margin-bottom: 0.5em;
}
.article__body ul.questions {
  gap: 0;
}
.article__body ul.questions li {
  padding: 0;
  margin-left: 1rem;
}
.article__body ul.questions li:before {
  content: "";
  font-weight: var(--fw-semi);
  position: relative;
  left: -1em;
}
.article__body ul.quotes {
  padding: 2em;
  background: var(--ink-100);
  gap: 2em;
}
.article__body ul.quotes li {
  color: var(--ink-300);
  background: var(--ink-100);
  line-height: var(--lh3);
  padding: 0.5em;
  margin-left: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--fs-base);
  gap: 2em;
  list-style-type: none;
}
.article__body ul.quotes li:before {
  content: none;
  display: none;
}
.article__body ul.quotes li:after {
  content: "";
  width: 0px;
  height: 0px;
  border-top: 0px solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid var(--ink-100);
  position: absolute;
  left: 1em;
  bottom: -1em;
}
.article__body ul.quotes li:nth-child(even) {
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.article__body ul.quotes li:nth-child(even):after {
  right: 1em;
  left: auto;
  border-right: 1em solid var(--ink-100);
  border-left: 0 solid transparent;
}
.article__body p {
  max-width: 60ch;
  line-height: var(--lh5);
  text-wrap: pretty;
}
.article__body p:first-of-type {
  /*
  			//change to typekit
  					margin-bottom: var(--section-density);		
  */
  font-size: var(--fs-05);
  line-height: var(--lh4);
  font-weight: var(--fw-semi);
  color: var(--ink);
  max-width: 30ch;
  margin-bottom: 1.5em;
}
.article__body figure {
  position: relative;
  display: grid;
  margin-bottom: var(--sp0);
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-template-areas: "image" "text";
  gap: 0.5em;
}
@media (min-width: 768px) {
  .article__body figure {
    width: auto;
    left: 0rem;
  }
}
.article__body figure img {
  padding: 0.5rem;
  background: var(--ink-100);
  grid-area: image;
}
.article__body figure figcaption {
  font-family: var(--alt-font-family);
  font-size: var(--fs-03);
  padding: 0.5em 0;
  grid-area: text;
}
.article__body .bem-block {
  color: #ffe6af;
}
.article__body .bem-element {
  color: #fa9b61;
}
.article__body .bem-modifier {
  color: #eed947;
}
.article__body img {
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
pre, .pre {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  font-size: var(--fs-03);
  white-space: normal;
  word-wrap: break-word;
  padding: 1em;
  background: var(--ink-100);
}
pre span.nested, .pre span.nested {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-left: 4em;
  margin-top: 0rem;
}
pre .bem-block, .pre .bem-block {
  margin-top: 2em;
  color: var(--accent);
}
pre .bem-element, .pre .bem-element {
  position: relative;
  left: 2em;
  color: var(--a2);
}
pre .bem-modifier, .pre .bem-modifier {
  left: 4em;
  position: relative;
  color: var(--link);
}

.outcomes em {
  background: var(--plus-100);
}

.challenges em {
  background: var(--minus-100);
}

.page {
  --lo: minmax(1.6rem, auto) minmax(320px, 1368px) minmax(1.6rem, auto);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--masthead-height) auto calc(var(--body-height) - 10em);
  grid-template-areas: "page-nav" "page-body" "page-footer";
}
.page__main-nav {
  /* Structure */
  display: grid;
  grid-area: page-nav;
  grid-template-columns: var(--lo);
  grid-template-areas: ". nav-content .";
}
.page__main-nav nav {
  grid-area: nav-content;
}
.page__header {
  /* Structure */
  grid-area: page-header;
  display: grid;
  grid-template-columns: var(--lo);
  grid-template-areas: ". header-content .";
  grid-template-rows: 1fr;
  /* Style */
  background: var(--header-bg);
}
.page__header nav {
  grid-area: content;
}
.page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: var(--lo);
  grid-template-areas: ". page-content .";
  grid-template-rows: 1fr;
}
.page__body.gsap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "image cards" "image cards";
  grid-template-rows: 1fr 1fr;
  /* GSAP Stuff */
}
.page__body.gsap img {
  grid-area: image;
  width: 400px;
  aspect-ratio: 1/1;
}
.page__body.gsap .cards {
  grid-area: cards;
}
.page__body.gsap .card {
  background: #ccc;
  width: 200px;
  height: 200px;
  position: relative;
}
.page__body.gsap .card p {
  font-size: 4rem;
}
.page__body .article {
  grid-area: page-content;
}
.page__body .slide-list {
  grid-area: page-content;
}
.page__body .footer {
  grid-area: page-content;
}
.page__body .lo-list {
  grid-area: page-content;
}
.page__footer {
  /* Structure */
  display: grid;
  grid-area: page-footer;
  grid-template-columns: var(--lo);
  grid-template-areas: ". footer-content .";
  grid-template-rows: 1fr;
  /* Style */
  background: var(--footer-bg);
}
.page__footer--related {
  background: none;
}
.page__footer .contact {
  grid-area: footer-content;
}
.page__footer .content {
  grid-area: footer-content;
}
.page__footer .content h5 {
  font-size: var(--fs-04);
  font-weight: var(--fw-semi);
  margin: 2em 0;
}
.page--slide {
  grid-template-rows: auto;
  grid-template-areas: "page-nav" "page-body";
}
.page--slide .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: 1fr;
  grid-template-areas: "page-content";
  grid-template-rows: auto;
}
.page--article {
  grid-template-rows: var(--masthead-height) auto auto;
  grid-template-areas: "page-nav" "page-body" "page-footer";
}
.page--feature {
  grid-template-areas: "page-nav" "page-header" "page-body" "page-footer";
}
.page--home {
  grid-template-rows: var(--masthead-height) auto auto var(--body-height);
  grid-template-areas: "page-nav" "page-body" "case" "page-footer";
}
.page--home .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: var(--lo);
  grid-template-areas: ". page-content .";
  grid-template-rows: auto;
}
.page--home2 {
  grid-template-rows: var(--masthead-height) auto auto var(--body-height);
  grid-template-areas: "page-nav" "page-body" "case" "page-footer";
}
.page--home2 .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: var(--lo);
  grid-template-areas: ". page-content .";
  grid-template-rows: auto;
}
.page--contact {
  grid-template-rows: var(--masthead-height) var(--body-height);
}
.page--contact .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: var(--lo);
  grid-template-areas: ". page-content .";
  grid-template-rows: auto;
}
.page--contact .page__body .contact {
  grid-area: page-content;
}
.page--exp {
  grid-template-rows: var(--masthead-height) var(--body-height) auto var(--body-height);
  grid-template-areas: "page-nav" "page-header" "page-body" "page-footer";
}
.page--exp .page__header {
  grid-area: page-header;
}
.page--exp .page__header .intro {
  grid-area: header-content;
}
.page--exp .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: 1fr;
  grid-template-areas: "page-content";
  grid-template-rows: auto;
}
.page--exp .page__body .slab--case-list {
  grid-area: page-content;
}
.page--myjourney {
  grid-template-areas: "page-nav" "page-header" "page-body" "page-footer";
}
.page--myjourney .page__header {
  /* Structure */
  display: grid;
  grid-area: page-header;
  grid-template-areas: ". header-content .";
  grid-template-rows: auto;
}
.page--myjourney .page__header .intro {
  grid-area: header-content;
}
.page--myjourney .page__body {
  /* Structure */
  display: grid;
  grid-area: page-body;
  grid-template-columns: var(--lo);
  grid-template-areas: ". page-content .";
  grid-template-rows: auto;
}
.page--myjourney .page__body .timeline {
  grid-area: page-content;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  overflow: scroll;
  grid-area: page-content;
  grid-template-columns: repeat(8, 1fr);
}
.page--myjourney .page__body .timeline__desc {
  display: none;
}
.page--myjourney .page__body .timeline .related {
  display: none;
}
.page--myjourney .page__body .timeline__record {
  height: 100%;
  grid-template-columns: 600px;
  -webkit-align-items: end;
          align-items: end;
  scroll-snap-align: start;
}
.page--myjourney .page__body .timeline__record:hover .timeline__desc {
  padding: 1em;
  font-size: var(--fs-03);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(600px + 3em);
  background: #fff;
  z-index: 1000;
  height: 50vh;
  border: var(--border-3);
  overflow: scroll;
}
.page--no-footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--masthead-height) auto;
  grid-template-areas: "page-nav" "page-body";
}

.slab {
  display: grid;
  grid-template-columns: var(--lo);
  grid-template-areas: ". slabcore .";
}
.slab--fix {
  padding: 0;
  -webkit-align-items: center;
          align-items: center;
  overflow: hidden;
  display: grid;
  background: var(--surface-100);
}
.slab--fix .fix {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media (min-width: 1080px) {
  .slab--fix .fix {
    -webkit-align-items: center;
            align-items: center;
    overflow: hidden;
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "text image";
    padding: 0;
    gap: 3rem;
  }
}
.slab--fix .fix__text {
  position: relative;
  height: 100%;
  gap: 0;
  -webkit-align-content: center;
          align-content: center;
  grid-area: text;
  display: grid;
}
.slab--fix .fix__image-slot {
  padding: 0;
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  background: #222;
  grid-area: image;
  height: 100%;
  -webkit-clip-path: var(--intro-lock-up);
          clip-path: var(--intro-lock-up);
}
.slab--fix .fix__image-slot img {
  position: relative;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.slab--intro {
  /*
  			--intro-bg: #ccc;
  			--ink-base: 250deg 20% 12%;
  			--ink-100: hsla(var(--ink-base) / 5%);
  			--ink-200: hsla(var(--ink-base) / 50%);
  			--ink-300: hsla(var(--ink-base) / 70%);
  			--ink: hsla(var(--ink-base) / 90%);
  */
  background: var(--intro-bg);
  grid-area: page-content;
  padding: 0;
}
.slab--brand-list {
  position: relative;
  background: var(--ink-100);
}
.slab--brand-list:before {
  -webkit-filter: opacity(0.25);
          filter: opacity(0.25);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
}
.slab--case-list {
  grid-area: case;
  position: relative;
  background: var(--body-bg);
}
.slab--case-list > * {
  grid-area: slabcore;
}
.slab--case-list:before {
  -webkit-filter: opacity(0.75);
          filter: opacity(0.75);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
}
.slab--text {
  position: relative;
  min-height: 50vh;
}
.slab--text .text-block__lead {
  max-width: 48ch;
  font-size: var(--fs-04);
  margin: auto;
}
.slab--blog {
  background: var(--a2-100);
}
.slab--blog .blockquote {
  margin: 0;
}

.slab > * {
  grid-area: slabcore;
}

.slabcore {
  grid-area: slabcore;
}

/*
Algo Layouts
*/
.feck {
  /*
  &:has(

  	> :is(figure) + :is(p, ul, ol, blockquote, figure, .textbox) 

  	) {
  	display: grid;
      align-items: center;
      grid-template-columns: 2fr 3fr;
      gap: 1rem;
      height: 60vh;
      padding: 1rem;
  	}
  */
}
.feck * {
  background: #ccc;
  padding: 1rem;
  -webkit-align-items: center;
          align-items: center;
  display: grid;
}
.feck figure {
  aspect-ratio: 1/1;
  height: 100%;
  margin: 0;
  width: auto;
  -webkit-clip-path: var(--maj-all);
          clip-path: var(--maj-all);
}
.feck figure img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: auto;
}
.feck:has(> :is(h1, h2, h3) + :is(p, ul, ol, blockquote, figure)) {
  display: grid;
  -webkit-align-items: center;
          align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  height: 60vh;
  padding: 1rem;
}
.feck:has(> :is(.textbox) + :is(p, ul, ol, blockquote, figure)) {
  display: grid;
  -webkit-align-items: center;
          align-items: center;
  grid-template-columns: 3fr 2fr;
  gap: 1rem;
  height: 60vh;
  padding: 1rem;
}

.deck:has(img:nth-child(2)) {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  -webkit-align-content: center;
          align-content: center;
  height: 100vh;
}
.deck:has(img:nth-child(2)) img {
  -webkit-flex-basis: 50%;
          flex-basis: 50%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
figure .l-app {
  font-size: var(--fs-02);
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 50vh;
  resize: none;
}

.l-brand {
  font-weight: var(--fw-semi);
  color: var(--grey1);
  gap: var(--gap-xs);
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  margin-left: -0.4em;
}
.l-brand__logo {
  height: 1.5em;
  width: 1.5em;
}
.l-brand__name {
  font-weight: var(--fw-bold);
  color: var(--grey1);
}

.l-object {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-xs);
  -webkit-align-items: center;
          align-items: center;
  padding: var(--padding-m);
}
.l-object .image {
  border: 1px solid var(--grey4);
  border-radius: 3rem;
  height: 2rem;
  width: 2rem;
}
.l-object:hover {
  background: var(--ink-100);
}
.l-object:hover .image {
  background: var(--grey4);
}
.l-object:hover .l-meta {
  color: var(--grey6);
}
.l-object .l-title {
  font-size: var(--fs-03);
}
.l-object .l-meta {
  font-size: var(--fs-02);
}

.l-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--gap-m);
  grid-template-rows: auto;
  height: auto;
}
.l-grid:has(.l-object) .l-object {
  padding: var(--padding-xs);
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
.l-grid__item {
  border: 1px solid var(--grey4);
}
.l-grid__item:hover {
  background: var(--grey3);
}
.l-grid__item .placeholder {
  height: 6rem;
}

.l-table {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  flex-direction: column;
  overflow: scroll;
  font-size: var(--fs-03);
}
.l-table .table__head {
  background: var(--ink-100);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.l-table .table__row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-table .table__row:hover {
  background: var(--ink-100);
}
.l-table .td {
  background: var(--white);
}
.l-table th {
  background: var(--ink-100);
}
.l-table td, .l-table th {
  -webkit-flex: 1 0 6em;
          flex: 1 0 6em;
  display: -webkit-flex;
  display: flex;
  padding: 0.25em 0.5em;
}
.l-table td:nth-child(1), .l-table th:nth-child(1) {
  -webkit-flex: 0 0 3rem;
          flex: 0 0 3rem;
}
.l-table td:nth-child(2), .l-table th:nth-child(2) {
  -webkit-flex: 0 0 10rem;
          flex: 0 0 10rem;
}
.l-table td:nth-child(4), .l-table th:nth-child(4) {
  -webkit-flex: 0 0 3rem;
          flex: 0 0 3rem;
}
.l-table td:nth-child(5), .l-table th:nth-child(5) {
  -webkit-flex: 0 0 3rem;
          flex: 0 0 3rem;
}

.wire {
  --gap-xs: .5rem;
  --gap-s: .75rem;
  --gap-m: 1rem;
  --gap-l: 1.5rem;
  --gap-xl: 2rem;
  --padding-xs: .5rem;
  --padding-s: .75rem;
  --padding-m: 1rem;
  --padding-l: 1.5rem;
  --padding-xl: 2rem;
  --spacing: 1rem;
  --padding: 1rem;
  --font-size: var(--fs-03);
  --text-height: .3em;
  --list-item-height: .75em;
  --grid-item-height: 2em;
  --button-height: 2em;
  --masthead-height: 3.2rem;
  --pagehead-height: auto;
  --body-height: calc(100% - var(--masthead-height));
}

.l-app {
  font-size: var(--font-size);
  height: 100vh;
}
.l-app .l-text {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.l-app .l-meta {
  /*
  		    width: 3em;
  		    height: var(--text-height);
  		    background: var(--grey4);
  */
  color: var(--grey6);
  line-height: 1;
  font-size: var(--fs-02);
}
.l-app .l-title {
  /*
  		    width: 6em;
  		    height: var(--text-height);
  		    background: var(--grey6);
  */
  color: var(--grey7);
  line-height: 1;
  /* 		font-size: var(--fs-05); */
  font-weight: var(--fw-semi);
}
.l-app .l-para {
  /*
  		    width: 2em;
  		    height: var(--text-height);
  		    background: var(--grey5);
  */
  line-height: 1;
  color: var(--grey5);
  font-size: var(--fs-base);
}
.l-app .l-nav {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.l-app .l-nav__item {
  padding: var(--padding-s) var(--padding-m);
  /*
  		       min-width: 1em;
  			    max-width: 5em;
  			    height: var(--text-height);
  */
  line-height: 1;
  color: var(--grey6);
}
.l-app .l-nav__item:hover {
  color: var(--grey3);
  background: var(--grey6);
}
.l-app .l-list {
  display: grid;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  gap: var(--gap-m);
  -webkit-flex: 1 0 auto;
          flex: 1 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.l-app .l-list:has(.l-object) {
  gap: 0;
}
.l-app .l-list__item {
  width: 100%;
  border: 1px solid var(--grey4);
}
.l-app .l-list__item:hover {
  background: var(--grey3);
}
.l-app .l-list__item .placeholder {
  height: 2rem;
}
.l-app .l-area__title {
  font-weight: var(--fw-semi);
  margin-bottom: 0.75em;
}
.l-app .overlay {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  background: var(--grey7);
  z-index: 5;
  display: none;
}
.l-app .overlay.open {
  display: block;
}
.l-app .overlay .l-panel {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 4;
  width: 50%;
  background: #fff;
  max-height: 70%;
}
.l-app .right-panel {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  background: #0404047a;
  z-index: 5;
  display: none;
}
.l-app .right-panel.open {
  display: block;
}
.l-app .right-panel .l-panel {
  position: absolute;
  height: calc(100% - var(--masthead-height));
  top: var(--masthead-height);
  right: 0;
  width: 30rem;
}
.l-app .l-panel {
  background: var(--grey2);
  border: 1px solid var(--grey7);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "body" "footer";
}
.l-app .l-panel__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  margin-bottom: 0.75em;
}
.l-app .l-panel__header {
  display: -webkit-flex;
  display: flex;
  padding: var(--padding-l);
  grid-area: header;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  background: var(--grey2);
  line-height: var(--lh1);
}
.l-app .l-panel__header .l-nav {
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-app .l-panel__header .close {
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-app .l-panel__body {
  display: -webkit-flex;
  display: flex;
  padding: var(--padding-l);
  grid-area: body;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  background: var(--grey2);
  overflow-y: scroll;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-app .l-panel__body .l-grid {
  width: 100%;
}
.l-app .l-panel__footer {
  display: -webkit-flex;
  display: flex;
  padding: var(--padding-l);
  grid-area: footer;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  background: var(--grey2);
  overflow-y: scroll;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-app .l-panel__footer .l-button-group {
  -webkit-flex: auto;
          flex: auto;
  -webkit-justify-content: start;
          justify-content: start;
}
.l-app .l-split {
  display: grid;
  height: 100%;
  gap: var(--gap-xl);
}
@media (min-width: 768px) {
  .l-app .l-split {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .l-app .l-split {
    grid-template-columns: repeat(4, 1fr);
  }
}
.l-app .l-split.hidden {
  display: none;
}
.l-app .l-button-group {
  display: -webkit-flex;
  display: flex;
  gap: var(--gap-m);
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.l-app .close {
  position: relative;
  color: var(--grey6);
  display: -webkit-flex;
  display: flex;
  justify-self: flex-end;
}
.l-app .l-button {
  line-height: 1;
  padding: 0.5em 0.75em;
  display: block;
  background: var(--grey2);
}
.l-app .l-button:hover {
  background: var(--grey6);
}
.l-app .l-button.primary {
  background: var(--button-surface);
  color: var(--button-text);
}
.l-app .l-button.primary:hover {
  background: var(--button-surface--hover);
  color: var(--button-text--hover);
}
.l-app .l-button .secondary:hover {
  background: var(--grey6);
}
.l-app {
  display: grid;
  position: relative;
  grid-template-columns: auto 1fr;
  align-self: start;
  grid-template-rows: var(--masthead-height) calc(100% - var(--masthead-height));
  grid-template-areas: "masthead masthead" "left-nav workspace";
  overflow: auto;
  resize: both;
}
.l-app__header {
  display: -webkit-flex;
  display: flex;
  height: var(--masthead-height);
  padding: 0 var(--padding-m);
  grid-area: masthead;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  background: var(--grey8);
  overflow-y: scroll;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.l-app__header .l-nav {
  -webkit-flex-direction: row;
          flex-direction: row;
}
.l-app__workspace {
  grid-area: workspace;
  background: var(--white);
  position: relative;
}
.l-app__left-nav {
  display: grid;
  position: absolute;
  background: var(--grey4);
  grid-area: left-nav;
  -webkit-align-content: space-between;
          align-content: space-between;
  position: relative;
  /*
  	    padding:  var(--padding-m);
  	    width: 10rem;
  */
}
.l-app__left-nav.collapsed {
  width: 2em;
}
.l-app__left-nav .close {
  position: absolute;
  color: var(--grey6);
  display: -webkit-flex;
  display: flex;
  justify-self: flex-end;
  bottom: 0.5em;
  right: 1em;
}

.l-page {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: var(--pagehead-height) 1fr;
  grid-template-areas: "header" "body";
  height: 100%;
  overflow: hidden;
}
.l-page__header {
  gap: var(--gap-xl);
  height: var(--pagehead-height);
  grid-area: header;
  -webkit-align-items: center;
          align-items: center;
  background: var(--grey2);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "text actions" "nav .";
}
.l-page__header .l-title {
  font-size: var(--fs-base);
}
.l-page__header .l-para {
  color: var(--grey7);
  font-size: var(--fs-03);
}
.l-page__header .l-text {
  align-self: flex-start;
  grid-area: text;
  gap: var(--gap-s);
  padding: var(--padding-m);
}
.l-page__header .l-nav {
  -webkit-flex-direction: row;
          flex-direction: row;
  grid-area: nav;
}
.l-page__header .l-page__actions {
  align-self: flex-start;
  grid-area: actions;
  padding: var(--padding-m);
}
.l-page__footer {
  padding: var(--padding-m);
  grid-area: footer;
  -webkit-align-items: center;
          align-items: center;
  background: var(--grey3);
  position: absolute;
  bottom: 0;
  width: 100%;
}
.l-page__actions {
  display: -webkit-flex;
  display: flex;
  gap: var(--spacing);
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.l-page__body {
  overflow: hidden;
  padding: var(--padding-m);
  grid-area: body;
  position: relative;
  background: var(--white);
  overflow: scroll;
}
.l-page .sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  grid-column: revert;
}

form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 30ch;
}
form input {
  font-size: var(--fs-base);
  margin-bottom: var(--padding-l);
  padding: var(--padding-xs) var(--padding-s);
}

svg.omnicorn {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  top: 0;
  right: 0;
  --dub: 12s;
  --dur: 6s;
  --half: 3s;
  --quart: 1.5s;
}
svg.omnicorn path {
  stroke-width: 1px;
  stroke-opacity: 0.7;
  -webkit-animation: dash var(--dur) linear infinite;
          animation: dash var(--dur) linear infinite;
  stroke-linecap: round;
  stroke: var(--accent);
}
svg.omnicorn .eyes path {
  stroke: var(--ink);
}
svg.omnicorn .beard path {
  stroke: var(--ink);
  stroke-opacity: 0.7;
}
svg.omnicorn .dreads path {
  stroke: var(--ink);
  stroke-opacity: 0.7;
}
svg.omnicorn .horn path {
  stroke: var(--accent);
  stroke-dasharray: 60 30 120 30;
  -webkit-animation: dash var(--half) linear infinite;
          animation: dash var(--half) linear infinite;
  stroke-dashoffset: 100;
}
svg.omnicorn .shoulders path {
  stroke: var(--ink);
  stroke-opacity: 0.6;
}
svg.omnicorn .big-o circle {
  stroke-width: 1;
  fill: var(--accent-100);
  stroke: var(--a2-100);
  stroke-opacity: 0.1;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
svg.omnicorn .big-o circle:first-of-type {
  fill: var(--a2);
  -webkit-animation: dash var(--dub) ease-in-out infinite;
          animation: dash var(--dub) ease-in-out infinite;
}
svg.omnicorn .big-o circle:nth-child(2) {
  -webkit-animation: stroke-pulse var(--dub) ease-in-out infinite;
          animation: stroke-pulse var(--dub) ease-in-out infinite;
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
  stroke-opacity: 0.6;
}
svg.omnicorn .big-o circle:nth-child(4) {
  fill: var(--ink-100);
}

@-webkit-keyframes stroke-pulse {
  0%, 100% {
    stroke-width: 30;
    stroke: var(--ink-100);
    stroke-dashoffset: 10;
    fill: var(--accent-100);
  }
  50% {
    stroke-width: 120;
    stroke: var(--a2);
    stroke-dashoffset: 50;
    fill: var(--accent-100);
  }
}

@keyframes stroke-pulse {
  0%, 100% {
    stroke-width: 30;
    stroke: var(--ink-100);
    stroke-dashoffset: 10;
    fill: var(--accent-100);
  }
  50% {
    stroke-width: 120;
    stroke: var(--a2);
    stroke-dashoffset: 50;
    fill: var(--accent-100);
  }
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes eyes {
  0%, 100% {
    stroke-dashoffset: 10;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes eyes {
  0%, 100% {
    stroke-dashoffset: 10;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes close-pulse {
  from {
    opacity: 0;
  }
  80% {
    opacity: 100%;
  }
  to {
    opacity: 50%;
  }
}
@keyframes close-pulse {
  from {
    opacity: 0;
  }
  80% {
    opacity: 100%;
  }
  to {
    opacity: 50%;
  }
}
.play > * {
  opacity: 1;
  -webkit-animation: 0.1s imageswitcher infinite linear;
          animation: 0.1s imageswitcher infinite linear;
  /* 			animation-delay: calc(var(--scroll) * .1s); */
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.play > *:nth-child(1) {
  -webkit-animation-delay: calc(var(--scroll) * -0.2s);
          animation-delay: calc(var(--scroll) * -0.2s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(2) {
  -webkit-animation-delay: calc(var(--scroll) * -0.4s);
          animation-delay: calc(var(--scroll) * -0.4s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(3) {
  -webkit-animation-delay: calc(var(--scroll) * -0.6s);
          animation-delay: calc(var(--scroll) * -0.6s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(4) {
  -webkit-animation-delay: calc(var(--scroll) * -0.8s);
          animation-delay: calc(var(--scroll) * -0.8s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(5) {
  -webkit-animation-delay: calc(var(--scroll) * -1s);
          animation-delay: calc(var(--scroll) * -1s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(6) {
  -webkit-animation-delay: calc(var(--scroll) * -1.2s);
          animation-delay: calc(var(--scroll) * -1.2s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(7) {
  -webkit-animation-delay: calc(var(--scroll) * -1.4s);
          animation-delay: calc(var(--scroll) * -1.4s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(8) {
  -webkit-animation-delay: calc(var(--scroll) * -1.6s);
          animation-delay: calc(var(--scroll) * -1.6s);
  /* 			      z-index: 1*$i; */
}
.play > *:nth-child(9) {
  -webkit-animation-delay: calc(var(--scroll) * -1.8s);
          animation-delay: calc(var(--scroll) * -1.8s);
  /* 			      z-index: 1*$i; */
}

@-webkit-keyframes imageswitcher {
  from {
    opacity: 0;
    z-index: 0;
  }
  to {
    opacity: 1;
    z-index: 1;
  }
}

@keyframes imageswitcher {
  from {
    opacity: 0;
    z-index: 0;
  }
  to {
    opacity: 1;
    z-index: 1;
  }
}
.page--picture .picture svg .rock2.scroll-zoom, .page--picture .picture svg .rock1.scroll-zoom, .page--picture .picture svg .bird.scroll-zoom, .page--picture .picture svg .cloud.scroll-zoom {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -48s);
          animation-delay: calc(var(--scroll) * -48s);
}
@media (min-width: 768px) {
  .page--picture .picture svg .rock2.scroll-zoom, .page--picture .picture svg .rock1.scroll-zoom, .page--picture .picture svg .bird.scroll-zoom, .page--picture .picture svg .cloud.scroll-zoom {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
    -webkit-animation-delay: calc(var(--scroll) * -12s);
            animation-delay: calc(var(--scroll) * -12s);
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
}

.page--picture {
  grid-template-rows: var(--masthead-height) 200vh;
  grid-template-areas: "page-nav" "page-body";
}
.page--picture .page__body {
  padding: 0;
  -webkit-align-items: start;
          align-items: start;
}
.page--picture .picture {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  grid-area: slabcore;
  top: var(--masthead-height);
}
.page--picture .picture svg {
  max-width: 80%;
  height: 100%;
  aspect-ratio: 16/9;
}
.page--picture .picture svg .cloud {
  display: block;
  position: relative;
  width: 100%;
  -webkit-animation: 12s cloud ease-out;
          animation: 12s cloud ease-out;
  transition: 1s all;
}
.page--picture .picture svg .bird {
  display: block;
  position: relative;
  -webkit-animation: 12s bird ease-out;
          animation: 12s bird ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.page--picture .picture svg .rock1 {
  display: block;
  position: relative;
  -webkit-animation: 12s zoom-left ease-out;
          animation: 12s zoom-left ease-out;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: scale(0) translate(0%, 0%);
          transform: scale(0) translate(0%, 0%);
}
.page--picture .picture svg .rock2 {
  display: block;
  position: relative;
  -webkit-animation: 12s zoom-right ease-out;
          animation: 12s zoom-right ease-out;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: scale(0) translate(0%, 0%);
          transform: scale(0) translate(0%, 0%);
}
@-webkit-keyframes zoom-right {
  0%, 80% {
    -webkit-transform: scale(0) translate(0%, 0%);
            transform: scale(0) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(6) translate(50%, 20%);
            transform: scale(6) translate(50%, 20%);
  }
}
@keyframes zoom-right {
  0%, 80% {
    -webkit-transform: scale(0) translate(0%, 0%);
            transform: scale(0) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(6) translate(50%, 20%);
            transform: scale(6) translate(50%, 20%);
  }
}
@-webkit-keyframes zoom-left {
  0%, 80% {
    -webkit-transform: scale(0) translate(0%, 0%);
            transform: scale(0) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(6) translate(-50%, 20%);
            transform: scale(6) translate(-50%, 20%);
  }
}
@keyframes zoom-left {
  0%, 80% {
    -webkit-transform: scale(0) translate(0%, 0%);
            transform: scale(0) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(6) translate(-50%, 20%);
            transform: scale(6) translate(-50%, 20%);
  }
}
@-webkit-keyframes bird {
  0% {
    -webkit-transform: scale(0) translate(-50%, -60%);
            transform: scale(0) translate(-50%, -60%);
  }
  100% {
    -webkit-transform: scale(5) translate(0%, 0%);
            transform: scale(5) translate(0%, 0%);
  }
}
@keyframes bird {
  0% {
    -webkit-transform: scale(0) translate(-50%, -60%);
            transform: scale(0) translate(-50%, -60%);
  }
  100% {
    -webkit-transform: scale(5) translate(0%, 0%);
            transform: scale(5) translate(0%, 0%);
  }
}
@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  100% {
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
@keyframes cloud {
  0% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  100% {
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
.img-switcher.scroll-ani, .dan.scroll-ani,
.scroll-ani {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -48s);
          animation-delay: calc(var(--scroll) * -48s);
}
@media (min-width: 768px) {
  .img-switcher.scroll-ani, .dan.scroll-ani,
.scroll-ani {
    -webkit-animation-delay: calc(var(--scroll) * -12s);
            animation-delay: calc(var(--scroll) * -12s);
  }
}

.hp--form.scroll-jack, .ps--form.scroll-jack,
.scroll-jack {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -36s);
          animation-delay: calc(var(--scroll) * -36s);
}
@media (min-width: 768px) {
  .hp--form.scroll-jack, .ps--form.scroll-jack,
.scroll-jack {
    -webkit-animation-delay: calc(var(--scroll) * -9s);
            animation-delay: calc(var(--scroll) * -9s);
  }
}

.tracker__item.scroll-track, .tracker .track-holder.scroll-track,
.scroll-track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -6s);
          animation-delay: calc(var(--scroll) * -6s);
}

.side-image {
  position: fixed;
  width: 50vw;
  top: 0;
  right: 0;
  aspect-ratio: 1/1;
}

.clipper {
  letter-spacing: -0.15em;
  line-height: 0.8;
  text-shadow: 0px 0px 0px var(--accent-200);
  background-size: 50%;
  background-repeat: repeat;
  font-size: 26vw;
  font-weight: 900;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: url(../assets/img/screens.webp);
  -webkit-animation: fade 12s ease-out forwards;
          animation: fade 12s ease-out forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -6s);
          animation-delay: calc(var(--scroll) * -6s);
}

@-webkit-keyframes track {
  0% {
    position: fixed;
  }
  50% {
    position: relative;
  }
}

@keyframes track {
  0% {
    position: fixed;
  }
  50% {
    position: relative;
  }
}
.tracker .track-holder {
  height: auto;
  /* 	    background: linear-gradient(0deg, #ccc, transparent); */
  -webkit-animation: color-fade 6s ease-out forwards;
          animation: color-fade 6s ease-out forwards;
}
.tracker__item {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  --note: var(--c);
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg));
  transition: 1s all;
  -webkit-animation: 12s track ease-out forwards;
          animation: 12s track ease-out forwards;
  text-align: center;
}
.tracker__item:nth-child(2) {
  /* 				animation-delay: 2s; */
}
.tracker__item:nth-child(2) {
  /* 				animation-delay: 4s; */
}
@-webkit-keyframes color-fade {
  0% {
    background-color: var(--ink-200);
    background-image: url("../assets/img/home/yo2_1x.webp");
    background-blend-mode: darken;
  }
  100% {
    background-color: var(--accent-300);
    background-image: url("../assets/img/home/yo3_1x.webp");
    background-blend-mode: darken;
  }
}
@keyframes color-fade {
  0% {
    background-color: var(--ink-200);
    background-image: url("../assets/img/home/yo2_1x.webp");
    background-blend-mode: darken;
  }
  100% {
    background-color: var(--accent-300);
    background-image: url("../assets/img/home/yo3_1x.webp");
    background-blend-mode: darken;
  }
}
@keyframes track {}
/*
@keyframes beats{

	0 {
		transform: translate(0);
		opacity: 0;

	}

	50%{
		opacity: 1;
	}	

	100% {
		transform: translate(100%);
		opacity: 0;

	}

}
*/
.dan {
  display: block;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: 1s all;
  position: relative;
  width: 100%;
  -webkit-animation: 12s dan-switcher ease-out forwards infinite;
          animation: 12s dan-switcher ease-out forwards infinite;
  background-image: url("../assets/img/dan/switcher/ds9_1x.webp");
  /* clip-path: var(--maj-all); */
}
.star {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  --note: var(--c);
  background-color: hsla(var(--note), 100%, 50%, 0.2);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-blend-mode: darken;
  background-size: cover;
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg));
  transition: 1s all;
  position: relative;
  width: 100%;
  -webkit-animation: 12s star-switcher ease-out forwards infinite;
          animation: 12s star-switcher ease-out forwards infinite;
}
@-webkit-keyframes star-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo1_1x.webp");
    background-position: center bottom;
    /* 	background-color: var(--a2-200); */
  }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo2_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/home/yo3_1x.webp");
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo4_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
}
@keyframes star-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo1_1x.webp");
    background-position: center bottom;
    /* 	background-color: var(--a2-200); */
  }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo2_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/home/yo3_1x.webp");
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo4_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
}
.ps {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  --note: var(--c);
  background-color: hsla(var(--note), 100%, 50%, 0.2);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-blend-mode: darken;
  background-size: cover;
  -webkit-transform: rotate(calc(var(--note) * 1deg)) scale(1);
          transform: rotate(calc(var(--note) * 1deg)) scale(1);
  transition: 1s all;
  -webkit-clip-path: var(--maj-all);
          clip-path: var(--maj-all);
  background-image: url("../assets/img/ps/ps1.webp");
}
.ps--form {
  position: relative;
  width: 100%;
  -webkit-animation: 40s ps-switcher ease-out forwards infinite;
          animation: 40s ps-switcher ease-out forwards infinite;
}
@-webkit-keyframes ps-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/ps/ps1.webp");
  }
  12.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps2.webp");
  }
  25% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/ps/ps3.webp");
  }
  37.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps4.webp");
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/ps/ps5.webp");
  }
  62.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps6.webp");
  }
  75% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-d);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/ps/ps7.webp");
  }
  87.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-g);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/ps/ps8.webp");
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/ps/ps1.webp");
    opacity: 1;
  }
}
@keyframes ps-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/ps/ps1.webp");
  }
  12.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps2.webp");
  }
  25% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/ps/ps3.webp");
  }
  37.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps4.webp");
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/ps/ps5.webp");
  }
  62.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/ps/ps6.webp");
  }
  75% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-d);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/ps/ps7.webp");
  }
  87.5% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-g);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/ps/ps8.webp");
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/ps/ps1.webp");
    opacity: 1;
  }
}
.hp {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  --note: var(--c);
  background-color: hsla(var(--note), 100%, 50%, 0.2);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-blend-mode: darken;
  background-size: cover;
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg));
  transition: 1s all;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-clip-path: var(--maj-all);
          clip-path: var(--maj-all);
  background-image: url("../assets/img/home/yo1_1x.webp");
}
.hp--form {
  position: relative;
  width: 100%;
  -webkit-animation: 12s hp-switcher ease-out forwards;
          animation: 12s hp-switcher ease-out forwards;
}

@-webkit-keyframes hp-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo1_1x.webp");
    background-position: center bottom;
    /* 	background-color: var(--a2-200); */
  }
  4% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo2_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  8% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/home/yo3_1x.webp");
  }
  12% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo4_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  16% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
  /*
  20% {
  	transform: scale(1);
  	--note: var(--a);
  	clip-path: var(--maj9);
  	background-image: url('../assets/img/home/yo6_1x.webp');


  }
  */
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo7_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-d);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/home/yo8_1x.webp");
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo9_1x.webp");
  }
  32% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo10_1x.webp");
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}

@keyframes hp-switcher {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo1_1x.webp");
    background-position: center bottom;
    /* 	background-color: var(--a2-200); */
  }
  4% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo2_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  8% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--a);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-image: url("../assets/img/home/yo3_1x.webp");
  }
  12% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo4_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  16% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--e);
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/home/yo5_1x.webp");
    /* 	background-color: var(--link-300); */
  }
  /*
  20% {
  	transform: scale(1);
  	--note: var(--a);
  	clip-path: var(--maj9);
  	background-image: url('../assets/img/home/yo6_1x.webp');


  }
  */
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(--g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo7_1x.webp");
    /* 	background-color: var(--a2-300); */
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-d);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/home/yo8_1x.webp");
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-g);
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/home/yo9_1x.webp");
  }
  32% {
    -webkit-transform: scale(1);
            transform: scale(1);
    --note: var(-c);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/home/yo10_1x.webp");
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}
.chord {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  background-color: hsla(var(--note), 100%, 50%, 1);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-blend-mode: darken;
  background-size: cover;
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg));
  transition: 1s all;
}

.img-switcher {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg));
  transition: 1s background-image;
  position: relative;
  width: 100%;
  -webkit-animation: 12s ms-switcher ease-out forwards;
          animation: 12s ms-switcher ease-out forwards;
}
@-webkit-keyframes chordformer {
  0% {
    /*
    	transform: scale(1);
    	--note: var(--c);
    */
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/dan/ds25-4.webp");
    background-color: var(--a2-200);
  }
  25% {
    /*
    	transform: scale(1);
    	--note: var(--g);
    */
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/pp.webp");
    background-color: var(--a2-300);
  }
  50% {
    /*
    	transform: scale(1);
    	--note: var(--e);
    */
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/dan/ds25-5.webp");
    background-color: var(--link-300);
  }
  75% {
    /*
    	transform: scale(1);
    	--note: var(-b);
    */
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/screens.png");
    background-color: var(--accent-300);
  }
  100% {
    --note: var(--c);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/dan/ds25-4.webp");
    -webkit-transform: scale(1);
            transform: scale(1);
    background-color: var(--accent-300);
  }
}
@keyframes chordformer {
  0% {
    /*
    	transform: scale(1);
    	--note: var(--c);
    */
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-image: url("../assets/img/dan/ds25-4.webp");
    background-color: var(--a2-200);
  }
  25% {
    /*
    	transform: scale(1);
    	--note: var(--g);
    */
    -webkit-clip-path: var(--min7);
            clip-path: var(--min7);
    background-image: url("../assets/img/pp.webp");
    background-color: var(--a2-300);
  }
  50% {
    /*
    	transform: scale(1);
    	--note: var(--e);
    */
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/dan/ds25-5.webp");
    background-color: var(--link-300);
  }
  75% {
    /*
    	transform: scale(1);
    	--note: var(-b);
    */
    -webkit-clip-path: var(--maj7);
            clip-path: var(--maj7);
    background-image: url("../assets/img/screens.png");
    background-color: var(--accent-300);
  }
  100% {
    --note: var(--c);
    -webkit-clip-path: var(--maj9);
            clip-path: var(--maj9);
    background-image: url("../assets/img/dan/ds25-4.webp");
    -webkit-transform: scale(1);
            transform: scale(1);
    background-color: var(--accent-300);
  }
}
@-webkit-keyframes dan-switcher {
  0% {
    background-image: url("../assets/img/dan/switcher/ds9_1x.webp");
  }
  10% {
    background-image: url("../assets/img/dan/switcher/ds2_1x.webp");
  }
  20% {
    background-image: url("../assets/img/dan/switcher/ds3_1x.webp");
  }
  30% {
    background-image: url("../assets/img/dan/switcher/ds4_1x.webp");
  }
  40% {
    background-image: url("../assets/img/dan/switcher/ds5_1x.webp");
  }
  50% {
    background-image: url("../assets/img/dan/switcher/ds6_1x.webp");
  }
  60% {
    background-image: url("../assets/img/dan/switcher/ds3_1x.webp");
  }
  70% {
    background-image: url("../assets/img/dan/switcher/ds4_1x.webp");
  }
  80% {
    background-image: url("../assets/img/dan/switcher/ds5_1x.webp");
  }
  90% {
    background-image: url("../assets/img/dan/switcher/ds6_1x.webp");
  }
  100% {
    background-image: url("../assets/img/dan/switcher/ds9_1x.webp");
  }
}
@keyframes dan-switcher {
  0% {
    background-image: url("../assets/img/dan/switcher/ds9_1x.webp");
  }
  10% {
    background-image: url("../assets/img/dan/switcher/ds2_1x.webp");
  }
  20% {
    background-image: url("../assets/img/dan/switcher/ds3_1x.webp");
  }
  30% {
    background-image: url("../assets/img/dan/switcher/ds4_1x.webp");
  }
  40% {
    background-image: url("../assets/img/dan/switcher/ds5_1x.webp");
  }
  50% {
    background-image: url("../assets/img/dan/switcher/ds6_1x.webp");
  }
  60% {
    background-image: url("../assets/img/dan/switcher/ds3_1x.webp");
  }
  70% {
    background-image: url("../assets/img/dan/switcher/ds4_1x.webp");
  }
  80% {
    background-image: url("../assets/img/dan/switcher/ds5_1x.webp");
  }
  90% {
    background-image: url("../assets/img/dan/switcher/ds6_1x.webp");
  }
  100% {
    background-image: url("../assets/img/dan/switcher/ds9_1x.webp");
  }
}
@-webkit-keyframes ms-switcher {
  0% {
    background-image: url("../assets/img/chords/svg/1.svg");
  }
  5% {
    background-image: url("../assets/img/chords/svg/2.svg");
  }
  10% {
    background-image: url("../assets/img/chords/svg/3.svg");
  }
  15% {
    background-image: url("../assets/img/chords/svg/4.svg");
  }
  20% {
    background-image: url("../assets/img/chords/svg/5.svg");
  }
  25% {
    background-image: url("../assets/img/chords/svg/6.svg");
  }
  30% {
    background-image: url("../assets/img/chords/svg/7.svg");
  }
  35% {
    background-image: url("../assets/img/chords/svg/8.svg");
  }
  40% {
    background-image: url("../assets/img/chords/svg/9.svg");
  }
  45% {
    background-image: url("../assets/img/chords/svg/10.svg");
  }
  50% {
    background-image: url("../assets/img/chords/svg/11.svg");
  }
  55% {
    background-image: url("../assets/img/chords/svg/12.svg");
  }
  60% {
    background-image: url("../assets/img/chords/svg/13.svg");
  }
  65% {
    background-image: url("../assets/img/chords/svg/14.svg");
  }
  70% {
    background-image: url("../assets/img/chords/svg/15.svg");
  }
  75% {
    background-image: url("../assets/img/chords/svg/16.svg");
  }
  80% {
    background-image: url("../assets/img/chords/svg/17.svg");
  }
  85% {
    background-image: url("../assets/img/chords/svg/18.svg");
  }
  90% {
    background-image: url("../assets/img/chords/svg/19.svg");
  }
  95% {
    background-image: url("../assets/img/chords/svg/20.svg");
  }
  100% {
    background-image: url("../assets/img/chords/svg/21.svg");
  }
}
@keyframes ms-switcher {
  0% {
    background-image: url("../assets/img/chords/svg/1.svg");
  }
  5% {
    background-image: url("../assets/img/chords/svg/2.svg");
  }
  10% {
    background-image: url("../assets/img/chords/svg/3.svg");
  }
  15% {
    background-image: url("../assets/img/chords/svg/4.svg");
  }
  20% {
    background-image: url("../assets/img/chords/svg/5.svg");
  }
  25% {
    background-image: url("../assets/img/chords/svg/6.svg");
  }
  30% {
    background-image: url("../assets/img/chords/svg/7.svg");
  }
  35% {
    background-image: url("../assets/img/chords/svg/8.svg");
  }
  40% {
    background-image: url("../assets/img/chords/svg/9.svg");
  }
  45% {
    background-image: url("../assets/img/chords/svg/10.svg");
  }
  50% {
    background-image: url("../assets/img/chords/svg/11.svg");
  }
  55% {
    background-image: url("../assets/img/chords/svg/12.svg");
  }
  60% {
    background-image: url("../assets/img/chords/svg/13.svg");
  }
  65% {
    background-image: url("../assets/img/chords/svg/14.svg");
  }
  70% {
    background-image: url("../assets/img/chords/svg/15.svg");
  }
  75% {
    background-image: url("../assets/img/chords/svg/16.svg");
  }
  80% {
    background-image: url("../assets/img/chords/svg/17.svg");
  }
  85% {
    background-image: url("../assets/img/chords/svg/18.svg");
  }
  90% {
    background-image: url("../assets/img/chords/svg/19.svg");
  }
  95% {
    background-image: url("../assets/img/chords/svg/20.svg");
  }
  100% {
    background-image: url("../assets/img/chords/svg/21.svg");
  }
}
.chord-holder {
  height: auto;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  position: relative;
  aspect-ratio: 1/1;
  margin: auto;
}
@media (min-width: 768px) {
  .chord-holder {
    padding: 3em;
  }
}
.chord-holder.p-0 {
  padding: 0;
}
.chord-holder img {
  -o-object-fit: contain;
     object-fit: contain;
}
.chord-holder svg {
  width: 400px;
  height: 400px;
  margin: 4rem auto 0;
  padding: 1rem;
}

.chord-loader {
  display: -webkit-flex;
  display: flex;
  width: 60px;
  height: 60px;
  position: relative;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 auto;
  -webkit-animation: 2s maj-maj9 infinite linear;
          animation: 2s maj-maj9 infinite linear;
  background: var(--red);
}

@-webkit-keyframes bar-blues {
  to {
    -webkit-clip-path: var(--full);
            clip-path: var(--full);
  }
}

@keyframes bar-blues {
  to {
    -webkit-clip-path: var(--full);
            clip-path: var(--full);
  }
}
@-webkit-keyframes one-four-five {
  0%, 100% {
    -webkit-clip-path: var(--cmaj);
            clip-path: var(--cmaj);
  }
  33.3% {
    -webkit-clip-path: var(--fmaj);
            clip-path: var(--fmaj);
  }
  66.6% {
    -webkit-clip-path: var(--gmaj);
            clip-path: var(--gmaj);
  }
}
@keyframes one-four-five {
  0%, 100% {
    -webkit-clip-path: var(--cmaj);
            clip-path: var(--cmaj);
  }
  33.3% {
    -webkit-clip-path: var(--fmaj);
            clip-path: var(--fmaj);
  }
  66.6% {
    -webkit-clip-path: var(--gmaj);
            clip-path: var(--gmaj);
  }
}
@-webkit-keyframes maj-maj9 {
  0%, 100% {
    -webkit-clip-path: var(--fmaj7);
            clip-path: var(--fmaj7);
    background: var(--aqua);
  }
  25% {
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red);
  }
  50% {
    -webkit-clip-path: var(--bmin7);
            clip-path: var(--bmin7);
    background: var(--purple-75);
  }
}
@keyframes maj-maj9 {
  0%, 100% {
    -webkit-clip-path: var(--fmaj7);
            clip-path: var(--fmaj7);
    background: var(--aqua);
  }
  25% {
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red);
  }
  50% {
    -webkit-clip-path: var(--bmin7);
            clip-path: var(--bmin7);
    background: var(--purple-75);
  }
}
.tempo {
  position: fixed;
  top: 0;
  left: -300px;
  right: 0;
  bottom: 0;
  background-color: var(--off-white);
  z-index: 999999;
  display: grid;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  height: 100%;
}
.tempo__track {
  display: -webkit-flex;
  display: flex;
  -webkit-align-self: center;
          align-self: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 300px;
  margin: auto;
}
.tempo__marker {
  position: relative;
  display: block;
  width: var(--sz1);
  height: var(--sz1);
  -webkit-animation: 0.8s beats infinite ease-in-out, 0.4s maj-maj9 infinite ease-in-out;
          animation: 0.8s beats infinite ease-in-out, 0.4s maj-maj9 infinite ease-in-out;
  -webkit-clip-path: var(--cmaj9);
          clip-path: var(--cmaj9);
  background: var(--red);
}

.tooltip {
  background: var(--white);
  font-size: var(--fs-4);
  position: absolute;
  width: 10rem;
  padding: 0.2em;
  border: 1px solid;
}

.metaballs {
  width: 2em;
  position: relative;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  padding: 2em;
  -webkit-flex: 0 0 30px;
          flex: 0 0 30px;
  -webkit-filter: contrast(15);
          filter: contrast(15);
  background: white;
}

.meta {
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border-radius: 50%;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: path 0.8s infinite alternate cubic-bezier(0.3, 0.5, 0.7, 0.5);
          animation: path 0.8s infinite alternate cubic-bezier(0.3, 0.5, 0.7, 0.5);
  /* 		transform: scale(.5); */
}

@-webkit-keyframes path {
  from {
    left: 0;
  }
  to {
    left: 80%;
  }
}

@keyframes path {
  from {
    left: 0;
  }
  to {
    left: 80%;
  }
}
@-webkit-keyframes circle2 {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes circle2 {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
.one {
  margin-left: -16px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out 0.1s;
          animation: circle 2s infinite ease-in-out 0.1s;
}

.two {
  margin-top: -16px;
  margin-left: -8px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out 0.2s;
          animation: circle 2s infinite ease-in-out 0.2s;
}

.label-list__container {
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  height: var(--fs-08);
  font-size: var(--fs-08);
  font-weight: var(--fw-bold);
  line-height: var(--fs-08);
}

.label-list__prefix {
  color: var(--accent);
  line-height: var(--fs-08);
}

.label-list {
  -webkit-align-self: flex-end;
          align-self: flex-end;
  --duration: 10s;
  --steps: 5;
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
  line-height: var(--fs-08);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-animation: var(--duration) shift steps(var(--steps)) infinite 0.2s, fade-up 2s infinite;
          animation: var(--duration) shift steps(var(--steps)) infinite 0.2s, fade-up 2s infinite;
}
.label-list li {
  display: -webkit-flex;
  display: flex;
  line-height: var(--fs-08);
}

@-webkit-keyframes fade-up {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes shift {
  0% {
    -webkit-transform: translateY(calc(var(--fs-08)*var(--steps)));
            transform: translateY(calc(var(--fs-08)*var(--steps)));
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  /*
  	50%{
  		transform: translateY(-4rem);
  	}
  	75%{
  		transform: translateY(-6rem);	

  	}
  */
}
@keyframes shift {
  0% {
    -webkit-transform: translateY(calc(var(--fs-08)*var(--steps)));
            transform: translateY(calc(var(--fs-08)*var(--steps)));
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  /*
  	50%{
  		transform: translateY(-4rem);
  	}
  	75%{
  		transform: translateY(-6rem);	

  	}
  */
}

@-webkit-keyframes tempo {
  from {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit;
  }
}

@keyframes tempo {
  from {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit;
  }
}
@-webkit-keyframes list {
  from {
    -webkit-transform: translate(-10px, -20px);
            transform: translate(-10px, -20px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px);
    opacity: 1;
    border-color: inherit;
  }
}
@keyframes list {
  from {
    -webkit-transform: translate(-10px, -20px);
            transform: translate(-10px, -20px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px);
    opacity: 1;
    border-color: inherit;
  }
}
@-webkit-keyframes grid {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit;
  }
}
@keyframes grid {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit;
  }
}
@-webkit-keyframes scale-up {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit;
  }
}
@keyframes scale-up {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    border-color: transparent;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit;
  }
}
@-webkit-keyframes scale-down {
  from {
    height: 500%;
    width: 500%;
  }
  to {
    height: 200%;
    width: 200%;
  }
}
@keyframes scale-down {
  from {
    height: 500%;
    width: 500%;
  }
  to {
    height: 200%;
    width: 200%;
  }
}
@-webkit-keyframes pulse {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes beats {
  from {
    opacity: 1;
    left: 0;
  }
  to {
    opacity: 1;
    left: 100%;
  }
}
@keyframes beats {
  from {
    opacity: 1;
    left: 0;
  }
  to {
    opacity: 1;
    left: 100%;
  }
}
@-webkit-keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    border-radius: 3rem;
    background: var(--green);
  }
}
@keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    border-radius: 3rem;
    background: var(--green);
  }
}
@keyframes tempo {
  from {
    -webkit-transform: translate(0px);
            transform: translate(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(400px);
            transform: translate(400px);
    opacity: 1;
  }
}
@-webkit-keyframes rotator {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes rotator {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes intro1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(13) skew(30deg, 30deg);
            transform: scale(13) skew(30deg, 30deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg);
            transform: scale(1) skew(0deg, 0deg);
  }
}
@keyframes intro1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(13) skew(30deg, 30deg);
            transform: scale(13) skew(30deg, 30deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg);
            transform: scale(1) skew(0deg, 0deg);
  }
}
@-webkit-keyframes fade-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  99% {
    opacity: 1;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes fade-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  99% {
    opacity: 1;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes changer {
  from {
    --deg1: -20deg;
    --col1: var(--aqua);
    --col2: var(--red);
  }
  to {
    --deg1: 180deg;
    --col1: var(--blue);
    --col2: var(--aqua);
  }
}
@keyframes changer {
  from {
    --deg1: -20deg;
    --col1: var(--aqua);
    --col2: var(--red);
  }
  to {
    --deg1: 180deg;
    --col1: var(--blue);
    --col2: var(--aqua);
  }
}

@-webkit-keyframes wires {
  from {
    box-shadow: inset 0 0 0 16px transparent;
  }
  to {
    box-shadow: inset 0 0 0 16px var(--light-blue);
    opacity: 1;
  }
}

@keyframes wires {
  from {
    box-shadow: inset 0 0 0 16px transparent;
  }
  to {
    box-shadow: inset 0 0 0 16px var(--light-blue);
    opacity: 1;
  }
}
@-webkit-keyframes animiate-to {
  0% {
    background-color: inherit;
    -webkit-clip-path: inherit;
            clip-path: inherit;
  }
  0% {
    -webkit-clip-path: var(--majall2);
            clip-path: var(--majall2);
    transition: 1s all;
  }
}
@keyframes animiate-to {
  0% {
    background-color: inherit;
    -webkit-clip-path: inherit;
            clip-path: inherit;
  }
  0% {
    -webkit-clip-path: var(--majall2);
            clip-path: var(--majall2);
    transition: 1s all;
  }
}
html {
  -webkit-font-smoothing: antialiased;
}

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