/* About cards: refinements inside the approved card layout.
   Sketch artwork keeps a fixed paper-and-pencil palette in every theme; card text uses site tokens.
   The two portraits (dust avatar and mesh card) are not styled here. */
.about-section{--sk-paper:#fffdf6;--sk-ink:#3d3a7a;--sk-grid:#e3e6f1;--sk-high:#fff1a8;--sk-cyan:#d9f4ef;--sk-pink:#fbe0f2;--sk-tape:#ece3c8}

/* Designation */
.about-role{margin:0;font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.005em;color:var(--site-accent,#335d65)}

/* Experience: every role visible; the active one expands and is highlighted. */
.xp{position:absolute;left:20px;right:20px;top:60px;bottom:12px}
.xp-list{list-style:none;margin:0;padding:0}
.xp-row{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:6px;padding:4px 0 5px}
.xp-row::after,.xp-row::before{content:'';position:absolute;left:6.2px;top:19px;bottom:-4px;width:1.6px;border-radius:1px;background:var(--site-line,#cbd4d0)}
.xp-row::before{z-index:1;background:var(--site-accent,#335d65);transform:scaleY(0);transform-origin:bottom;transition:transform .55s ease}
.xp-row.is-done::before{transform:scaleY(1)}
.xp-row:last-child::after,.xp-row:last-child::before{display:none}
.xp-dot{position:relative;z-index:2;width:10px;height:10px;margin-top:4px;border:1.6px solid var(--site-muted,#526169);border-radius:50%;background:var(--about-card,var(--site-surface,#fff));transition:background .3s,border-color .3s,box-shadow .3s}
.xp-row.is-done .xp-dot{border-color:var(--site-accent,#335d65)}
.xp-row.is-active .xp-dot{background:var(--site-accent,#335d65);border-color:var(--site-accent,#335d65);box-shadow:0 0 0 4px var(--site-accent-soft,#e1ece8)}
.xp-row strong{justify-self:start;font-size:13.5px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--site-ink,#1e2a2d);opacity:.72;background:linear-gradient(var(--site-yellow,#eeeacb),var(--site-yellow,#eeeacb)) no-repeat 0 78%/0% 52%;transition:background-size .6s ease .15s,opacity .3s}
.xp-row.is-active strong{opacity:1;background-size:100% 52%}
.xp-row>div>span{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12px;line-height:1.4;color:var(--site-muted,#526169);transition:max-height .4s ease,opacity .4s ease,margin .4s ease}
.xp-row.is-active>div>span{max-height:18px;margin-top:2px;opacity:1}
.xp-row time{padding-top:1px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--site-muted,#526169)}
.xp-row.is-active time{color:var(--site-ink,#1e2a2d);font-weight:500}

/* Focus: a pencil sketch per topic, drawn in when the topic comes up. */
.about-focus-cover{background:var(--sk-paper);border:1px solid #d8d5e8;box-shadow:3px 4px 0 #3d3a7a12}
.sk-art{display:block;width:100%;height:100%}
.sk-art .sk-paper{fill:var(--sk-paper)}
.sk-art .sk-grid{fill:none;stroke:var(--sk-grid);stroke-width:.5}
.focus-art{opacity:0;transition:opacity .35s ease}
.focus-art.is-on{opacity:1}
.sk{fill:none;stroke:var(--sk-ink);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .35s}
.sk-thin{stroke-width:.95;opacity:.8}
.sk-dash{stroke-width:.8;opacity:.45}
.focus-art.is-on .sk{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,.05,.25,1) calc(var(--i,0)*.14s)}
.sk-mark{fill:var(--sk-high);opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:opacity 0s .35s,transform 0s .35s}
.focus-art.is-on .sk-mark{opacity:.95;transform:scaleX(1);transition:transform .5s ease calc(var(--i,0)*.14s + .2s),opacity .2s calc(var(--i,0)*.14s)}
.sk-note,.sk-cite{opacity:0;transition:opacity 0s .35s}
.sk-note{font-size:18px;font-family:'Allura',cursive!important;fill:var(--sk-ink)}
.sk-cite{font:600 9px var(--font-ui,'RagInter',Inter,sans-serif);fill:var(--sk-ink)}
.focus-art.is-on :is(.sk-note,.sk-cite){opacity:1;transition:opacity .45s ease calc(var(--i,0)*.14s + .3s)}

/* Principle: copy + a sketched spiral notebook whose cover follows the principle. */
.about-principle .about-principle-copy{top:66px;width:200px}
.about-principle .about-principle-copy h3{font-size:23px;line-height:29px;text-wrap:balance}
.about-principle .about-principle-copy p{margin-top:10px;font-size:12.5px;line-height:1.6}
.about-notebook.sk-book{right:12px;bottom:-12px;width:133px;height:199px;padding:0;background:none;border-radius:0;box-shadow:none;rotate:5deg;transform:perspective(650px) rotateY(0);transform-origin:left center;transition:transform .38s cubic-bezier(.5,0,.5,1);color:inherit}
.sk-book[data-flip="out"]{transform:perspective(650px) rotateY(-82deg)}
.sk-book>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(-3px 4px 0 #3d3a7a17)}
.book-cover{fill:var(--book-fill,var(--sk-high));stroke:var(--sk-ink);stroke-width:1.5;transition:fill .2s}
.sk-book[data-cover="1"]{--book-fill:var(--sk-cyan)}.sk-book[data-cover="2"]{--book-fill:var(--sk-pink)}.sk-book[data-cover="3"]{--book-fill:var(--sk-paper)}
.book-edge{fill:none;stroke:var(--sk-ink);stroke-width:.7;opacity:.45}
.book-ring{fill:none;stroke:var(--sk-ink);stroke-width:1.3;stroke-linecap:round}
.book-tape{fill:var(--sk-tape);opacity:.9;stroke:#cbbf9b;stroke-width:.5}
.book-kicker{font:500 9.5px var(--font-ui,'RagInter',Inter,sans-serif);fill:var(--sk-ink);opacity:.7;letter-spacing:.03em}
.book-title{font-size:25px;font-family:'Allura',cursive!important;fill:var(--sk-ink)}
.book-doodle{opacity:0}.book-doodle.is-on{opacity:1}
.book-doodle path{fill:none;stroke:var(--sk-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.book-sign{font-size:15px;font-family:'Allura',cursive!important;fill:var(--sk-ink);opacity:.75}
.about-principle-pager{position:absolute;left:12px;bottom:10px;z-index:3;display:flex}
.about-principle-pager button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.about-principle-pager button::before{content:'';width:7px;height:7px;border-radius:50%;border:1.4px solid var(--site-muted,#526169);transition:background .25s,border-color .25s}
.about-principle-pager button[aria-pressed="true"]::before{background:var(--site-ink,#1e2a2d);border-color:var(--site-ink,#1e2a2d)}

/* How I work: a hand-drawn route; the highlighter travels between stations. */
.about-process .about-process-layer h3{font-size:27px}
.about-process .about-process-layer p{margin-top:9px;font-size:14.5px}
.about-section .about-step-control{bottom:10px;height:62px;padding:0;border-radius:0;overflow:visible;background:transparent!important}
.about-step-route{position:absolute;left:0;top:2px;width:100%;height:30px;overflow:visible;pointer-events:none}
.about-step-route path{fill:none;stroke:var(--site-ink,#1e2a2d);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.about-step-route path+path{stroke-width:.7;opacity:.4}
.about-section .about-step-pill{top:0;height:34px;background:transparent!important;border-radius:0}
.about-step-pill::after{content:'';position:absolute;left:50%;top:5px;width:46px;height:24px;margin-left:-23px;border-radius:48% 52% 45% 55%;background:var(--site-yellow,#eeeacb);rotate:-6deg}
.about-section .about-step-control>button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 6px;color:var(--site-muted,#526169)!important;font-size:13px!important;cursor:pointer}
.about-section .about-step-control>button::before{content:'';width:14px;height:14px;margin-bottom:auto;margin-top:10px;border:1.6px solid currentColor;border-radius:52% 48% 55% 45%;background:var(--about-card,var(--site-surface,#fff));transition:background .25s,transform .25s}
.about-section .about-step-control>button[aria-selected="true"]{color:var(--site-ink,#1e2a2d)!important}
.about-section .about-step-control>button[aria-selected="true"]::before{background:var(--site-ink,#1e2a2d);transform:scale(1.15)}
.about-section .about-step-control>button:focus-visible{outline-offset:-2px}

/* Closing line in calligraphy, underlined once by a drawn swash. */
.about-signoff{position:relative;display:inline-block;padding-bottom:6px;font-size:36px;line-height:1.1;font-family:'Allura',cursive!important;letter-spacing:.005em;color:var(--site-ink,#1e2a2d)}
.about-signoff>svg{position:absolute;left:2%;right:0;bottom:-4px;width:96%;height:12px;overflow:visible}
.about-signoff path{fill:none;stroke:var(--site-accent,#335d65);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.25,1) .25s}
.is-signed .about-signoff path{stroke-dashoffset:0}

/* Desktop stage: lift the lower row so the footer actions are fully visible. */
@media(min-width:961px){
  .about-stage .about-role{left:321px;top:58px;width:900px}
  .about-stage :is(.about-experience,.about-focus,.about-principle){top:374px}
  .about-stage :is(.about-map,.about-photo,.about-process){top:648px}
  .about-stage .about-footer{top:902px;align-items:center}
  .about-process .about-process-copy{top:62px;height:96px}
}
@media(max-width:960px){
  .about-stage .about-role{grid-column:1/-1;margin-bottom:-8px}
  .about-signoff{font-size:30px}
  .about-principle .about-principle-copy{width:52%}
}
@media(prefers-reduced-motion:reduce){
  .sk,.focus-art.is-on .sk{transition:none}
  .about-signoff path{stroke-dashoffset:0}
}

/* Greeting and dash are wrapped for the phone layout; on desktop they read exactly as before. */
.about-heading>:is(.about-hello,.about-dash){color:inherit}
/* How I work has six stations; the travelling highlight is one station wide. */
.about-section .about-step-pill{width:calc(100% / var(--steps,4))}
.about-heading>.about-lead{color:inherit}
.about-heading .about-org{color:var(--about-muted,#a7a39d)}
.step-glyph{display:none}

/* How I work: a pencil scene per step, drawn in when the step becomes current. */
.process-art{position:absolute;right:18px;top:16px;width:118px;height:132px;overflow:hidden;border:1px solid #d8d5e8;border-radius:6px 12px 7px 10px;background-color:var(--sk-paper);background-image:linear-gradient(var(--sk-grid) .6px,transparent .6px),linear-gradient(90deg,var(--sk-grid) .6px,transparent .6px);background-size:14px 14px;box-shadow:3px 4px 0 #3d3a7a12;rotate:1.5deg}
.process-art .sk-art{display:block;width:100%;height:100%;overflow:visible}
.process-art-scene{opacity:0;transition:opacity .35s ease}
.process-art-scene.is-on{opacity:1}
.process-art-scene.is-on .sk{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,.05,.25,1) calc(var(--i,0)*.13s)}
.process-art-scene.is-on .sk-mark{opacity:.95;transform:scaleX(1);transition:transform .5s ease calc(var(--i,0)*.13s + .2s),opacity .2s calc(var(--i,0)*.13s)}
.process-art-scene.is-on .sk-note{opacity:1;transition:opacity .45s ease calc(var(--i,0)*.13s + .3s)}
@media(min-width:961px){
  .about-process .about-process-copy{right:152px}
  .about-process .about-process-layer h3{font-size:23px}
  .about-process .about-process-layer p{font-size:13.5px}
}
/* How the work connects: taller desktop map for the added cluster and technology nodes. */
@media(min-width:961px){.about-constellation .about-network-stage{height:min(88svh,900px);min-height:660px}}
/* Detail panel under the map: a soft slide when the tour or a click changes the node. */
.about-network-detail.is-swap>:is(span,div){animation:about-detail-in .45s cubic-bezier(.2,.7,.3,1)}
@keyframes about-detail-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.about-network-detail.is-swap>:is(span,div){animation:none}}
/* "View project" under the map: shared link resets stripped it to plain text, so it read as missing.
   Make it an unmistakable button on every size and theme. */
.about-constellation .about-network-detail a#about-network-project{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 16px!important;border:1.4px solid var(--site-ink,#1e2a2d)!important;border-radius:6px 14px 7px 12px!important;background:var(--site-surface,#fff)!important;box-shadow:2px 3px 0 var(--site-line,#cbd4d0);color:var(--site-ink,#1e2a2d)!important;font-size:15px!important;font-weight:500;text-decoration:none!important;rotate:-.6deg;transition:background .2s,box-shadow .2s,translate .2s}
.about-constellation .about-network-detail a#about-network-project:hover{background:var(--site-accent-soft,#e1ece8)!important;translate:0 -1px;box-shadow:3px 4px 0 var(--site-line,#cbd4d0)}
:root[data-style="sketch"] .about-constellation .about-network-detail a#about-network-project{background:var(--site-yellow)!important}
@media(max-width:960px){.about-constellation .about-network-detail a#about-network-project{justify-self:stretch;width:100%;margin:6px 0 4px;rotate:0deg}}