/* About page: an AIDA funnel for recruiters. Since 8 Oct 2026 the funnel is told in color over time,
   not in blocks: the page eases from tone to tone as each stage reaches the middle of the screen.

   Attention  Berry         the tile wall spells LUCAS
   Interest   Blush         who I am, three principles, milestones
   Desire     Mist, Cream   proof, impact (with Claude Code and GitHub), how I lead
   Action     Field         résumé download and preview
   Questions  Blush         then the Field footer

   The fixed pieces are chosen to sit on every tone: the ceramic wall is a light panel, the résumé is
   white paper on a deeper step of the tone, the stats cards take the tone's surface. All text passes AAA. */

.page-about {
  --wall-radius: 6px;
  --tile-ground: #FCFCFC;
  --tile-grout: #D9D9D6;
  --tile-ink: #141414;   /* the letters */
  --tile-faint: #DEDEDB; /* every other tile */
}

/* ---------- Attention: hero and the tile wall ---------- */

.hero-a h1 { max-width: 13em; }
.hero-a .lead { margin-top: 28px; max-width: 38em; }
.hero-a .hero-meta {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: var(--step-small); color: var(--ink-2);
}
.hero-a .hero-meta span { display: inline-flex; align-items: center; gap: 10px; }
.hero-a .hero-meta span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 14px;
}
.hero-a .actions { margin-top: 36px; }

/* The wall: a light ceramic panel in two inks. It keeps its own colors on every tone. */
.wall-wrap { margin-top: clamp(56px, 7vw, 96px); }
.wall {
  --cols: 16; --rows: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  background: var(--tile-grout);
  border-radius: var(--wall-radius);
  aspect-ratio: 16 / 5;
  width: 100%;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.tile {
  position: relative;
  background: var(--tile-ground);
  aspect-ratio: 1;
  overflow: hidden;
}
.tile svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transform: rotate(calc(var(--turns, 0) * 90deg));
  transition: transform var(--base) var(--ease-out), color var(--base) var(--ease-out);
  color: var(--tile-ink);
}
.tile.is-faint svg { color: var(--tile-faint); }
.wall.is-scrambled .tile svg { color: var(--tile-ink); }
.wall.can-turn .tile { cursor: pointer; }
.wall.can-turn .tile:hover { background: #FFFFFF; }
.wall.can-turn .tile:active svg { transition-duration: 80ms; }

.wall-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 20px;
}
.wall-bar .actions { margin: 0; }
.wall-note { font-size: var(--step-small); color: var(--ink-2); max-width: 46ch; }
.wall-status { font-size: var(--step-small); color: var(--ink); font-weight: 500; min-height: 1.6em; flex-basis: 100%; }
.wall-status:empty { display: none; }

/* ---------- Interest ---------- */

.intro-grid .prose p:first-child { margin-top: 0; }
.principles { margin-top: 72px; }

.milestones { list-style: none; margin: 48px 0 0; padding: 0; }
.milestones li {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 8px 40px; padding: 24px 0; border-top: 1px solid var(--line);
}
.milestones li:last-child { border-bottom: 1px solid var(--line); }
.milestones .when { font-size: var(--step-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.milestones h3 { font-size: var(--step-h3); }
.milestones p { margin-top: 6px; color: var(--ink-2); font-size: var(--step-small); line-height: 1.65; max-width: 62ch; }
.milestones li.is-key h3::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; vertical-align: middle;
  background: currentColor; transform: rotate(45deg);
}

/* ---------- Desire ---------- */

.proof-grid {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.proof { display: grid; gap: 16px; align-content: start; }
.proof .frame { aspect-ratio: 4 / 3; }
.proof .role { font-size: var(--step-small); color: var(--ink-2); }
.proof p.what { font-size: var(--step-small); color: var(--ink-2); line-height: 1.65; }
.proof .result {
  font-size: var(--step-small); line-height: 1.6; color: var(--ink); font-weight: 500;
  border-top: 1px solid var(--ink); padding-top: 12px;
}
.proof a.more-link { font-size: var(--step-small); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.proof a.more-link svg { width: 14px; height: 14px; transition: transform var(--base) var(--ease-out); }
.proof a.more-link:hover svg { transform: translateX(3px); }

.ledger-note { margin-top: 20px; font-size: var(--step-small); color: var(--ink-2); max-width: 70ch; }

.lead-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px clamp(40px, 6vw, 96px); margin-top: 48px;
}
.practices { list-style: none; margin: 0; padding: 0; }
.practices li { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.practices li:last-child { border-bottom: 1px solid var(--line); }
.practices strong { font-weight: 500; font-size: var(--step-body); }
.practices span { font-size: var(--step-small); color: var(--ink-2); line-height: 1.65; }
.unique { display: grid; gap: 24px; align-content: start; }
.unique p { font-size: var(--step-lead); color: var(--ink-2); line-height: 1.65; }
.unique p.big { font-size: var(--step-h3-l); line-height: 1.5; color: var(--ink); }
.unique .voices { margin-top: 8px; }

/* Claude Code and GitHub: two charts side by side, each under its own logo. Claude Code is the
   wider card because it has more to show (actions per day and where they went); GitHub keeps its
   twelve months of weekly commits. Bars and the tool split are drawn in the page's ink. */
.stats-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: 56px; align-items: stretch; }
.sc { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-mark { display: inline-flex; width: 28px; height: 28px; color: var(--ink); flex-shrink: 0; }
.sc-mark svg { width: 100%; height: 100%; }
.sc-name { font-size: var(--step-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.sc-span { margin-left: auto; font-size: var(--step-small); color: var(--ink-2); white-space: nowrap; }
.sc-figs { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.sc-figs dt { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.sc-figs dd { margin: 6px 0 0; font-size: var(--step-small); color: var(--ink-2); }
.gh-chart { margin: 0; }
.gh-bars {
  list-style: none; margin: 0; padding: 26px 0 0;
  height: 136px; display: grid; grid-template-columns: repeat(var(--n, 52), minmax(0, 1fr)); gap: 2px; align-items: end;
  border-bottom: 1px solid var(--line);
}
.gh-bars li {
  position: relative; height: max(3px, calc(var(--h) * 100%));
  background: var(--ink); border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
.gh-bars li.is-zero { height: 3px; background: var(--line); }
.gh-bars li[data-peak]::after {
  content: attr(data-peak);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  white-space: nowrap; font-size: var(--step-small); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gh-bars li[data-side="start"]::after { right: auto; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gh-chart.is-in .gh-bars li { animation: bar-rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 9ms); }
  .js .gh-chart:not(.is-in) .gh-bars li { transform: scaleY(0); }
}
@keyframes bar-rise { from { transform: scaleY(0); } }
.sc-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--step-label); letter-spacing: 0.06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Where the Claude Code actions went: one bar split by tool, in steps of the page's ink */
.sc-split { margin-top: auto; }
.sc-split-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.sc-split-bar span { flex: var(--w) 1 0; min-width: 4px; background: var(--k); transform-origin: left; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js .sc:has(.gh-chart:not(.is-in)) .sc-split-bar span { transform: scaleX(0); }
.sc-split ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step-small); color: var(--ink); }
.sc-split li { display: inline-flex; align-items: center; gap: 8px; }
.sc-split li .num { color: var(--ink-2); }
.sc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
[data-k="0"] { --k: var(--ink); --d: 0; }
[data-k="1"] { --k: color-mix(in oklab, var(--ink) 62%, var(--surface)); --d: 1; }
[data-k="2"] { --k: color-mix(in oklab, var(--ink) 34%, var(--surface)); --d: 2; }
[data-k="3"] { --k: var(--line-hover); --d: 3; }
.sc-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--step-small); font-weight: 500; color: var(--ink); }
.sc-link svg { width: 14px; height: 14px; transition: transform var(--base) var(--ease-out); }
.sc-link:hover svg { transform: translateX(3px); }
.stats-note { margin-top: 16px; font-size: var(--step-small); color: var(--ink-2); line-height: 1.6; max-width: 72ch; }
.stats-note a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.stats-note a svg { width: 12px; height: 12px; }

/* ---------- Action ---------- */


/* The résumé: white paper on a deeper step of the tone, tilted */
.resume-stack { position: relative; }
.resume-stack::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg), #000 24%); border-radius: 4px;
  transform: rotate(3deg) translate(8px, 10px);
}
.resume-sheet {
  position: relative; display: block; border-radius: 4px; overflow: hidden;
  background: #FFFFFF; transform: rotate(-1.5deg);
  transition: transform var(--base) var(--ease-out);
  outline: 1px solid #E4E4E4;
}
.resume-sheet img { width: 100%; height: auto; display: block; }
.resume-sheet:hover { transform: rotate(0deg) translateY(-4px); }
.resume-sheet:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.resume-sheet .badge-pdf {
  position: absolute; right: 16px; bottom: 16px;
  background: #2C5846; color: #FCFCFC;
  font-size: var(--step-label); letter-spacing: 0.14em; font-weight: 500; text-transform: uppercase;
  padding: 10px 14px; border-radius: var(--pill);
}

/* ---------- Questions ---------- */

.faq-a .faq { margin-top: 40px; }

/* ---------- Adapt ---------- */

@media (max-width: 1100px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .resume-stack { max-width: 460px; justify-self: center; width: 100%; }
}

@media (max-width: 760px) {
  .lead-grid { grid-template-columns: 1fr; }
  /* two up on phones: the last proof takes the full row */
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .proof-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .proof-grid > :last-child:nth-child(odd) .frame { aspect-ratio: 16 / 10; }
  .proof { gap: 10px; }
  .proof .frame { aspect-ratio: 4 / 5; }
  .proof .h3-l { font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; }
  .proof .role, .proof p.what, .proof .result, .proof a.more-link { font-size: 0.875rem; line-height: 1.55; }
  .milestones li { grid-template-columns: 1fr; }
  .hero-a .hero-meta { flex-direction: column; gap: 6px; }
  .hero-a .hero-meta span + span::before { display: none; }
  .page-about { --wall-radius: 4px; }
  .wall { gap: 1px; padding: 1px; }
  .wall-bar { flex-direction: column; align-items: flex-start; }
  .resume-stack { max-width: 88%; margin: 8px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile svg, .resume-sheet { transition: none; }
}

@media (max-width: 900px) {
  .stats-pair { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .gh-bars { gap: 1px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .sc-split-bar span { transition: none; } }