/* Design tokens, resets and typography shared by every page. */

:root {
  --void: #232326;
  --void-2: #2b2b2f;
  --panel: #36363b;
  --line: rgba(201, 169, 107, 0.22);
  --line-strong: rgba(201, 169, 107, 0.42);
  --blood: #c9a96b;
  --blood-hot: #d9c08a;
  --blood-deep: #6b5a3a;
  --cyan: #93bba8;
  --red: #d9726f;
  --bone: #ece8e0;
  --muted: #b9b4aa;
  --faint: #8a867e;
  --gold: #d1a0aa;
  --f-display: "Marcellus SC", "Cormorant SC", serif;
  --f-head: "Cormorant SC", Georgia, serif;
  --f-body: "Alegreya", Georgia, serif;
  --f-mono: "Cormorant SC", Georgia, serif;
  --f-hg: "Noto Serif Sinhala", "Iskoola Pota", serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 70px;
  --cut: 12px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}

::selection {
  background: var(--blood);
  color: #fff;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--blood);
  color: #fff;
  padding: 8px 14px;
  font-family: var(--f-mono);
}

.skip:focus {
  left: 8px;
}

h1 {
  font-weight: 400;
  margin: 0 0 0.5em;
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-size: 1.22rem;
  line-height: 1.6;
}

.eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.95rem;
  font-family: var(--f-hg), var(--f-head);
  text-transform: uppercase;
}

.eyebrow::before {
  font-size: 0.6rem;
  color: var(--blood);
}

a:hover {
  text-shadow: 0 0 12px rgba(201, 169, 107, 0.6);
}

body,
h1 {
  font-synthesis: none;
}

.eyebrow::before {
  content: "";
  width: 50px;
  height: 18px;
  flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'><circle cx='8' cy='8' r='3.3' fill='%23c9a96b'/><path d='M8 .8 V2.8 M8 13.2 V15.2 M.8 8 H2.8 M13.2 8 H15.2 M2.9 2.9 L4.3 4.3 M11.7 11.7 L13.1 13.1 M13.1 2.9 L11.7 4.3 M4.3 11.7 L2.9 13.1' stroke='%23c9a96b' stroke-width='1.2' stroke-linecap='round'/><circle cx='20' cy='8' r='1' fill='%23c9a96b'/><circle cx='24' cy='8' r='1' fill='%23c9a96b'/><path d='M36 1.2 A6.8 6.8 0 0 0 36 14.8 A14 14 0 0 1 36 1.2Z' fill='%23c9a96b'/></svg>") no-repeat left center / contain;
  box-shadow: none;
}

* {
  text-shadow: none !important;
}

body::before {
  background: radial-gradient(60vw 45vh at 8% 0%, rgba(209, 160, 170, 0.07), transparent 70%), radial-gradient(60vw 50vh at 100% 100%, rgba(147, 187, 168, 0.07), transparent 70%), linear-gradient(180deg, #2a2a2e 0%, #232326 100%);
}

body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' result='t'/><feColorMatrix in='t' type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='.5' intercept='.5'/><feFuncG type='linear' slope='.5' intercept='.5'/><feFuncB type='linear' slope='.5' intercept='.5'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.eyebrow {
  color: #c9a96b;
}

a {
  color: #93bba8;
}

a:hover {
  color: #d9c08a;
}