/* Fonts */
@font-face {
  font-family: "Noto Sans Local";
  src: url("../Fonts/noto-sans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Local";
  src: url("../Fonts/noto-sans-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Local";
  src: url("../Fonts/noto-sans-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Local";
  src: url("../Fonts/noto-sans-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Siddhanta Cakravat";
  src: url("../Fonts/siddhanta-cakravat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Variables */
:root {
  --color-primary: rgb(122 136 54);
  --color-accent: rgb(212 117 25);
  --color-heading: rgb(28 31 33);
  --color-link: color-mix(in srgb, var(--color-accent) 70%, var(--color-heading));

  --color-text: rgb(42 46 48);
  --color-text-soft: rgb(94 101 106);

  --color-bg: rgb(253 253 253);
  --color-surface: rgb(255 255 255);
  --color-border: rgb(228 228 228);

  --color-event-focus-ashtanga: rgb(190 91 23);
  --color-event-focus-therapy: rgb(220 133 70);
  --color-event-mtc: rgb(122 136 54);
  --color-event-exam: rgb(74 80 82);
  --color-event-workshop: rgb(168 103 46);
  --color-event-retreat: rgb(112 112 82);
  --color-event-other: rgb(117 112 105);

  --color-pill-bg: rgba(255, 255, 255, 0.12);
  --color-pill-bg-hover: rgba(255, 255, 255, 0.18);
  --color-pill-border: rgba(255, 255, 255, 0.16);

  --font-body: "Noto Sans Local", "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-heading: "Noto Sans Local", "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-accent: "Siddhanta Cakravat", serif;

  --page-inline-space: 1.25rem;
  --content-grid-width: 980px;
  --content-wide-width: 1240px;
  --content-text-width: 44rem;
  --content-narrow-width: calc((2 * var(--content-text-width)) - var(--content-grid-width));
  --content-width: var(--content-grid-width);
  --content-bleed: calc((var(--content-grid-width) - var(--content-text-width)) / 2);
  --layout-width-full: calc(100vw - (2 * var(--page-inline-space)));
  --layout-width-wide: min(var(--content-wide-width), calc(100vw - (2 * var(--page-inline-space))));
  --layout-width-content: var(--content-grid-width);
  --layout-width-text: var(--content-text-width);
  --layout-width-narrow: min(var(--content-narrow-width), 100%);

  --topbar-height: 4.5rem;
  --topbar-inline-space: 1.25rem;
  --topbar-gap: 1.25rem;
  --topbar-left-space: clamp(5rem, 10vw, 8.75rem);
  --topbar-right-space: var(--topbar-left-space);

  --menu-left-offset: calc(
    var(--topbar-inline-space) + var(--topbar-left-space) + var(--topbar-gap)
  );
  --menu-right-offset: calc(
    var(--topbar-inline-space) + var(--topbar-right-space) + var(--topbar-gap)
  );

  --radius-soft: 6px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(16, 20, 18, 0.08);
}

/* Basics */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.72;
  font-weight: 400;
  margin: 0;
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem var(--page-inline-space) 4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.14;
  margin-top: 0;
  font-weight: 400;
  letter-spacing: -0.018em;
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.85rem;
}

h2 {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  margin-top: 2.35rem;
  margin-bottom: 0.7rem;
}

h3 {
  font-size: 1.28rem;
  margin-top: 1.8rem;
  margin-bottom: 0.45rem;
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent);
}

button {
  font: inherit;
}

em {
  font-style: italic;
}

.intro-accent,
.quote-accent,
.script-accent {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

.intro-accent {
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 1rem;
}

.quote-accent {
  font-size: 1.2rem;
  line-height: 1.5;
}