/* SHALEV — static site styles */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2") format("woff2");
}

:root {
  --color-base: #ffffff;
  --color-contrast: #111111;
  --color-muted: #686868;
  --content-size: 645px;
  --wide-size: 1340px;
  --pad-x: clamp(20px, 5vw, 50px);
  --pad-y-sm: 20px;
  --pad-y-md: 30px;
  --pad-y-lg: clamp(30px, 7vw, 70px);
  --pad-y-xl: clamp(50px, 7vw, 90px);
  --font-small: 0.875rem;
  --font-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
  --font-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  --font-xlarge: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
  --font-xxlarge: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-base);
  color: var(--color-contrast);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-large);
  font-weight: 300;
  letter-spacing: -0.1px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: currentColor;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.125;
  margin: 0;
}

h1 { font-size: var(--font-xxlarge); }
h2 { font-size: var(--font-xlarge); }
h3 { font-size: var(--font-large); }
h4 { font-size: var(--font-medium); }

p {
  margin: 0 0 1.2rem;
}

ol, ul {
  margin: 0 0 1.2rem;
  padding-left: 1.5rem;
}

ol li, ul li {
  margin-bottom: 0.5rem;
}

/* Layout */

.shell {
  padding: 0 var(--pad-x);
}

.wide {
  max-width: var(--wide-size);
  margin: 0 auto;
}

.content {
  max-width: var(--content-size);
  margin: 0 auto;
}

/* Header */

.site-header {
  padding: var(--pad-y-md) var(--pad-x);
}

.site-header-inner {
  max-width: var(--wide-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-title {
  font-weight: 700;
  letter-spacing: -0.5px;
  font-size: var(--font-large);
  margin: 0;
}

.site-title a {
  text-decoration: none;
}

.site-title a:hover {
  text-decoration: underline;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(14px, 2.5vw, 28px);
  font-size: var(--font-medium);
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
}

/* Main */

main {
  margin-top: var(--pad-y-lg);
}

.page-section {
  padding: var(--pad-y-lg) var(--pad-x);
}

.page-title {
  max-width: var(--wide-size);
  margin: 0 auto 2rem;
}

/* Brand grid */

.brands-heading {
  max-width: var(--wide-size);
  margin: 0 auto;
  padding: 0 var(--pad-x) 0;
}

.brand-grid {
  max-width: var(--wide-size);
  margin: 1.5rem auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

@media (max-width: 900px) {
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.brand {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.brand:hover {
  transform: translateY(-3px);
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Article (legal pages) */

.article {
  max-width: var(--content-size);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.article p,
.article ol,
.article ul {
  font-size: var(--font-medium);
}

.article ol ol {
  margin-top: 0.5rem;
}

/* Footer */

.site-footer {
  padding: var(--pad-y-xl) var(--pad-x) var(--pad-y-md);
  margin-top: var(--pad-y-xl);
}

.site-footer-inner {
  max-width: var(--wide-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer .meta {
  font-size: var(--font-small);
  color: var(--color-muted);
}

.site-footer a {
  color: inherit;
}