.elementor-23082 .elementor-element.elementor-element-67a2e03{--display:flex;--margin-top:-90px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23082 .elementor-element.elementor-element-3159a28{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-c7bfe77 *//* =========================================================
   OMNI PUBLISHER
   AUTHORS HERO
   SINGLE FEATURED AUTHOR
   ========================================================= */


.op-authors-hero {

  --cream: #F8F5F1;
  --cream-dark: #F1ECE6;
  --dark: #171514;
  --text: #5E5955;
  --red: #CC292B;
  --beige: #EDE5DD;

  --serif: "Playfair Display", serif;
  --sans: "Inter", sans-serif;

  position: relative;

  width: 100%;

  min-height: 750px;

  overflow: hidden;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 76% 46%,
      rgba(204, 41, 43, 0.025),
      transparent 35%
    ),
    var(--cream);

  color: var(--dark);

  font-family: var(--sans);
}


/* =========================================================
   RESET / BOX SIZING
   ========================================================= */

.op-authors-hero *,
.op-authors-hero *::before,
.op-authors-hero *::after {

  box-sizing: border-box;
}


.op-authors-hero a {

  text-decoration: none !important;

}


.op-authors-hero img {

  max-width: 100%;

}


/* =========================================================
   PAPER TEXTURE
   ========================================================= */

.op-authors-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -10;

  pointer-events: none;

  opacity: .16;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.12'/%3E%3C/svg%3E");

  mix-blend-mode: multiply;

}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.op-ah-container {

  position: relative;

  width: min(
    1400px,
    calc(100% - 108px)
  );

  min-height: 690px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 49% 51%;

  align-items: center;

  padding:
    70px
    0
    105px;

}


/* =========================================================
   BACKGROUND TYPOGRAPHY
   ========================================================= */

.op-ah-bg-word {

  position: absolute;

  z-index: -5;

  font-family: var(--serif);

  font-weight: 400;

  line-height: .72;

  letter-spacing: -.08em;

  color: var(--beige);

  pointer-events: none;

  white-space: nowrap;

  user-select: none;

}


/* AUTHORS */

.op-ah-bg-authors {

  top: 35px;

  left: -70px;

  font-size: clamp(
    180px,
    20vw,
    330px
  );

  opacity: .23;

}


/* STORIES */

.op-ah-bg-stories {

  right: -55px;

  bottom: 5px;

  font-size: clamp(
    150px,
    17vw,
    280px
  );

  opacity: .18;

}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.op-ah-content {

  position: relative;

  z-index: 5;

  max-width: 610px;

  padding-right: 45px;

  opacity: 0;

  transform: translateY(20px);

  animation:
    opAhContentIn
    .85s
    cubic-bezier(.22,.61,.36,1)
    .12s
    forwards;

}


@keyframes opAhContentIn {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


/* =========================================================
   EYEBROW
   ========================================================= */

.op-ah-eyebrow {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 25px;

  color: var(--red);

  font-size: 10px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 2.8px;

  text-transform: uppercase;

}


.op-ah-eyebrow-line {

  width: 36px;

  height: 1px;

  background: var(--red);

  flex: 0 0 auto;

}


/* =========================================================
   HEADING
   ========================================================= */

.op-ah-heading {

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    58px,
    6vw,
    82px
  );

  font-weight: 400;

  line-height: .96;

  letter-spacing: -.045em;

  color: var(--dark);

}


.op-ah-heading em {

  color: var(--red);

  font-style: italic;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.op-ah-description {

  max-width: 510px;

  margin: 31px 0 0;

  color: var(--text);

  font-family: var(--sans);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.8;

}


/* =========================================================
   ACTIONS
   ========================================================= */

.op-ah-actions {

  display: flex;

  align-items: center;

  gap: 29px;

  margin-top: 33px;

}


/* Primary */

.op-ah-primary {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding:
    13px
    0
    10px;

  border-bottom:
    1px solid
    var(--red);

  color: var(--dark);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 1.7px;

  transition:
    color .3s ease;

}


.op-ah-primary b {

  color: var(--red);

  font-size: 17px;

  font-weight: 400;

  transition:
    transform .35s ease;

}


.op-ah-primary:hover {

  color: var(--red);

}


.op-ah-primary:hover b {

  transform: translateX(5px);

}


/* Secondary */

.op-ah-secondary {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding-bottom: 6px;

  border-bottom:
    1px solid
    rgba(23,21,20,.22);

  color: var(--text);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 1.7px;

  transition:
    color .3s ease,
    border-color .3s ease;

}


.op-ah-secondary b {

  color: var(--red);

  font-size: 13px;

  font-weight: 400;

  transition:
    transform .35s ease;

}


.op-ah-secondary:hover {

  color: var(--red);

  border-color: var(--red);

}


.op-ah-secondary:hover b {

  transform:
    translate(3px,-3px);

}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.op-ah-visual {

  position: relative;

  min-height: 620px;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform:
    translateY(22px);

  animation:
    opAhVisualIn
    1s
    cubic-bezier(.22,.61,.36,1)
    .30s
    forwards;

}


@keyframes opAhVisualIn {

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =========================================================
   VISUAL CIRCLES
   ========================================================= */

.op-ah-visual-circle {

  position: absolute;

  top: 50%;

  left: 50%;

  border-radius: 50%;

  pointer-events: none;

}


/* Outer */

.op-ah-visual-circle-one {

  width: 610px;

  height: 610px;

  border:
    1px solid
    rgba(204,41,43,.08);

  transform:
    translate(-43%,-50%);

  animation:
    opAhCircleFloat
    13s
    ease-in-out
    infinite;

}


/* Middle */

.op-ah-visual-circle-two {

  width: 485px;

  height: 485px;

  border:
    1px solid
    rgba(23,21,20,.07);

  transform:
    translate(-47%,-50%);

}


/* Inner red ring */

.op-ah-visual-circle-three {

  width: 405px;

  height: 405px;

  border:
    1px solid
    rgba(204,41,43,.075);

  transform:
    translate(-50%,-50%);

}


@keyframes opAhCircleFloat {

  0%,
  100% {

    opacity: .7;

    transform:
      translate(-43%,-50%)
      scale(1);

  }

  50% {

    opacity: 1;

    transform:
      translate(-43%,-50%)
      scale(1.018);

  }

}


/* =========================================================
   PORTRAIT
   ========================================================= */

.op-ah-portrait {

  position: relative;

  width: 390px;

  height: 520px;

  z-index: 5;

  overflow: hidden;

  background: var(--cream-dark);

  box-shadow:
    0 25px 70px
    rgba(23,21,20,.12);

  transform:
    rotate(-2.2deg);

  transition:
    transform .8s
    cubic-bezier(.22,.61,.36,1),
    box-shadow .8s ease;

}


.op-ah-portrait:hover {

  transform:
    rotate(-.6deg)
    scale(1.008);

  box-shadow:
    0 28px 75px
    rgba(23,21,20,.14);

}


.op-ah-portrait img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  filter:
    saturate(.91);

  transform: scale(1.001);

  transition:
    transform .9s
    cubic-bezier(.22,.61,.36,1),
    filter .7s ease;

}


.op-ah-portrait:hover img {

  transform: scale(1.025);

  filter:
    saturate(1);

}


.op-ah-image-overlay {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(23,21,20,0)
      58%,
      rgba(23,21,20,.11)
    );

}


.op-ah-image-index {

  position: absolute;

  top: 17px;

  right: 18px;

  z-index: 3;

  color: rgba(248,245,241,.9);

  font-size: 9px;

  letter-spacing: 2px;

}


/* =========================================================
   AUTHOR INFORMATION BLOCK
   ========================================================= */

.op-ah-author-info {

  position: absolute;

  left: 50%;

  bottom: 26px;

  z-index: 10;

  width: 300px;

  padding:
    24px
    25px
    23px;

  background:
    rgba(248,245,241,.97);

  border-left:
    2px solid
    var(--red);

  box-shadow:
    0 16px 42px
    rgba(23,21,20,.09);

  transform:
    translateX(44%);

  transition:
    transform .5s ease;

}


.op-ah-author-info:hover {

  transform:
    translateX(44%)
    translateY(-3px);

}


/* Label */

.op-ah-featured-label {

  color: var(--red);

  font-size: 8px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 2px;

}


/* Name */

.op-ah-author-name {

  margin:
    8px
    0
    6px;

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -.025em;

  color: var(--dark);

}


/* Book */

.op-ah-author-book {

  color: var(--red);

  font-size: 9px;

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 1.7px;

}


/* Meta */

.op-ah-author-meta {

  margin-top: 8px;

  color: var(--text);

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 1.35px;

}


.op-ah-author-meta span {

  color: var(--red);

  padding:
    0
    4px;

}


/* Author link */

.op-ah-author-link {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-top: 16px;

  padding-bottom: 5px;

  border-bottom:
    1px solid
    var(--red);

  color: var(--dark);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 1.7px;

  transition:
    color .3s ease;

}


.op-ah-author-link b {

  color: var(--red);

  font-size: 15px;

  font-weight: 400;

  transition:
    transform .35s ease;

}


.op-ah-author-link:hover {

  color: var(--red);

}


.op-ah-author-link:hover b {

  transform:
    translateX(5px);

}


/* =========================================================
   EDITORIAL LABELS
   ========================================================= */

.op-ah-label-top {

  position: absolute;

  top: 53px;

  right: 4px;

  z-index: 8;

  writing-mode: vertical-rl;

  transform:
    rotate(180deg);

  color:
    rgba(23,21,20,.38);

  font-size: 8px;

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 1.7px;

}


.op-ah-label-side {

  position: absolute;

  left: 10px;

  bottom: 27px;

  z-index: 8;

  color:
    rgba(23,21,20,.34);

  font-size: 7px;

  font-weight: 500;

  letter-spacing: 1.7px;

  transform:
    rotate(-90deg);

  transform-origin:
    left center;

}


.op-ah-label-year {

  position: absolute;

  top: 76px;

  left: 25px;

  z-index: 8;

  color:
    rgba(23,21,20,.34);

  font-size: 8px;

  letter-spacing: 2px;

}


/* =========================================================
   EDITORIAL LINES
   ========================================================= */

.op-ah-diagonal-line {

  position: absolute;

  right: 17%;

  top: 10%;

  width: 1px;

  height: 530px;

  background:
    rgba(204,41,43,.085);

  transform:
    rotate(27deg);

  transform-origin:
    center;

  z-index: -2;

}


.op-ah-horizontal-line {

  position: absolute;

  left: 0;

  top: 47%;

  width: 32%;

  height: 1px;

  background:
    rgba(204,41,43,.10);

  z-index: -2;

}


/* =========================================================
   CROSS MARKER
   ========================================================= */

.op-ah-cross {

  position: absolute;

  right: 50px;

  top: 102px;

  width: 17px;

  height: 17px;

  z-index: 9;

}


.op-ah-cross span {

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 1px;

  background: var(--red);

}


.op-ah-cross span:first-child {

  transform:
    translateY(-50%)
    rotate(45deg);

}


.op-ah-cross span:last-child {

  transform:
    translateY(-50%)
    rotate(-45deg);

}


/* =========================================================
   BOTTOM STRIP
   ========================================================= */

.op-ah-bottom-strip {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 60px;

  padding:
    0
    54px;

  display: flex;

  align-items: center;

  gap: 28px;

  background:
    rgba(241,236,230,.55);

  z-index: 20;

}


.op-ah-strip-line {

  flex: 1;

  height: 1px;

  background:
    rgba(23,21,20,.13);

}


.op-ah-strip-content {

  display: flex;

  align-items: center;

  gap: 14px;

  color:
    rgba(23,21,20,.48);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 2.1px;

  white-space: nowrap;

}


.op-ah-strip-content i {

  color: var(--red);

  font-style: normal;

  font-size: 8px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .op-ah-container {

    width:
      min(
        calc(100% - 60px),
        1100px
      );

    grid-template-columns:
      46%
      54%;

  }


  .op-ah-content {

    padding-right: 20px;

  }


  .op-ah-heading {

    font-size:
      clamp(
        52px,
        6vw,
        70px
      );

  }


  .op-ah-portrait {

    width: 340px;

    height: 460px;

  }


  .op-ah-visual-circle-one {

    width: 510px;

    height: 510px;

  }


  .op-ah-visual-circle-two {

    width: 410px;

    height: 410px;

  }


  .op-ah-visual-circle-three {

    width: 350px;

    height: 350px;

  }


  .op-ah-author-info {

    width: 270px;

    transform:
      translateX(32%);

  }


  .op-ah-author-info:hover {

    transform:
      translateX(32%)
      translateY(-3px);

  }


  .op-ah-bg-authors {

    left: -90px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .op-authors-hero {

    min-height: auto;

  }


  /* Background */

  .op-ah-bg-authors {

    top: 95px;

    left: -40px;

    font-size: 125px;

    opacity: .20;

  }


  .op-ah-bg-stories {

    right: -55px;

    bottom: 125px;

    font-size: 115px;

    opacity: .16;

  }


  /* Container */

  .op-ah-container {

    width: 100%;

    min-height: auto;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    padding:
      72px
      22px
      38px;

  }


  /* Content */

  .op-ah-content {

    max-width: none;

    padding: 0;

  }


  .op-ah-eyebrow {

    margin-bottom: 21px;

    font-size: 10px;

    letter-spacing: 2.3px;

  }


  .op-ah-eyebrow-line {

    width: 28px;

  }


  .op-ah-heading {

    font-size:
      clamp(
        49px,
        14vw,
        65px
      );

    line-height: .97;

  }


  .op-ah-description {

    max-width: none;

    margin-top: 25px;

    font-size: 14px;

    line-height: 1.75;

  }


  /* Actions */

  .op-ah-actions {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    margin-top: 28px;

  }


  .op-ah-primary {

    font-size: 8px;

  }


  .op-ah-secondary {

    font-size: 8px;

  }


  /* Visual */

  .op-ah-visual {

    width: 100%;

    min-height: auto;

    margin-top: 52px;

    display: flex;

    flex-direction: column;

    align-items: center;

  }


  /* Circles */

  .op-ah-visual-circle-one {

    width: 390px;

    height: 390px;

    top: 39%;

    left: 50%;

    transform:
      translate(-50%,-50%);

  }


  .op-ah-visual-circle-two {

    width: 315px;

    height: 315px;

    top: 39%;

    left: 50%;

    transform:
      translate(-50%,-50%);

  }


  .op-ah-visual-circle-three {

    width: 265px;

    height: 265px;

    top: 39%;

    left: 50%;

    transform:
      translate(-50%,-50%);

  }


  /* Portrait */

  .op-ah-portrait {

    width:
      min(
        300px,
        82vw
      );

    height:
      min(
        400px,
        109vw
      );

    transform:
      rotate(-1.6deg);

  }


  .op-ah-portrait:hover {

    transform:
      rotate(-.4deg)
      scale(1.005);

  }


  /* Author info */

  .op-ah-author-info {

    position: relative;

    left: auto;

    bottom: auto;

    width: 100%;

    margin-top: 20px;

    padding:
      22px
      20px
      21px;

    transform: none;

    box-shadow: none;

  }


  .op-ah-author-info:hover {

    transform:
      translateY(-2px);

  }


  .op-ah-author-name {

    font-size: 29px;

  }


  .op-ah-author-book {

    font-size: 8px;

  }


  .op-ah-author-meta {

    font-size: 7px;

  }


  /* Labels */

  .op-ah-label-top {

    top: 7px;

    right: 0;

    font-size: 7px;

  }


  .op-ah-label-side {

    display: none;

  }


  .op-ah-label-year {

    top: auto;

    bottom: 10px;

    left: 3px;

    font-size: 7px;

  }


  /* Cross */

  .op-ah-cross {

    top: 17px;

    right: 2px;

  }


  /* Lines */

  .op-ah-horizontal-line {

    top: 38%;

    width: 62%;

  }


  .op-ah-diagonal-line {

    display: none;

  }


  /* Bottom strip */

  .op-ah-bottom-strip {

    position: relative;

    height: auto;

    min-height: 66px;

    padding:
      20px
      22px
      22px;

    flex-direction: column;

    gap: 15px;

    background:
      var(--cream-dark);

  }


  .op-ah-strip-line {

    width: 100%;

    flex: none;

  }


  .op-ah-strip-content {

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 7px;

    letter-spacing: 1.4px;

    white-space: normal;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .op-ah-container {

    padding-left: 18px;

    padding-right: 18px;

  }


  .op-ah-heading {

    font-size: 49px;

  }


  .op-ah-description {

    font-size: 13px;

  }


  .op-ah-portrait {

    width: 285px;

    height: 380px;

  }


  .op-ah-visual-circle-one {

    width: 350px;

    height: 350px;

  }


  .op-ah-visual-circle-two {

    width: 285px;

    height: 285px;

  }


  .op-ah-visual-circle-three {

    width: 240px;

    height: 240px;

  }


  .op-ah-author-name {

    font-size: 27px;

  }


  .op-ah-strip-content {

    letter-spacing: 1px;

  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.op-ah-primary:focus-visible,
.op-ah-secondary:focus-visible,
.op-ah-author-link:focus-visible {

  outline:
    1px solid
    var(--red);

  outline-offset: 5px;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .op-authors-hero *,
  .op-authors-hero *::before,
  .op-authors-hero *::after {

    animation: none !important;

    transition: none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d7327a7 *//* =========================================================
   OMNI PUBLISHER — AUTHOR DIRECTORY
   SECTION 02
========================================================= */

#op-authors-directory {
  --op-dark: #171514;
  --op-text: #F6F2ED;
  --op-muted: #A7A09A;
  --op-red: #CC292B;
  --op-beige: #EDE5DD;
  --op-rule: rgba(246, 242, 237, 0.14);

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(204, 41, 43, 0.045),
      transparent 30%
    ),
    #171514;

  color: var(--op-text);

  font-family: "Inter", Arial, sans-serif;
}


/* =========================================================
   PAPER / NOISE EFFECT
========================================================= */

#op-authors-directory::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 0;

  opacity: 0.055;

  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}


/* =========================================================
   CONTAINER
========================================================= */

.op-ad-container {
  position: relative;
  z-index: 2;

  width: min(1380px, calc(100% - 100px));

  margin: 0 auto;
}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.op-ad-bg-word {
  position: absolute;
  z-index: 0;

  pointer-events: none;

  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;

  white-space: nowrap;

  line-height: 0.8;

  color: rgba(246, 242, 237, 0.035);

  user-select: none;
}

.op-ad-bg-authors {
  top: 50px;
  left: -35px;

  font-size: clamp(150px, 22vw, 350px);

  letter-spacing: -0.07em;
}


/* =========================================================
   BACKGROUND CIRCLES
========================================================= */

.op-ad-circle {
  position: absolute;

  border: 1px solid rgba(246, 242, 237, 0.07);

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;
}

.op-ad-circle-large {
  width: 680px;
  height: 680px;

  right: -270px;
  top: 260px;
}

.op-ad-circle-small {
  width: 360px;
  height: 360px;

  right: -100px;
  top: 420px;

  border-color: rgba(204, 41, 43, 0.13);
}


/* =========================================================
   EDITORIAL RULES
========================================================= */

.op-ad-rule {
  position: absolute;

  height: 1px;

  background: var(--op-rule);

  pointer-events: none;

  z-index: 0;
}

.op-ad-rule-top {
  width: 38%;

  top: 165px;
  right: 0;
}

.op-ad-rule-bottom {
  width: 48%;

  bottom: 410px;
  left: 0;
}


/* =========================================================
   DIAGONAL RED LINE
========================================================= */

.op-ad-diagonal {
  position: absolute;

  z-index: 0;

  width: 1px;
  height: 620px;

  right: 15%;
  top: 200px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(204, 41, 43, 0.65),
    transparent
  );

  transform: rotate(28deg);

  transform-origin: center;
}


/* =========================================================
   CROSS MARKS
========================================================= */

.op-ad-cross {
  position: absolute;

  width: 13px;
  height: 13px;

  pointer-events: none;

  z-index: 1;
}

.op-ad-cross::before,
.op-ad-cross::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

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

.op-ad-cross::before {
  width: 13px;
  height: 1px;

  transform: translate(-50%, -50%);
}

.op-ad-cross::after {
  width: 1px;
  height: 13px;

  transform: translate(-50%, -50%);
}

.op-ad-cross-one {
  top: 270px;
  right: 10%;
}

.op-ad-cross-two {
  top: 950px;
  left: 5%;
}

.op-ad-cross-three {
  bottom: 250px;
  right: 7%;
}


/* =========================================================
   SECTION OPENING
========================================================= */

.op-ad-opening {
  position: relative;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  min-height: 410px;

  padding: 170px 0 90px;

  border-bottom: 1px solid var(--op-rule);
}


/* =========================================================
   EYEBROW
========================================================= */

.op-ad-eyebrow {
  display: flex;

  align-items: center;
  gap: 13px;

  margin-bottom: 24px;

  color: var(--op-muted);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.24em;

  text-transform: uppercase;
}

.op-ad-eyebrow-line {
  display: block;

  width: 34px;
  height: 1px;

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


/* =========================================================
   MAIN HEADING
========================================================= */

.op-ad-heading {
  max-width: 780px;

  margin: 0;

  color: var(--op-text);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(64px, 7.4vw, 118px);

  font-weight: 400;

  line-height: 0.93;

  letter-spacing: -0.055em;
}

.op-ad-heading span {
  color: var(--op-red);
}


/* =========================================================
   INTRO
========================================================= */

.op-ad-intro {
  max-width: 540px;

  margin: 34px 0 0;

  color: var(--op-muted);

  font-size: 14px;
  font-weight: 300;

  line-height: 1.85;

  letter-spacing: 0.01em;
}


/* =========================================================
   COUNTER
========================================================= */

.op-ad-counter {
  display: flex;

  align-items: baseline;

  gap: 10px;

  padding-bottom: 9px;
}

.op-ad-counter-number {
  color: var(--op-text);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 30px;
  font-weight: 400;
}

.op-ad-counter-label {
  color: var(--op-muted);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.22em;
}


/* =========================================================
   AUTHOR GRID
========================================================= */

.op-ad-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  column-gap: 28px;
  row-gap: 74px;

  padding: 88px 0 115px;
}


/* =========================================================
   AUTHOR CARD
========================================================= */

.op-ad-author {
  position: relative;

  min-width: 0;
}


/* =========================================================
   AUTHOR LINK
========================================================= */

.op-ad-author-link {
  display: block;

  color: inherit;

  text-decoration: none !important;
}


/* =========================================================
   PORTRAIT
========================================================= */

.op-ad-portrait-wrap {
  position: relative;

  width: 100%;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  background: #252220;
}


/* =========================================================
   IMAGE
========================================================= */

.op-ad-portrait {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  filter: saturate(0.86);

  transform: scale(1.001);

  transition:
    transform 900ms cubic-bezier(.2,.65,.2,1),
    filter 700ms ease;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.op-ad-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(23, 21, 20, 0.78),
      rgba(23, 21, 20, 0.05) 52%,
      rgba(23, 21, 20, 0)
    );

  opacity: 0.48;

  transition:
    opacity 600ms ease;
}


/* =========================================================
   RED ACCENT LINE
========================================================= */

.op-ad-accent-line {
  position: absolute;

  left: 22px;
  bottom: 24px;

  width: 1px;
  height: 0;

  background: var(--op-red);

  transition:
    height 500ms cubic-bezier(.2,.65,.2,1);
}


/* =========================================================
   EDITORIAL NUMBER
========================================================= */

.op-ad-number {
  position: absolute;

  top: 17px;
  left: 17px;

  color: rgba(246, 242, 237, 0.68);

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.16em;

  transition:
    color 300ms ease;
}


/* =========================================================
   VIEW AUTHOR
========================================================= */

.op-ad-view {
  position: absolute;

  left: 42px;
  bottom: 22px;

  display: flex;

  align-items: center;
  gap: 8px;

  color: var(--op-text);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.18em;

  opacity: 0;

  transform: translateY(8px);

  transition:
    opacity 450ms ease,
    transform 450ms ease;
}

.op-ad-view-arrow {
  color: var(--op-red);

  font-size: 16px;

  line-height: 1;

  transition:
    transform 350ms ease;
}


/* =========================================================
   AUTHOR INFO
========================================================= */

.op-ad-author-info {
  padding-top: 19px;
}

.op-ad-author-info h3 {
  margin: 0;

  color: var(--op-text);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(22px, 2vw, 29px);

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -0.025em;

  transition:
    transform 450ms cubic-bezier(.2,.65,.2,1);
}

.op-ad-author-meta {
  margin-top: 10px;

  color: var(--op-muted);

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.2em;

  line-height: 1.5;
}

.op-ad-author-meta span {
  margin: 0 4px;

  color: var(--op-red);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

  .op-ad-author-link:hover .op-ad-portrait {
    transform: scale(1.035);

    filter: saturate(1);
  }

  .op-ad-author-link:hover .op-ad-image-overlay {
    opacity: 0.76;
  }

  .op-ad-author-link:hover .op-ad-accent-line {
    height: 62px;
  }

  .op-ad-author-link:hover .op-ad-view {
    opacity: 1;

    transform: translateY(0);
  }

  .op-ad-author-link:hover .op-ad-view-arrow {
    transform: translateX(5px);
  }

  .op-ad-author-link:hover .op-ad-author-info h3 {
    transform: translateY(-3px);
  }

  .op-ad-author-link:hover .op-ad-number {
    color: var(--op-red);
  }

}


/* =========================================================
   EDITORIAL DIVIDER
========================================================= */

.op-ad-divider {
  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  gap: 26px;

  margin: 4px 0 5px;
}

.op-ad-divider-line {
  flex: 1;

  height: 1px;

  background: var(--op-rule);
}

.op-ad-divider-center {
  display: flex;

  align-items: center;

  gap: 15px;
}

.op-ad-divider-cross {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border: 1px solid rgba(204, 41, 43, 0.55);

  color: var(--op-red);

  font-size: 13px;

  font-weight: 300;
}

.op-ad-divider-text {
  color: var(--op-muted);

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.24em;

  white-space: nowrap;
}

.op-ad-divider-text b {
  color: var(--op-red);

  font-weight: 400;

  margin: 0 5px;
}


/* =========================================================
   CTA
========================================================= */

.op-ad-cta {
  position: relative;

  min-height: 520px;

  display: flex;

  align-items: center;

  padding: 110px 0 120px;

  border-top: 1px solid var(--op-rule);
  border-bottom: 1px solid var(--op-rule);

  overflow: hidden;
}


/* =========================================================
   CTA GIANT BACKGROUND WORD
========================================================= */

.op-ad-cta-background {
  position: absolute;

  right: -20px;
  bottom: -30px;

  color: rgba(246, 242, 237, 0.025);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(150px, 25vw, 390px);

  line-height: 0.7;

  letter-spacing: -0.08em;

  pointer-events: none;
}


/* =========================================================
   CTA CONTENT
========================================================= */

.op-ad-cta-content {
  position: relative;

  z-index: 3;

  max-width: 800px;
}

.op-ad-cta-eyebrow {
  display: flex;

  align-items: center;

  gap: 13px;

  color: var(--op-muted);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.23em;
}

.op-ad-cta-eyebrow span {
  width: 35px;
  height: 1px;

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

.op-ad-cta h2 {
  margin: 25px 0 0;

  color: var(--op-text);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(55px, 7vw, 105px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.055em;
}

.op-ad-cta h2 span {
  color: var(--op-red);
}

.op-ad-cta p {
  max-width: 520px;

  margin: 30px 0 0;

  color: var(--op-muted);

  font-size: 14px;
  font-weight: 300;

  line-height: 1.8;
}


/* =========================================================
   CTA ACTIONS
========================================================= */

.op-ad-cta-actions {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-top: 38px;
}

.op-ad-cta-primary {
  display: inline-flex;

  align-items: center;
  gap: 18px;

  padding: 17px 22px;

  background: var(--op-red);

  color: #fff;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.16em;

  text-decoration: none !important;

  transition:
    transform 300ms ease,
    background 300ms ease;
}

.op-ad-cta-primary span {
  font-size: 17px;

  transition:
    transform 300ms ease;
}

.op-ad-cta-primary:hover {
  transform: translateY(-2px);
}

.op-ad-cta-primary:hover span {
  transform: translateX(5px);
}

.op-ad-cta-secondary {
  display: inline-flex;

  align-items: center;
  gap: 9px;

  color: var(--op-text);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.16em;

  text-decoration: none !important;

  border-bottom: 1px solid rgba(246, 242, 237, 0.3);

  padding-bottom: 7px;

  transition:
    color 250ms ease,
    border-color 250ms ease;
}

.op-ad-cta-secondary span {
  color: var(--op-red);

  font-size: 14px;
}

.op-ad-cta-secondary:hover {
  color: var(--op-red);

  border-color: var(--op-red);
}


/* =========================================================
   CTA CIRCLE
========================================================= */

.op-ad-cta-circle {
  position: absolute;

  width: 470px;
  height: 470px;

  right: -80px;
  top: 30px;

  border: 1px solid rgba(246, 242, 237, 0.08);

  border-radius: 50%;
}

.op-ad-cta-circle::before {
  content: "";

  position: absolute;

  inset: 55px;

  border: 1px solid rgba(204, 41, 43, 0.17);

  border-radius: 50%;
}


/* =========================================================
   CTA DIAGONAL
========================================================= */

.op-ad-cta-line {
  position: absolute;

  width: 1px;
  height: 550px;

  right: 19%;
  top: -20px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(204, 41, 43, 0.55),
    transparent
  );

  transform: rotate(25deg);
}


/* =========================================================
   CTA CROSSES
========================================================= */

.op-ad-cta-cross {
  position: absolute;

  width: 13px;
  height: 13px;
}

.op-ad-cta-cross::before,
.op-ad-cta-cross::after {
  content: "";

  position: absolute;

  background: var(--op-red);

  left: 50%;
  top: 50%;
}

.op-ad-cta-cross::before {
  width: 13px;
  height: 1px;

  transform: translate(-50%, -50%);
}

.op-ad-cta-cross::after {
  width: 1px;
  height: 13px;

  transform: translate(-50%, -50%);
}

.op-ad-cta-cross-one {
  right: 10%;
  top: 110px;
}

.op-ad-cta-cross-two {
  right: 28%;
  bottom: 90px;
}


/* =========================================================
   BOTTOM RAIL
========================================================= */

.op-ad-bottom-rail {
  display: grid;

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

  border-top: 0;

  min-height: 64px;
}

.op-ad-bottom-rail span {
  display: flex;

  align-items: center;
  justify-content: center;

  border-left: 1px solid var(--op-rule);

  color: rgba(246, 242, 237, 0.42);

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.22em;
}

.op-ad-bottom-rail span:last-child {
  border-right: 1px solid var(--op-rule);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.op-ad-opening-left,
.op-ad-counter,
.op-ad-author,
.op-ad-divider,
.op-ad-cta-content {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 800ms ease,
    transform 800ms cubic-bezier(.2,.65,.2,1);
}

#op-authors-directory.is-visible
.op-ad-opening-left,
#op-authors-directory.is-visible
.op-ad-counter,
#op-authors-directory.is-visible
.op-ad-author,
#op-authors-directory.is-visible
.op-ad-divider,
#op-authors-directory.is-visible
.op-ad-cta-content {
  opacity: 1;

  transform: translateY(0);
}

#op-authors-directory.is-visible .op-ad-counter {
  transition-delay: 120ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(1) {
  transition-delay: 80ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(2) {
  transition-delay: 130ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(3) {
  transition-delay: 180ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(4) {
  transition-delay: 230ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(6) {
  transition-delay: 80ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(7) {
  transition-delay: 130ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(8) {
  transition-delay: 180ms;
}

#op-authors-directory.is-visible .op-ad-author:nth-child(9) {
  transition-delay: 230ms;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .op-ad-container {
    width: min(100% - 60px, 900px);
  }

  .op-ad-opening {
    min-height: 350px;

    padding-top: 130px;
  }

  .op-ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 28px;
    row-gap: 70px;

    padding-top: 70px;
  }

  .op-ad-bg-authors {
    font-size: 180px;

    top: 80px;
  }

  .op-ad-circle-large {
    width: 520px;
    height: 520px;

    right: -280px;
  }

  .op-ad-cta {
    min-height: 470px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  #op-authors-directory {
    background:
      radial-gradient(
        circle at 80% 10%,
        rgba(204, 41, 43, 0.035),
        transparent 32%
      ),
      var(--op-dark);
  }

  .op-ad-container {
    width: calc(100% - 36px);
  }


  /* BACKGROUND */

  .op-ad-bg-authors {
    top: 45px;
    left: -25px;

    font-size: 112px;

    letter-spacing: -0.09em;
  }

  .op-ad-circle-large {
    width: 340px;
    height: 340px;

    right: -230px;
    top: 350px;
  }

  .op-ad-circle-small {
    width: 230px;
    height: 230px;

    right: -145px;
    top: 460px;
  }

  .op-ad-rule-top {
    top: 105px;

    width: 55%;
  }

  .op-ad-rule-bottom {
    bottom: 360px;

    width: 65%;
  }

  .op-ad-diagonal {
    right: 8%;
    top: 260px;

    height: 420px;
  }


  /* OPENING */

  .op-ad-opening {
    display: block;

    min-height: auto;

    padding: 130px 0 55px;
  }

  .op-ad-eyebrow {
    margin-bottom: 20px;
  }

  .op-ad-heading {
    max-width: 100%;

    font-size: clamp(54px, 16vw, 78px);

    line-height: 0.94;
  }

  .op-ad-intro {
    max-width: 330px;

    margin-top: 27px;

    font-size: 13px;

    line-height: 1.75;
  }

  .op-ad-counter {
    margin-top: 30px;

    padding-bottom: 0;
  }


  /* GRID */

  .op-ad-grid {
    grid-template-columns: 1fr;

    gap: 56px;

    padding: 56px 0 85px;
  }

  .op-ad-author {
    width: 100%;
  }

  .op-ad-portrait-wrap {
    aspect-ratio: 3 / 4;
  }

  .op-ad-author-info {
    padding-top: 16px;
  }

  .op-ad-author-info h3 {
    font-size: 29px;
  }


  /* MOBILE VIEW AUTHOR ALWAYS VISIBLE */

  .op-ad-view {
    opacity: 1;

    transform: translateY(0);

    left: 40px;
    bottom: 22px;
  }

  .op-ad-accent-line {
    height: 52px;
  }

  .op-ad-image-overlay {
    opacity: 0.68;
  }


  /* DIVIDER */

  .op-ad-divider {
    gap: 12px;

    margin: 0;

    padding: 8px 0 3px;
  }

  .op-ad-divider-center {
    gap: 8px;
  }

  .op-ad-divider-text {
    font-size: 6px;

    letter-spacing: 0.15em;
  }

  .op-ad-divider-cross {
    width: 18px;
    height: 18px;

    font-size: 11px;
  }


  /* CTA */

  .op-ad-cta {
    min-height: auto;

    padding: 85px 0 90px;
  }

  .op-ad-cta-background {
    right: -45px;
    bottom: 5px;

    font-size: 150px;
  }

  .op-ad-cta h2 {
    max-width: 340px;

    font-size: clamp(51px, 15vw, 73px);
  }

  .op-ad-cta p {
    max-width: 310px;

    font-size: 13px;

    line-height: 1.75;
  }

  .op-ad-cta-actions {
    align-items: flex-start;

    flex-direction: column;

    gap: 23px;

    margin-top: 32px;
  }

  .op-ad-cta-primary {
    padding: 16px 19px;
  }

  .op-ad-cta-circle {
    width: 330px;
    height: 330px;

    right: -215px;
    top: 55px;
  }

  .op-ad-cta-line {
    right: 12%;

    height: 430px;
  }

  .op-ad-cta-cross-one {
    right: 7%;
    top: 80px;
  }

  .op-ad-cta-cross-two {
    right: 22%;
    bottom: 50px;
  }


  /* BOTTOM RAIL */

  .op-ad-bottom-rail {
    grid-template-columns: repeat(2, 1fr);

    min-height: auto;
  }

  .op-ad-bottom-rail span {
    min-height: 52px;

    font-size: 7px;
  }

  .op-ad-bottom-rail span:nth-child(3) {
    border-top: 1px solid var(--op-rule);
  }

  .op-ad-bottom-rail span:nth-child(4) {
    border-top: 1px solid var(--op-rule);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .op-ad-container {
    width: calc(100% - 28px);
  }

  .op-ad-heading {
    font-size: 52px;
  }

  .op-ad-portrait-wrap {
    aspect-ratio: 0.77 / 1;
  }

  .op-ad-author-info h3 {
    font-size: 27px;
  }

  .op-ad-bg-authors {
    font-size: 96px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.op-ad-author-link:focus-visible,
.op-ad-cta-primary:focus-visible,
.op-ad-cta-secondary:focus-visible {
  outline: 1px solid var(--op-red);

  outline-offset: 5px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .op-ad-opening-left,
  .op-ad-counter,
  .op-ad-author,
  .op-ad-divider,
  .op-ad-cta-content {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .op-ad-portrait,
  .op-ad-image-overlay,
  .op-ad-accent-line,
  .op-ad-view,
  .op-ad-view-arrow,
  .op-ad-author-info h3 {
    transition: none;
  }

}/* End custom CSS */