/* About section (index.html #about): photo beside the intro, quick facts, links, then "What I do" beside the skill
   map (generated by scripts/sync_notion.py from Notion). The "Worked at" logo styles are kept for when it's shown. */

/* ---- intro ---- */
.intro-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 48px; }
.intro-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block;
  border: 8px solid var(--surface-color); box-shadow: 0 12px 40px color-mix(in srgb, var(--default-color), transparent 82%); }
.intro-text h2 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin: 0 0 16px; }
.intro-text p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 12px; color: color-mix(in srgb, var(--default-color), transparent 10%); }
.intro-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 22px; }
.intro-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 500;
  color: var(--heading-color); background: color-mix(in srgb, var(--accent-color), transparent 92%); }
.intro-facts i { color: var(--accent-color); }
.intro-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.intro-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-weight: 600;
  background: var(--accent-color); color: #fff; text-decoration: none; }
.intro-cta:hover { background: color-mix(in srgb, var(--accent-color), #000 15%); color: #fff; }
.intro-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; text-decoration: none;
  color: var(--accent-color); border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%); transition: background .2s ease, color .2s ease; }
.intro-icon:hover { background: var(--accent-color); color: #fff; }
.intro-cta:focus-visible, .intro-icon:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

/* ---- What I do + Worked at: two matching panels side by side ---- */
.intro-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.intro-panel { background: color-mix(in srgb, var(--accent-color), transparent 95%); border: 1px solid color-mix(in srgb, var(--accent-color), transparent 86%);
  border-radius: 14px; padding: 20px 24px; min-width: 0; }
.intro-panel-t { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%); }
/* The rows share out the panel's full height (it matches the skill map beside it), so they sit evenly spaced. */
.intro-row > .intro-panel:first-child { display: flex; flex-direction: column; }
.intro-skills { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; flex: 1; }
.intro-skills a { display: flex; align-items: center; gap: 14px; padding: 4px 8px; margin: -4px -8px; border-radius: 10px; text-decoration: none; transition: background .2s ease; }
.intro-skills a:hover, .intro-skills a:focus-visible, .intro-skills a.lit { background: color-mix(in srgb, var(--accent-color), transparent 90%); }
.intro-skills a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.intro-skill-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem;
  background: var(--accent-color); color: var(--contrast-color, #fff); }
.intro-skills b { display: block; font-family: var(--heading-font); font-size: 1.05rem; font-weight: 600; color: var(--heading-color); line-height: 1.2; }
.intro-skills small { display: block; font-size: 0.85rem; color: color-mix(in srgb, var(--default-color), transparent 30%); }

/* Skill map: a still picture of the skill graph; hovering a "What I do" row or a legend entry lights its branches. */
.skill-map { display: flex; flex-direction: column; text-decoration: none; color: var(--default-color); transition: box-shadow .2s ease; }
.skill-map:hover { color: var(--default-color); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 85%); }
.skill-map:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.sm-body { flex: 1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: center; }
.sm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sm-svg line { stroke: var(--c); stroke-width: .7; opacity: .35; }
.sm-svg circle { fill: var(--c); }
.sm-svg .sm-hub { stroke: var(--surface-color); stroke-width: 1.5; }
.sm-svg .sm-root { fill: var(--heading-color); }
.sm-d { transition: opacity .25s ease; }
.sm-svg.sm-dim .sm-d:not(.lit) { opacity: .12; }
.sm-legend { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.sm-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 8px; margin: 0 -8px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; transition: background .2s ease; }
.sm-legend li.lit { background: color-mix(in srgb, var(--accent-color), transparent 90%); }
.sm-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sm-legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--default-color), transparent 35%); font-weight: 600; }
.sm-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.92rem; color: var(--accent-color); }

/* Worked at: each row's two copies slide by one copy's width, so it loops seamlessly; the second row runs the other way. */
.worked-at { display: flex; flex-direction: column; }
.worked-at .marquee + .marquee { margin-top: 14px; }
.worked-at .intro-panel-t + .marquee { margin-top: auto; }
.worked-at .marquee:last-child { margin-bottom: auto; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee calc(var(--n) * 5s) linear infinite; }
.marquee-rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; align-items: center; gap: 32px; padding: 4px 32px 4px 0; margin: 0; list-style: none; }
.marquee-list a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%); filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease, color .2s ease; }
.marquee-list a:hover, .marquee-list a:focus-visible { filter: none; opacity: 1; color: var(--heading-color); }
.wa-logo { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 991px) {
  .intro-hero { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
/* Phones and small tablets: photo on top, everything centred. */
@media (max-width: 768px) {
  .intro-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; text-align: center; margin-bottom: 32px; }
  .intro-photo { width: 180px; margin: 0 auto; }
  .intro-facts, .intro-links { justify-content: center; }
  .intro-row { grid-template-columns: minmax(0, 1fr); }
  .sm-body { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 16px; }
  .marquee-list { gap: 24px; padding-right: 24px; }
}
/* Reduced motion: no scrolling; one copy, wrapped and centred. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; justify-content: center; }
  .marquee-list { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-list[aria-hidden="true"], .marquee-list .wa-rep { display: none; }
  .marquee-list a { transition: none; }
}