/* ============================================================
   oh golly britta — about.css
   Builds on styles.css tokens & card base. Do not edit styles.css.
   ============================================================ */

/* ── PAGE WRAPPER ── */
.about-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 22px 64px;
}

/* ── PAGE HEADER ── */
.page-header {
  padding: 12px 4px 28px;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}

/* scale up the avatar slightly for the header context */
.page-title-row .avatar-flip {
  width: 82px;
  height: 82px;
  flex-shrink: 0;
}

.page-title-row .page-title {
  margin-bottom: 0;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,237,228,.55);
  margin-bottom: 10px;
}

.page-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(52px, 7vw, 86px);
  font-weight: 900;
  line-height: .95;
  color: var(--cream);
  letter-spacing: -.03em;
  margin-bottom: 18px;
}
.page-title em {
  font-style: italic;
  color: rgba(245,237,228,.5);
}

.name-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
}
.pill-terra { background: rgba(168,82,58,.25); color: var(--cream); border: 1.5px solid rgba(245,237,228,.2); }
.pill-teal  { background: rgba(61,154,139,.2);  color: var(--teal-light); border: 1.5px solid rgba(91,184,168,.25); }
.pill-ink   { background: rgba(44,26,14,.25);   color: rgba(245,237,228,.55); border: 1.5px solid rgba(245,237,228,.12); }

/* ── CARD LABEL ── */
.card-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(44,26,14,.45);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.card-label svg { opacity: .55; flex-shrink: 0; }
.card-dark .card-label,
.card-terra .card-label,
.card-mid .card-label {
  color: rgba(245,237,228,.38);
}

/* ── COLUMN SPANS ── */
.a-col-12 { grid-column: span 12; }
.a-col-9  { grid-column: span 9; }
.a-col-8  { grid-column: span 8; }
.a-col-7  { grid-column: span 7; }
.a-col-6  { grid-column: span 6; }
.a-col-5  { grid-column: span 5; }
.a-col-4  { grid-column: span 4; }
.a-col-3  { grid-column: span 3; }

/* Bio + right wrapper: explicit placement so auto-flow never misplaces them */
.bio-card        { grid-column: 1 / 8;  grid-row: 1; }
.right-col-wrap  { grid-column: 8 / 13; grid-row: 1; }

/* ── CARD FLAVORS ── */
.card-cream { background: var(--cream);      padding: 28px 30px; }
.card-dark  { background: var(--ink);        padding: 28px 30px; border: 1px solid rgba(245,237,228,.06); }
.card-terra { background: var(--terra-dark); padding: 28px 30px; }
.card-teal  { background: var(--teal);       padding: 28px 30px; }
.card-mid   { background: #3a1f0f;           padding: 28px 30px; border: 1px solid rgba(245,237,228,.06); }

/* ── BIO ── */
.bio-card p {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(44,26,14,.75);
}
.bio-card p + p { margin-top: 13px; }
.bio-card em    { font-style: italic; color: var(--ink); }
.bio-card a     { color: var(--terra-dark); text-decoration: underline; text-underline-offset: 3px; }
.bio-card a:hover { color: var(--terra); }

.stat-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1.5px solid rgba(44,26,14,.1);
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 900;
  color: var(--terra);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(44,26,14,.45);
  margin-top: 4px;
}

/* ── PIVOT CARD ── */
.pivot-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  min-height: 320px;
}
.pivot-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(91,184,168,.3) 0%, transparent 65%);
  pointer-events: none;
}
.card-teal .card-label { color: rgba(245,237,228,.45); }
.pivot-text {
  font-family: 'Fraunces', serif;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.35;
  color: var(--cream);
  position: relative; z-index: 1;
}
.pivot-text span { color: var(--teal-light); }

/* ── EDUCATION ── */
.edu-item { margin-bottom: 18px; }
.edu-item:last-child { margin-bottom: 0; }
.edu-school {
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 3px;
}
.edu-detail {
  font-size: 12px;
  color: rgba(245,237,228,.4);
}

/* ── SKILL MODULE ── */
.prog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.prog-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prog-icon.terra { background: rgba(193,101,74,.18); }
.prog-icon.teal  { background: rgba(61,154,139,.18); }
.prog-icon.htb   { background: rgba(159,239,0,.12); }
.prog-icon svg   { width: 14px; height: 14px; }
.prog-icon.terra svg { color: var(--terra-light); }
.prog-icon.teal  svg { color: var(--teal-light); }
.prog-icon.htb   svg { color: var(--htb-green); }

.prog-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card-cream .prog-title { color: rgba(44,26,14,.55); }
.card-dark  .prog-title,
.card-mid   .prog-title { color: rgba(245,237,228,.45); }

.skill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.skill-row:last-child { margin-bottom: 0; }

.skill-name { font-size: 13px; min-width: 132px; }
.card-cream .skill-name { color: rgba(44,26,14,.7); }
.card-dark  .skill-name,
.card-mid   .skill-name { color: rgba(245,237,228,.6); }

.skill-track {
  flex: 1; height: 4px;
  border-radius: 99px;
  overflow: hidden;
}
.card-cream .skill-track { background: rgba(44,26,14,.1); }
.card-dark  .skill-track,
.card-mid   .skill-track { background: rgba(245,237,228,.08); }

.skill-fill {
  height: 100%; border-radius: 99px;
  width: 0;
  transition: width 1.1s var(--ease-out);
}
.skill-fill.terra { background: var(--terra); }
.skill-fill.teal  { background: var(--teal-light); }
.skill-fill.htb   { background: var(--htb-green); }

.skill-pct {
  font-size: 11px; font-weight: 700;
  min-width: 30px; text-align: right;
}
.skill-pct.terra { color: var(--terra); }
.skill-pct.teal  { color: var(--teal-light); }
.skill-pct.htb   { color: var(--htb-green); }

/* ── EXPERIENCE ── */
.exp-item {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.exp-item + .exp-item { border-top: 1px solid rgba(44,26,14,.1); padding-top: 20px; }
.card-dark .exp-item + .exp-item { border-top-color: rgba(245,237,228,.07); }
.exp-item:last-child { padding-bottom: 0; margin-bottom: 0; }

.exp-role {
  font-size: 14px; font-weight: 700;
  margin-bottom: 3px;
}
.card-cream .exp-role { color: var(--ink); }
.card-dark  .exp-role { color: var(--cream); }

.exp-org {
  font-size: 13px; font-weight: 600;
  margin-bottom: 3px;
}
.exp-org.terra-org { color: var(--terra); }
.exp-org.teal-org  { color: var(--teal-light); }

.exp-meta {
  font-size: 11.5px;
  margin-bottom: 10px;
}
.card-cream .exp-meta { color: rgba(44,26,14,.45); }
.card-dark  .exp-meta { color: rgba(245,237,228,.32); }

.exp-desc {
  font-size: 13.5px; line-height: 1.68;
}
.card-cream .exp-desc { color: rgba(44,26,14,.65); }
.card-dark  .exp-desc { color: rgba(245,237,228,.6); }

.exp-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 12px;
}
.exp-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
  border: 1.5px solid currentColor;
}
.exp-tag.terra { color: var(--terra); }
.exp-tag.teal  { color: var(--teal-light); }
.exp-tag.htb   { color: var(--htb-green); }

.sub-role-title {
  font-size: 13px; font-weight: 700; margin-bottom: 2px;
}
.card-cream .sub-role-title { color: var(--ink); }
.card-dark  .sub-role-title { color: var(--cream); }

.sub-role-meta { font-size: 11px; margin-bottom: 8px; }
.card-cream .sub-role-meta { color: rgba(44,26,14,.4); }
.card-dark  .sub-role-meta { color: rgba(245,237,228,.3); }

.sub-divider { height: 1px; margin: 14px 0; }
.card-cream .sub-divider { background: rgba(44,26,14,.1); }
.card-dark  .sub-divider { background: rgba(245,237,228,.07); }

/* ── CERTIFICATIONS ── */
.about-cert-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245,237,228,.07);
}
.about-cert-item:first-child { padding-top: 0; }
.about-cert-item:last-child  { border-bottom: none; padding-bottom: 0; }

.cert-dot-col    { width: 8px; flex-shrink: 0; padding-top: 5px; }
.about-cert-dot  { width: 8px; height: 8px; border-radius: 50%; }
.about-cert-dot.terra { background: var(--terra-light); box-shadow: 0 0 6px var(--terra); }
.about-cert-dot.teal  { background: var(--teal-light);  box-shadow: 0 0 6px var(--teal); }
.about-cert-dot.htb   { background: var(--htb-green);   box-shadow: 0 0 6px var(--htb-green); }

.cert-info          { flex: 1; }
.cert-name-text     { font-size: 13.5px; font-weight: 700; color: rgba(245,237,228,.85); margin-bottom: 2px; }
.cert-issuer-text   { font-size: 11.5px; color: rgba(245,237,228,.35); margin-bottom: 7px; }
.cert-skill-tags    { display: flex; flex-wrap: wrap; gap: 5px; }
.cert-skill-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 100px;
}
.cert-skill-tag.terra { background: rgba(193,101,74,.18); color: var(--terra-light); }
.cert-skill-tag.teal  { background: rgba(61,154,139,.18); color: var(--teal-light); }
.cert-skill-tag.htb   { background: rgba(159,239,0,.1);   color: var(--htb-green); }

/* ── ORGANIZATIONS ── */
.org-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(44,26,14,.1);
}
.card-dark .org-item { border-bottom-color: rgba(245,237,228,.07); }
.org-item:first-child { padding-top: 0; }
.org-item:last-child  { border-bottom: none; padding-bottom: 0; }
.org-name {
  font-size: 14px; font-weight: 700; margin-bottom: 3px;
}
.card-cream .org-name { color: var(--ink); }
.card-dark  .org-name { color: rgba(245,237,228,.85); }
.org-detail { font-size: 12.5px; line-height: 1.55; }
.card-cream .org-detail { color: rgba(44,26,14,.55); }
.card-dark  .org-detail { color: rgba(245,237,228,.38); }

/* ── PUBLICATIONS ── */
.pub-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(44,26,14,.1);
}
.pub-item:first-child { padding-top: 0; }
.pub-item:last-child  { border-bottom: none; padding-bottom: 0; }
.pub-title  { font-size: 13.5px; font-style: italic; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.pub-detail { font-size: 12px; color: rgba(44,26,14,.5); }

/* ── HIGHLIGHTS ── */
.hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.hl-item {
  padding: 11px 20px 11px 0;
  border-bottom: 1px solid rgba(44,26,14,.08);
}
.hl-item:nth-child(even) {
  padding-left: 24px;
  padding-right: 0;
  border-left: 1px solid rgba(44,26,14,.08);
}
.hl-venue { font-size: 13px; font-weight: 700; color: var(--ink); }
.hl-meta  { font-size: 11.5px; color: rgba(44,26,14,.5); margin-top: 1px; }

/* ── ANIMATION EXTENSIONS (beyond 12 cards in styles.css) ── */
.card:nth-child(13) { animation-delay: .76s }
.card:nth-child(14) { animation-delay: .82s }
.card:nth-child(15) { animation-delay: .88s }
.card:nth-child(16) { animation-delay: .94s }
.card:nth-child(17) { animation-delay: 1.00s }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .about-wrap { padding: 20px 14px 48px; overflow-x: hidden; }
  .page-title { font-size: 52px; }

  /* Reset every direct bento child — prevents any span value
     from creating implicit columns and overflowing the page */
  .bento > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Explicit resets for positioned wrappers */
  .bio-card       { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .right-col-wrap { grid-column: 1 / -1 !important; grid-row: auto !important; }

  /* Nested flex wrappers inside bento cells */
  .a-col-6[style*="flex"] > * { width: 100%; }

  .hl-grid { grid-template-columns: 1fr; }
  .hl-item { padding: 11px 0; }
  .hl-item:nth-child(even) { padding-left: 0; border-left: none; }

  .stat-row { gap: 20px; }
}