/* wg:design-vars:start */
:root{--wg-surface:#f8f8f8;--wg-surface-alt:#f2f2f2;--wg-surface-inverse:#1b1b1b;--wg-ink:#1b1b1b;--wg-ink-muted:#585858;--wg-ink-inverse:#f8f8f8;--wg-primary:#83404c;--wg-primary-hover:#672d38;--wg-primary-soft:#fff6f7;--wg-accent:#ac99b9;--wg-accent-soft:#f4f0f7;--wg-link:#672d38;--wg-link-inverse:#f7c6cb;--wg-line:#e4e4e4;--wg-line-inverse:#424242;--wg-primary-on:#ffffff;--wg-accent-on:#090909;--wg-font-display:'PT Serif', Georgia, 'Times New Roman', serif;--wg-font-body:'Golos Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-radius-ui:4px;--wg-radius-card:6px;--wg-shadow-card:none;--wg-section:8rem}
/* wg:design-vars:end */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

body {
  font-family: var(--wg-font-body);
}

.font-display {
  font-family: var(--wg-font-display);
}

/* Reveal animation for sections as they enter view (progressive enhancement) */
.section {
  animation: fadeIn 0.6s ease-out;
}

/* Thin decorative rule between sections */
.section + .section {
  position: relative;
}

.section + .section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--wg-line);
}

/* Large decorative numerals */
.numeral-display {
  font-family: var(--wg-font-display);
  color: var(--wg-primary-soft);
  line-height: 0.9;
  font-weight: 700;
  -webkit-text-stroke: 1px var(--wg-line);
}

/* Pull quote styling */
.pull-quote {
  font-family: var(--wg-font-display);
  font-style: italic;
  border-left: 2px solid var(--wg-primary);
  padding-left: 1.5rem;
  color: var(--wg-ink);
  line-height: 1.4;
}

.pull-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: var(--wg-font-body);
  font-size: 0.875rem;
  color: var(--wg-ink-muted);
}

/* ---------------- Sticky header ---------------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

#site-header.is-scrolled {
  border-bottom: 1px solid var(--wg-line);
  box-shadow: 0 1px 0 var(--wg-line);
}

/* ---------------- Cookie banner ---------------- */
#cookie-banner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#cookie-banner.cookie-visible {
  opacity: 1;
  visibility: visible;
}

#cookie-banner:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

/* ---------------- Form focus and error states ---------------- */
input,
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wg-primary);
  box-shadow: 0 0 0 3px var(--wg-primary-soft);
}

input.error,
textarea.error,
select.error {
  border-color: #dc2626;
}

input.error:focus,
textarea.error:focus,
select.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.error-message {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #dc2626;
}

.success-message {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #15803d;
}

/* ---------------- Back to top ---------------- */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-2px);
}

/* ---------------- Accordion ---------------- */
.accordion-content {
  transition: opacity 0.25s ease;
}

.accordion-header {
  cursor: pointer;
  transition: color 0.2s ease;
}

.accordion-header i {
  transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* ---------------- Links and underline buttons ---------------- */
.link-inline,
.btn-primary,
.btn-secondary {
  transition: color 0.2s ease, opacity 0.2s ease, gap 0.2s ease;
}

.btn-primary i,
.btn-secondary i,
.link-inline i {
  transition: transform 0.2s ease;
}

.btn-primary:hover i,
.btn-secondary:hover i,
.link-inline:hover i {
  transform: translateX(3px);
}

/* ---------------- Img frame subtle fade ---------------- */
.img-frame img {
  transition: opacity 0.5s ease;
}

/* ---------------- Mobile menu animation ---------------- */
#mobile-menu {
  animation: fadeIn 0.25s ease;
}

/* ---------------- Print rules ---------------- */
@media print {
  #site-header,
  #mobile-menu-toggle,
  #mobile-menu,
  #cookie-banner,
  #back-to-top,
  footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-top: 1rem;
    padding-bottom: 1rem;
    animation: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}