/* evanipock.com: the umbrella. Nothing under /skin may load this file. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}

:root {
  --ground: #0e0b09;
  --glow: rgba(196, 150, 84, 0.10);
  --brass: #c4a46c;
  --brass-dim: rgba(196, 164, 108, 0.66);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background-color: var(--ground);
  background-image: radial-gradient(ellipse 60% 50% at 50% 46%, var(--glow), transparent 70%);
  color: var(--brass);
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mark {
  text-align: center;
  padding: 0 6vw;
}

.mark h1 {
  font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 6.25rem);
  letter-spacing: 0.015em;
  line-height: 1;
}

.mark p {
  margin-top: 1.6rem;
  font-weight: 400;
  font-size: clamp(0.7rem, 1.3vw, 0.82rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass-dim);
  padding-left: 0.42em; /* balances the tracking so the line sits centered */
}

.mark p a { color: inherit; text-decoration: none; }
.mark p a:hover { color: var(--brass); }