/* v2: hero (approved look) + Work section + footer.
   One accent: shirt blue. --blue is for large type and graphics (3.8:1 on white); --blue-ink is for small text (6.2:1).
   One radius: 4px. Motion: one-shot CSS animation on the hero text only, no scroll listeners, no JS. */
:root{--ink:#111;--soft:#444;--paper:#fff;--line:#d9d9d9;--blue:#3d84dc;--blue-ink:#2862a8;--r:4px;
 --e:cubic-bezier(.16,1,.3,1);--display:Anton,Impact,sans-serif;--pad:clamp(20px,4vw,56px)}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:24px}
body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px}
.skip{position:absolute;left:8px;top:8px;transform:translateY(-200%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);z-index:10}
.skip:focus{transform:none}

/* nav */
nav.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 40px;font-size:14px;z-index:3}
nav.top strong{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em}
nav.top a{color:var(--ink);text-decoration:none;margin-left:6px;padding:14px 10px;min-height:44px;display:inline-block}
nav.top a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:5px}

/* hero. --h is the hero height; the photo is sized by it, so the whole body always shows.
   The body is ~13.3% of --h wide on each side of the centre line, so both text blocks sit the same gap (--g) from it. */
.hero{--h:clamp(440px,min(100svh,62vw),1400px);--g:clamp(16px,3vw,64px);--f:min(7vw,calc(var(--h)*.15));
 position:relative;height:var(--h);overflow:hidden}
.photo{position:absolute;inset:0;z-index:0;display:flex;justify-content:center}
.photo img{height:100%;width:auto;max-width:none;flex:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(0deg,transparent 0,#000 2%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(0deg,transparent 0,#000 2%);
 mask-composite:intersect}
.name,.role{position:absolute;z-index:2;top:calc(var(--h)*.2);font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.01em;font-size:var(--f);white-space:nowrap}
.name{right:calc(50% + var(--h)*.133 + var(--g))}
.role{left:calc(50% + var(--h)*.133 + var(--g));color:transparent;-webkit-text-stroke:2px var(--ink)}
.role span{display:block}
.intro{position:absolute;z-index:2;right:var(--pad);bottom:calc(var(--h)*.08);max-width:30ch;text-align:right}
.intro p{font-size:18px;line-height:1.45}
.intro b{color:var(--blue-ink);font-weight:500}
.btns{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r);font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap;border:2px solid var(--ink);transition:background .2s,color .2s,transform .2s var(--e)}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}

/* hero intro: the name slides in from the left, then the role from the right, then the intro fades up. */
@keyframes from-left{from{opacity:0;translate:-45vw 0}}
@keyframes from-right{from{opacity:0;translate:45vw 0}}
@keyframes fade-up{from{opacity:0;translate:0 14px}}
.name{animation:from-left .8s var(--e) .1s backwards}
.role{animation:from-right .8s var(--e) .65s backwards}
.intro{animation:fade-up .6s var(--e) 1.25s backwards}

/* hero, desktop only: the name and role sit on the two walls of the building. Phones keep the flat stacked layout.
   Perspective matched to the photo: the walls' lines meet at vanishing points on the horizon (~80% of --h down),
   ~1.22*--h beyond each text block's inner edge. Origin = inner edge at horizon height, perspective = --h,
   cot(39.3deg)=1.222. The slide-in uses `translate`, which composes with this `transform`. */
@media (min-width:901px){
 .name{transform:perspective(var(--h)) rotateY(-39.3deg);transform-origin:100% calc(var(--h)*.6)}
 .role{transform:perspective(var(--h)) rotateY(39.3deg);transform-origin:0 calc(var(--h)*.6)}
 /* "layered on the stone": multiply lets the stone's texture and shading show through the letters, like paint on the wall */
 .name,.role{font-size:calc(var(--f)*1.22);mix-blend-mode:multiply}
 .name{color:#1b1b1b;opacity:.9}
 .role{-webkit-text-stroke:2.5px #1b1b1b;opacity:.85}
}

/* work */
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
#work{padding-top:clamp(56px,8vw,112px)}
h2.big{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,10vw,140px);line-height:.9;letter-spacing:.01em}
h2.sec{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:.02em;margin:clamp(40px,5vw,72px) 0 20px;display:flex;align-items:center;gap:16px}
h2.sec::after{content:"";flex:1;height:3px;background:var(--blue)}
.ph{display:inline-block;margin-top:14px;padding:6px 10px;border:1.5px dashed #6b6b6b;border-radius:var(--r);background:#f3f3f3;color:var(--soft);font-size:14px;line-height:1.3}

/* experience: two rows, company left, story right */
.xp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);padding:clamp(28px,3.4vw,44px) 0}
.xp+.xp{border-top:1px solid var(--line)}
.xp h3{grid-column:1/5;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3.6vw,48px);line-height:1;letter-spacing:.01em}
.xp .co{grid-column:1/5}
.xp .story{grid-column:5/13;max-width:62ch}
.xp .lead{font-size:clamp(20px,2vw,25px);line-height:1.35;font-weight:500;margin-bottom:12px}
.xp .lead mark{background:none;color:var(--blue-ink)}
.xp p{color:var(--soft)}

/* side projects: three layout families (feature row, paired cards, feature row reversed) */
.proj{display:grid;gap:clamp(16px,2.4vw,32px)}
.p-feat{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--line)}
.p-feat .shot{grid-column:1/8}
.p-feat .txt{grid-column:9/13}
.p-feat.rev .shot{grid-column:6/13;grid-row:1}
.p-feat.rev .txt{grid-column:1/5;grid-row:1}
.pair{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--line);align-items:start}
.proj h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:.01em;margin-bottom:14px}
.txt p,.pair p{color:var(--soft);margin-bottom:10px}
.txt b,.pair b{color:var(--ink);font-weight:600}
.txt .k,.pair .k{color:var(--blue-ink);font-weight:600}
.more{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border:2px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s var(--e)}
.more:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
.more:active{transform:translateY(1px)}
.more:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.shot figure,.phones figure{margin:0}
.crop{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#f4f4f4}
.crop img{position:absolute;max-width:none;height:auto}
.mc{aspect-ratio:2311/1011}.mc img{width:124.6%;left:-22.4%;top:-59.8%}
.vcol figure{max-width:340px;margin:0 auto}
.vs{aspect-ratio:9/16;background:#0b0d10}.vs video{display:block;width:100%;height:100%;object-fit:cover}
.rd{aspect-ratio:1520/1040}.rd img{width:189.5%;left:-68.4%;top:-31.5%}
figcaption{font-size:14px;color:var(--soft);margin-top:8px;line-height:1.4}
.phones{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.phones figure{width:42%}
.phones figure+figure{margin-top:36px}
.dev{background:var(--ink);padding:5px;border-radius:18px}
.dev img{border-radius:13px;width:100%;height:auto}
.pair.vs-row{grid-template-columns:5fr 7fr}
.vs-row .vcol{order:2}

/* experience details */
.xp .meta{margin-top:10px;color:var(--soft);font-size:15px;line-height:1.45}
.xp .meta span{display:block}
.xp .meta .yrs{font-weight:600;color:var(--ink)}
.xp ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--soft)}
.xp li mark{background:none;color:var(--blue-ink);font-weight:600}
.xp li{position:relative;padding-left:20px}
.xp li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--blue);border-radius:2px}
.note{color:var(--soft);max-width:62ch;margin:-4px 0 4px}

/* shipped */
.ship{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(28px,3.4vw,44px);padding-top:8px}
.ship-n{grid-column:1/6}
.ship-n .num{font-family:var(--display);font-size:clamp(110px,15vw,210px);line-height:.85;color:var(--blue);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ship-n .cap{font-size:clamp(18px,1.8vw,22px);font-weight:500;line-height:1.3;margin-top:10px}
.ship-n .wk{margin-top:6px;color:var(--soft)}
.ship-n .wk b{color:var(--blue-ink);font-weight:600}
.ship-n .frame{margin-top:14px;color:var(--soft);max-width:36ch}
.brclip video{display:block;width:100%;height:auto;border-radius:var(--r);background:#0b0d10}
.brclip figcaption{margin-top:8px}
.how{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:h}
.how li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.how li:last-child{border-bottom:1px solid var(--line)}
.how li::before{counter-increment:h;content:counter(h);grid-row:1/3;font-family:var(--display);font-size:34px;line-height:1;color:var(--blue)}
.how b{font-weight:600}
.how span{color:var(--soft);margin-top:2px}
.ship-r{grid-column:7/13;display:grid;gap:clamp(28px,3vw,40px);align-content:start}
.bars{list-style:none;padding:0;display:grid;gap:14px}
.wlabel{font-weight:500;margin-bottom:10px}
.weeks{list-style:none;padding:0;display:flex;gap:14px;align-items:flex-end;height:130px}
.weeks li{width:72px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.weeks .c{font-variant-numeric:tabular-nums;font-weight:600;color:var(--blue-ink)}
.weeks i{display:block;background:var(--blue);border-radius:2px;min-height:4px}
#now{padding-top:clamp(56px,8vw,112px)}
.now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:28px}
.now h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:.01em;margin-bottom:12px;padding-top:14px;border-top:3px solid var(--blue)}
.now p{color:var(--soft);margin-bottom:10px;max-width:46ch}
/* Now: one image per item, at the end of its copy */
.now figure{margin:18px 0 0}
.now .crop img{position:static;width:100%;height:auto;max-width:100%}
.now .st{background:#0b0d10}
/* Trading floor flow chart: one column of steps joined by a blue line; reads the same at every width */
.tf{list-style:none;padding:16px 14px;margin:0;position:relative;display:grid;gap:8px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tf::before{content:"";position:absolute;left:calc(14px + 15px);top:34px;bottom:34px;width:3px;margin-left:-1.5px;background:var(--blue)}
.tf li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:center;min-height:38px;line-height:1.25}
.tf i{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r);background:var(--blue);color:#fff;font-style:normal;font-family:var(--display);font-size:17px;line-height:1}
.tf b{font-weight:600;font-size:15px}
.tf span{color:var(--soft);font-size:14px}
.tf .end{padding:8px 12px 8px 0}
.tf .end i{background:var(--ink)}
.tf .end i svg{width:16px;height:16px}
.tf .end b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.tf .gate span{color:var(--ink);font-weight:600}
.bars li{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:5px;align-items:baseline}
.bars .n{font-weight:500}
.bars .c{font-variant-numeric:tabular-nums;font-weight:600;color:var(--blue-ink)}
.bars i{grid-column:1/-1;display:block;height:12px;background:var(--blue);border-radius:2px;min-width:4px}
.upd{grid-column:1/-1;font-size:14px;color:var(--soft)}
@media (max-width:900px){
 .ship-n,.ship-r{grid-column:1/-1}
 .now{grid-template-columns:1fr}
 .now p{max-width:62ch}
}

/* contact */
#contact{padding-block:clamp(64px,9vw,120px) 32px}
.rows{margin-top:28px;display:grid;gap:10px;max-width:520px}
.rows div{display:flex;align-items:center;gap:16px;min-height:44px}
.rows dt{width:84px;font-weight:600}
.cv{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
a.cv{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
a.cv:hover{color:var(--blue-ink)}
button.cv{font:inherit;font-weight:500;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:var(--r);padding:0 16px;cursor:pointer;transition:background .2s,color .2s}
button.cv:hover{background:var(--ink);color:#fff}
footer{padding-block:24px 40px;font-size:14px;color:var(--soft);border-top:1px solid var(--line);margin-top:48px}

@media (max-width:900px){
 .p-feat .shot,.p-feat .txt,.p-feat.rev .shot,.p-feat.rev .txt{grid-column:1/-1;grid-row:auto}
 .p-feat .txt{margin-top:20px}
 .p-feat{align-items:start}
 .pair,.pair.vs-row{grid-template-columns:1fr}
 .vs-row .vcol{order:0}
 .vcol figure{margin:0}
 .phones{max-width:440px}
 .xp h3,.xp .co,.xp .story{grid-column:1/-1}
 .xp .story{margin-top:16px}
}
@media (max-width:700px){
 body{font-size:16px}
 nav.top{padding:4px 12px}
 .hero{height:auto;padding-top:64px;display:flex;flex-direction:column;--f:14vw}
 .photo{position:relative;order:3;display:block}
 .photo img{width:100%;height:72svh;object-fit:cover;object-position:50% 70%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
 .name,.role,.intro{position:static}
 .name{padding:0 16px;font-size:14vw}
 .role{padding:6px 16px 0;font-size:10vw}
 .role span{display:inline}
 .intro{order:2;padding:14px 16px 18px;max-width:none;text-align:left}
 .intro p{font-size:16px}
 .btns{justify-content:flex-start}
 .btn{flex:1}
 .phones figure{width:46%}
}
/* companies: text names only (no logos, no links), end of Experience. 2x2 grid on desktop, one column on phones. */
.clients{border-top:1px solid var(--line);padding:clamp(24px,3vw,36px) 0 4px}
.clients h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin-bottom:16px}
.clients ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,4vw,56px)}
.clients li{padding-left:14px;border-left:3px solid var(--blue)}
.clients b{display:block;font-weight:600;font-size:clamp(17px,1.6vw,19px);line-height:1.3;color:var(--ink)}
.clients span{display:block;margin-top:2px;font-size:15px;line-height:1.45;color:var(--soft)}
@media (max-width:700px){.clients ul{grid-template-columns:1fr;gap:16px}}

/* utility classes (were inline style attributes; moved here so the CSP needs no 'unsafe-inline') */
.mt8{margin-top:8px}
.blk{display:block}
h2.big.sm{font-size:clamp(48px,7vw,96px)}
/* contact values (the LinkedIn URL, the revealed email) may break anywhere rather than widen the page at 320 px */
.rows dd{min-width:0}
.cv{overflow-wrap:anywhere}

/* video loops: pause/play button added by js/home.js (WCAG 2.2.2) */
.vbox{position:relative}
.vbtn{position:absolute;right:10px;bottom:10px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r);background:rgba(17,17,17,.72);color:#fff;cursor:pointer}
.vbtn:hover{background:var(--ink)}
.vbtn:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.vbtn svg{width:20px;height:20px;fill:currentColor}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}