:root {
  --color-bg: #FAF8F5;
  --color-bg-alt: #F3EFE9;
  --color-text: #2A2A2A;
  --color-text-light: #6B6B6B;
  /* --color-accent is the bright brand terracotta. It only ever appears as
     pure ornament (the quote bar in articles, the logo, the favicon) where
     WCAG contrast rules do not apply. At 3.06:1 on cream it is NOT valid for
     text, and at 2.84:1 on beige it is not valid for component borders. */
  --color-accent: #C97B5A;
  /* Accessible accent: used for every piece of text and for any border that
     identifies a control or a state. Verified with scripts/check-contrast.mjs:
     4.87:1 on --color-bg, 4.50:1 on --color-bg-alt, 5.16:1 on white, and
     white text on it is 5.16:1. */
  --color-accent-text: #A65836;
  /* Hairline rules and dividers. Decorative only — 1.19:1 on cream, so it must
     never be the sole indicator of a control boundary. */
  --color-border: #E8E4DF;
  /* Border for interactive controls (form fields, the floating scroll button).
     3.55:1 on white, 3.35:1 on cream, 3.10:1 on beige — clears the 3:1 that
     WCAG 1.4.11 requires of non-text UI. */
  --color-border-strong: #8F877B;
  --color-white: #FFFFFF;
  --color-overlay: rgba(250, 248, 245, 0.95);

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1280px;
  --content-width: 800px;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  --transition: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 16px;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

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

/* Keyboard focus ring. Accent-text clears 3:1 against every surface in the
   palette, so the ring stays visible on cream, beige and white alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.3;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.content-width {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.serif {
  font-family: var(--font-serif);
}

.italic {
  font-style: italic;
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
}

.btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-accent {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

/* Hover fills the button, so the fill — not the border — becomes the thing
   that must contrast with the label. White on --color-accent is only 3.25:1,
   so the fill uses --color-accent-text (5.16:1 with white). */
.btn-accent:hover {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: var(--color-white);
}

/* Category label */
.category-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 500;
  margin-bottom: 12px;
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding: 20px 24px;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.cookie-banner.show {
  display: flex;
}

.cookie-banner p {
  font-size: 13px;
  color: var(--color-text-light);
  margin: 0;
}

.cookie-banner a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.cookie-banner .btn {
  padding: 8px 24px;
  font-size: 12px;
}

/* Scroll to top */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  /* The fill matches the page background, so this border is the only thing
     marking the button's edge — it needs the 3:1 control border. */
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 100;
}

.scroll-top:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
  opacity: 1;
  visibility: visible;
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.scroll-top svg {
  width: 18px;
  height: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;
  }

  .container, .content-width {
    padding: 0 20px;
  }
}