/* About — hero, node canvas, inspector. Geometry comes from Liquid; this file only styles. */
.about-page { max-width: 1280px; margin: 0 auto; padding: 28px 36px 56px; display: flex; flex-direction: column; gap: 18px; }

.hero { display: flex; flex-direction: column; gap: 6px; }
.hero h1 { margin: 0; max-width: 24ch; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.avatar { display: none; } /* shown only by depth.css (html[data-depth="soft"]) */
.hero p { margin: 6px 0 0; max-width: 62ch; color: var(--muted); text-wrap: pretty; }

/* Canvas */
.wf-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background-color: var(--panel); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 18px 18px; }
.wf-canvas { position: relative; margin: 0 auto; }
.wf-hint { position: absolute; top: 12px; left: 16px; z-index: 1; color: var(--muted); font: 11px 'Geist Mono', monospace; pointer-events: none; }

/* Hero CTAs */
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; text-decoration: none; transition: color .2s, border-color .2s; }
.wf-btn:hover { color: var(--fg); border-color: var(--muted); }
.wf-btn--primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.wf-btn--primary:hover { color: var(--bg); opacity: .85; }
.wf-btn:focus-visible { outline: 3px solid var(--l2); outline-offset: 2px; }
.wf-btn__icon { width: 15px; height: 15px; flex: none; fill: currentColor; }
.wf-edges { position: absolute; inset: 0; overflow: visible; }
.wf-edge { fill: none; stroke: var(--edge); stroke-width: 2; opacity: .85; transition: stroke .2s, opacity .2s; }

.wf-node { position: absolute; width: 72px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fg); }
.wf-node__box { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.wf-node--profile .wf-node__box { border-radius: 36px 14px 14px 36px; }
.wf-node--respond .wf-node__box { border-radius: 14px 36px 36px 14px; }
.wf-node__glyph { font: 26px/1 'Geist Mono', monospace; }
.wf-port { position: absolute; top: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.wf-port--in { left: -6px; }
.wf-port--out { right: -6px; }
.wf-node__label { display: flex; flex-direction: column; align-items: center; width: 150px; flex-shrink: 0; line-height: 1.2; }
.wf-node__title { font-size: 13px; font-weight: 600; white-space: nowrap; }
.wf-node__sub { color: var(--muted); font: 10px 'Geist Mono', monospace; white-space: nowrap; }
.wf-node:hover .wf-node__box { border-color: var(--muted); }
.wf-node[aria-expanded="true"] .wf-node__box { border-color: var(--fg); box-shadow: 0 0 0 4px var(--line); }
.wf-node:focus-visible { outline: none; }
.wf-node:focus-visible .wf-node__box { outline: 3px solid var(--l2); outline-offset: 3px; }

/* Inspector */
.wf-inspector { --accent: var(--fg); max-width: 900px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.wf-inspector__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 0; }
.wf-inspector__human { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 24px 20px; }
.wf-inspector__json { display: none; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 24px 20px; }
/* Readable is the default; JS sets data-wf-view on <html>. Without JS the toggle stays hidden. */
.wf-view { display: none; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
[data-wf-view] .wf-view { display: flex; }
.wf-view button { padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: 12px 'Geist Mono', monospace; }
.wf-view button:hover { color: var(--fg); }
.wf-view button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
[data-wf-view="json"] .wf-inspector__human { display: none; }
[data-wf-view="json"] .wf-inspector__json { display: flex; }
.wf-inspector__heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-inspector__glyph { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 8px; color: var(--accent); font: 16px 'Geist Mono', monospace; }
.wf-inspector__heading h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.wf-inspector__hint { margin: 0; color: var(--muted); font: 11px 'Geist Mono', monospace; }
.wf-inspector__desc { margin: 0; text-wrap: pretty; }
.wf-rows { display: flex; flex-direction: column; margin: 0; }
.wf-rows > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.wf-rows dt { padding-top: 1px; color: var(--muted); font: 12px/1.55 'Geist Mono', monospace; }
.wf-rows dd { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Multi-field rows: title / meta / note, so role, company and description read as separate things. */
.wf-item__title { display: block; color: var(--fg); font-weight: 600; line-height: 1.35; }
a.wf-item__title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.wf-item__title:hover { text-decoration-color: currentColor; }
.wf-item__meta { display: block; margin-top: 2px; color: var(--accent); font: 12px/1.5 'Geist Mono', monospace; }
.wf-item__note { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.wf-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wf-list li { position: relative; padding-left: 14px; }
.wf-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.wf-rows > .wf-skill-spotlight { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--bg); }
.wf-skill-spotlight dt { color: var(--accent); }
.wf-skill-spotlight dd { font-size: 14px; }
.wf-skill-tools dd { min-width: 0; }
.wf-skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wf-skill-tags li { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 12px; line-height: 1.4; }
.wf-json-head { display: flex; justify-content: space-between; color: var(--muted); font: 11px 'Geist Mono', monospace; }
.wf-json-head code { font: inherit; }
.wf-json-head span { color: var(--ok); }
.wf-inspector__json pre { max-height: 520px; margin: 0; overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); white-space: pre-wrap; font: 12px/1.6 'Geist Mono', monospace; }
.wf-inspector__json pre code { font: inherit; }
.j-key { color: var(--k-key); } .j-str { color: var(--k-str); } .j-num { color: var(--k-num); } .j-p { color: var(--k-p); }

/* Mobile accordion — hidden on desktop */
.wf-acc { display: none; }

@media (max-width: 759px) {
  .about-page { padding: 22px 16px 44px; }
  .wf-scroll { display: none; }
  .wf-acc { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
  .wf-acc__item + .wf-acc__item { border-top: 1px solid var(--line); }
  .wf-acc__btn { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; cursor: pointer; text-align: left; }
  .wf-acc__glyph { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 9px; background: var(--bg); font: 16px 'Geist Mono', monospace; }
  .wf-acc__glyph.wf-node--profile { border-radius: 18px 9px 9px 18px; }
  .wf-acc__glyph.wf-node--respond { border-radius: 9px 18px 18px 9px; }
  .wf-acc__title { font-weight: 600; font-size: 14px; }
  .wf-acc__sub { color: var(--muted); font: 10px 'Geist Mono', monospace; }
  .wf-acc__caret { color: var(--muted); font-size: 11px; transition: transform .2s; }
  .wf-acc__btn[aria-expanded="true"] .wf-acc__caret { transform: rotate(90deg); }
  .wf-acc__item .wf-inspector__heading { display: none; }
  .wf-acc__item .wf-inspector { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .wf-inspector__bar { justify-content: flex-end; padding: 12px 16px 0; }
  .wf-rows > div { grid-template-columns: 1fr; gap: 4px; }
  .wf-inspector__human, .wf-inspector__json { padding: 12px 16px 16px; }
}

/* Graph: skill pills and the junction dot between Education/Experience and the pills */
.wf-pill{width:180px;height:52px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px 0 7px;border:2px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .2s,box-shadow .2s}
.wf-pill .wf-node__box{position:static;width:34px;height:34px;border:0;border-radius:9px;background:var(--panel);flex:none}
.wf-pill .wf-node__label{width:auto;align-items:flex-start;text-align:left}
.wf-pill .wf-port{top:calc(50% - 4px)}
.wf-pill .wf-port--in{left:-6px}.wf-pill .wf-port--out{right:-6px}
.wf-pill:hover{border-color:var(--muted)}
.wf-pill[aria-expanded="true"]{border-color:var(--fg);box-shadow:0 0 0 4px var(--line)}
.wf-join{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--panel)}

/* Works inspector */
.wf-more { display: inline-flex; gap: 8px; margin-top: 14px; color: var(--accent); font: 12px 'Geist Mono', monospace; text-decoration: none; }
.wf-more:hover { text-decoration: underline; }
.wf-post-list, .wf-pub-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wf-post-list { gap: 17px; }
.wf-pub-list { gap: 20px; }
.wf-pub-list li + li { padding-top: 20px; border-top: 1px solid var(--line); }
.wf-pub__authors { margin-top: 7px; }
.wf-pub__venue { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.wf-pub__doi { display: block; margin-top: 8px; color: var(--muted); font: 11px/1.6 'Geist Mono', monospace; overflow-wrap: anywhere; text-decoration: none; }
.wf-pub__doi:hover { color: var(--accent); }

/* Explore: tools, hover path, drag, run */
.wf-tools { position: absolute; top: 8px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.wf-tool { padding: 4px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--muted); cursor: pointer; font: 11px 'Geist Mono', monospace; transition: color .2s, border-color .2s; }
.wf-tool[hidden] { display: none; }
.wf-tool:hover { color: var(--fg); border-color: var(--muted); }
.wf-tool:focus-visible { outline: 3px solid var(--l2); outline-offset: 2px; }
.wf-tool--run[aria-busy="true"] { color: var(--ok); border-color: var(--ok); cursor: default; }
.wf-node { user-select: none; -webkit-user-select: none; touch-action: none; transition: opacity .2s; }
.wf-node.is-drag { z-index: 2; cursor: grabbing; }
.wf-node.is-drag .wf-node__box { box-shadow: 0 8px 22px rgb(0 0 0 / 18%); border-color: var(--muted); }
.wf-join { transition: opacity .2s, transform .3s; }
.wf-canvas.is-focus .wf-node:not(.is-lit), .wf-canvas.is-focus .wf-join:not(.is-lit) { opacity: .35; }
.wf-canvas.is-focus .wf-edge:not(.is-lit) { opacity: .12; }
.wf-canvas.is-focus .wf-edge.is-lit { opacity: 1; }
.wf-packet { fill: var(--edge, var(--ok)); filter: drop-shadow(0 0 4px var(--edge, var(--ok))); pointer-events: none; }
.wf-node.is-active .wf-node__box, .wf-pill.is-active { border-color: var(--glow, var(--ok)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow, var(--ok)) 22%, transparent), 0 0 20px color-mix(in srgb, var(--glow, var(--ok)) 40%, transparent); }
.wf-join.is-active { transform: scale(1.7); box-shadow: 0 0 0 4px var(--panel), 0 0 16px var(--ok); }
.wf-node.is-done .wf-node__box { animation: wf-pulse .9s ease-out 2; }
@keyframes wf-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--glow, var(--ok)) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.wf-toast { position: absolute; z-index: 3; padding: 4px 10px; border: 1px solid var(--ok); border-radius: 9px; background: var(--bg); color: var(--ok); cursor: pointer; font: 11px 'Geist Mono', monospace; white-space: nowrap; transform: translateX(-100%); animation: wf-in .3s ease-out; }
.wf-toast:hover { color: var(--fg); }
.wf-toast:focus-visible { outline: 3px solid var(--l2); outline-offset: 2px; }
@keyframes wf-in { from { opacity: 0; margin-top: 6px; } }
.wf-node.is-bump .wf-node__box { animation: wf-bump .28s ease-out; }
@keyframes wf-bump { 40% { transform: scale(1.12); } }
.wf-toast.is-out { opacity: 0; transition: opacity .35s; }
.wf-tool--run.is-attn { color: var(--fg); border-color: var(--ok); animation: wf-attn 2s ease-in-out infinite; }
@keyframes wf-attn { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .wf-node, .wf-join { transition: none; }
  .wf-node.is-done .wf-node__box, .wf-toast, .wf-node.is-bump .wf-node__box, .wf-tool--run.is-attn { animation: none; }
  .wf-toast.is-out { transition: none; }
}

/* Greeting: the word types in place; hidden sizers reserve the longest word's width */
.wf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.greet { position: relative; display: inline-grid; vertical-align: baseline; }
.greet__size { display: none; }
.greet__size > span { grid-area: 1 / 1; }
.greet__word { grid-area: 1 / 1; white-space: nowrap; }
.greet.is-live .greet__word { border-right: 2px solid var(--muted); margin-right: -2px; animation: wf-caret 1s steps(1) infinite; }
.greet__lang { position: absolute; left: 0; top: -1.1em; color: var(--muted); font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .08em; }
@keyframes wf-caret { 50% { border-right-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .greet.is-live .greet__word { animation: none; } }

/* Bio phrases wired to the graph */
.bio-link { padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; font: inherit; text-decoration: underline dotted 2px var(--bl, var(--muted)); text-underline-offset: 4px; transition: text-decoration-color .2s, color .2s; }
.bio-link:hover { text-decoration-style: solid; }
.bio-link:focus-visible { outline: 3px solid var(--l2); outline-offset: 2px; border-radius: 3px; }

/* Below the graph: inspector + latest posts */
.wf-below { display: flex; flex-direction: column; gap: 18px; }
.wf-below__main { min-width: 0; }
.wf-aside { display: flex; flex-direction: column; gap: 14px; }
.wf-card { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); text-decoration: none; }
.wf-card__title { display: block; margin: 0 0 10px; color: var(--muted); font: 11px 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.wf-latest { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wf-latest__meta { display: flex; align-items: center; gap: 4px; color: var(--muted); font: 11px 'Geist Mono', monospace; }
.wf-latest__dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.wf-latest__dots i { width: 7px; height: 7px; border-radius: 50%; }
.wf-latest__title { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; text-wrap: pretty; }
.wf-latest__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.wf-aside .wf-more { margin-top: 14px; color: var(--fg); }
@media (min-width: 1100px) {
  .wf-below { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .wf-below .wf-inspector { max-width: none; }
}