/* —————————————————————————————— FONTS —————————————————————————————— */

@font-face {
  font-family: Denim;
  src: url(denimtrialvf.ttf);
}

@font-face {
  font-family: Romie;
  src: url(romietrial-italic.otf);
}

/* —————————————————————————————— CORE —————————————————————————————— */

:root {
  --bg: #F3E9DD;
  --bgLight: #F6F5F0;
  /* --fg: #CD856A; */
  --fg: #472B29;
  --highlight: #C99BE5;
  --trans: 0.2s;
  --corner: 5px;
  --perspective: 150vmax;
  --cardTilt: rotateZ(-15deg);
  --cardScale: scale(1);
  --vh: 100vh;
  --padding: 15px;
  --paddingx2: calc(var(--padding) * 2);
  --paddingx3: calc(var(--padding) * 3);
  --paddingx4: calc(var(--padding) * 4);
  --bullet: 1.1em;
}

body {
  background-color: var(--bg);
  color: var(--fg);
	font-family: 'Denim', Helvetica, sans-serif;
  font-size: 14px;
  font-variation-settings: 'wght' 500, 'wdth' 125;
  font-variant-ligatures: none;
  letter-spacing: -0.015em;

  width: 100vw;
  overflow-x: hidden;
}

/* —————————————————————————————— TYPE —————————————————————————————— */

p { line-height: 1.1em; }
p.bold { font-variation-settings: 'wght' 600, 'wdth' 125; }

h1 {
  font-size: 1.7em;
  line-height: 0.95em;
  font-variation-settings: 'wght' 600, 'wdth' 150; 
  letter-spacing: -0.03em;
}

span.serif {
  font-family: 'Romie', 'Times New Roman', Times, serif;
  letter-spacing: inherit;
}

a {
  color: inherit;
  transition: color var(--trans), letter-spacing var(--trans);
}

@media (hover: hover) {
  a:hover {
    color: var(--highlight);
    letter-spacing: 0.05em;
  }
}

/* —————————————————————————————— DEVICES —————————————————————————————— */

@media (max-width: 1500px) {

}

@media (max-width: 800px) {
  :root { --padding: 10px; }
  body { font-size: 12px; }
  h1 { font-size: 1.35em; }
}

@media (max-width: 600px) {

}