/* =========================================
   FRAME & MOG INFORMATION PAGE
========================================= */

.info-page {
  min-height: 100vh;
}


/* =========================================
   TOP BAR
========================================= */

.info-topbar {
  display: flex;

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

  gap: 20px;
}

.info-back {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    11px
    15px;

  border-radius: 12px;

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

  background:
    rgba(
      7,
      8,
      13,
      0.38
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color:
    #d7d9df;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.10em;

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

.info-back:hover {
  transform:
    translateX(-3px);

  border-color:
    var(--accent-border);

  background:
    var(--accent-soft);
}


/* =========================================
   HERO
========================================= */

.info-hero {
  max-width: 780px;

  margin: 0 auto;

  padding:
    72px
    20px
    58px;

  text-align: center;
}

.info-eyebrow {
  color:
    var(--accent);

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.22em;
}

.info-hero h1 {
  margin:
    12px
    0
    0;

  font-size:
    clamp(
      44px,
      7vw,
      78px
    );

  line-height: 0.98;

  letter-spacing:
    -0.045em;
}

.info-hero p {
  max-width: 590px;

  margin:
    20px
    auto
    0;

  color:
    #b9bbc3;

  font-size: 16px;

  line-height: 1.7;
}


/* =========================================
   ARTICLE STACK
========================================= */

.article-stack {
  width:
    min(
      900px,
      100%
    );

  margin: 0 auto;

  display: grid;

  gap: 30px;
}


/* =========================================
   MAIN GLASS ARTICLE
========================================= */

.article-card {
  position: relative;

  overflow: hidden;

  padding:
    38px
    42px;

  border-radius: 28px;

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

  background:
    rgba(
      9,
      7,
      12,
      0.49
    );

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);

  box-shadow:
    0
    22px
    70px
    rgba(
      0,
      0,
      0,
      0.26
    );
}

.article-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.65;
}


/* =========================================
   ARTICLE HEADER
========================================= */

.article-heading {
  margin-bottom: 28px;
}

.article-number {
  color:
    var(--accent);

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.20em;
}

.article-heading h2 {
  margin:
    7px
    0
    0;

  font-size:
    clamp(
      27px,
      4vw,
      40px
    );

  line-height: 1.1;

  letter-spacing:
    -0.03em;
}

.heading-line {
  width: 64px;

  height: 2px;

  margin-top: 18px;

  border-radius: 999px;

  background:
    var(--accent);

  box-shadow:
    0
    0
    16px
    var(--accent-soft);
}


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

.article-card p {
  margin:
    0
    0
    19px;

  color:
    #d1d2d7;

  font-size: 15.5px;

  line-height: 1.82;
}

.article-card p:last-child {
  margin-bottom: 0;
}

.article-card strong {
  color:
    #ffffff;

  font-weight: 850;
}


/* =========================================
   SUBSECTIONS
========================================= */

.article-subsection {
  margin-top: 34px;

  padding-top: 29px;

  border-top:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.09
    );
}

.article-subsection h3 {
  margin:
    0
    0
    14px;

  color:
    #f3f3f5;

  font-size: 20px;

  line-height: 1.3;

  letter-spacing:
    -0.015em;
}

.article-subsection h4 {
  margin:
    25px
    0
    10px;

  color:
    #f4f5f7;

  font-size: 16px;

  line-height: 1.35;

  letter-spacing:
    0.01em;
}


/* =========================================
   LISTS
========================================= */

.article-list {
  margin:
    17px
    0
    0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 12px;
}

.article-list li {
  position: relative;

  padding-left: 22px;

  color:
    #d1d2d7;

  font-size: 15px;

  line-height: 1.72;
}

.article-list li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.72em;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--accent);

  box-shadow:
    0
    0
    12px
    var(--accent-soft);
}


/* =========================================
   HIGHLIGHT
========================================= */

.article-highlight {
  margin:
    27px
    0;

  padding:
    18px
    21px;

  border-left:
    3px
    solid
    var(--accent);

  border-radius:
    0
    14px
    14px
    0;

  background:
    var(--accent-soft);

  color:
    #ececf0;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.7;
}


/* =========================================
   NOTE
========================================= */

.article-note {
  margin-top: 34px;

  padding: 20px;

  border-radius: 16px;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    rgba(
      3,
      4,
      8,
      0.47
    );

  color:
    #bfc1c8;

  font-size: 13.5px;

  line-height: 1.7;
}

.article-note strong {
  color:
    var(--accent);
}


/* =========================================
   ARTICLE DIVIDER
========================================= */

.article-divider {
  display: flex;

  align-items: center;

  gap: 15px;

  width:
    min(
      700px,
      82%
    );

  margin:
    4px
    auto;
}

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

  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.18
      )
    );
}

.article-divider::after {
  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.18
      ),
      transparent
    );
}

.article-divider span {
  color:
    var(--accent);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.18em;

  white-space: nowrap;
}


/* =========================================
   CLAVICLE REFERENCE
========================================= */

.clavicle-reference {
  width:
    min(
      760px,
      92%
    );

  margin:
    31px
    auto
    29px;

  overflow: hidden;

  border-radius: 20px;

  border:
    1px
    solid
    rgba(
      69,
      167,
      255,
      0.30
    );

  background:
    rgba(
      3,
      9,
      16,
      0.72
    );

  box-shadow:
    0
    0
    30px
    rgba(
      69,
      167,
      255,
      0.08
    ),
    inset
    0
    0
    25px
    rgba(
      69,
      167,
      255,
      0.035
    );
}

.clavicle-reference-label {
  padding:
    13px
    17px;

  border-bottom:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    #9fd4ff;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.17em;
}

.clavicle-reference img {
  width: 100%;

  height: auto;

  display: block;
}


/* =========================================
   CLAVICLE TEXT
========================================= */

.clavicle-copy {
  margin-top: 5px;
}

.clavicle-copy h4 {
  position: relative;

  padding-left: 16px;
}

.clavicle-copy h4::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.28em;

  width: 3px;
  height: 1.05em;

  border-radius: 99px;

  background:
    var(--accent);

  box-shadow:
    0
    0
    10px
    var(--accent-soft);
}


/* =========================================
   MAN-SPECIFIC CLAVICLE ACCENT
========================================= */

.man-page .clavicle-reference {
  border-color:
    rgba(
      69,
      167,
      255,
      0.32
    );
}

.man-page .clavicle-reference-label {
  color:
    #9fd4ff;
}


/* =========================================
   BOTTOM BACK
========================================= */

.bottom-back {
  display: flex;

  justify-content: center;

  padding:
    42px
    0
    8px;
}

.bottom-back .info-back {
  padding:
    13px
    19px;
}


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

@media (max-width: 720px) {

  .info-topbar {
    align-items: flex-start;
  }

  .info-back {
    font-size: 10px;

    padding:
      10px
      11px;
  }

  .info-hero {
    padding:
      54px
      12px
      40px;
  }

  .article-card {
    padding:
      27px
      22px;

    border-radius: 22px;
  }

  .article-card p {
    font-size: 15px;

    line-height: 1.75;
  }

  .clavicle-reference {
    width: 100%;

    margin:
      26px
      auto;
  }

}


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

@media (max-width: 480px) {

  .brand-word {
    font-size: 23px;
  }

  .branch-letter {
    font-size: 34px;
  }

  .info-back {
    max-width: 135px;

    text-align: center;

    line-height: 1.35;
  }

  .clavicle-reference {
    border-radius: 15px;
  }

  .clavicle-reference-label {
    font-size: 9px;

    padding:
      11px
      13px;
  }

}