@font-face {
  font-family: 'Antropos Freefont';
  font-style: normal;
  font-weight: normal;
  src: local('Antropos Freefont'), url('/fonts/antrf___.woff') format('woff');
}

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: 'Averia Libre';
  src: url('../fonts/AveriaLibre-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Theme Variables */
:root {
  /* Color Palette */
  /* --color-primary-dark: #b93636; */
  --color-primary-dark: #bc4444;
  --color-primary-medium: #bb3c2b;
  /* --color-secondary-light: #ffac3f; */
  --color-accent: #c57f63;
  --color-text: #fcc4a9;
  --color-text-light: #ffffff;
  --color-text-secondary: #572e0a;
  
  /* Utility Colors */
  --color-border: rgba(255, 255, 255, 0.2);
  --color-hover-text: #ffffff;
  --color-hover-accent: #ffdaaa;
  --color-hover-secondary: #ce4d3f;
  
  /* Design Tokens */
  --radius: 12px;
  --shadow: 0 12px 30px rgba(30, 20, 15, 0.08);
  
  /* Background Pattern */
  --paper: url("/assets/paper.png");
  --bg-size: 250px 250px;
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-family: 'InterVariable', sans-serif;
  color: var(--color-text);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* main > section {
  background-color: var(--color-primary-dark);
  background-image: var(--paper);
  background-size: var(--bg-size);
  background-repeat: repeat;
  background-blend-mode: multiply;
} */

main {
  background-color: var(--color-primary-dark);
  flex-grow: 1;
}

.content {
  padding: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(2.5rem, 4vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  max-width: 1250px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  contain: layout style paint;
}

/* main > :first-child {
  margin-top: 0;
}

main > :last-child {
  margin-bottom: 0;
} */

.content h1,
.content h2,
.content h3 {
  font-family: 'Averia Libre', cursive;
  color: var(--color-text-light);
  line-height: 1.2;
}

.content h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  margin: 0 0 1rem;
}

.content h1::after {
  content: '';
  display: block;
  width: 80px;
  height: 6px;
  background: var(--color-hover-accent);
  margin-top: 0.75rem;
  border-radius: 3px;
}

.content h2 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  margin: 2rem 0 0.75rem;
}

.content h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  margin: 1.5rem 0 0.5rem;
}

.content p,
.content li {
  line-height: 1.7;
  font-size: 1.1rem;
}

.content ul,
.content ol {
  padding-left: 1.25rem;
}

.content a {
  color: var(--color-text-light);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.content a:hover {
  color: var(--color-hover-text);
  border-bottom-color: var(--color-hover-accent);
}

.content img {
  max-height: 420px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow);
  max-width: 100%;
  /* margin: 1rem 0; */
}

.bg {
  background-color: var(--color-primary-dark);
}

.elevated {
  position: relative;
  color: var(--color-text-secondary);
  /* background-color: var(--color-secondary-light); */
  /* background-image: linear-gradient(90deg, #ffd75f, #ffba5f); */
  background-image: linear-gradient(90deg, #ffc258, #ffaa5f);
  /* background-image: var(--paper); */
  /* background-size: var(--bg-size); */
  /* background-repeat: repeat; */
  /* background-blend-mode: multiply; */
  /* background-image: none; */
  background-blend-mode: normal;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 1rem;
}
.elevated::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper);
  background-size: var(--bg-size);
  background-repeat: repeat;
  opacity: 0.7;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.elevated li a {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.elevated li a:hover {
  border-bottom-color: var(--color-hover-secondary);
}
.elevated li a::after {
  background: var(--color-hover-secondary);
}
.elevated h1::after {
  background: var(--color-hover-secondary);
}

.blue {
  /* background-color: rgb(51, 113, 194); */
  background-color: rgb(84, 120, 166);
  color: var(--color-text-light);
}
.blue a:hover {
  border-bottom-color: var(--color-text-light)
}

.green {
  background-color: rgb(78, 143, 95);
  color: var(--color-text-light);
}
.green a:hover {
  border-bottom-color: var(--color-text-light)
}

.purple {
  background-color: rgb(130, 90, 150);
  color: var(--color-text-light);
}
.purple a:hover {
  border-bottom-color: var(--color-text-light)
}

/* Ensure texture compatibility by using pseudo-elements + mix-blend-mode 
   instead of background-blend-mode, which is buggy on iOS Safari. */
main,
.bg,
.blue,
.green,
.purple {
  position: relative;
  isolation: isolate; /* Create stacking context so ::before stays behind content */
}

main::before,
.bg::before,
.blue::before,
.green::before,
.purple::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--paper);
  background-size: var(--bg-size);
  background-repeat: repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}