:root {
  /* Colors */
  --color-dark: hsl(0, 0%, 13%);
  --color-dark-lighten: hsl(0, 0%, 23%);
  --color-dark-darken: hsl(0, 0%, 3%);
  --color-dark-90: hsla(0, 0%, 13%, 0.90);
  --color-dark-75: hsla(0, 0%, 13%, 0.75);
  --color-dark-50: hsla(0, 0%, 13%, 0.50);
  --color-dark-25: hsla(0, 0%, 13%, 0.25);
  --color-dark-10: hsla(0, 0%, 13%, 0.10);

  --color-light: hsl(60, 21%, 93%);
  --color-light-lighten: hsl(60, 21%, 95%);
  --color-light-darken: hsl(60, 21%, 99%);
  --color-light-90: hsla(60, 21%, 93%, 0.90);
  --color-light-75: hsla(60, 21%, 93%, 0.75);
  --color-light-50: hsla(60, 21%, 93%, 0.50);
  --color-light-25: hsla(60, 21%, 93%, 0.25);
  --color-light-10: hsla(60, 21%, 93%, 0.10);
  
  --color-accent: hsl(0, 68%, 61%);
  --color-accent-lighten: hsl(0, 68%, 66%);
  --color-accent-darken: hsl(0, 68%, 55%);
  --color-accent-90: hsla(0, 68%, 61%, 0.90);
  --color-accent-75: hsla(0, 68%, 61%, 0.75);
  --color-accent-50: hsla(0, 68%, 61%, 0.50);
  --color-accent-25: hsla(0, 68%, 61%, 0.25);
  --color-accent-10: hsla(0, 68%, 61%, 0.10);

  /* Texture */
  --texture-noise: url('noise.png');
  --texture-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%236c6c6c' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* Borders */
  --border-dashed: dashed 2px var(--color-dark);

  /* Animation */
  --anim-springy-soft: ;
  --anim-springy-hard: ;
  --anim-thud-soft: linear(0, 1 44.7%, 0.898 51.8%, 0.874 55.1%, 0.866 58.4%, 0.888 64.3%, 1 77.4%, 0.98 84.5%, 1);
  --anim-thud-hard: linear(0, 0.234 11.8%, 0.403 18.4%, 0.624 24.7%, 0.999 33.3%, 0.76 39.9%, 0.705 42.6%, 0.687 45.2%, 0.703 47.7%, 0.753 50.3%, 0.999 57.7%, 0.89 61.8%, 0.865 63.6%, 0.857 65.3%, 0.865 67%, 0.887 68.8%, 0.999 74.5%, 0.957 77.5%, 0.944 80.2%, 0.954 82.7%, 1 88.2%, 0.988 91.9%, 1);
  --anim-overshoot-soft: linear(0, -0.004 4.9%, -0.02 9.4%, -0.124 26.4%, -0.126 30.5%, -0.104 34.1%, -0.027 38.8%, 0.108 43.1%, 0.299 47%, 0.817 55.2%, 0.97 59.1%, 1.071 63.4%, 1.118 67.7%, 1.127 72.6%, 1.108 77.2%, 1.019 90.7%, 1.004 95.2%, 1);
  --anim-overshoot-hard: ;
  --anim-snap: linear(0, 0.115 2.2%, 0.877 9.4%, 1.016 11.9%, 1.081 14.7%, 1.088 16%, 1.084 17.5%, 1.013 25.3%, 0.993 30.8%, 1.001 46.8%, 1);
  
  /* Shadows */
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.1),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.1);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.11),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.11),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.11);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.1),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.1),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.1),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.1),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.1),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.1),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.1);


  /* Typography */
  --step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);

  --font-base: 'AtkinsonHyperlegibleNext', "FallbackFont", sans-serif;
  --font-headers: 'RecursiveCasual', "FallbackFont", sans-serif;
  --font-code: 'AtkinsonHyperlegibleMono', "FallbackFont", sans-serif;
  --font-whimsy: 'ShantellSans', "FallbackFont", sans-serif;

  --font-normal: 400;
  --font-bold: 700;
}

@font-face {
  font-family: 'AtkinsonHyperlegibleMono';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'RecursiveCasual';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  /* src: url('RecursiveCasual-Bold.woff2') format('woff2'); */
  src: url('Recursive-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'ShantellSans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('ShantellSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'ShantellSans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('ShantellSans-Bold.woff2') format('woff2');
}

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
  margin-block-start: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.3; /* Modified from 1.5 */
  margin: unset;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* version 2 - April 2025 */

/* Base Styles */
body {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f0f0e8;
  background-image: var(--texture-noise);
  font-family: var(--font-base);
  font-size: var(--step-0);
  color: var(--color-dark);

  &::after {
    position: absolute;
    content: '';
    inset: 0;
    background-image: var(--texture-grid);
    opacity: .8;
    z-index: -10;
  }
}

main {
  display: flex;
  position: relative;
	/* flex-direction: column; */
	gap: 1em;
  padding: 1em;
  align-self: center;
	justify-content: center;
  align-items: center;
  width: 100%;
	max-width: 1000px;
  flex-grow: 1;
  flex-wrap: wrap;

  section {
    display: flex;
    flex-direction: column;
    background: var(--color-light-50);
    padding: 1em;
    border: solid 1px var(--color-dark-25);
    width: fit-content;
    border-radius: .5em;
  }

  .wide {
    width: 100%;
    flex-grow: grow;
  }
}

/* Main Block Styling */

h1, h2, h3, h4, h5, h6, strong, button, summary {
  font-family: var(--font-headers);
  font-weight: 700;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }

a {
  text-decoration: underline;
  text-underline-offset: .3ex;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
  /* font-size: initial; */

  &:hover {
    text-underline-offset: .4ex;
  }
}

article {
  p + h2, p + h3 {
    margin-top: .75em;
  }
}

code {
  /* display: inline-block; */
  background: var(--color-dark-10);
  color: var(--color-darker);
  border-radius: .25em;
  padding: .1em .2em;
  border: 1px dashed var(--color-dark);
  white-space: nowrap;
  font-family: var(--font-code);
  outline: 3px var(--color-dark-10) solid;
  font-size: var(--step--1);
}

time {
  display: inline-block;
}

p, a, em{
  font-family: var(--font-base);
  max-width: 60ch;
}

strong {
  font-weight: 700;
}

em {
  color: var(--color-accent);
  font-style: normal;
}

ul:not([class]) {
  padding-inline-start: 1em;
  /* padding: 1.5em; */
  li {
    padding: unset;
    /* padding-left: 1.5em; */
    margin-bottom: .5em;

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

header {
  border: unset;
  position: relative;
  padding: 1em 1em 0em 1em;
  border-left: solid var(--color-accent) .5em;

  h1 {
    position: relative;
    display: inline-block;
    margin: unset;
    padding: unset;
    text-shadow: -2px 2px var(--color-dark-25);
  }

  p {
    line-height: 1;
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-light);
  /* font-size: var(--step--1); */
}

details {
  margin-top: 1em;
  --duration: .2s;

  interpolate-size: allow-keywords;

  summary {
    font-size: var(--step-1);
  }

  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: 
      content-visibility var(--duration) allow-discrete,
      opacity var(--duration), 
      block-size var(--duration);
    transition-timing-function: ease-in-out;
  }

  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

.headsup-supports {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 1em;
  background-color: var(--color-dark-90);
  background-image: var(--texture-noise);
  width: 100%;
  height: 100%;
  place-content: center;
  place-items: center;
  backdrop-filter: blur(1px);
  color: var(--color-light);
  font-size: var(--step-1);
  z-index: 100;
  padding: 1em;

  p {
    text-align: left;
  }

  li {
    font-size: var(--step-0);
  }

  code {
    background: var(--color-light-10);
    border-color: var(--color-light);
    outline-color: var(--color-light-10);
  }
}

.headsup {
  position: relative;
  display:  none;
  flex-direction: column;

  p {
    text-align: center;
    padding: .5em .75em;
    min-width: 100%;
    color: var(--color-light);
    background: var(--color-dark-lighten);
    background-image: var(--texture-noise);
    box-shadow: 0px 4px var(--color-dark-50);

    code {
      background: var(--color-light-10);
      border-color: var(--color-light);
      outline-color: --color;
    }
  }

  p:first-of-type{
    background-color: var(--color-dark);
    min-width: 100%;
  }

}

.button-stack {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 2em);
  gap: .5em;
  position: fixed;
  bottom: 1em;
  left: 1em;
  z-index: 1000;
  /* margin: 1em; */

}

button {
  background-color: var(--color-accent);
  background-image: var(--texture-noise);
  color: var(--color-light);
  padding: .5em 1em;
  width: fit-content;
  border: unset;
  border-radius: .5em;
  position: relative;
  /* margin: 1em; */
  box-shadow: -2px 2px var(--color-dark-50);
  border: solid 1px var(--color-accent-lighten);
  will-change: translate;
  transition: translate .2s;
  transition-timing-function: var(--anim-snap);

  &:hover {
    background-color: var(--color-accent-lighten);
    border: solid 1px var(--color-accent);
    cursor: pointer;
    box-shadow: none;
    translate: -2px 2px;
  }
}

/* Experiment Notes Sidebar */
.experiment-notes {
  width: 100%;
  height: 100%;
  max-width: unset;
  max-height: unset;
  /* block-size: 100dvh;
  max-block-size: 100%; */
  background: transparent;
  border: unset;
  padding: unset;
  /* position: relative; */
  transition: 
    display .5s allow-discrete, 
    overlay .5s allow-discrete;

  .dialog-sidebar {
    position: absolute;
    inset: 0;
    width: fit-content;
    min-width: 300px;
    width: 40%;
    max-width: 50ch;
    /* height: 100; */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    translate: calc(-100%) 0;
    background: var(--color-light);
    background-image: var(--texture-noise);
    border-right: solid .5em var(--color-accent);
    transition: translate .2s ease-in-out;
    z-index: 10;
    
    p:not(:first-of-type) {
      margin-top: .5em;
    }

    section {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 3em;
      padding: 1em;
      justify-content: space-between;
    }

    footer {
      background-color: var(--color-dark);
      background-image: var(--texture-noise);
      padding: 1em;
      font-size: var(--step--1);
    }

    button {
      position: absolute;
      top: 1em;
      z-index: 100;
      right: 1em;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewbox='0 0 40 40'%3E%3Cpath d='M 10,10 L 30,30 M 30,10 L 10,30' stroke='white' stroke-width='4' stroke-linecap='butt' /%3E%3C/svg%3E");
      background-size: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      width: 1em;
    }
  }

  &::backdrop {
		opacity: 0;
    transition: opacity .1s ease;
		background-color: rgba(34, 34, 34, 0.7);
    background-image: var(--texture-noise);

    backdrop-filter: blur(5px);
    /* opacity: .5; */
  }

  &[open] {
    &, &::backdrop {
      opacity: 1;
    }
    & .dialog-sidebar {
      translate: 0;
      transform: translateX(0);
    }
    .experiment-notes-button {
      translate: 200px 0em;
    }
  }

  @starting-style {
    &[open],
    &[open]::backdrop {
      opacity: 0;
    }
    &[open] > .dialog-sidebar {
      translate: -100% 0;
    }
  }
}

/* Settings Popover */
#settings {
  position: fixed;
  bottom: 1em;
  right: 1em;
  background-color: var(--color-light);
  background-image: var(--texture-noise);
  border: solid 2px var(--color-dark);
  border-left: solid var(--color-accent) .25em;
  box-shadow: -5px 5px 0px var(--color-dark-50);
  /* border-radius: .25em; */
  padding: 2em;
}

[popover] {
  &, &::backdrop {
    transition:
      display 0.5s allow-discrete,
      overlay 0.5s allow-discrete,
      opacity 0.5s,
      transform 0.5s;

    /* Exit Stage To */
    opacity: 0;
  }

  /* On Stage */
  &:popover-open {
    opacity: 1;

    &::backdrop {
      opacity: 0.5;
    }
  }

  /* Enter Stage From */
  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }

    &:popover-open {
      transform: translateY(10px);
    }
  }

  &::backdrop {
    /* background-color: black; */
  }
}

.credit-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0;
  margin-top: .5em;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    flex-direction: column;
    
    a {
      max-width: fit-content;
    }
    
    p {
      margin-top: .25em;
      font-size: var(--step--1);
    }
  }
}

:root {
  /* Flexoki Color Palette - 400 */
  --color-red: hsl(13, 100%, 87%);
  --color-orange: hsl(27, 98%, 84%);
  --color-yellow: hsl(46, 83%, 80%);
  --color-green: hsl(66, 45%, 79%);
  --color-cyan: hsl(158, 47%, 83%);
  --color-blue: hsl(199, 42%, 84%);
  --color-purple: hsl(274, 27%, 88%);
  --color-magenta: hsl(345, 88%, 90%);
}

/* Some default template overrides */
main {
  strong, p {
    font-family: var(--font-whimsy); 
  }
}

/* Main experiment time, let's go 🥳 */
.sticky-note-wrapper {
  /* A couple of CSS variables so we can easily shift colour or add rotation from HTML or JavaScript */
  --note-rotate: deg;
  --note-color: #feff9c;
  
  position: relative;

  /* The perspective trick is here to help keep things smooth in Firefox browsers. */
  /* At least for me, without it, rottated elements be looking all pixelated 😔 */
  transform: perspective(1px) rotate(var(--note-rotate)); 

  /* V2! - Now with shadow applied on the wrapper, instead of a blank <div> inside */
  &::before {
    position: absolute;
    inset: 0;
    content: '';
    background: var(--color-dark-25);
    border-radius:0 0 100px/5px 0;
    filter: blur(2px);
  }

  .sticky-note-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    
    font-size: var(--step--1);
    padding: 1em;
    aspect-ratio: 1 / 1;
    min-width: 200px;
    width: min-content;
    
    color: var(--color-dark);
    background-color: var(--note-color);
    background-image:  var(--texture-noise),
    linear-gradient(165deg,transparent 84%, var(--color-dark-25) 100%);
    
    /* While I haven't yet, this would be sweet to set up with CSS variables. */
    /* Then you could generate new values (at build time for me as I use 11ty) and have different "folds" */
    /* Bonus points if you hook up the same variable with some calculations for the shadow above */
    border-radius: 0 0 75%/10% 0; 

    /* And finally some border/outline stuff I chucked on just to give it more of a "lifted" feel. a bit of thickness */
    /* I just experimented until I achieved a look I was happy with, play around with these yourself or remove it altogether if you prefer */
    border-bottom: solid 2px var(--color-dark-50);
    outline: solid 1px var(--color-dark-25);
    outline-offset: -1px;
    
    /* I prefer to control the shadow a bit more, so opted to use a standalone div (above) over a box-shadow */
    /* But I kept it here should you want to test it for yourself */
    /* box-shadow: 0px 5px 10px var(--color-dark-25); */
  }
}