html { scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: var(--fs-18); } }

/* Subtle paper grain over the whole page (desktop only: on iOS Safari a full-screen
   fixed layer is used to tint the status bar and lets content show through) */
@media (max-width: 1024px), (hover: none) { body::before { display: none; } }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
h3 { font-size: var(--fs-h3); margin-bottom: var(--space-sm); }
h1 em, h2 em, h3 em { font-style: normal; color: var(--color-accent); }

p + p { margin-top: var(--space-md); }
a { color: inherit; }
.prose a, p a { color: var(--color-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, p a:hover { color: var(--color-primary); }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
source { display: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg) var(--space-xl); }
.section--alt { background: var(--color-bg-alt); }
.section--warm { background: var(--color-bg-warm); }
@media (min-width: 900px) { .section { padding-block: var(--space-2xl); } }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--color-accent-light); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--color-on-dark); }
.btn--primary:hover { background: var(--color-accent); }
.btn--ghost { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn--ghost:hover { background: var(--color-primary); color: var(--color-on-dark); }
.btn--light { background: var(--color-on-dark); color: var(--color-primary); }
.btn--light:hover { background: var(--color-accent-light); }
.btn--outline-light { border-color: var(--color-on-dark-soft); color: var(--color-on-dark); }
.btn--outline-light:hover { background: var(--color-on-dark); color: var(--color-primary); }
.btn--small { min-height: 44px; padding: 8px 20px; font-size: var(--fs-14); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}
.link-arrow::after { content: "\2192"; transition: transform var(--transition); }
.link-arrow:hover::after { transform: translateX(5px); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--color-primary); color: var(--color-on-dark); padding: 10px 16px; border-radius: var(--radius); }
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Logo: original Siné logo as transparent PNG */
.logo { display: inline-block; text-decoration: none; height: 64px; }
.logo img { display: block; height: 100%; width: auto; }