/* ========================================
   KARASU STATIC PAGE LAYOUT
   home.css is loaded before this file.
======================================== */


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

.page-hero {
  padding:
    94px 0
    56px;
}


.page-header {
  width: min(
    100%,
    820px
  );

  margin:
    0 auto;
}


.page-eyebrow {
  margin:
    0 0
    18px;

  color:
    var(--blue);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.page-header h1 {
  margin:
    0 0
    24px;

  color:
    var(--text);

  font-size:
    clamp(
      40px,
      5.2vw,
      58px
    );

  line-height:
    1.1;

  font-weight:
    800;

  letter-spacing:
    -0.045em;
}


.page-summary {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    18px;

  line-height:
    1.75;
}


/* ========================================
   PAGE BODY
======================================== */

.page-section {
  padding:
    0 0
    100px;
}


.page-content {
  width: min(
    100%,
    820px
  );

  margin:
    0 auto;

  color:
    var(--text-secondary);

  font-size:
    17px;

  line-height:
    1.82;
}


.page-content > *:first-child {
  margin-top: 0;
}


.page-content p {
  margin:
    0 0
    25px;
}


.page-content h2 {
  margin:
    60px 0
    20px;

  color:
    var(--text);

  font-size:
    clamp(
      27px,
      3vw,
      34px
    );

  line-height:
    1.3;

  font-weight:
    760;

  letter-spacing:
    -0.03em;
}


.page-content h3 {
  margin:
    40px 0
    15px;

  color:
    var(--text);

  font-size:
    21px;

  line-height:
    1.4;

  letter-spacing:
    -0.02em;
}


.page-content strong {
  color:
    var(--text);
}


.page-content a {
  color:
    var(--blue);

  text-decoration:
    underline;

  text-decoration-color:
    rgba(88, 169, 255, 0.35);

  text-underline-offset:
    3px;

  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}


.page-content a:hover {
  color:
    var(--blue-bright);

  text-decoration-color:
    var(--blue-bright);
}


/* ========================================
   INFO / CONTACT BOX
======================================== */

.page-info-box {
  margin:
    38px 0
    0;

  padding:
    20px 22px;

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

  border-radius:
    13px;

  background:
    linear-gradient(
      120deg,
      rgba(88, 169, 255, 0.065),
      rgba(255, 255, 255, 0.015)
    );

  color:
    var(--text-secondary);

  font-size:
    14px;
}


.page-info-box strong {
  color:
    var(--text);
}


/* ========================================
   UPDATED DATE
======================================== */

.page-updated {
  margin:
    0 0
    34px;

  padding-bottom:
    22px;

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

  color:
    var(--text-muted);

  font-size:
    13px;
}


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

@media (max-width: 640px) {

  .page-hero {
    padding:
      62px 0
      40px;
  }


  .page-header h1 {
    font-size:
      clamp(
        36px,
        11vw,
        48px
      );
  }


  .page-summary {
    font-size:
      16px;
  }


  .page-content {
    font-size:
      16px;

    line-height:
      1.78;
  }


  .page-content h2 {
    margin-top:
      48px;

    font-size:
      27px;
  }


  .page-section {
    padding-bottom:
      76px;
  }

}