/* Base styles — typography, body, links, utilities */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--cream);
  background-color: var(--bg);
  min-height: 100vh;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 128px;
}

/* Headings */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
}

h1 { font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); }
h3 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-md); }

p { color: var(--cream-dim); line-height: 1.75; }

/* Links */
a {
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--amber); }

/* Mono text */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Ornament dividers */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted-dark);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Section label */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: var(--sp-2);
}

/* Section spacing */
.section {
  padding: var(--sp-7) 0;
}
.section-sm {
  padding: var(--sp-5) 0;
}

/* Container */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
.container-sm {
  max-width: var(--max-w-sm);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* Utility: muted text */
.text-muted { color: var(--muted); }
.text-amber { color: var(--amber); }
.text-gold { color: var(--gold); }
.text-cream { color: var(--cream); }
.text-center { text-align: center; }

/* Text sizes */
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

/* Spacing helpers */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-5) 0;
}

/* Language display control — html starts with class="lang-sq" set in markup */
html.lang-sq [lang="en"] { display: none; }
html.lang-en [lang="sq"] { display: none; }