/* =========================================================
   MEMO PAGE
========================================================= */

.memo-page {
  background: #f3f4f6;
  color: var(--dark);

  min-height: 100vh;
}



/* =========================================================
   STICKY INDEX
========================================================= */

.memo-sticky-index {
  position: sticky;
  top: 88px;
  z-index: 60;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  width: calc(100% - 160px);
  max-width: 1320px;

  margin: 0 auto;

  padding:
    18px
    0;

  background:
    transparent;
}



.memo-sticky-index a {
  padding:
    9px
    15px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.62);

  color:
    var(--dark);

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-medium);

  text-decoration:
    none;

  box-shadow:
    var(--shadow-soft);

  transition:
    var(--transition-fast);
}



.memo-sticky-index a:hover {
  background:
    var(--dark);

  color:
    var(--white);
}



/* =========================================================
   TITLE SECTION
========================================================= */

.memo-title-section {
  background:
    var(--dark);

  color:
    var(--white);

  padding:
    110px
    0
    90px;
}



.memo-title-section h1 {
  width:
    calc(100% - 160px);

  max-width:
    1320px;

  margin:
    0 auto;

  font-size:
    clamp(2.8rem, 4vw, 4.8rem);

  line-height:
    .95;

  letter-spacing:
    -0.06em;

  font-weight:
    var(--weight-heavy);
}



/* =========================================================
   SECTIONS
========================================================= */

.memo-section {
  padding:
    84px
    0;

  background:
    #f3f4f6;
}



.memo-section:nth-child(even) {
  background:
    #ffffff;
}



.memo-section > * {
  width:
    calc(100% - 160px);

  max-width:
    1320px;

  margin-left:
    auto;

  margin-right:
    auto;
}



/* =========================================================
   REMOVE MARKDOWN DIVIDERS
========================================================= */

.memo-section hr {
  display:
    none;
}



/* =========================================================
   H2
========================================================= */

.memo-section h2 {
  max-width:
    980px;

  margin-bottom:
    42px;

  font-size:
    clamp(2rem, 3vw, 3.2rem);

  line-height:
    1.02;

  letter-spacing:
    -0.05em;

  font-weight:
    var(--weight-bold);
}



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

.memo-section > p:first-of-type {
  max-width:
    840px;

  margin-bottom:
    42px;

  font-size:
    var(--text-lg);

  line-height:
    1.8;

  opacity:
    .92;
}



/* =========================================================
   CONTENT CARDS
========================================================= */

.memo-section h3 {
  max-width:
    760px;

  margin:
    56px
    auto
    18px;

  padding:
    24px
    28px;

  border-radius:
    22px;

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 10px 28px rgba(15,17,58,.05);

  font-size:
    var(--text-xl);

  line-height:
    var(--line-tight);

  font-weight:
    var(--weight-semibold);
}



.memo-section p {
  max-width:
    760px;

  margin-bottom:
    24px;

  font-size:
    var(--text-md);

  line-height:
    1.8;

  opacity:
    .84;
}



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

.memo-section ul {
  display:
    grid;

  gap:
    12px;

  max-width:
    760px;

  margin:
    0
    auto
    42px;

  padding:
    0;

  list-style:
    none;
}



.memo-section li {
  position:
    relative;

  padding:
    14px
    18px
    14px
    46px;

  border-radius:
    16px;

  background:
    rgba(255,255,255,.72);

  box-shadow:
    0 8px 22px rgba(15,17,58,.04);

  font-size:
    var(--text-md);

  line-height:
    1.6;

  opacity:
    .9;
}



.memo-section li::before {
  content:
    "";

  position:
    absolute;

  left:
    18px;

  top:
    23px;

  width:
    7px;

  height:
    7px;

  border-radius:
    999px;

  background:
    var(--gold);
}



/* =========================================================
   TABLES
========================================================= */

.memo-section table {
  width:
    calc(100% - 160px);

  max-width:
    1320px;

  margin:
    40px
    auto
    64px;

  border-collapse:
    collapse;

  overflow:
    hidden;

  border-radius:
    28px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 18px 48px rgba(15,17,58,.06);
}



.memo-section th {
  padding:
    22px
    28px;

  text-align:
    left;

  background:
    var(--dark);

  color:
    var(--white);

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-semibold);

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}



.memo-section td {
  padding:
    22px
    28px;

  border-bottom:
    1px solid rgba(15,17,58,.06);

  vertical-align:
    top;

  font-size:
    var(--text-md);

  line-height:
    1.7;
}



.memo-section tr:last-child td {
  border-bottom:
    none;
}



/* =========================================================
   BLOCKQUOTE
========================================================= */

.memo-section blockquote {
  max-width:
    980px;

  margin:
    64px
    auto;

  padding:
    40px
    48px;

  border-left:
    6px solid var(--gold);

  border-radius:
    0
    28px
    28px
    0;

  background:
    var(--dark);

  color:
    var(--white);

  box-shadow:
    0 18px 48px rgba(15,17,58,.18);
}



.memo-section blockquote p {
  margin:
    0;

  color:
    var(--white);

  opacity:
    .92;

  font-size:
    var(--text-lg);

  line-height:
    1.85;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .memo-sticky-index,
  .memo-title-section h1,
  .memo-section > *,
  .memo-section table {
    width:
      calc(100% - 48px);
  }

  .memo-title-section {
    padding:
      90px
      0
      70px;
  }

  .memo-section {
    padding:
      64px
      0;
  }

  .memo-section table {
    display:
      block;

    overflow-x:
      auto;
  }

}