/* wg:design-vars:start */
:root{--wg-surface:#fcf6e9;--wg-surface-alt:#f6ebdb;--wg-surface-inverse:#1d1a17;--wg-ink:#1d1a17;--wg-ink-muted:#5d5752;--wg-ink-inverse:#f9f8f7;--wg-primary:#a80015;--wg-primary-hover:#81000d;--wg-primary-soft:#fff6f5;--wg-accent:#79a8c6;--wg-accent-soft:#e9f4fb;--wg-link:#81000d;--wg-link-inverse:#ffc3bd;--wg-line:#e7e4e2;--wg-line-inverse:#47413d;--wg-primary-on:#ffffff;--wg-accent-on:#0b0907;--wg-font-display:'Exo 2', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-radius-ui:0px;--wg-radius-card:0px;--wg-shadow-card:0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);--wg-section:4rem}
/* wg:design-vars:end */
:root {
  --wg-transition-fast: 150ms ease;
  --wg-transition-base: 250ms ease;
}

/* ===== Cookie banner ===== */
#cookie-banner {
  transition: opacity var(--wg-transition-base), visibility var(--wg-transition-base);
  opacity: 0;
  visibility: hidden;
}

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

/* ===== Header sticky / scrolled state ===== */
#site-header {
  transition: box-shadow var(--wg-transition-base), background-color var(--wg-transition-base), border-color var(--wg-transition-base);
}

#site-header.is-scrolled {
  box-shadow: var(--wg-shadow-card);
  border-bottom-color: var(--wg-line);
}

/* ===== Form focus / error states ===== */
input,
textarea,
select {
  transition: border-color var(--wg-transition-fast), box-shadow var(--wg-transition-fast);
  border: 1px solid var(--wg-line);
}

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;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

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

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

/* ===== Decorative: hairline grid lines ===== */
.grid-lines {
  position: relative;
}

.grid-lines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--wg-line) 0,
    var(--wg-line) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
  opacity: 0.4;
}

.hairline-top {
  border-top: 1px solid var(--wg-line);
}

.hairline-bottom {
  border-bottom: 1px solid var(--wg-line);
}

/* ===== Numbered section labels (01 / 02) ===== */
.section-number {
  font-family: var(--wg-font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--wg-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-number::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background-color: var(--wg-line);
}

.on-dark .section-number {
  color: var(--wg-ink-inverse);
}

.on-dark .section-number::after {
  background-color: var(--wg-line-inverse);
}

/* ===== Keyframes ===== */
@keyframes wg-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wg-pulse-line {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.animate-fade-up {
  animation: wg-fade-up var(--wg-transition-base) both;
}

.animate-fade-in {
  animation: wg-fade-in var(--wg-transition-base) both;
}

.accordion-content {
  transition: opacity var(--wg-transition-base);
}

/* back to top button */
#back-to-top {
  transition: opacity var(--wg-transition-base), transform var(--wg-transition-base);
}

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

/* link underline micro-interaction, fits grid-strict direction */
.link-inline {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--wg-transition-fast);
}

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

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

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

  .section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}