/* ==========================================================================
   Page Layout
   ========================================================================== */
.content {
  display: block;
  transform: translate(20vw, 4rem);
  width: 60%;
  -webkit-user-select: none;
  user-select: none;
}

a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

li a,
a.clicked,
.ext-link a {
  text-decoration: none;
}

/* ==========================================================================
   Progressive Sentence Reveal
   Each link (data-o="N") reveals the next sentence fragment (data-ob="N")
   when clicked — see js/about.js
   ========================================================================== */
span {
  margin: 0.5rem 0;
  display: block;
}

span[data-ob] {
  display: none;
  cursor: pointer;
}

span[data-ob].on {
  display: block;
}

/* ==========================================================================
   Special Inline Links (mail, external sites)
   ========================================================================== */
a[data-o="4"],
a[data-o="5"],
a[data-o="13"],
a[data-o="19"],
a[data-o="20"],
a[data-o="21"],
a[data-o="22"],
a[data-o="31"],
a[data-o="34"],
a[data-o="35"] {
  color: var(--primary-blue);
  text-decoration: none;
}

/* ==========================================================================
   External Link List
   ========================================================================== */
.ext-link {
  margin-top: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ext-link a:hover {
  color: var(--primary-blue);
}

/* ==========================================================================
   Dark Mode Overrides
   Higher specificity than global.css's body.dark a / body.dark a:hover, so
   these blue links aren't swallowed by the generic dark-mode link color.
   ========================================================================== */
body.dark a[data-o="4"],
body.dark a[data-o="5"],
body.dark a[data-o="13"],
body.dark a[data-o="19"],
body.dark a[data-o="20"],
body.dark a[data-o="21"],
body.dark a[data-o="22"],
body.dark a[data-o="31"],
body.dark a[data-o="34"],
body.dark a[data-o="35"] {
  color: var(--primary-blue);
}

body.dark .ext-link a:hover {
  color: var(--primary-blue);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .content {
    font-size: 1.2rem;
    transform: translate(0, 11rem);
    max-width: calc(100vw - 2rem);
  }

  span {
    margin: 0;
    line-height: 1.4;
  }
}