/* ==========================================================
   MID-FLORIDA REAL ESTATE
   PROTECTED ARTICLE SYSTEM + ACCESS REQUEST

   MFRE 2026.10.30-2359
========================================================== */


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

.article-page {
  background:
    var(--mfre-ivory);
}

.article-page .site__content {
  background:
    var(--mfre-ivory);
}


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

.article-hero {
  position: relative;
  width: 100%;

  padding:
    58px 24px 68px;

  overflow: hidden;
  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(223, 194, 127, 0.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--mfre-wine-900),
      var(--mfre-wine-950)
    );
}

.article-hero::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width:
    min(680px, 78vw);

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--mfre-gold),
      transparent
    );
}

.article-hero__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
}

.article-hero__logo-link {
  display: inline-block;

  margin:
    0 auto 32px;

  border:
    0 !important;

  text-decoration:
    none !important;
}

.article-hero__logo {
  display: block;

  width:
    min(260px, 64vw);

  height: auto;

  margin: 0 auto;
}

.article-hero__eyebrow {
  display: block;

  margin-bottom: 10px;

  color:
    var(--mfre-gold-bright);

  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.17em;

  text-transform:
    uppercase;
}

.article-hero h1 {
  max-width: 900px;

  margin:
    0 auto 18px;

  color:
    var(--mfre-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.55rem, 6vw, 4.9rem);

  font-weight: 500;
  line-height: 0.98;

  letter-spacing:
    -0.05em;
}

.article-hero__description {
  max-width: 760px;

  margin: 0 auto;

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 1.02rem;
  line-height: 1.7;
}

.article-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap:
    8px 18px;

  margin-top: 20px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;

  text-transform:
    uppercase;
}

.article-hero__meta span + span::before {
  content: "•";

  margin-right: 18px;

  color:
    var(--mfre-gold);
}


/* ----------------------------------------------------------
   ACCESS AREA
---------------------------------------------------------- */

.article-access {
  width: 100%;

  min-height: 480px;

  padding:
    70px 24px 90px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(198, 161, 91, 0.09),
      transparent 28%
    ),
    var(--mfre-ivory);
}

.article-access__inner {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;
}


/* ----------------------------------------------------------
   PASSWORD GATE
---------------------------------------------------------- */

.article-gate {
  width: 100%;
  max-width: 620px;

  margin:
    0 auto;

  padding:
    38px 38px 34px;

  color:
    var(--mfre-black);

  background:
    var(--mfre-white);

  border:
    1px solid rgba(49, 8, 13, 0.13);

  border-top:
    4px solid var(--mfre-gold);

  box-shadow:
    0 24px 60px rgba(49, 8, 13, 0.13);

  text-align:
    center;
}

.article-gate[hidden] {
  display: none;
}

.article-gate__eyebrow {
  display: block;

  margin-bottom: 8px;

  color:
    var(--mfre-wine-700);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;

  text-transform:
    uppercase;
}

.article-gate h2 {
  margin:
    0 0 12px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 5vw, 2.8rem);

  font-weight: 500;
  line-height: 1;

  letter-spacing:
    -0.04em;
}

.article-gate > p {
  max-width: 470px;

  margin:
    0 auto 26px;

  color:
    #625b5d;

  font-size: 0.94rem;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   PASSWORD FORM
---------------------------------------------------------- */

.article-gate__form {
  width: 100%;

  text-align:
    left;
}

.article-gate__label {
  display: block;

  margin-bottom: 7px;

  color:
    var(--mfre-black);

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.10em;

  text-transform:
    uppercase;
}

.article-gate__controls {
  display: grid;

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

  gap: 10px;
}

.article-gate__input {
  width: 100%;
  min-width: 0;
  min-height: 50px;

  padding:
    12px 14px;

  color:
    var(--mfre-black);

  background:
    #ffffff;

  border:
    1px solid #aaa1a3;

  border-radius: 2px;

  font: inherit;

  outline: none;
}

.article-gate__input:focus {
  border-color:
    var(--mfre-wine-700);

  box-shadow:
    0 0 0 3px rgba(101, 24, 34, 0.12);
}

.article-gate__input[aria-invalid="true"] {
  border-color:
    #9c1f2d;

  box-shadow:
    0 0 0 3px rgba(156, 31, 45, 0.10);
}

.article-gate__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding:
    12px 20px;

  color:
    var(--mfre-white);

  background:
    var(--mfre-wine-800);

  border:
    1px solid var(--mfre-wine-800);

  border-radius: 2px;

  cursor: pointer;

  font: inherit;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;

  text-transform:
    uppercase;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.article-gate__button:hover,
.article-gate__button:focus {
  color:
    var(--mfre-black);

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright);
}

.article-gate__message {
  min-height: 1.25em;

  margin:
    9px 0 0;

  color:
    #8a1d29;

  font-size: 0.82rem;
  line-height: 1.4;
}


/* ----------------------------------------------------------
   OR DIVIDER
---------------------------------------------------------- */

.article-gate__divider {
  position: relative;

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

  width: 100%;

  margin:
    18px 0 16px;

  color:
    #8b8385;

  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.15em;

  text-transform:
    uppercase;
}

.article-gate__divider::before,
.article-gate__divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    rgba(49, 8, 13, 0.12);
}

.article-gate__divider span {
  padding:
    0 12px;
}


/* ----------------------------------------------------------
   REQUEST ACCESS TOGGLE
---------------------------------------------------------- */

.article-request-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 48px;

  padding:
    12px 16px;

  color:
    var(--mfre-wine-800);

  background:
    #fbf8f2;

  border:
    1px solid rgba(49, 8, 13, 0.16);

  border-radius: 2px;

  cursor: pointer;

  font: inherit;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;

  text-align: left;

  text-transform:
    uppercase;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.article-request-toggle:hover,
.article-request-toggle:focus,
.article-request-toggle.is-open {
  color:
    var(--mfre-black);

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold);
}

.article-request-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  margin-left: 12px;

  font-family:
    Arial,
    sans-serif;

  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}


/* ----------------------------------------------------------
   REQUEST ACCESS DROPDOWN
---------------------------------------------------------- */

.article-access-request {
  display: grid;

  grid-template-rows:
    0fr;

  width: 100%;

  opacity: 0;

  visibility: hidden;

  transition:
    grid-template-rows 0.36s
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    margin-top 0.36s
      cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.36s;

  margin-top: 0;
}

.article-access-request.is-open {
  grid-template-rows:
    1fr;

  margin-top: 14px;

  opacity: 1;

  visibility: visible;

  transition:
    grid-template-rows 0.42s
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    margin-top 0.42s
      cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.article-access-request__inner {
  min-height: 0;

  overflow: hidden;

  text-align:
    left;
}

.article-access-request__intro {
  padding:
    22px 20px 18px;

  background:
    linear-gradient(
      180deg,
      #fbf8f2,
      #ffffff
    );

  border:
    1px solid rgba(49, 8, 13, 0.11);

  border-bottom: 0;
}

.article-access-request__eyebrow {
  display: block;

  margin-bottom: 5px;

  color:
    var(--mfre-wine-700);

  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.14em;

  text-transform:
    uppercase;
}

.article-access-request__intro h3 {
  margin:
    0 0 8px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.1;
}

.article-access-request__intro p {
  margin: 0;

  color:
    #625b5d;

  font-size: 0.84rem;
  line-height: 1.55;
}


/* ----------------------------------------------------------
   REQUEST FORM
---------------------------------------------------------- */

.article-access-request__form {
  padding:
    20px;

  background:
    #ffffff;

  border:
    1px solid rgba(49, 8, 13, 0.11);

  border-top:
    1px solid rgba(49, 8, 13, 0.07);
}

.article-access-request__field {
  margin-bottom: 16px;
}

.article-access-request__field label {
  display: block;

  margin-bottom: 6px;

  color:
    var(--mfre-black);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;

  text-transform:
    uppercase;
}

.article-access-request__field input,
.article-access-request__field textarea {
  display: block;

  width: 100%;

  padding:
    12px 13px;

  color:
    var(--mfre-black);

  background:
    #ffffff;

  border:
    1px solid #aaa1a3;

  border-radius: 2px;

  font:
    inherit;

  font-size: 0.94rem;
  line-height: 1.45;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.article-access-request__field input {
  min-height: 47px;
}

.article-access-request__field textarea {
  min-height: 126px;

  resize:
    vertical;
}

.article-access-request__field input:focus,
.article-access-request__field textarea:focus {
  border-color:
    var(--mfre-wine-700);

  box-shadow:
    0 0 0 3px rgba(101, 24, 34, 0.11);
}

.article-access-request__field textarea::placeholder {
  color:
    #928a8c;
}


/* ----------------------------------------------------------
   REQUEST STATUS
---------------------------------------------------------- */

.article-access-request__status {
  margin:
    2px 0 14px;

  color:
    #777073;

  font-size: 0.75rem;
  line-height: 1.45;
}


/* ----------------------------------------------------------
   REQUEST SUBMIT
---------------------------------------------------------- */

.article-access-request__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 50px;

  padding:
    12px 18px;

  color:
    var(--mfre-white);

  background:
    var(--mfre-wine-800);

  border:
    1px solid var(--mfre-gold);

  border-radius: 2px;

  cursor: pointer;

  font: inherit;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;

  text-transform:
    uppercase;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.article-access-request__submit:hover,
.article-access-request__submit:focus {
  color:
    var(--mfre-black);

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright);
}


/* ----------------------------------------------------------
   BACK LINK
---------------------------------------------------------- */

.article-gate__back {
  display: inline-block;

  margin-top: 18px;

  color:
    var(--mfre-wine-700) !important;

  border-bottom:
    1px solid rgba(101, 24, 34, 0.28) !important;

  font-size: 0.78rem;
  font-weight: 700;

  text-decoration:
    none !important;
}

.article-gate__back:hover,
.article-gate__back:focus {
  color:
    var(--mfre-black) !important;

  border-bottom-color:
    var(--mfre-gold) !important;
}

.article-gate--noscript {
  margin-top: 26px;
}


/* ----------------------------------------------------------
   ARTICLE SHELL
---------------------------------------------------------- */

.protected-article {
  width: 100%;
  max-width: 940px;

  margin: 0 auto;

  color:
    #383234;

  background:
    var(--mfre-white);

  border:
    1px solid rgba(49, 8, 13, 0.10);

  box-shadow:
    0 24px 60px rgba(49, 8, 13, 0.10);
}

.protected-article[hidden] {
  display: none;
}

.protected-article__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    15px 24px;

  background:
    var(--mfre-wine-900);

  border-bottom:
    2px solid var(--mfre-gold);
}

.protected-article__topbar span {
  color:
    var(--mfre-gold-bright);

  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;

  text-transform:
    uppercase;
}

.protected-article__topbar a {
  color:
    var(--mfre-silver-bright) !important;

  border:
    0 !important;

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;

  text-decoration:
    none !important;

  text-transform:
    uppercase;
}

.protected-article__topbar a:hover,
.protected-article__topbar a:focus {
  color:
    var(--mfre-white) !important;
}


/* ----------------------------------------------------------
   ARTICLE TYPOGRAPHY
---------------------------------------------------------- */

.protected-article__content {
  --brand-accent:
    var(--mfre-gold);

  --text-color:
    #383234;

  max-width: 800px;

  margin: 0 auto;

  padding:
    58px 42px 62px;
}

.protected-article__content > h1:first-child {
  display: none;
}

.protected-article__content h1,
.protected-article__content h2,
.protected-article__content h3,
.protected-article__content h4 {
  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 500;

  letter-spacing:
    -0.025em;
}

.protected-article__content h1 {
  margin:
    0 0 26px;

  font-size:
    clamp(2.25rem, 5vw, 3.3rem);

  line-height: 1;
}

.protected-article__content h2 {
  margin:
    46px 0 16px;

  padding-top: 9px;

  font-size:
    clamp(1.75rem, 4vw, 2.35rem);

  line-height: 1.1;

  border-top:
    2px solid rgba(198, 161, 91, 0.55);
}

.protected-article__content h3 {
  margin:
    31px 0 12px;

  color:
    var(--mfre-wine-800);

  font-size: 1.42rem;
  line-height: 1.2;
}

.protected-article__content h4 {
  margin:
    24px 0 10px;

  font-size: 1.15rem;
  line-height: 1.25;
}

.protected-article__content p,
.protected-article__content li {
  color:
    #4f484a;

  font-size: 1rem;
  line-height: 1.78;
}

.protected-article__content p {
  margin:
    0 0 20px;
}

.protected-article__content ul,
.protected-article__content ol {
  margin:
    0 0 24px;

  padding-left: 24px;
}

.protected-article__content li {
  margin-bottom: 8px;
}

.protected-article__content strong {
  color:
    var(--mfre-black);

  font-weight: 800;
}

.protected-article__content a {
  color:
    var(--mfre-wine-700) !important;

  border-bottom:
    1px solid rgba(101, 24, 34, 0.35) !important;

  text-decoration:
    none !important;

  overflow-wrap:
    anywhere;
}

.protected-article__content a:hover,
.protected-article__content a:focus {
  color:
    var(--mfre-black) !important;

  border-bottom-color:
    var(--mfre-gold) !important;
}

.protected-article__content blockquote {
  margin:
    30px 0;

  padding:
    20px 24px;

  color:
    #50494b;

  background:
    #faf7f1;

  border-left:
    4px solid var(--mfre-gold);
}

.protected-article__content blockquote p:last-child {
  margin-bottom: 0;
}

.protected-article__content hr {
  width: 100%;

  height: 1px;

  margin:
    42px 0;

  background:
    rgba(49, 8, 13, 0.13);

  border: 0;
}


/* ----------------------------------------------------------
   ARTICLE TABLES
---------------------------------------------------------- */

.protected-article__content table {
  display: block;

  width: 100%;

  margin:
    26px 0 32px;

  overflow-x: auto;

  border-collapse:
    collapse;

  font-size: 0.9rem;

  -webkit-overflow-scrolling:
    touch;
}

.protected-article__content thead,
.protected-article__content tbody {
  width: 100%;
}

.protected-article__content th,
.protected-article__content td {
  min-width: 120px;

  padding:
    11px 12px;

  border:
    1px solid rgba(49, 8, 13, 0.14);

  text-align: left;
  vertical-align: top;
}

.protected-article__content th {
  color:
    var(--mfre-white);

  background:
    var(--mfre-wine-800);

  font-weight: 800;
}

.protected-article__content td {
  color:
    #514b4d;

  background:
    #ffffff;
}


/* ----------------------------------------------------------
   EMBEDDED ARTICLE GRAPHICS
---------------------------------------------------------- */

.article-graphic {
  width: 100%;

  margin:
    34px auto !important;

  padding:
    22px 18px 16px;

  overflow-x: auto;

  color:
    var(--text-color);

  background:
    linear-gradient(
      180deg,
      #fbf8f1,
      #ffffff
    );

  border:
    1px solid rgba(49, 8, 13, 0.10);

  border-top:
    3px solid var(--mfre-gold);

  box-shadow:
    0 14px 34px rgba(49, 8, 13, 0.07);

  -webkit-overflow-scrolling:
    touch;
}

.article-graphic svg {
  display: block;

  width: 100% !important;
  height: auto !important;

  margin: 0 auto;
}

.article-graphic figcaption {
  max-width: 720px;

  margin:
    12px auto 0;

  color:
    #70686a;

  font-size:
    0.84rem !important;

  line-height: 1.5;

  text-align:
    center !important;
}


/* ----------------------------------------------------------
   ARTICLE CTA
---------------------------------------------------------- */

.protected-article__cta {
  padding:
    46px 42px 50px;

  color:
    var(--mfre-white);

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(223, 194, 127, 0.11),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--mfre-wine-800),
      var(--mfre-wine-950)
    );

  border-top:
    1px solid var(--mfre-gold);
}

.protected-article__cta-eyebrow {
  display: block;

  margin-bottom: 7px;

  color:
    var(--mfre-gold-bright);

  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.15em;

  text-transform:
    uppercase;
}

.protected-article__cta h2 {
  max-width: 620px;

  margin:
    0 0 13px;

  color:
    var(--mfre-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 4vw, 2.9rem);

  font-weight: 500;
  line-height: 1;

  letter-spacing:
    -0.04em;
}

.protected-article__cta p {
  max-width: 690px;

  margin:
    0 0 24px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.93rem;
  line-height: 1.65;
}

.protected-article__cta-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.protected-article__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding:
    11px 17px;

  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-gold-bright);

  border:
    1px solid var(--mfre-gold-bright) !important;

  border-radius: 2px;

  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;

  text-align: center;
  text-decoration:
    none !important;

  text-transform:
    uppercase;
}

.protected-article__button:hover,
.protected-article__button:focus {
  color:
    var(--mfre-white) !important;

  background:
    transparent;

  border-color:
    var(--mfre-silver) !important;
}

.protected-article__button--secondary {
  color:
    var(--mfre-white) !important;

  background:
    transparent;

  border-color:
    var(--mfre-silver) !important;
}

.protected-article__button--secondary:hover,
.protected-article__button--secondary:focus {
  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright) !important;
}


/* ----------------------------------------------------------
   UNLOCK ANIMATION
---------------------------------------------------------- */

.protected-article.article-unlocked {
  animation:
    article-unlock
    620ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes article-unlock {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 760px) {

  .article-access {
    padding:
      54px 18px 70px;
  }

  .article-gate {
    padding:
      30px 24px 27px;
  }

  .protected-article__content {
    padding:
      46px 28px 52px;
  }

  .protected-article__cta {
    padding:
      38px 28px 42px;
  }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 560px) {

  .article-hero {
    padding:
      44px 18px 52px;
  }

  .article-hero__logo {
    width:
      min(230px, 68vw);
  }

  .article-hero h1 {
    font-size:
      clamp(2.35rem, 12vw, 3.45rem);
  }

  .article-hero__description {
    font-size: 0.95rem;
    line-height: 1.62;
  }

  .article-hero__meta {
    flex-direction: column;

    gap: 5px;
  }

  .article-hero__meta span + span::before {
    display: none;
  }

  .article-access {
    padding:
      44px 14px 60px;
  }

  .article-gate {
    padding:
      27px 18px 24px;
  }

  .article-gate__controls {
    grid-template-columns:
      1fr;
  }

  .article-gate__button {
    width: 100%;
  }

  .article-access-request__intro,
  .article-access-request__form {
    padding-right: 16px;
    padding-left: 16px;
  }

  .protected-article__topbar {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;

    padding:
      13px 17px;
  }

  .protected-article__content {
    padding:
      38px 20px 44px;
  }

  .protected-article__content h2 {
    margin-top: 40px;

    font-size:
      clamp(1.65rem, 8vw, 2.05rem);
  }

  .protected-article__content h3 {
    font-size: 1.28rem;
  }

  .protected-article__content p,
  .protected-article__content li {
    font-size: 0.97rem;
    line-height: 1.72;
  }

  .article-graphic {
    margin:
      28px auto !important;

    padding:
      16px 12px 13px;
  }

  .article-graphic svg {
    min-width: 610px;
  }

  .article-graphic figcaption {
    min-width: 0;

    width: 100%;

    font-size:
      0.79rem !important;

    text-align:
      left !important;
  }

  .protected-article__cta {
    padding:
      34px 20px 38px;
  }

  .protected-article__cta-actions {
    flex-direction: column;
  }

  .protected-article__button {
    width: 100%;
  }

}


/* ----------------------------------------------------------
   VERY SMALL PHONES
---------------------------------------------------------- */

@media (max-width: 380px) {

  .protected-article__content {
    padding-right: 17px;
    padding-left: 17px;
  }

  .article-graphic svg {
    min-width: 580px;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

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

  .protected-article.article-unlocked {
    animation: none;
  }

  .article-access-request,
  .article-request-toggle,
  .article-gate__button,
  .article-access-request__submit {
    transition: none;
  }

}