:root {

  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #6f6f6f;
  --color-accent: #990000;
  --color-border: #e8e8e8;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  --container: 96rem;

  --font-serif:
    "Cormorant Garamond",
    Georgia,
    serif;

  --font-sans:
    Inter,
    system-ui,
    sans-serif;

  --step--1: clamp(.875rem,.82rem + .2vw,1rem);
  --step-0: clamp(1rem,.95rem + .3vw,1.125rem);
  --step-1: clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --step-2: clamp(2rem,1.7rem + 1vw,3rem);
  --step-3: clamp(3rem,2rem + 3vw,5.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.marketing {
  margin: 0;

  color: var(--color-text);
  background: var(--color-bg);

  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;

  text-rendering: optimizeLegibility;
}

.marketing img {
  display: block;
  width: 100%;
  height: auto;
}

.marketing .container {
  width: min(92vw, var(--container));
  margin-inline: auto;
}

.marketing .site-header {
  position: absolute;
  inset-inline: 0;
  z-index: 10;
  padding: 1.5rem 0;
}

.marketing .site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marketing .logo {
  text-decoration: none;
  color: white;
  font-weight: 600;
  
}

.marketing .logo-style {
  display: block;
  width: 20rem;
  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4));
}

.marketing nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing nav a {
  color: white;
  text-decoration: none;
}

.marketing .hero {
  position: relative;
  min-height: 100svh;
  text-shadow:
    0 2px 20px rgb(0 0 0 / .35);
  }

.marketing .hero img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.marketing .hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / .5),
      rgb(0 0 0 / .1)
    );
}

.marketing .hero__content {
  position: relative;
  z-index: 2;

  max-width: 100rem;

  padding:
    clamp(8rem, 12vw, 12rem)
    8vw;
}





.marketing .hero h1 {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: .95;
  color: white;
  margin: 0;
  max-width: none;
}

.marketing .hero__lede,
.hero__meta,
.eyebrow {
  color: white;
}

.marketing .hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.marketing section {
  padding:
    var(--space-2xl)
    clamp(1.5rem, 4vw, 4rem);
}

.marketing .section-heading {
  max-width: 40rem;
  margin-bottom: 4rem;
}

.marketing .section-heading h2 {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
}

.marketing .gallery-grid {
  display: grid;
  gap: 2rem;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(18rem,1fr)
    );
}

.marketing .gallery-grid figure,
.product-grid figure {
  margin: 0;
}

.marketing .gallery-grid img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.marketing figcaption {
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: .9rem;
}

.marketing .product-grid {
  display: grid;
  gap: 2rem;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(20rem,1fr)
    );
}

.marketing .product-grid img {
  border-radius: 1rem;
  border: 1px solid var(--color-border);
}

.marketing .manifesto {
  text-align: center;
}

.marketing .manifesto__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.marketing .quote {
  text-align: center;
}

.marketing .quote blockquote {
  margin: 0;

  font-family: var(--font-serif);
  font-size: clamp(2rem,4vw,4rem);
}

.marketing .membership {
  display: grid;
  place-items: center;
}

.marketing .membership-card {
  width: min(100%, 36rem);

  border: 1px solid var(--color-border);

  padding: 3rem;

  background: white;
}

.marketing .price {
  font-size: clamp(3rem,6vw,5rem);
  margin: 1rem 0;
}

.marketing .price span {
  font-size: 1rem;
}

.marketing .membership ul {
  list-style: none;
  padding: 0;
}

.marketing .membership li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.marketing .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    .9rem
    1.4rem;

  text-decoration: none;

  color: white;
  background: var(--color-accent);
}

.marketing .button:hover {
  opacity: .92;
}

.marketing .closing {
  position: relative;
  padding: 0;
}

.marketing .closing img {
  min-height: 70svh;
  object-fit: cover;
}

.marketing .closing__content {
  position: absolute;

  inset: auto auto 4rem 4rem;

  color: white;
}

.marketing .closing__content h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem,5vw,4rem);
}

.marketing .site-footer {
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 768px) {

  :root {
    --space-xl: 5rem;
    --space-2xl: 6rem;
  }

  /* Header */

  .marketing .site-header {
    padding: 1rem 0;
  }

  .marketing .logo-style {
    width: 12rem;
  }

  .marketing nav ul {
    gap: 1rem;
  }

  .marketing nav a {
    font-size: .95rem;
  }

  /* Hero */

  .marketing .hero {
    min-height: 90svh;
  }

  .marketing .hero img,
  .closing img {
    object-position: center center;
  }

  .marketing .hero__content {
    max-width: 100%;

    padding:
      7rem
      1.5rem
      3rem;
  }

  .marketing .hero h1 {
    font-size: clamp(2.75rem, 12vw, 4rem);
    line-height: .95;
  }

  .marketing .hero__lede {
    font-size: 1rem;
    max-width: 32ch;
  }

  .marketing .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .marketing .hero__actions .button {
    width: 100%;
  }

  /* Sections */

  .marketing section {
    padding:
      5rem
      1.5rem;
  }

  .marketing .section-heading {
    margin-bottom: 2rem;
  }

  .marketing .section-heading h2 {
    margin-bottom: .5rem;
  }

  /* Gallery */

  .marketing .gallery-grid {
    gap: 1.5rem;
  }

  .marketing .gallery-grid img {
    aspect-ratio: 4 / 5;
  }

  .marketing figcaption {
    margin-top: .75rem;
    font-size: .95rem;
  }

  /* Product */

  .marketing .product-grid {
    gap: 2rem;
  }

  .marketing .product-grid img {
    border-radius: .75rem;
  }

  /* Manifesto */

  .marketing .manifesto__inner {
    max-width: 100%;
  }

  /* Quote */

  .marketing .quote blockquote {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
  }

  /* Membership */

  .marketing .membership-card {
    padding: 2rem;
  }

  .marketing .price {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  /* Closing */

  .marketing .closing img {
    min-height: 50svh;
  }

  .marketing .closing__content {
    left: 1.5rem;
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .marketing .closing__content h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

}