/* 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 { 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-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); 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; max-width: 860px; 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-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); }