@font-face{font-family:"Barlow";src:url("assets/fonts/Barlow-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("assets/fonts/Barlow-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("assets/fonts/Barlow-MediumItalic.woff2") format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/Caveat-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}

:root{
  --paper:#deded8;--ink:#292d2d;--muted:#525c5e;--accent:#889bb7;
  --rule:#a5aaa34f;--sans:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:1rem;--label:.875rem;--caption:.8125rem;
  --tablet-space:clamp(24px,4.2vw,72px);--inset:clamp(32px,4.4vw,68px);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;padding:var(--tablet-space);background:#fff;color:var(--ink);font:400 var(--body)/1.45 var(--sans);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,h2,h3{margin:0}
p{font-weight:500;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;text-underline-offset:.25em;text-decoration-thickness:from-font}
button:focus-visible,a:focus-visible{outline:2px solid #64798e;outline-offset:6px}
button:disabled{cursor:default}
::selection{background:#cdd8e4;color:#20282c}
[hidden]{display:none!important}
.skip-link{position:fixed;top:0;left:24px;transform:translateY(-120%);z-index:10;background:var(--paper);padding:12px 20px}
.skip-link:focus{transform:translateY(0)}

/* Matte housing and a softly grained e-paper surface under diffuse light. */
.tablet{
  position:relative;isolation:isolate;max-width:1480px;margin:0 auto;
  padding:18px 18px 24px;border:1px solid #a1a49b;border-radius:9px;
  background:linear-gradient(120deg,#dfe0d9,#d5d7ce 62%,#cbd0c5);
  box-shadow:inset 0 1px 0 #f3f3eaaa,inset -1px -1px 0 #a2a79966,
    1px 2px 2px #424b4230,4px 7px 6px -3px #3e483b40,
    12px 18px 24px -12px #27362430,24px 38px 56px -24px #3f493224;
}
.tablet::before{content:"";position:absolute;inset:3px;z-index:-1;pointer-events:none;border-radius:6px;border:1px solid #eef0e666;border-right-color:#929b8b30;border-bottom-color:#89927f40}
.screen{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid #b7baaf;border-radius:1px;padding:var(--inset);
  background:linear-gradient(110deg,#e4e4dd,var(--paper) 58%,#dadcd3);
  box-shadow:inset 1px 2px 3px #6269571a;
}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}

/* Identity and statement share the same outer grid as the reading notes. */
.introduction{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;align-items:baseline}
.introduction>*,.experience>*{min-width:0}
.eyebrow{font-size:var(--label);line-height:1.45;color:var(--muted)}
.identity .eyebrow{font-size:var(--caption);letter-spacing:.035em}
h1{font-size:clamp(3rem,5.6vw,5.5rem);font-weight:500;line-height:1.05;letter-spacing:-.035em;margin-top:12px;text-wrap:balance}
.throughline{max-width:24ch;margin:0 0 4px auto;font-size:clamp(1.125rem,1.65vw,1.5rem);line-height:1.4;text-wrap:pretty;color:#3f494a}
.handwritten-name{position:relative;width:100%;max-width:34rem;margin-top:20px;line-height:1}
.name-mark{display:block;width:100%;height:auto;aspect-ratio:2087/639;overflow:hidden}
.name-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.signed-introduction .throughline{margin-bottom:0}

/* The sketch is the central object. All marks stay fixed while ink travels. */
.work{width:100%;min-width:0;margin-top:48px;outline:none}
.drawing{position:relative;width:100%;min-width:0;aspect-ratio:1200/420}
.journey{display:block;position:absolute;width:100%;height:100%;overflow:visible}
.pencil-line{stroke-linecap:round;stroke-linejoin:round}
#line{stroke:#222423;stroke-width:5.2;opacity:.88;vector-effect:non-scaling-stroke}
#line-shadow{stroke:#202122;stroke-width:2;opacity:.22;vector-effect:non-scaling-stroke;transform:translate(.9px,1.3px)}
#arrow{stroke:#222423;stroke-width:5.2;opacity:1;vector-effect:non-scaling-stroke}
#moving-ink{stroke:#101211;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.point{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;background:none;padding:0;z-index:1}
.pin{display:block;position:absolute;left:16px;top:16px;width:12px;height:12px;background:#242526;border-radius:46% 54% 49% 51%;box-shadow:0 0 0 4px #e7e7e299;transition:box-shadow .2s}
.point:hover .pin,.point[aria-expanded=true] .pin{box-shadow:0 0 0 7px #889bb730}
.point-label{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:200px;text-align:center;font-size:var(--body);font-weight:500;line-height:1.4;white-space:nowrap}
.point-label>span{display:block;font-size:var(--caption);font-weight:400;line-height:1.4;color:var(--muted);margin-top:2px}
.point.below .point-label{top:44px;bottom:auto}
.point[aria-expanded=true] .point-label{text-decoration:underline;text-decoration-color:#8597ab;text-underline-offset:5px}
.point[data-key="premise"] .point-label{left:auto;right:calc(50% + 12px);bottom:calc(50% + 12px);transform:none;width:max-content;max-width:none;text-align:right}
.direction{position:absolute;top:65%;padding:8px 15px;font:500 1.125rem/1.25 "Caveat","Bradley Hand",cursive;white-space:nowrap;color:#252827}
.handwritten-annotation{display:inline-block;filter:url(#charcoal-writing);text-shadow:.15px 0 currentColor}
.complex{left:0}.simple{right:0}
.direction-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.direction-frame path{fill:none;stroke:#242526;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:url(#charcoal-frame)}
.reading-cue{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0 28px;color:#3e4645}
.reading-cue p{font:500 1.125rem/1.4 "Caveat","Bradley Hand",cursive;color:#252827;filter:url(#charcoal-writing);text-shadow:.15px 0 currentColor;text-wrap:pretty;transform:rotate(-.6deg);transform-origin:left center}
#motion{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:none;padding:0;color:#343b39}
#motion svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
#motion path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#motion .motion-pause{stroke-width:3.6}
#motion .motion-play{display:none;stroke-width:3.2}
#motion[aria-pressed=true] .motion-pause{display:none}
#motion[aria-pressed=true] .motion-play{display:block}
#motion:hover:not(:disabled){color:#080909}#motion:disabled{opacity:.45}

/* Experience records expand within the page, without an extra card surface. */
.experience{position:relative;border-top:1px solid var(--rule);padding:56px 0 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,.75fr);gap:36px;align-items:start}
.experience h2{font-size:1.75rem;font-weight:500;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin-top:8px}
.role,.role-scope{font-size:var(--label);line-height:1.45;color:var(--muted);margin-top:8px;max-width:34ch;text-wrap:pretty;overflow-wrap:break-word}
.detail-copy{max-width:48ch;text-wrap:pretty}
.detail-action{margin-top:16px;font-size:var(--label);color:var(--muted)}
.outcome{margin:0;padding:0}
.outcome dt{font-size:2.25rem;line-height:1.1;letter-spacing:-.025em;font-weight:500;color:#526379}
.outcome dd{margin:8px 0 0;font-size:var(--label);font-weight:500;line-height:1.45;color:var(--muted);max-width:21ch;overflow-wrap:break-word}
.close{position:absolute;right:0;top:4px;border:0;background:none;padding:8px 0;min-width:44px;min-height:44px;font-size:var(--label);color:var(--muted)}
.close span{font-size:1.15rem;margin-left:5px}
.experience.without-outcome{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.growth-experiences{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:24px}
.growth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:20px}
.growth-grid article{min-width:0}
.growth-grid h3{font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;margin-bottom:8px}
.growth-grid article>p{max-width:49ch;text-wrap:pretty}
.growth-result{margin-top:16px;font-size:var(--label);line-height:1.45}
.growth-result strong{display:block;color:#526379;font-weight:500}
.growth-result span{display:block;font-size:var(--caption);color:var(--muted);margin-top:4px}

/* Two compact reading notes, followed by the same shared baseline for links. */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,112px);border-top:1px solid var(--rule);padding:28px 0 32px;font-size:var(--body);line-height:1.45;text-wrap:pretty}
.about p{max-width:48ch}
.about p+p{margin:0}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;border-top:1px solid var(--rule);padding-top:16px;font-size:var(--label);line-height:1.4}
.other-work,footer nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.other-work>span{color:var(--muted);font-size:var(--caption)}
.other-work button{border:0;border-bottom:1px solid transparent;background:none;padding:8px 0;font-size:var(--label);min-height:44px}
.other-work button[aria-expanded=true]{border-bottom-color:var(--accent)}
footer a{display:inline-flex;align-items:center;min-height:44px}
footer a:hover,.other-work button:hover{text-decoration:underline}
.copyright{flex-basis:100%;font-size:var(--caption);line-height:1.4;color:var(--muted)}

@media(max-width:1100px){
  .introduction{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}
  .throughline{font-size:1.125rem}
  .point-label{width:180px}
  .point-label>span{display:none}
  .experience{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px}
  .outcome{grid-column:2}
  .about{gap:48px}
}
@media(max-width:1000px){
  :root{--tablet-space:28px;--inset:32px}
  h1{font-size:clamp(2.5rem,5.8vw,3.5rem)}
  .drawing{aspect-ratio:auto;height:300px}
  .tablet{padding:16px 16px 22px}
}
@media(max-width:680px){
  :root{--tablet-space:16px;--inset:26px}
  .tablet{padding:12px 11px 17px;border-radius:8px}
  .tablet::before{border-radius:5px}
  .introduction{grid-template-columns:1fr;gap:20px}
  h1{font-size:clamp(2.25rem,9.7vw,4rem);letter-spacing:-.03em;margin-top:10px}
  .handwritten-name{margin-top:16px;max-width:34rem}
  .signed-introduction .throughline{margin-bottom:0}
  .throughline{margin:0;max-width:27ch;font-size:1rem;line-height:1.45}
  .work{margin-top:24px}
  .drawing{height:330px}
  #line,#arrow{stroke-width:4.4}#line-shadow{stroke-width:1.6}#moving-ink{stroke-width:5.2}
  .point-label{bottom:64px;width:max-content;max-width:140px;white-space:normal;text-wrap:balance}
  .point.below .point-label{top:44px}
  .point[data-key="premise"] .point-label{right:50%}
  .direction{top:auto;bottom:0;padding:8px 14px}
  .reading-cue{gap:16px;padding:16px 0 24px}
  .reading-cue p{font-size:1.0625rem}
  .experience,.experience.without-outcome,.growth-grid{grid-template-columns:1fr}
  .experience{gap:24px;padding:56px 0 28px}
  .experience h2{font-size:1.5rem}
  .role,.role-scope{max-width:none}
  .detail-copy{max-width:none}
  .outcome{grid-column:1}
  .outcome dt{font-size:2rem}.outcome dd{max-width:32ch}
  .growth-grid{gap:24px}
  .growth-grid article+article{border-top:1px solid var(--rule);padding-top:24px}
  .about{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .about p{max-width:44ch}
  footer{align-items:flex-start;flex-direction:column;gap:8px;padding-top:16px}
  .other-work{gap:8px 24px}.other-work>span{flex-basis:100%}
  footer nav{gap:24px}
  .copyright{margin-top:8px}
}
@media(max-width:380px){
  :root{--tablet-space:12px;--inset:20px}
  .drawing{height:320px}.point-label{max-width:120px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}