@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wi-bg-page);
  color: var(--wi-text-primary);
  font-family: var(--wi-font-body);
  font-size: var(--wi-type-body);
  line-height: var(--wi-leading-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--wi-magenta-700); color: var(--wi-white); }

.wi-container {
  width: min(calc(100% - (2 * var(--wi-gutter))), var(--wi-container-wide));
  margin-inline: auto;
}
.wi-reading { width: min(calc(100% - (2 * var(--wi-gutter))), var(--wi-container-reading)); margin-inline: auto; }
.wi-section { position: relative; padding-block: var(--wi-space-section); }
.wi-grid { display: grid; gap: var(--wi-grid-gap); }
.wi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wi-display, .wi-h1, .wi-h2, .wi-h3 {
  margin: 0;
  color: var(--wi-copy, var(--wi-text-primary));
  font-family: var(--wi-font-display);
  font-weight: 650;
  letter-spacing: var(--wi-tracking-display);
  text-wrap: balance;
}
.wi-display { font-size: var(--wi-type-display-lg); line-height: var(--wi-leading-display); }
.wi-h1 { font-size: var(--wi-type-h1); line-height: var(--wi-leading-display); }
.wi-h2 { font-size: var(--wi-type-h2); line-height: var(--wi-leading-heading); }
.wi-h3 { font-size: var(--wi-type-h3); line-height: 1.14; }
.wi-lead { color: var(--wi-copy-muted, var(--wi-text-secondary)); font-size: var(--wi-type-lead); line-height: 1.6; }
.wi-em {
  color: var(--wi-highlight, var(--wi-magenta-700));
  font-family: var(--wi-font-display);
  font-style: italic;
  font-weight: 550;
}
.wi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wi-highlight, var(--wi-magenta-700));
  font-family: var(--wi-font-data);
  font-size: var(--wi-type-micro);
  font-weight: 600;
  letter-spacing: var(--wi-tracking-data);
  text-transform: uppercase;
}
.wi-eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.wi-data {
  color: var(--wi-accent-proof);
  font-family: var(--wi-font-display);
  font-size: var(--wi-type-h2);
  font-weight: 700;
  line-height: 1;
}

.wi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 16px 25px;
  border: 1px solid var(--wi-petrol-950);
  border-radius: var(--wi-radius-sm);
  background: var(--wi-petrol-900);
  box-shadow: 5px 5px 0 var(--wi-magenta-500);
  color: var(--wi-white);
  cursor: pointer;
  font-family: var(--wi-font-body);
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--wi-duration-fast) var(--wi-ease-standard),
              box-shadow var(--wi-duration-fast) var(--wi-ease-standard),
              background var(--wi-duration-fast) var(--wi-ease-standard);
}
.wi-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--wi-magenta-500); background: var(--wi-petrol-800); }
.wi-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wi-magenta-500); }
.wi-button:focus-visible { outline: 3px solid var(--wi-focus); outline-offset: 4px; }
.wi-button--accent { background: var(--wi-magenta-700); border-color: var(--wi-magenta-800); box-shadow: 5px 5px 0 var(--wi-lime-500); }
.wi-button--light { background: var(--wi-white); border-color: var(--wi-white); color: var(--wi-petrol-900); box-shadow: 5px 5px 0 var(--wi-magenta-500); }
.wi-button--ghost { background: transparent; color: var(--wi-copy, var(--wi-text-primary)); box-shadow: none; border-color: var(--wi-rule, var(--wi-border)); }
.wi-button--small { min-height: 42px; padding: 10px 16px; font-size: .78rem; box-shadow: 3px 3px 0 var(--wi-magenta-500); }

.wi-card {
  padding: var(--wi-space-6);
  border: 1px solid var(--wi-rule, var(--wi-border));
  border-radius: var(--wi-radius-md);
  background: var(--wi-surface-raised, var(--wi-white));
  box-shadow: var(--wi-shadow-soft);
  color: var(--wi-copy, var(--wi-text-primary));
}
.wi-card--editorial { box-shadow: var(--wi-shadow-editorial); }
.wi-card--discovery {
  position: relative;
  border-radius: var(--wi-radius-xs);
  box-shadow: var(--wi-shadow-magenta);
  transform: rotate(-1.2deg);
}
.wi-card--dark {
  --wi-copy: var(--wi-white);
  --wi-copy-muted: var(--wi-text-inverse-muted);
  --wi-rule: var(--wi-border-inverse);
  background: var(--wi-petrol-900);
}

.wi-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: var(--wi-radius-pill);
  color: var(--wi-magenta-700);
  font-family: var(--wi-font-data);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wi-badge--proof { border: 0; background: var(--wi-lime-500); color: var(--wi-petrol-950); }
.wi-badge--dark { color: var(--wi-magenta-300); }

.wi-proof {
  display: grid;
  gap: 5px;
  padding-left: var(--wi-space-5);
  border-left: 3px solid var(--wi-magenta-500);
}
.wi-proof strong { font-family: var(--wi-font-display); font-size: 2.4rem; line-height: 1; }
.wi-proof span { color: var(--wi-copy-muted, var(--wi-text-secondary)); font-size: var(--wi-type-small); font-weight: 700; text-transform: uppercase; }

.wi-quote {
  margin: 0;
  padding-left: var(--wi-space-6);
  border-left: 3px solid var(--wi-magenta-500);
  color: var(--wi-copy, var(--wi-text-primary));
  font-family: var(--wi-font-display);
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  font-style: italic;
  line-height: 1.16;
}
.wi-quote footer { margin-top: var(--wi-space-4); color: var(--wi-copy-muted, var(--wi-text-secondary)); font-family: var(--wi-font-data); font-size: .72rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

.wi-event-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--wi-space-5);
  padding-top: var(--wi-space-5);
  border-top: 1px solid var(--wi-rule, var(--wi-border));
}
.wi-event-strip__copy { display: grid; gap: 3px; }
.wi-event-strip__copy strong { color: var(--wi-copy, var(--wi-text-primary)); }
.wi-event-strip__copy span { color: var(--wi-highlight, var(--wi-magenta-700)); font-family: var(--wi-font-data); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.wi-logo { display: block; object-fit: contain; object-position: left center; }
.wi-logo--workshop { width: min(100%, 320px); }
.wi-logo--razoes { width: min(100%, 280px); }
.wi-photo-arch { overflow: hidden; border-radius: 48% 48% var(--wi-radius-md) var(--wi-radius-md); }
.wi-photo-arch img { width: 100%; height: 100%; object-fit: cover; }

.wi-route { position: relative; height: 3px; background: repeating-linear-gradient(90deg, var(--wi-magenta-500) 0 10px, transparent 10px 20px); }
.wi-route::before, .wi-route::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--wi-lime-500); border: 3px solid var(--wi-petrol-950); transform: translateY(-50%); }
.wi-route::before { left: 0; }
.wi-route::after { right: 0; }

.wi-grain { position: relative; isolation: isolate; }
.wi-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--wi-z-grain);
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 820px) {
  .wi-grid-2, .wi-grid-3 { grid-template-columns: 1fr; }
  .wi-event-strip { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .wi-button { width: 100%; }
  .wi-card { padding: var(--wi-space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}