: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:
    "Iowan Old Style",
    "IowanOldStyle",
    "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;
}

.site-header { /*display heder on top of the hero */
  position: absolute;
  inset-inline: 0;
  z-index: 10;
  padding: 1.5rem 0;
}

.site-header .container {
  width: min(90vw, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-style {
  display: block;
  width: 8rem;
  height: auto;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
}

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

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


.hero {
    position: relative;
    /* height: 68svh;
    min-height: 34rem; */
    overflow: hidden;
    
}


.hero__media {
    position: absolute;
    inset: 0;
    display: block;
}


.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgb(0 0 0 / .25),
            rgb(0 0 0 / .15) 45%,
            rgb(0 0 0 / .55)
        );

    z-index: 1;
}


.hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;
}

.hero__content {

    position: relative;

    z-index: 2;

    min-height: inherit;

    padding: 7rem 0 2rem;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.hero h1 {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.2;
  color: white;
  margin: 0;
  padding: 0;
  max-width: 90%;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
}


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



@media (max-width: 768px) {

    .hero {
        height: 80svh;
        min-height: 30rem;
        max-height: 36rem;
    }

   .hero__content {

        padding:

            7rem 1.5rem 2rem;

    }

  .hero__intro {

        position:absolute;

        top: 7rem;
        left: 1.25rem;

        width: min(75%, 20rem);

    }


    .hero__outro {

        position:absolute;

        right: 1.25rem;
        bottom: .25rem;

        width:min(70%,20rem);

        text-align:right;
        font-family: var(--font-sans);
        font-size: var(--step-0);
        font-weight: 500;
        line-height: 1.4;
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
    }

    .hero__media img {
        object-position: 35% center;
    }



    .hero h1,
    .hero__lede {

        color:white;

    }

    .hero__support {
      padding: 2em 1em;
      text-align: center;
    }

    .hero__actions .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.9rem 1.6rem;

      background: linear-gradient(
          to bottom,
          #b90000,
          #980000
      );

      border: 1px solid rgba(0,0,0,.18);

      box-shadow:
          inset 0 1px 0 rgba(255,255,255,.14),
          0 6px 16px rgba(0,0,0,.22);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;

      
      border-radius: 4px;

      

      transition:
          transform 160ms ease,
          box-shadow 160ms ease,
          filter 160ms ease;
    }

    .editorial-statement {
      margin-top: 1em;
      background-color: #303030;
      color: #ccc;
      padding: 2.5rem 1rem 1em;
      text-align: center;
    }

    .editorial-statement h2 sup {
      position: relative;
      top: -0.75em;
      font-size: 0.45em;
      line-height: 0;
      vertical-align: baseline;
    }

   .editorial-statement h2 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: clamp(3.75rem, 11vw, 5rem);
      line-height: 1;
      font-weight: 400;
      text-wrap: balance;
      margin-inline: auto;
      max-width: 12ch;
    }

    .editorial-statement .footnote {
      margin-top: 2rem;
      font-size: .75rem;
      color: #999;
    }

    .gallery-intro {

    }




   @media (max-width: 639px) {

      .photo-story {
        width: 100%;
        margin: 0 0 3em;
        padding: 0 0 3em 0;
        background-color: #303030;
      }

      .photo-story figure {
        margin: 0;
      }

      .photo-story img {
        display: block;
        width: 100%;
        height: auto;
      }

      /* --------------------------------
        WIDE / FULL-BLEED PHOTOS
        Caption ABOVE
        -------------------------------- */

      .photo-story__wide {
        width: 100%;
        margin: 0 0 2.5rem;
      }

      .photo-story__wide figcaption {
        margin: 0;
        padding: .55rem 0.75rem 0.75rem;
        font-size: 1rem;
        line-height: 1.3;
        color: #ccc;
      }

      /* --------------------------------
        VERTICAL PAIRS
        Caption BELOW
        -------------------------------- */

      .photo-story__pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        width: 100%;
        margin: 1rem 0 0;
      }

      .photo-story__pair figure {
        min-width: 0;
      }

      .photo-story__pair figcaption {
        margin: 0;
        padding: 0.55rem 0.75rem 2rem;
        font-size: .9rem;
        line-height: 1.3;
        color: #ccc;
      }


      .manifesto__inner div {
        margin-bottom: 1em;
      }



      .membership {
        padding: 0 1em;
      }

      .membership .hero__actions .button {
        display: block;
        width: 80%;
        margin: 0 auto;
        text-align: center;
      }

      .product-reveal img {
        width: 100%;
      }

      .marketing-login {
        color: #fff;
        position: absolute;
        top: 1em;
        right: 1em;
        text-decoration: none;
        font-size: .8rem;
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
      }
    }









}

.site-footer {
  font-size: .8rem;
  text-align: center;
}




/* =========================================================
   TABLET + DESKTOP
   ========================================================= */

@media (min-width: 769px) {

  /* ---------------------------------------------------------
     GLOBAL
     --------------------------------------------------------- */

  .marketing {
    overflow-x: hidden;
  }

  .marketing main {
    width: 100%;
  }

  /* ---------------------------------------------------------
     HEADER
     --------------------------------------------------------- */

  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    color: #fff;
  }

  .site-header .container {
    width: min(92vw, 1440px);
    margin: 0 auto;
    padding: 1.5rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .logo-style {
    display: block;
    width: clamp(7rem, 9vw, 10rem);
    height: auto;
  }

  .marketing-login {
    font-size: .9rem;
    margin-top: .15rem;
  }

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

  .marketing-login a {
    color: #fff;
    text-decoration: none;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  }


  /* ---------------------------------------------------------
     HERO
     --------------------------------------------------------- */

  .hero {
    position: relative;
    height: min(82svh, 60rem);
    min-height: 42rem;
    overflow: hidden;
  }

  .hero__media,
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero__media img {
    display: block;
    object-fit: cover;
    object-position: center center;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.20),
        rgba(0,0,0,.02) 35%,
        rgba(0,0,0,.10) 65%,
        rgba(0,0,0,.42)
      );
    pointer-events: none;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #fff;
  }

  .hero__intro {
    position: absolute;
    top: 11rem;
    left: 6vw;
    width: min(58vw, 54rem);
  }

  .hero__intro h1 {
    margin: 0;
    max-width: 14ch;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 6rem);
    line-height: .91;
    font-weight: 400;
    text-wrap: balance;
    text-shadow: 3px 3px 12px rgba(0,0,0,.28);
  }

  .hero__outro {
    position: absolute;
    right: 6vw;
    bottom: 4vw;
    width: min(28vw, 28rem);
    max-width: 25vw;
    text-align: right;
    font-family: var(--font-sans);
  }

  .hero__lede {
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.4;
    font-weight: 500;
    text-shadow: 2px 2px 7px rgba(0,0,0,.4);
  }


  /* ---------------------------------------------------------
     HERO SUPPORT / CTA
     --------------------------------------------------------- */

  .hero__support {
    width: min(88vw, 1200px);
    margin: 0 auto;
    padding: 2.5rem 0 3.5rem;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
  }

  .hero__meta {
    margin: 0;
    font-size: clamp(.9rem, 1vw, 1.05rem);
    line-height: 1.5;
  }

  .hero__actions {
    margin: 0;
  }

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

    padding: 1rem 1.8rem;

    background: linear-gradient(
      to bottom,
      #b90000,
      #980000
    );

    border: 1px solid rgba(0,0,0,.18);
    border-radius: 4px;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 6px 16px rgba(0,0,0,.16);

    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;

    transition:
      transform 160ms ease,
      box-shadow 160ms ease,
      filter 160ms ease;
  }

  .hero__actions .button:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 9px 20px rgba(0,0,0,.20);
  }


  /* =========================================================
     SHOW + TELL
     ========================================================= */

  .editorial-statement {
    margin: 0;
    background: #303030;
    color: #ccc;
    padding: clamp(5rem, 9vw, 10rem) 5vw clamp(5rem, 9vw, 10rem);
    text-align: center;
  }

  .editorial-statement h2 {
    width: min(1100px, 90vw);
    margin: 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(4rem, 7vw, 8rem);
    line-height: .91;
    font-weight: 400;

    text-wrap: balance;
  }

  .editorial-statement .footnote {
    margin: 2rem 0 0;
    font-size: .8rem;
    color: #999;
  }

  /*
   * The photo essay belongs visually to the same dark field.
   * Remove the seam between the two sections.
   */

  .editorial-statement + .photo-story {
    margin-top: 0;
  }


  /* =========================================================
     PHOTO ESSAY
     ========================================================= */

  .photo-story {
    width: 100%;
    margin: 0;
    padding:
      0
      5vw
      clamp(6rem, 10vw, 12rem);

    background: #303030;
    color: #ccc;
  }

  .photo-story figure {
    margin: 0 0 3em 0;
  }

  .photo-story img {
    display: block;
    width: 100%;
    height: auto;
  }

  .photo-story figcaption {
    margin: 0;
    color: #aaa;
    font-family: var(--font-sans);
    font-size: .85rem;
    line-height: 1.4;
  }


  /* ---------------------------------------------------------
     WIDE PHOTOS
     --------------------------------------------------------- */

  .photo-story__wide {
    width: min(100%, 1200px);
    margin-inline: auto;
    margin-bottom: clamp(6rem, 10vw, 11rem);
  }

  .photo-story__wide figcaption {
    width: min(34rem, 60%);
    margin-top: 1rem;
  }


  /* ---------------------------------------------------------
     VERTICAL PAIRS
     --------------------------------------------------------- */

  .photo-story__pair {
    width: min(100%, 1100px);
    margin-inline: auto;
    margin-bottom: clamp(6rem, 10vw, 11rem);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2.5rem);
  }

  .photo-story__pair figure {
    min-width: 0;
  }

  .photo-story__pair figcaption {
    max-width: 28rem;
    margin-top: .9rem;
  }


  /*
   * Now introduce some desktop art direction.
   *
   * The HTML remains completely linear. We're simply
   * letting the larger canvas give the photographs
   * different amounts of visual weight.
   */

  .photo-story > .photo-story__wide:nth-of-type(1) {
    width: min(100%, 1320px);
  }

  .photo-story > .photo-story__wide:nth-of-type(2) {
    width: min(82%, 1050px);
    margin-right: auto;
    margin-left: 0;
  }

  .photo-story > .photo-story__wide:nth-of-type(3) {
    width: min(88%, 1150px);
    margin-left: auto;
    margin-right: 0;
  }

  .photo-story > .photo-story__wide:nth-of-type(4) {
    width: min(76%, 980px);
    margin-left: 8%;
    margin-right: auto;
  }


  /*
   * Give the paired images a little horizontal
   * independence rather than making them feel like
   * one rigid two-column card.
   */

  .photo-story__pair figure:first-child {
    transform: translateY(0);
  }

  .photo-story__pair figure:last-child {
    transform: translateY(clamp(1.5rem, 4vw, 4rem));
  }


  /* =========================================================
     MANIFESTO
     ========================================================= */

  .manifesto {
    margin: 0;
    padding: clamp(7rem, 11vw, 13rem) 5vw;
    background: #fff;
    color: #222;
  }

  .manifesto__inner {
    width: min(100%, 1200px);
    margin-inline: auto;
    padding-bottom: 3rem;
  }

  .manifesto__inner h3 {
    margin:
      3em
      0
      clamp(4rem, 7vw, 7rem);

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: .04em;
  }

  .manifesto__inner > div {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);

    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 6rem);
    line-height: .95;
    font-weight: 400;
  }

  .manifesto__inner > div:nth-of-type(1) {
    max-width: 14ch;
  }

  .manifesto__inner > div:nth-of-type(2) {
    max-width: 8ch;
    margin-left: auto;
  }

  .manifesto__inner > div:nth-of-type(3),
  .manifesto__inner > div:nth-of-type(4),
  .manifesto__inner > div:nth-of-type(5),
  .manifesto__inner > div:nth-of-type(6) {
    margin-top: clamp(2.5rem, 5vw, 5rem);
  }

  .manifesto__inner > div:nth-of-type(7) {
    margin-top: clamp(5rem, 9vw, 9rem);
    max-width: 16ch;
  }

  .manifesto__inner > div:nth-of-type(8) {
    margin-top: clamp(4rem, 7vw, 7rem);
    max-width: 12ch;
  }

  .manifesto__inner > div:nth-of-type(9) {
    margin-top: clamp(2rem, 4vw, 4rem);
    max-width: 11ch;
    margin-left: auto;
  }


  /* =========================================================
     SECOND EDITORIAL STATEMENT
     ========================================================= */

  .manifesto + br {
    display: none;
    
  }

  .manifesto + .editorial-statement {
    margin: 0;
    padding:
      clamp(7rem, 12vw, 13rem)
      5vw;

    background: #303030;
    color: #ccc;
  }

  .manifesto + .editorial-statement h2 {
    width: min(1200px, 92vw);
    font-size: clamp(5rem, 9vw, 11rem);
    max-width: 11ch;
  }

  .manifesto + .editorial-statement .footnote {
    margin-top: 2rem;
    font-size: clamp(.9rem, 1vw, 1.05rem);
  }


  /* =========================================================
     PRODUCT REVEAL
     ========================================================= */

  .product-reveal {
    position: relative;
    padding:
      clamp(5rem, 10vw, 11rem)
      5vw;

    background: #f3f3f0;
  }

  .product-reveal img {
    display: block;
    width: min(78%, 1050px);
    margin: 0 auto;

    border-radius: 22px;
    box-shadow:
      0 30px 70px rgba(0,0,0,.16),
      0 5px 18px rgba(0,0,0,.08);
  }


  /* =========================================================
     MEMBERSHIP
     ========================================================= */

  .membership {
    padding:
      clamp(6rem, 10vw, 11rem)
      5vw;
    background: #e9e9e5;
  }

  .membership-card {
    width: min(100%, 950px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    grid-template-areas:
      "heading heading"
      "price list"
      "button list";

    column-gap: 5rem;
    row-gap: 2rem;

    padding: clamp(3rem, 5vw, 6rem);

    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
  }

  .membership-card h2 {
    grid-area: heading;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: .95;
    font-weight: 400;
  }

  .membership-card .price {
    grid-area: price;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 6vw, 6.5rem);
    line-height: .9;
  }

  .membership-card .price span {
    display: block;
    margin-top: .5rem;

    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1;
    color: #777;
  }

  .membership-card ul {
    grid-area: list;

    margin: 0;
    padding: 0;
    list-style: none;

    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.7;
  }

  .membership-card .hero__actions {
    grid-area: button;
    align-self: end;
  }

  .membership-card .button {
    width: 100%;
  }


  /* =========================================================
     FOOTER
     ========================================================= */

  .site-footer {
    padding: 2rem 5vw 3rem;
    font-size: .8rem;
    text-align: center;
  }

}


/* =============================================================
   WIDE DESKTOP ART DIRECTION
   ============================================================= */

@media (min-width: 1200px) {

  .hero__intro {
    left: 8vw;
    top: 12rem;
  }

  .hero__outro {
    right: 8vw;
    bottom: 5vw;
  }

  .hero__support {
    width: min(84vw, 1280px);
  }


  /*
   * Give the Show & Tell statement more room.
   */

  .editorial-statement h2 {
    width: min(1200px, 88vw);
    font-size: clamp(6rem, 8vw, 10rem);
  }

  /*
   * Larger desktop photo essay.
   */

  .photo-story {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .photo-story__pair {
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .photo-story__pair figure:last-child {
    transform: translateY(clamp(2rem, 5vw, 5rem));
  }

  .photo-story__wide figcaption {
    font-size: .9rem;
  }

  /*
   * Manifesto gets enough width to become almost
   * architectural typography.
   */

  .manifesto {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .manifesto__inner > div {
    font-size: clamp(3rem, 5.2vw, 7rem);
  }

  /*
   * Product reveal can get smaller relative to the
   * viewport as screens become enormous.
   */

  .product-reveal img {
    width: min(65%, 1000px);
  }

}