/*
 * about.css — /about page + shared "About the Author" atoms used on home.
 *
 * The hero is an editorial-style two-column band: a framed photo on the
 * left, text on the right. Photo keeps a subtle teal frame to echo the
 * brand accent without competing with the portrait itself. On mobile the
 * photo stacks above the text.
 *
 * The .about-highlights pill list is re-used verbatim in the home-page
 * About section (home.css pulls these class names too), so tweaks here
 * keep both surfaces in sync.
 */

/* ---------- /about hero ---------------------------------------------- */

.about-hero {
  background: var(--color-surface);
  padding-block: var(--space-9);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* Full-bleed background-image variant. Admin picks any library image as
   the hero backdrop; we cover-crop it and lay a dark gradient over the
   top so the text stays WCAG-contrast legible regardless of the photo. */
.about-hero--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 0;
}
.about-hero--with-bg .about-hero__overlay {
  position: absolute;
  inset: 0;
  /* --about-hero-darkness is injected inline by the template (0-1 float,
     converted from the admin 0-100 slider). Two layers: a flat black
     gradient whose alpha scales with darkness, plus subtle violet/cyan
     corner blooms that also scale so they fade out at darkness=0. */
  --_d: var(--about-hero-darkness, .6);
  background:
    linear-gradient(180deg,
      rgb(0 0 0 / calc(var(--_d) * 0.8)),
      rgb(0 0 0 / calc(var(--_d) * 1.0))),
    radial-gradient(80% 60% at 20% 20%,
      rgb(124 58 237 / calc(var(--_d) * 0.5)), transparent 60%),
    radial-gradient(80% 60% at 100% 80%,
      rgb(6 182 212 / calc(var(--_d) * 0.5)), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.about-hero--with-bg .about-hero__inner { position: relative; z-index: 1; }
.about-hero--with-bg .about-hero__eyebrow,
.about-hero--with-bg .about-hero__title,
.about-hero--with-bg .about-hero__lead,
.about-hero--with-bg .about-hero__name {
  color: #ffffff;
}
.about-hero--with-bg .about-hero__name { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.about-hero--with-bg .about-hero__eyebrow { color: rgba(255,255,255,.82); }
.about-hero--with-bg .about-hero__title   { color: rgba(255,255,255,.88); }
.about-hero--with-bg .about-hero__lead    { color: rgba(255,255,255,.9); }
/* Contrasting BLACK offset frame behind the portrait when the hero has
   a background image — teal accent would get lost against photographic
   backdrops; solid near-black keeps the frame visible. */
.about-hero--with-bg .about-hero__photo::before {
  background: #000000;
  opacity: .92;
}
/* Keep the paper-white frame edge for portrait polaroid feel. */
.about-hero--with-bg .about-hero__photo {
  background: #ffffff;
  border-color: rgba(255,255,255,.2);
}

/* Glass card wrapping the highlight pills. Pills themselves stay
   simple; the UL becomes the frosted container. */
.about-hero--with-bg .about-highlights {
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  gap: 8px;
}
.about-hero--with-bg .about-highlight {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.about-hero--with-bg .about-highlight::before {
  background: #fff;   /* accent dot visible on dark glass */
}

.about-hero--with-bg .about-socials a {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.55);
}
.about-hero--with-bg .about-socials a:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 800px) {
  .about-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.about-hero__photo {
  position: relative;
  display: block;
  /* Decorative frame — pads the photo and echoes the brand teal behind
     it. transform keeps the photo itself crisp. */
  padding: 10px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  max-width: 280px;
}
.about-hero__photo::before {
  /* Offset teal accent square, gives a little editorial character. */
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--color-brand);
  border-radius: var(--radius-md);
  z-index: 0;
  opacity: .85;
}
.about-hero__photo img,
.about-hero__photo-placeholder {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.about-hero__photo-placeholder {
  background: var(--color-brand);
  color: var(--color-brand-ink);
  font-family: var(--font-serif);
  font-size: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__eyebrow {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}
.about-hero__name {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, var(--type-4xl));
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}
.about-hero__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-lg);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}
.about-hero__lead {
  font-size: var(--type-lg);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-5);
  max-width: 640px;
}

/* ---------- About-the-Author band ----------------------------------- *
 *
 * Used by partials/about_author.html on the home page AND the blog
 * detail page. Editorial layout: framed photo on the left, text on the
 * right. Visually echoes the /about hero so it reads as a teaser.
 * Mobile stacks photo above text.
 */

.home-about {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.home-about__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 800px) {
  .home-about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.home-about__photo {
  position: relative;
  padding: 10px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  max-width: 280px;
  justify-self: start;
}
.home-about__photo::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--color-brand);
  border-radius: var(--radius-md);
  z-index: 0;
  opacity: .85;
}
.home-about__photo img,
.home-about__photo-placeholder {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.home-about__photo-placeholder {
  background: var(--color-brand);
  color: var(--color-brand-ink);
  font-family: var(--font-serif);
  font-size: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-about__eyebrow {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}
.home-about__name {
  font-family: var(--font-serif);
  font-size: var(--type-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}
.home-about__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-lg);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}
.home-about__bio {
  font-size: var(--type-lg);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-5);
  max-width: 620px;
}
.home-about__cta {
  margin-top: var(--space-2);
}

/* ---------- Highlights (shared with home About section) -------------- */

.about-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.about-highlight {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  border-radius: 999px;
  font-size: var(--type-sm);
  color: var(--color-ink);
}
.about-highlight::before {
  /* Tiny teal dot as a decorative leader. */
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-brand);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ---------- Social link row ----------------------------------------- */

.about-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--type-sm);
}
.about-socials a {
  display: inline-block;
  padding: 6px 12px;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-brand);
  transition: color var(--transition-fast),
              background var(--transition-fast);
}
.about-socials a:hover {
  background: var(--color-brand);
  color: var(--color-brand-ink);
}

/* ---------- /about body (eight admin-authored HTML sections) --------
 *
 * The body is now a stack of eight <section class="abio-band"> bands.
 * Each band paints its own background, owns its own accent gradient,
 * and contains a .container with .blog-article__content for prose
 * atoms. This gives /about a magazine feel (alternating colored
 * bands) instead of one long white scroll. Keep styling here —
 * the admin authors clean semantic HTML, no inline <style> blocks.
 */

.about-body.abio-root {
  /* --abio-* palette. Shared across bands + components. Deliberately
     vivid for the /about page; blog posts keep the quieter brand teal. */
  --abio-violet: #7c3aed;
  --abio-cyan:   #06b6d4;
  --abio-coral:  #f97316;
  --abio-gold:   #f59e0b;
  --abio-emerald:#10b981;
  --abio-pink:   #ec4899;
  --abio-indigo: #4f46e5;

  --abio-card: #ffffff;
  --abio-surface-soft: #f8fafc;
  --abio-border: var(--color-border, #e5e7eb);
  --abio-muted: var(--color-ink-muted, #64748b);
}

/* ---------- Bands ---------- */

.abio-band {
  padding-block: var(--space-8);
  position: relative;
  overflow: hidden;                 /* contain decorative blobs */
}
.abio-band > .container {
  max-width: var(--reading-max);
}
.abio-band h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -.01em;
}
.abio-band h2 + p {
  color: var(--abio-muted);
  max-width: 62ch;
  margin-top: 0;
}

/* All content bands share the same plain page surface — no alternating
   washes. Per Change 2 (2026-04-21): keep the reading surface calm so
   the metric tiles, timeline, and pill rows provide all the colour. */
.abio-band {
  background: #ffffff;
}

/* CTA band has no full-bleed background — it sits flush on the page
   like every other band. The .abio-closer card itself carries all the
   colour (black + orange-tinted glass). */
.abio-band--cta {
  background: #ffffff;
  padding-block: var(--space-8);
}
.abio-band--cta h2 { color: #ffffff; }        /* applied inside the card */
.abio-band--cta .abio-closer p { color: rgba(255,255,255,.92); }

/* ---------- Bio summary: lead paragraph with accent bar ---------- */

.abio-root .abio-lead {
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--abio-violet), var(--abio-cyan)) 1;
  padding: 6px 0 6px 20px;
  margin: 0 0 var(--space-5);
  max-width: 72ch;
}

/* ---------- Signature outcomes: metric tiles (vivid, hover lift) --- */

.abio-root .abio-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.abio-root .abio-metric {
  position: relative;
  padding: 22px 18px 18px;
  border-radius: 16px;
  background: var(--abio-card);
  border: 1px solid var(--abio-border);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 12px 30px -18px rgba(15,23,42,.22);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  overflow: hidden;
}
.abio-root .abio-metric::before {
  /* Top-edge color bar — rotates through the palette per tile. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--_c, var(--abio-violet));
}
.abio-root .abio-metric:nth-child(1) { --_c: var(--abio-violet); }
.abio-root .abio-metric:nth-child(2) { --_c: var(--abio-coral); }
.abio-root .abio-metric:nth-child(3) { --_c: var(--abio-cyan); }
.abio-root .abio-metric:nth-child(4) { --_c: var(--abio-emerald); }
.abio-root .abio-metric:nth-child(5) { --_c: var(--abio-gold); }
.abio-root .abio-metric:nth-child(6) { --_c: var(--abio-pink); }
.abio-root .abio-metric:nth-child(7) { --_c: var(--abio-indigo); }

.abio-root .abio-metric:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 22px 42px -16px rgba(15,23,42,.28);
  border-color: transparent;
}
.abio-root .abio-metric strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--_c), color-mix(in oklab, var(--_c), #000 28%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.abio-root .abio-metric span {
  display: block;
  margin-top: 8px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--color-ink, #0f172a);
}

/* ---------- Career timeline: the "ascent" ---------- */

.abio-root .abio-ascent {
  position: relative;
  margin: var(--space-5) 0 0;
  padding: 10px 0;
}

/* Decorative ascending trajectory behind the cards. Pure CSS — an SVG
   curve in background-image uses data-uri so no external asset is
   fetched. Gradient stroke matches the card colours. */
.abio-root .abio-ascent::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'>\
  <defs>\
    <linearGradient id='g' x1='0' y1='1' x2='1' y2='0'>\
      <stop offset='0%' stop-color='%234f46e5' stop-opacity='.0'/>\
      <stop offset='25%' stop-color='%234f46e5' stop-opacity='.35'/>\
      <stop offset='60%' stop-color='%2306b6d4' stop-opacity='.55'/>\
      <stop offset='100%' stop-color='%2310b981' stop-opacity='.85'/>\
    </linearGradient>\
  </defs>\
  <path d='M40 760 C 120 640, 120 640, 200 520 S 280 340, 360 40' fill='none' stroke='url(%23g)' stroke-width='3' stroke-dasharray='6 8' stroke-linecap='round'/>\
  <polygon points='350,20 380,40 355,60' fill='%2310b981'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.abio-root .abio-ascent__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Each step is a row. Order in the DOM must be oldest → newest, and the
   CSS flips the visual order so the current role sits at the top (the
   "summit"). data-step="1..5" drives badge color + staircase offset. */
.abio-root .abio-step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: flex-start;
  transform-origin: left center;
  animation: abio-step-in .6s cubic-bezier(.2,.8,.2,1) both;
}
.abio-root .abio-step[data-step="5"] { animation-delay: .05s; }
.abio-root .abio-step[data-step="4"] { animation-delay: .15s; }
.abio-root .abio-step[data-step="3"] { animation-delay: .25s; }
.abio-root .abio-step[data-step="2"] { animation-delay: .35s; }
.abio-root .abio-step[data-step="1"] { animation-delay: .45s; }

@keyframes abio-step-in {
  from { opacity: 0; transform: translateY(14px) translateX(-10px); }
  to   { opacity: 1; transform: translateY(0)    translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .abio-root .abio-step { animation: none; }
}

/* Staircase — each step nudged a bit right of the one below, so the
   trajectory rises left→right as the eye moves top→bottom (career
   reads newest-first but the decoration implies an ascent). */
.abio-root .abio-step[data-step="1"] { margin-left: 0;  }
.abio-root .abio-step[data-step="2"] { margin-left: 3%;  }
.abio-root .abio-step[data-step="3"] { margin-left: 6%;  }
.abio-root .abio-step[data-step="4"] { margin-left: 9%;  }
.abio-root .abio-step[data-step="5"] { margin-left: 12%; }

/* The round monogram badge on the left of each step. Gradient colour
   per step-rank. */
.abio-root .abio-step__badge {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.12),
    0 12px 24px -10px rgba(15,23,42,.35);
  background: linear-gradient(135deg, #0f172a, #334155);
  position: relative;
  flex-shrink: 0;
}
.abio-root .abio-step[data-step="1"] .abio-step__badge {
  background: linear-gradient(135deg, var(--abio-indigo), #7c3aed);
}
.abio-root .abio-step[data-step="2"] .abio-step__badge {
  background: linear-gradient(135deg, #0ea5e9, var(--abio-cyan));
}
.abio-root .abio-step[data-step="3"] .abio-step__badge {
  background: linear-gradient(135deg, var(--abio-emerald), #059669);
}
.abio-root .abio-step[data-step="4"] .abio-step__badge {
  background: linear-gradient(135deg, var(--abio-gold), var(--abio-coral));
}
.abio-root .abio-step[data-step="5"] .abio-step__badge {
  background: linear-gradient(135deg, var(--abio-pink), #be185d);
  /* The crown — the apex. Slightly larger + halo. */
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.12),
    0 0 0 5px rgba(236,72,153,.12),
    0 20px 36px -12px rgba(236,72,153,.55);
}
/* "Current" pulse dot on the apex. */
.abio-root .abio-step--current .abio-step__badge::after {
  content: "";
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: abio-pulse 2.2s infinite;
}
@keyframes abio-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(34,197,94,0);   }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);    }
}
@media (prefers-reduced-motion: reduce) {
  .abio-root .abio-step--current .abio-step__badge::after { animation: none; }
}

/* Step card (to the right of the badge). <details> for expand/collapse. */
.abio-root .abio-step__card {
  background: var(--abio-card);
  border: 1px solid var(--abio-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 14px 36px -18px rgba(15,23,42,.25);
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.abio-root .abio-step__card:hover,
.abio-root .abio-step__card[open] {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 26px 48px -18px rgba(15,23,42,.32);
  border-color: transparent;
}
/* Per-rank left accent bar on the card. */
.abio-root .abio-step[data-step="1"] .abio-step__card { border-left: 5px solid var(--abio-indigo); }
.abio-root .abio-step[data-step="2"] .abio-step__card { border-left: 5px solid var(--abio-cyan); }
.abio-root .abio-step[data-step="3"] .abio-step__card { border-left: 5px solid var(--abio-emerald); }
.abio-root .abio-step[data-step="4"] .abio-step__card { border-left: 5px solid var(--abio-gold); }
.abio-root .abio-step[data-step="5"] .abio-step__card { border-left: 5px solid var(--abio-pink); }

.abio-root .abio-step__card > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 20px;
  position: relative;
  user-select: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
}
.abio-root .abio-step__card > summary::-webkit-details-marker { display: none; }
.abio-root .abio-step__card > summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--abio-muted);
  border-bottom: 2px solid var(--abio-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.abio-root .abio-step__card[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.abio-root .abio-step__role {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
  grid-column: 1 / 2;
}
.abio-root .abio-step__employer {
  grid-column: 1 / 2;
  font-size: .92rem;
  color: var(--abio-muted);
}
.abio-root .abio-step__dates {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--abio-muted);
  white-space: nowrap;
}
.abio-root .abio-step__body {
  padding: 0 20px 20px;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--abio-border);
}
.abio-root .abio-step__body li {
  padding: 12px 0 0 22px;
  font-size: .96rem;
  line-height: 1.55;
  position: relative;
}
.abio-root .abio-step__body li::before {
  content: "▸";
  position: absolute;
  left: 2px;
  top: 12px;
  color: var(--color-brand, #0f766e);
  font-size: .9rem;
}

/* ---------- How I work: principle cards (colored top-border) ---------- */

.abio-root .abio-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.abio-root .abio-principle {
  padding: 20px;
  background: var(--abio-card);
  border: 1px solid var(--abio-border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.abio-root .abio-principle::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--_c, var(--abio-violet));
}
.abio-root .abio-principle:nth-child(1) { --_c: var(--abio-violet); }
.abio-root .abio-principle:nth-child(2) { --_c: var(--abio-cyan); }
.abio-root .abio-principle:nth-child(3) { --_c: var(--abio-coral); }
.abio-root .abio-principle:nth-child(4) { --_c: var(--abio-emerald); }
.abio-root .abio-principle:nth-child(5) { --_c: var(--abio-gold); }
.abio-root .abio-principle:nth-child(6) { --_c: var(--abio-pink); }

.abio-root .abio-principle:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(15,23,42,.28);
}
.abio-root .abio-principle h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.abio-root .abio-principle p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.5;
}

/* ---------- Pills (platforms + certs), rainbow accent dots ---------- */

.abio-root .abio-pills {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.abio-root .abio-pills li {
  padding: 8px 14px;
  background: var(--abio-card);
  border: 1px solid var(--abio-border);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--color-ink, #0f172a);
  display: inline-flex;
  align-items: center;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}
.abio-root .abio-pills li:hover {
  transform: translateY(-2px);
  border-color: var(--_c, var(--color-brand));
}
.abio-root .abio-pills li::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  background: var(--_c, var(--color-brand));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_c, var(--color-brand)), transparent 80%);
}
/* Rainbow dot cycle. :nth-child mod 7 so it keeps rotating past 7 pills. */
.abio-root .abio-pills li:nth-child(7n+1) { --_c: var(--abio-violet); }
.abio-root .abio-pills li:nth-child(7n+2) { --_c: var(--abio-cyan); }
.abio-root .abio-pills li:nth-child(7n+3) { --_c: var(--abio-coral); }
.abio-root .abio-pills li:nth-child(7n+4) { --_c: var(--abio-emerald); }
.abio-root .abio-pills li:nth-child(7n+5) { --_c: var(--abio-gold); }
.abio-root .abio-pills li:nth-child(7n+6) { --_c: var(--abio-pink); }
.abio-root .abio-pills li:nth-child(7n)   { --_c: var(--abio-indigo); }

/* ---------- Education (two-column list) ---------- */

.abio-root .abio-edu {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.abio-root .abio-edu li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--abio-border);
}
.abio-root .abio-edu li:last-child { border-bottom: 0; }
.abio-root .abio-edu-year {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--abio-violet);
  font-size: 1.1rem;
  letter-spacing: .02em;
}

/* ---------- Closing CTA band ---------- */

/* Self-contained black-and-orange glass card. The page underneath is
   white, so backdrop-filter alone won't give depth — instead the card
   carries a near-opaque dark base with an orange-tinted corner bloom.
   Translucent top-edge highlight + soft outer shadow give the glass
   feel without needing something to blur. */
.abio-root .abio-closer {
  position: relative;
  padding: 34px 30px;
  border-radius: 22px;
  color: #ffffff;
  background:
    radial-gradient(120% 160% at 110% 0%, rgba(249,115,22,.45), transparent 55%),
    radial-gradient(140% 120% at -10% 100%, rgba(234,88,12,.25), transparent 55%),
    linear-gradient(135deg, rgba(10,14,24,.96), rgba(24,32,46,.94) 55%, rgba(17,24,39,.96));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 20px 60px rgba(15,23,42,.28),
    0 0 0 1px rgba(249,115,22,.08);
  overflow: hidden;
}
.abio-root .abio-closer::before {
  /* Top-edge sheen. */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events: none;
}
.abio-root .abio-closer::after {
  /* Soft orange bloom in the top-right corner — gives the "orange
     tint" signature without colouring the whole card. */
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,.55), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.abio-root .abio-closer > * { position: relative; z-index: 1; }
.abio-root .abio-closer h2 {
  margin-top: 0;
  color: #ffffff;
}
.abio-root .abio-closer p { color: rgba(255,255,255,.92); }
.abio-root .abio-closer p a {
  color: #fdba74;                                   /* warm orange */
  border-bottom: 1px dashed rgba(253,186,116,.55);
}
.abio-root .abio-closer p a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .abio-root .abio-step { grid-template-columns: 56px 1fr; gap: 12px; }
  .abio-root .abio-step__badge { width: 56px; height: 56px; border-radius: 16px; font-size: .9rem; }
  .abio-root .abio-step[data-step="1"],
  .abio-root .abio-step[data-step="2"],
  .abio-root .abio-step[data-step="3"],
  .abio-root .abio-step[data-step="4"],
  .abio-root .abio-step[data-step="5"] { margin-left: 0; }
  .abio-root .abio-ascent::before { display: none; }  /* curve noisy on mobile */
  .abio-root .abio-step__card > summary { grid-template-columns: 1fr; }
  .abio-root .abio-step__dates { grid-column: 1 / 2; grid-row: auto; }
  .abio-root .abio-edu li { grid-template-columns: 64px 1fr; }
}