/* Shared across every page: reset, tokens, animations, header, footer, buttons, cookie banner. */

:root {
  --resizer: 600;
  --anchor-offset: 96px;
  --type-min: 13px;
  --color-bg: #222617;
  --color-bg-alt: #323725;
  --color-accent: #855ede;
  --color-text: #fefefe;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', Georgia, serif; }
h1, h2, h3 { letter-spacing: -0.02em; }
h2 { text-align: left; }

a { text-decoration: none; }
p, li { text-indent: 0; }
ol { padding-left: min(30px, calc(30vw / var(--resizer) * 100)); }
input { outline: none; }
input::placeholder { color: inherit; }

button, a[href] { transition: all 150ms ease-in-out; }
button:hover, [data-btn]:hover { transform: scale(1.04); cursor: pointer; }
button:active, [data-btn]:active { transform: scale(.96); }
nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

*::-webkit-scrollbar { background-color: var(--color-accent); border-radius: 43px; }
*::-webkit-scrollbar-thumb { background-color: var(--color-bg-alt); border-radius: 43px; border: 1px solid var(--color-accent); }

#close:checked ~ section { display: none !important; }
.visually-hidden { display: none; }

@media screen and (max-width: 600px) {
  .site-header nav { display: none !important; }
}

/* Scroll-in animation, driven by assets/js/animate.js */
@keyframes sfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfSlideUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
[data-anim] { opacity: 0; }
[data-anim].sf-vis { animation: sfFadeIn 419ms cubic-bezier(.22, 1, .36, 1) both; }
[data-anim="2"].sf-vis { animation-delay: 105ms; }
[data-anim="3"].sf-vis { animation-delay: 210ms; }
[data-cookie] { animation: sfSlideUp 335ms cubic-bezier(.22, 1, .36, 1) 251ms both; }

.page-main { display: flex; position: relative; width: 100%; margin: 0 auto; justify-content: center; align-items: center; flex-direction: column; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: min(16px, calc(16vw / var(--resizer) * 100));
  padding: min(12px, calc(12vw / var(--resizer) * 100)) min(22px, calc(22vw / var(--resizer) * 100));
  min-width: fit-content;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(min(19px, var(--type-min)), calc(19vw / var(--resizer) * 100), 19px);
  line-height: 1.1;
}
.btn--primary { background-color: var(--color-accent); color: var(--color-bg); }
.btn--outline { background-color: transparent; color: var(--color-text); border: min(1px, calc(1vw / var(--resizer) * 100)) solid var(--color-text); }
.btn--sm {
  height: min(38px, calc(38vw / var(--resizer) * 100));
  padding: 0 min(16px, calc(16vw / var(--resizer) * 100));
  font-size: clamp(min(13px, var(--type-min)), calc(13vw / var(--resizer) * 100), 13px);
}

/* Site header */
.site-header { position: sticky; top: 0; z-index: 20; width: 100%; background: var(--color-bg); }
.site-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: min(70%, 784px);
  margin: 0 auto;
  padding: min(15px, calc(15vw / var(--resizer) * 100)) min(28px, calc(28vw / var(--resizer) * 100));
  border-bottom: min(1px, calc(1vw / var(--resizer) * 100)) solid rgba(254, 254, 254, .12);
  flex-wrap: wrap;
  gap: min(16px, calc(16vw / var(--resizer) * 100));
}
.site-brand { display: flex; align-items: center; gap: min(9px, calc(9vw / var(--resizer) * 100)); }
.site-brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(44px, calc(44vw / var(--resizer) * 100));
  height: min(44px, calc(44vw / var(--resizer) * 100));
  border-radius: min(12px, calc(12vw / var(--resizer) * 100));
  background-color: var(--color-text);
  color: var(--color-bg);
  flex-shrink: 0;
  padding: min(8px, calc(8vw / var(--resizer) * 100));
}
.site-brand__name {
  color: var(--color-text);
  font-weight: 700;
  font-size: clamp(min(19px, var(--type-min)), calc(19vw / var(--resizer) * 100), 19px);
  letter-spacing: -0.01em;
}
.site-nav { display: flex; gap: min(26px, calc(26vw / var(--resizer) * 100)); align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; }
.site-nav__link {
  color: var(--color-text);
  font-size: clamp(min(15px, var(--type-min)), calc(15vw / var(--resizer) * 100), 15px);
  font-weight: 500;
  opacity: .82;
}

/* Site footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: min(16px, calc(16vw / var(--resizer) * 100));
  scroll-margin-top: var(--anchor-offset);
  width: 100%;
  max-width: min(70%, 784px);
  margin: 0 auto;
  padding: min(34px, calc(34vw / var(--resizer) * 100)) min(28px, calc(28vw / var(--resizer) * 100));
  border-top: min(1px, calc(1vw / var(--resizer) * 100)) solid rgba(254, 254, 254, .12);
}
.site-footer__brand { display: flex; align-items: center; gap: min(9px, calc(9vw / var(--resizer) * 100)); }
.site-footer__name { font-weight: 700; font-size: clamp(min(18px, var(--type-min)), calc(18vw / var(--resizer) * 100), 18px); letter-spacing: -0.01em; }
.site-footer__links { display: flex; gap: min(22px, calc(22vw / var(--resizer) * 100)); align-items: center; flex-wrap: wrap; }
.site-footer__link { color: var(--color-text); font-size: clamp(min(14px, var(--type-min)), calc(14vw / var(--resizer) * 100), 14px); opacity: .7; white-space: nowrap; }
.site-footer__copy { color: var(--color-text); opacity: .55; font-size: clamp(min(13px, var(--type-min)), calc(13vw / var(--resizer) * 100), 13px); white-space: nowrap; }

/* Cookie banner */
.cookie-banner {
  display: flex;
  position: fixed;
  width: min(400px, 92%);
  bottom: min(16px, calc(16vw / var(--resizer) * 100));
  right: min(16px, calc(16vw / var(--resizer) * 100));
  gap: min(31px, calc(31vw / var(--resizer) * 100));
  flex-wrap: wrap;
  padding: min(24px, calc(24vw / var(--resizer) * 100));
  flex-direction: column;
  background-color: var(--color-bg-alt);
  border: min(1px, calc(1vw / var(--resizer) * 100)) solid var(--color-text);
  justify-content: center;
  align-items: flex-start;
  border-radius: min(13px, calc(13vw / var(--resizer) * 100));
  max-width: 400px;
  text-align: left;
  box-shadow: 0 min(26px, calc(26vw / var(--resizer) * 100)) min(56px, calc(56vw / var(--resizer) * 100)) max(-16px, calc(-16vw / var(--resizer) * 100)) rgba(254, 254, 254, .28);
}
.cookie-banner__text {
  font-size: clamp(min(18px, var(--type-min)), calc(18vw / var(--resizer) * 100), 18px);
  width: 100%;
  text-align: left;
}
.cookie-banner__actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: min(6px, calc(6vw / var(--resizer) * 100)); }