/* ============================================================================
   MODEL [X] — ELEMENTS / RENKA CAMPAIGN PAGE
   Hanna + Teagan / Marea Swimwear

   DESIGN LANGUAGE
   ---------------
   Organized chaos
   Disciplined grid
   Oversized typography
   Circular geometry
   Botanical texture
   Restrained red accents
   Tactile paper
   Deliberate asymmetry

   FILE INTENT
   -----------
   This stylesheet is page-specific.

   Load AFTER:
   modelx_master.css

   Major sections are numbered to match the HTML.

   IMPORTANT:
   Search this file for:

   MAREA FLOATING MARK

   to immediately locate all controls for mareamark.png.
   ============================================================================ */



/* ============================================================================
   00. PAGE VARIABLES / MASTER CAMPAIGN CONTROLS
   ============================================================================ */

.mx-elements-ren-page {

  /* --------------------------------------------------------------------------
     COLOR SYSTEM
     -------------------------------------------------------------------------- */

  --ren-paper: #eee9df;
  --ren-paper-deep: #ddd6ca;

  --ren-ink: #0a0a09;
  --ren-ink-soft: #1c1c19;

  --ren-red: #b73b34;

  --ren-muted: #716c64;

  --ren-line: rgba(10, 10, 9, .22);
  --ren-line-light: rgba(238, 233, 223, .18);

  --ren-max: 1600px;



  /* ==========================================================================
     HERO MANUAL LEVERS

     HERO IMAGE
     -----------
     X = move left / right
     Y = move up / down
     SCALE = overall size

     HERO TITLE
     ----------
     X = move left / right
     Y = move up / down
     ========================================================================== */

  --hero-image-x: 0px;
  --hero-image-y: 0px;
  --hero-image-scale: 1;

  --hero-title-x: 0px;
  --hero-title-y: 0px;



  /* ==========================================================================
     MAREA FLOATING MARK — IMPORTANT MANUAL MODIFIERS

     IMAGE FILE:
     img/mareamark.png

     THIS IS THE MAIN CONTROL PANEL FOR THE MARK.

     PLACEMENT
     ---------
     --marea-stamp-left
       Coarse horizontal position.

     --marea-stamp-bottom
       Coarse vertical position.

     --marea-stamp-x
       Fine horizontal adjustment.
       Positive = right.
       Negative = left.

     --marea-stamp-y
       Fine vertical adjustment.
       Positive = down.
       Negative = up.

     SIZE
     ----
     --marea-stamp-size
       Width of the mark.

     TRANSPARENCY
     ------------
     --marea-stamp-opacity

       1    = fully opaque
       .75  = 75%
       .50  = 50%
       .25  = 25%
       0    = invisible

     ROTATION
     --------
     Negative = counterclockwise.
     Positive = clockwise.

     SCALE
     -----
     1    = normal
     1.2  = 20% larger
     .8   = 20% smaller


     Z-INDEX
     -------
     Higher number = farther forward.
     ========================================================================== */

  --marea-stamp-left: -05%;
  --marea-stamp-bottom: 0%;

  --marea-stamp-x: 0px;
  --marea-stamp-y: 10px;

  --marea-stamp-size: 1200px;

  --marea-stamp-opacity: .15;

  --marea-stamp-rotate: -10deg;

  --marea-stamp-scale: 1;

  --marea-stamp-z: 24;


  /* --------------------------------------------------------------------------
     PAGE BASE
     -------------------------------------------------------------------------- */

  margin: 0;

  background: var(--ren-paper);

  color: var(--ren-ink);

  overflow-x: hidden;
}

.mx-elements-ren-page * {
  box-sizing: border-box;
}

.mx-elements-ren-page img {
  display: block;

  max-width: 100%;
}

.mx-elements-ren-page main {
  width: 100%;
}


/* ============================================================================
   00A. PAPER / INK SURFACE

   Subtle global grain.
   ============================================================================ */

.mx-elements-ren-page::before {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 999;

  pointer-events: none;

  opacity: .16;

  background-image:

    radial-gradient(
      circle at 20% 20%,
      rgba(0, 0, 0, .20) 0 .55px,
      transparent .7px
    ),

    radial-gradient(
      circle at 70% 55%,
      rgba(255, 255, 255, .75) 0 .55px,
      transparent .75px
    );

  background-size:
    8px 8px,
    11px 11px;

  mix-blend-mode: multiply;
}



/* ============================================================================
   01. NAVIGATION
   Shared campaign navigation is inherited from modelx_master.css.
   Elements uses the standard .mx-gallery-header module.
   ============================================================================ */


/* ============================================================================
   02. HERO / CAMPAIGN IDENTITY
   ============================================================================ */

.mx-ren-hero {
  position: relative;

  min-height:
    clamp(
      700px,
      73vw,
      1180px
    );

  overflow: hidden;

  background: var(--ren-paper);

  border-bottom:
    1px solid
    var(--ren-line);

  isolation: isolate;
}



.mx-ren-hero::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 12;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      rgba(238, 233, 223, .15) 0 48%,
      transparent 64%
    ),

    radial-gradient(
      circle at 88% 42%,
      transparent 0 29%,
      rgba(238, 233, 223, .09) 55%,
      transparent 70%
    );
}



/* --------------------------------------------------------------------------
   HERO COORDINATE TEXT
   -------------------------------------------------------------------------- */

.mx-ren-hero-coordinate {
  position: absolute;

  left: 25px;

  top: 90px;

  z-index: 18;

  margin: 0;

  writing-mode: vertical-rl;

  transform:
    rotate(180deg);

  font:
    500
    .62rem/1
    "Inter",
    sans-serif;

  letter-spacing: .22em;

  text-transform: uppercase;
}



/* --------------------------------------------------------------------------
   HERO TITLE GROUP
   -------------------------------------------------------------------------- */

.mx-ren-hero-title-wrap {
  position: absolute;

  left: 5.8%;

  top: 8%;

  z-index: 20;

  width: 58%;

  transform:
    translate(
      var(--hero-title-x),
      var(--hero-title-y)
    );
}

.mx-ren-kicker {
  margin:
    0
    0
    24px;

  font:
    600
    .72rem/1
    "Inter",
    sans-serif;

  letter-spacing: .06em;

  text-transform: uppercase;
}

.mx-ren-hero-title-wrap h1 {
  margin: 0;

  font:
    600
    clamp(
      8rem,
      18vw,
      20rem
    )/.72
    "Oswald",
    sans-serif;

  letter-spacing: -.055em;

  text-transform: uppercase;

  white-space: nowrap;
}

.mx-ren-hero-names {
  margin-top: 28px;

  display: flex;

  align-items: baseline;

  gap: 16px;

  flex-wrap: wrap;
}

.mx-ren-hero-names strong {
  font:
    500
    clamp(
      2.4rem,
      4vw,
      5.2rem
    )/.88
    "Inter",
    sans-serif;

  letter-spacing: .025em;
}

.mx-ren-hero-names em {
  font:
    500
    clamp(
      2.4rem,
      3.5vw,
      4.5rem
    )/1
    "Cormorant Garamond",
    serif;
}

.mx-ren-hero-deck {
  margin:
    28px
    0
    0;

  max-width: 380px;

  font:
    600
    clamp(
      .72rem,
      1vw,
      .9rem
    )/1.55
    "Inter",
    sans-serif;

  text-transform: uppercase;
}

.mx-ren-red-stamp {
  display: inline-block;

  margin-top: 40px;

  color: var(--ren-red);

  font-size: 2.2rem;

  transform:
    rotate(-7deg);
}



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

.mx-ren-hero-image {
  position: absolute;

  z-index: 8;

  right: -2%;

  top: 0;

  width: 54%;

  height: 100%;

  margin: 0;

  transform:
    translate(
      var(--hero-image-x),
      var(--hero-image-y)
    )
    scale(
      var(--hero-image-scale)
    );

  transform-origin:
    center right;

  overflow: hidden;
}



.mx-ren-hero-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--ren-paper) 0,
      transparent 23%,
      transparent 100%
    );

  pointer-events: none;
}



.mx-ren-hero-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position:
    center top;
}



/* ============================================================================
   02A. FLOATING MAREA BRAND MARK

   IMAGE FILE:
   img/mareamark.png

   IMPORTANT:
   POSITION / SIZE / TRANSPARENCY ARE CONTROLLED BY
   THE VARIABLES IN SECTION 00.

   SEARCH FOR:
   MAREA FLOATING MARK
   ============================================================================ */

.mx-ren-marea-stamp {
  position: absolute;


  /* ------------------------------------------------------------------------
     COARSE POSITION
     ------------------------------------------------------------------------ */

  left:
    var(--marea-stamp-left);

  bottom:
    var(--marea-stamp-bottom);


  /* ------------------------------------------------------------------------
     LAYER ORDER
     ------------------------------------------------------------------------ */

  z-index:
    var(--marea-stamp-z);


  /* ------------------------------------------------------------------------
     SIZE
     ------------------------------------------------------------------------ */

  width:
    var(--marea-stamp-size);


  /* ------------------------------------------------------------------------
     TRANSPARENCY
     ------------------------------------------------------------------------ */

  opacity:
    var(--marea-stamp-opacity);


  /* ------------------------------------------------------------------------
     FINE MOVEMENT / ROTATION / SCALE
     ------------------------------------------------------------------------ */

  transform:

    translate(
      var(--marea-stamp-x),
      var(--marea-stamp-y)
    )

    rotate(
      var(--marea-stamp-rotate)
    )

    scale(
      var(--marea-stamp-scale)
    );

  transform-origin:
    center;
  pointer-events: none;
}

.mx-ren-marea-stamp img {
  display: block;
  width: 68%;
  height: auto;
  object-fit: contain;
}



/* --------------------------------------------------------------------------
   HERO ORBIT GEOMETRY
   -------------------------------------------------------------------------- */

.mx-ren-orbit {
  position: absolute;

  z-index: 14;

  border:
    1px solid
    rgba(10, 10, 9, .42);

  border-radius: 50%;

  pointer-events: none;
}

.mx-ren-orbit--large {
  left: 40%;

  top: 5%;

  width:
    min(
      52vw,
      790px
    );

  aspect-ratio: 1;
}

.mx-ren-orbit--small {
  left: 38.5%;

  top: 58%;

  width:
    min(
      18vw,
      280px
    );

  aspect-ratio: 1;
}

.mx-ren-orbit-dot {
  position: absolute;

  z-index: 16;

  left: 47.7%;

  top: 62.5%;

  width: 12px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--ren-ink);
}

.mx-ren-orbit-disc {
  position: absolute;

  z-index: 16;

  left: 52%;

  top: 73%;

  width:
    clamp(
      58px,
      7vw,
      105px
    );

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--ren-ink);
}



/* --------------------------------------------------------------------------
   DISCOVER CAMPAIGN LINK
   -------------------------------------------------------------------------- */

.mx-ren-discover {
  position: absolute;

  z-index: 22;

  left: 43.5%;

  top: 67%;

  width: 150px;

  text-align: center;

  color: var(--ren-ink);

  text-decoration: none;

  font:
    600
    .62rem/1.3
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-discover b {
  display: block;

  margin-top: 14px;

  font-size: 1.1rem;

  font-weight: 400;
}



/* --------------------------------------------------------------------------
   HERO RIGHT INDEX
   -------------------------------------------------------------------------- */

.mx-ren-hero-index {
  position: absolute;

  z-index: 25;

  right: 0;

  top: 43%;

  width: 64px;

  padding:
    22px
    0;

  display: grid;

  justify-items: center;

  gap: 12px;

  background:
    rgba(
      245,
      241,
      234,
      .94
    );

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

  font:
    600
    .64rem/1
    "Inter",
    sans-serif;
}



.mx-ren-hero-index strong {
  margin:
    7px
    0;

  color:
    var(--ren-red);

  font:
    500
    1.2rem/1
    "Cormorant Garamond",
    serif;
}



/* --------------------------------------------------------------------------
   HERO INK ACCENT
   -------------------------------------------------------------------------- */

.mx-ren-ink--hero {
  position: absolute;

  z-index: 13;

  right: -4%;

  bottom: 4%;

  width: 25%;

  height: 22%;

  opacity: .25;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, .35),
      transparent 68%
    );

  filter:
    blur(10px);

  transform:
    rotate(-9deg);
}



/* --------------------------------------------------------------------------
   BOTANICAL BASE
   -------------------------------------------------------------------------- */

.mx-ren-botanical {
  position: absolute;

  pointer-events: none;

  user-select: none;
}



.mx-ren-botanical--hero {
  z-index: 6;

  left: -2%;

  bottom: -4%;

  width: 18%;

  opacity: .28;

  filter:
    grayscale(1);
}



/* ============================================================================
   03. PURCHASE STRIP
   ============================================================================ */

.mx-ren-shop-bar {
  background: #070806;

  color: #fff;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .14);
}



.mx-ren-shop-bar a {
  min-height: 52px;

  padding:
    0
    clamp(
      24px,
      3vw,
      48px
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  color: inherit;

  text-decoration: none;
}



.mx-ren-shop-bar span:first-child {
  font:
    600
    clamp(
      1rem,
      1.5vw,
      1.35rem
    )/1
    "Inter",
    sans-serif;
}



.mx-ren-shop-bar span:last-child {
  font:
    500
    .7rem/1
    "Inter",
    sans-serif;

  letter-spacing: .13em;

  text-transform: uppercase;
}



/* ============================================================================
   04. MAREA PRODUCT STRIP

   THREE INDEPENDENT PRODUCT MODULES.
   ============================================================================ */

.mx-ren-products {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  background:
    var(--ren-paper);

  border-bottom:
    1px solid
    var(--ren-line);
}



.mx-ren-product {
  min-height: 180px;

  padding:
    clamp(
      20px,
      2.2vw,
      34px
    );

  display: grid;

  grid-template-columns:
    48px
    minmax(
      100px,
      .8fr
    )
    minmax(
      130px,
      1.2fr
    );

  align-items: center;

  gap:
    clamp(
      14px,
      2vw,
      30px
    );

  border-right:
    1px solid
    var(--ren-line);
}



.mx-ren-product:last-child {
  border-right: 0;
}



.mx-ren-product-number {
  align-self: start;

  margin:
    2px
    0
    0;

  font:
    500
    clamp(
      1.7rem,
      2.4vw,
      2.6rem
    )/1
    "Oswald",
    sans-serif;
}



.mx-ren-product-brand,
.mx-ren-product-copy > p {
  margin: 0;

  font:
    600
    .61rem/1.35
    "Inter",
    sans-serif;

  letter-spacing: .08em;

  text-transform: uppercase;
}



.mx-ren-product-copy h2 {
  margin:
    6px
    0
    5px;

  font:
    600
    clamp(
      .85rem,
      1vw,
      1rem
    )/1.2
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-product-copy strong {
  display: block;

  margin-top: 12px;

  color:
    var(--ren-red);

  font:
    600
    1rem/1
    "Inter",
    sans-serif;
}



.mx-ren-product-image {
  display: block;

  height: 118px;

  overflow: hidden;

  background:
    #d5cec1;
}



.mx-ren-product-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .35s ease;
}



.mx-ren-product-image:hover img {
  transform:
    scale(1.035);
}



/* ============================================================================
   05. ELEMENTS IN MOTION STRIP
   ============================================================================ */

.mx-ren-motion {
  position: relative;

  min-height: 280px;

  padding:
    26px
    50px
    34px;

  display: grid;

  grid-template-columns:
    190px
    .8fr
    .8fr
    1.15fr
    1.05fr
    .9fr
    .9fr;

  gap: 10px;

  align-items: stretch;

  background:
    var(--ren-paper);

  border-bottom:
    1px solid
    var(--ren-line);

  overflow: hidden;
}



.mx-ren-motion-intro {
  padding-right: 20px;
}



.mx-ren-motion-intro h2 {
  margin: 0;

  font:
    500
    1.35rem/1.05
    "Oswald",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-motion-intro p {
  margin:
    18px
    0
    25px;

  font:
    600
    .62rem/1.45
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-motion-intro span {
  font:
    500
    .63rem/1
    "Inter",
    sans-serif;
}



.mx-ren-motion-arrows {
  margin-top: 22px;

  font-size: 1.4rem;
}



.mx-ren-motion-frame {
  min-height: 205px;

  overflow: hidden;

  background:
    #d3ccc0;
}



.mx-ren-motion-frame img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}



.mx-ren-motion-frame--blur img {
  object-position: center;
}



.mx-ren-view-all {
  position: absolute;

  right: 13px;

  top: 28px;

  bottom: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  writing-mode: vertical-rl;

  color:
    var(--ren-ink);

  text-decoration: none;

  font:
    600
    .66rem/1
    "Inter",
    sans-serif;

  text-transform: uppercase;
}

.mx-ren-view-all::before {
  content: "";

  position: absolute;

  left: -12px;

  top: 0;

  bottom: 0;

  width: 1px;

  background:
    var(--ren-red);
}

.mx-ren-view-all b {
  color:
    var(--ren-red);

  font-size: 1.2rem;

  font-weight: 400;
}


/* ============================================================================
   06. MAIN REN COLLAGE / ART-DIRECTED CANVAS
   ============================================================================ */

.mx-ren-collage {
  position: relative;

  min-height:
    clamp(
      900px,
      78vw,
      1320px
    );

  overflow: hidden;

  isolation: isolate;

  background:
    var(--ren-paper);

  border-bottom:
    1px solid
    var(--ren-line);
}

.mx-ren-collage::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0 62%,
      rgba(255, 255, 255, .14) 62% 62.2%,
      transparent 62.2%
    );
}


/* ============================================================================
   06A. LARGE BACKGROUND X — MANUAL CONTROLS

   LEFT = horizontal position
   TOP = vertical position
   FONT = size
   ROTATE = angle
   COLOR ALPHA = transparency
   ============================================================================ */

.mx-ren-collage-x {
  position: absolute;

  z-index: 0;

  left: 10%;

  top: -20%;

  color:
    rgba(
      15,
      15,
      13,
      .05
    );

  font:
    600
    clamp(
      125rem,
      125vw,
      125rem
    )/.76
    "Oswald",
    sans-serif;

  transform:
    rotate(-4deg);

  pointer-events: none;
}


/* --------------------------------------------------------------------------
   COLLAGE THESIS
   -------------------------------------------------------------------------- */

.mx-ren-collage-thesis {
  position: absolute;

  z-index: 11;

  left: 48%;

  top: 3%;

  margin: 0;

  text-align: center;

  font:
    500
    clamp(
      1.2rem,
      1.7vw,
      2rem
    )/1.1
    "Cormorant Garamond",
    serif;
}

.mx-ren-collage-thesis em {
  color:
    var(--ren-red);
}



/* ============================================================================
   06B. UNIVERSAL ART-DIRECTION OBJECT CONTROLS

   INLINE HTML VARIABLES:

   --x = horizontal
   --y = vertical
   --r = rotation
   --s = scale
   --z = stacking order
   ============================================================================ */

.mx-ren-art {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --s: 1;
  --z: 1;

  position: absolute;

  z-index:
    var(--z);

  transform:

    translate(
      var(--x),
      var(--y)
    )

    rotate(
      var(--r)
    )

    scale(
      var(--s)
    );

  transform-origin:
    center;
}



/* --------------------------------------------------------------------------
   COLLAGE PHOTOS
   -------------------------------------------------------------------------- */

.mx-ren-photo {
  margin: 0;

  overflow: hidden;

  background:
    #d0c8bb;

  box-shadow:
    0
    18px
    38px
    rgba(
      35,
      30,
      24,
      .10
    );
}



.mx-ren-photo img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}



.mx-ren-photo--hanna {
  left: 8.5%;

  top: 8%;

  width: 36%;

  height: 66%;
}



.mx-ren-photo--teagan {
  right: 7.5%;

  top: 15%;

  width: 35%;

  height: 63%;
}



.mx-ren-photo--breaker {
  left: 36%;

  bottom: 4%;

  width: 25%;

  height: 36%;
}



/* --------------------------------------------------------------------------
   MODEL LABELS
   -------------------------------------------------------------------------- */

.mx-ren-person span {
  color:
    var(--ren-red);

  font:
    600
    clamp(
      1rem,
      1.35vw,
      1.4rem
    )/1
    "Inter",
    sans-serif;
}



.mx-ren-person h2 {
  margin:
    8px
    0
    26px;

  font:
    600
    clamp(
      3rem,
      6vw,
      7rem
    )/.82
    "Oswald",
    sans-serif;

  letter-spacing: -.03em;
}



.mx-ren-person p,
.mx-ren-person strong {
  display: block;

  margin: 0;

  font:
    600
    .68rem/1.5
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-person--hanna {
  left: 2.7%;

  top: 18%;
}



.mx-ren-person--teagan {
  right: 2.4%;

  top: 24%;

  text-align: right;
}



/* --------------------------------------------------------------------------
   COLLAGE QUOTE
   -------------------------------------------------------------------------- */

.mx-ren-collage-quote {
  left: 9.5%;

  bottom: 5.5%;
}



.mx-ren-collage-quote p {
  margin:
    0
    0
    30px;

  font:
    500
    clamp(
      1.5rem,
      2.2vw,
      2.6rem
    )/1.04
    "Cormorant Garamond",
    serif;
}



.mx-ren-collage-quote em {
  color:
    var(--ren-red);
}



.mx-ren-collage-quote a {
  display: inline-flex;

  align-items: center;

  gap: 40px;

  color:
    var(--ren-ink);

  text-decoration: none;

  font:
    600
    .65rem/1
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-collage-quote a span {
  font-size: 1.3rem;
}



/* --------------------------------------------------------------------------
   TECHNICAL NOTE
   -------------------------------------------------------------------------- */

.mx-ren-tech-note {
  right: 27%;

  bottom: 5%;

  display: grid;

  gap: 16px;

  font:
    600
    .6rem/1.45
    "Inter",
    sans-serif;

  text-transform: uppercase;
}



.mx-ren-tech-note p {
  margin: 0;
}



.mx-ren-tech-note span {
  font-size: 1.2rem;
}



/* --------------------------------------------------------------------------
   COLLAGE BOTANICALS
   -------------------------------------------------------------------------- */

.mx-ren-botanical--left {
  z-index: 2;

  left: -2%;

  bottom: 0;

  width: 75%;

  opacity: .34;

  filter:
    grayscale(1);
}

.mx-ren-botanical--right {
  z-index: 2;

  right: -2%;

  top: 0;

  width: 30%;

  opacity: .28;

  filter:
    grayscale(1);
}



/* --------------------------------------------------------------------------
   PALM MOTION BLUR
   -------------------------------------------------------------------------- */

.mx-ren-palm-blur {
  position: absolute;

  z-index: 0;

  right: -5%;

  bottom: -5%;

  width: 34%;

  opacity: .30;

  filter:
    grayscale(1)
    blur(2px);

  transform:
    rotate(-11deg)
    scale(1.12);

  pointer-events: none;
}



/* --------------------------------------------------------------------------
   SMALL RED MARKS
   -------------------------------------------------------------------------- */

.mx-ren-red-mark {
  position: absolute;

  z-index: 25;

  color:
    var(--ren-red);

  font:
    500
    1.4rem/1
    "Cormorant Garamond",
    serif;
}


.mx-ren-red-mark--one {
  right: 1.5%;
  top: 4%;
}

.mx-ren-red-mark--two {
  left: 45%;
  bottom: 7%;
}

.mx-ren-red-mark--three {
  left: 28%;
  bottom: 13%;
  transform:
    rotate(-8deg);
}



/* ============================================================================
   07. FOOTER

   Footer styling is inherited from modelx_master.css.
   Only the background is reinforced here so the Elements
   campaign page matches the rest of the Model [X] site.
   ============================================================================ */

.mx-elements-ren-page .mx-footer {
  background: #0b0c0a;
}



/* ============================================================================
   08. TABLET
   ============================================================================ */

@media (max-width: 1100px) {
.mx-ren-hero-title-wrap {
    width: 70%;
  }



  .mx-ren-hero-title-wrap h1 {
    font-size:
      clamp(
        7rem,
        17vw,
        13rem
      );
  }



  .mx-ren-products {
    grid-template-columns:
      1fr;
  }

  .mx-ren-product {
    border-right: 0;

    border-bottom:
      1px solid
      var(--ren-line);
  }

  .mx-ren-motion {
    grid-template-columns:
      180px
      repeat(
        6,
        minmax(
          160px,
          1fr
        )
      );

    overflow-x: auto;
  }

  .mx-ren-motion-frame {
    width: 180px;
  }

}

/* ============================================================================
   09. MOBILE

   Absolute collage positioning is intentionally simplified.
   ============================================================================ */

@media (max-width: 760px) {
/* --------------------------------------------------------------------------
     HERO
     -------------------------------------------------------------------------- */

  .mx-ren-hero {
    min-height: auto;

    padding:
      55px
      22px
      0;
  }

  .mx-ren-hero-coordinate,
  .mx-ren-orbit,
  .mx-ren-orbit-dot,
  .mx-ren-orbit-disc,
  .mx-ren-discover,
  .mx-ren-hero-index,
  .mx-ren-ink--hero,
  .mx-ren-botanical--hero {
    display: none;
  }

  .mx-ren-hero-title-wrap,
  .mx-ren-hero-image {
    position: relative;

    inset: auto;

    width: 100%;

    transform: none;
  }

  .mx-ren-hero-title-wrap h1 {
    font-size:
      clamp(
        6rem,
        28vw,
        10rem
      );

    white-space: normal;
  }

  .mx-ren-hero-names {
    gap:
      8px
      12px;
  }

  .mx-ren-hero-image {
    height: 520px;

    margin-top: 35px;
  }

  .mx-ren-hero-image::after {
    display: none;
  }


  /* ==========================================================================
     MAREA FLOATING MARK — MOBILE

     DESKTOP CONTROLS STILL COME FROM SECTION 00.

     These values simply prevent the mark from becoming
     too large or falling outside the mobile hero.
     ========================================================================== */

  .mx-ren-marea-stamp {
    left: 22px;

    bottom: 18px;

    width:
      min(
        var(--marea-stamp-size),
        170px
      );
  }



  /* --------------------------------------------------------------------------
     SHOP STRIP
     -------------------------------------------------------------------------- */

  .mx-ren-shop-bar a {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding-block:
      15px;
  }



  /* --------------------------------------------------------------------------
     PRODUCTS
     -------------------------------------------------------------------------- */

  .mx-ren-product {
    grid-template-columns:
      42px
      1fr;
  }

  .mx-ren-product-image {
    grid-column:
      1 / -1;

    height:
      210px;
  }

  /* --------------------------------------------------------------------------
     FILM STRIP
     -------------------------------------------------------------------------- */

  .mx-ren-motion {
    padding-left:
      22px;
  }


  /* --------------------------------------------------------------------------
     COLLAGE
     -------------------------------------------------------------------------- */

  .mx-ren-collage {
    min-height: auto;

    padding:
      70px
      22px;

    display: grid;

    gap: 26px;
  }

  .mx-ren-collage-x {
    font-size:
      32rem;

    left: 0;
    top: 25%;
  }

  .mx-ren-collage-thesis,
  .mx-ren-art {
    position: relative;

    inset: auto;

    transform:
      none !important;
  }

  .mx-ren-collage-thesis {
    text-align:
      left;

    margin-bottom:
      10px;
  }

  .mx-ren-person--hanna,
  .mx-ren-person--teagan {
    text-align:
      left;
  }

  .mx-ren-photo--hanna,
  .mx-ren-photo--teagan,
  .mx-ren-photo--breaker {
    width: 100%;

    height: auto;
  }

  .mx-ren-photo--hanna img,
  .mx-ren-photo--teagan img,
  .mx-ren-photo--breaker img {
    aspect-ratio:
      4 / 5;
  }

  .mx-ren-person h2 {
    margin-bottom:
      14px;
  }

  .mx-ren-tech-note {
    right: auto;
  }

  .mx-ren-botanical--left,
  .mx-ren-botanical--right,
  .mx-ren-palm-blur,
  .mx-ren-red-mark {
    display: none;
  }

}