:root {
  --color-bg: #f9f9f7;
  --color-fg: #233;
  --color-ln: #fe2;
}

html { background: var(--color-bg); }
body { color: var(--color-fg); }

body {
  margin: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}

@media (pointer: coarse) {
  html, body {
    overflow-x: hidden;
  }
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}



h1,
h2,
h3, 
p,
blockquote {
  margin: 0;
}

h2,
h3 {
  font-family: abril-fatface;
  font-weight: 400;
  line-height: .91;
}

h2 {
  font-size: 8.5rem;
  font-style: italic;
  letter-spacing: -0.05em;
}

h3 {
  font-size: 2rem;
  font-style: italic;
  letter-spacing:  -0.05em;
}

p i,
p em,
p b,
p a {
  font-size: 1.4em;
  line-height: 1.2rem
}

p em {
  font-style: normal;
}

p i {
  font-style: italic;
}

p a,
p b {
  font-weight: 500;
}

p,
blockquote {
  font-size: 1.2rem;
  font-family: eb garamond;
  font-weight: 400;
  letter-spacing: -.02em;
}

p,
blockquote {
  line-height: 1.75;
}

blockquote {
  font-style: italic;
  padding: 12em 3em 4em;
}



h2 {
  padding-top: .08em;
  margin-bottom: 1em;
}

p + h3 {
  margin-top: 8rem;
}

h3 + p {
  margin-top: 2.5rem;
}

h3 {
  scroll-margin-top: 3em;
}



a {
  cursor: pointer;
}

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}



iframe {
  border-radius: 15px;
}



body {
  text-align: left;
  padding: 0 30px;
}

section {
  padding-top: 60vh;
  &:not(:first-of-type) { scroll-margin-top: -35vh; }
}

a {
  text-decoration: underline;
  text-decoration-thickness: .25em;
  text-underline-offset: -.1em;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color-ln);
}


  
.menu {
  position: fixed; bottom: 0; right: 0;
  a {
    text-decoration: none !important;
    background: none !important;
  }
}

.menu {
  font-family: abril-fatface;
  font-style: italic;
  font-size: 7svh;
  line-height: .95em;
  letter-spacing: -0.088em;
  
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: .5em;
}



.blotter-active {
  display: inline-block;
  position: relative;
  canvas {
    position: absolute; top: 50%; left: 50%;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
  }

  &.started {
    color: transparent;
    canvas { opacity: 1; }
  }
}


h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  > .ln {
    &:has(+ .ln):not(.nobr):after {
      content: '-';
    }
    transform-origin: 0em .7em;
    transform: rotate(-9deg);
  }
}

.cover {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  
  padding-top: calc(50svh - 8em*1.2);
  h2 {
    letter-spacing: 0;
    line-height: 1.2em;
    margin-right: -.2em;
    margin-top: 0svh;
    font-size: 8em;
  }
}



.menu {
  canvas {
    pointer-events: none;
  }
  a:not(.blotter-active) {
    opacity: 0;
  }
}

.menu {
  transform-origin: bottom right;
}


.menu a {
  transition: opacity .25s ease-out;
  transform: rotate(-9deg);
}

.menu a:not(.started) {
  opacity: .1;
}

body:not(.ready) {
  opacity: 0;
}

@media(min-width:640px){
  body {
    margin: 0 auto;
    max-width: 640px;
  }
}

.fg {
  color: var(--color-fg);
}


.iszmk {
  will-change: filter;
  display: inline-block;
  padding: 2em;
  margin: -2em;
}


.menu {
  user-select: none;
}

.menu .spotlight {
  --w: 24svh;
  position: absolute; 
  top: calc(var(--w) * -.5);
  left: calc(var(--w) * -.5);
  width: var(--w);
  height: var(--w);
  transform: translate3d(100%, 0, 0);
  z-index: -1;
  pointer-events: none;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
  &:not(.ready) { opacity: 0 }
  &:after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--color-ln);
  }
}



a {
  cursor: pointer;
}

::selection {
  color: var(--color-fg);
  background: var(--color-ln);
}


.nrml {
  font-style: normal;
  transform: none !important;
}

.logo {
	position: fixed;
	top: 0;
	right: 0;
	img {
		display: block;
		width: 29svh;
	}
}