/* whoami.css — "Who Am I": a flat, personal-site about page that matches the
   homepage (navy pixel headings, dividers, pills) on the light background.
   No window chrome, no beveled panels. */

.whoami-page {
  font-family: regular;
  font-size: var(--font-body);
  color: #202020;
  padding-bottom: 8px;
  /* This page's long prose trips mobile "font boosting" (it inflates the text) even
     though the global 100% rule keeps the rest of the site 1:1. Opt the whole subtree
     out explicitly so it matches everything else — same fix the console uses. */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

/* Links are styled globally via .content-link (see components.css). */

/* Section headings — heading font with a small pink marker, like the homepage. */
.wa-h {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 6px;
}
.wa-h::before { content: '> '; color: #ff6699; }

/* ----- Intro: avatar + identity ----- */
.wa-intro {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
.wa-avatar {
  flex: 0 0 auto;
  border: 2px solid #b9a9b8;     /* flat frame */
  background: #fff;
  padding: 3px;
}
.wa-avatar img {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
.wa-bio { min-width: 0; }
.wa-name {
  font-family: heading;
  font-weight: bold;
  font-size: 14px;            /* 2× --font-heading — integer scale stays crisp */
  color: #000080;
  line-height: 1;
  margin-bottom: 7px;
}
.wa-tagline { color: #49093d; margin-bottom: 7px; }
.wa-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #166a30;
}
.wa-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 3px #27c93f;
  flex: 0 0 auto;
}
.wa-blurb { margin: 0 0 4px; }

/* ----- Quick facts: stat-sheet rows with dotted leaders ----- */
.wa-facts { display: flex; flex-direction: column; gap: 3px; }
.wa-fact { display: flex; align-items: baseline; gap: 4px; }
.wa-fact-k { color: #000080; flex: 0 0 auto; }
.wa-fact-dots {
  flex: 1 1 auto;
  /* Pin the leader to the FIRST line of the value: anchor it to the top of the
     row and cap it to a single line, so a multi-line value doesn't drag the
     dotted line down to its last line. */
  align-self: flex-start;
  height: 1lh;
  border-bottom: 1px dotted #b0a0b0;
  transform: translateY(-3px);
  min-width: 12px;
}
.wa-fact-v { color: #303030; flex: 0 1 auto; text-align: right; }

/* ----- Interests: a clean marked list with one-line asides ----- */
.wa-interests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wa-interest {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wa-interest::before {
  content: '►';
  color: #ff6699;
  flex: 0 0 auto;
}
.wa-int-name { color: #000080; flex: 0 0 auto; }
.wa-int-note { color: #7a6a79; min-width: 0; }

/* ----- FAQ ----- */
.wa-faq-q { color: #000080; margin-top: 8px; }
.wa-faq-q:first-child { margin-top: 0; }
.wa-faq-q::before { content: 'Q: '; color: #ff6699; }
.wa-faq-a { color: #303030; margin-top: 2px; }
.wa-faq-a::before { content: 'A: '; color: #808080; }