@font-face{font-family:Onest;src:url(fonts/Onest-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{color-scheme:dark;--bg:#0a0b0d;--fg:#eef0f3;--mute:#8b919a;--line:rgba(255,255,255,.09);--glass:rgba(20,22,26,.5);--glass-b:rgba(255,255,255,.12);--accent:#b8ff5c;--blob:.6;
--chrome:conic-gradient(from var(--a),#f4f6f8,#9aa1aa 12%,#e9ecef 22%,#4f555e 34%,#d8dce1 46%,#7e858e 58%,#fff 70%,#5f656e 84%,#f4f6f8);--r:28px;--max:1240px;--ease:cubic-bezier(.2,.7,.1,1)}
:root[data-theme=light]{color-scheme:light;--bg:#eceef1;--fg:#0d0e10;--mute:#5a6068;--line:rgba(0,0,0,.08);--glass:rgba(255,255,255,.5);--glass-b:rgba(0,0,0,.08);--accent:#3f7a00;--blob:.75}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;--bg:#eceef1;--fg:#0d0e10;--mute:#5a6068;--line:rgba(0,0,0,.08);--glass:rgba(255,255,255,.5);--glass-b:rgba(0,0,0,.08);--accent:#3f7a00;--blob:.75}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 clamp(16px,.95rem + .15vw,18px)/1.55 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}::selection{background:var(--accent);color:#000}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.liquid{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.liquid .g{position:absolute;inset:-10%;filter:url(#goo);opacity:var(--blob)}
.liquid i{position:absolute;border-radius:50%;background:var(--chrome);animation:spin 38s linear infinite,drift 26s var(--ease) infinite alternate}
.liquid i:nth-child(1){width:46vmax;height:40vmax;left:52%;top:2%}
.liquid i:nth-child(2){width:30vmax;height:34vmax;left:30%;top:30%;animation-duration:52s,31s;animation-direction:reverse,alternate}
.liquid i:nth-child(3){width:22vmax;height:20vmax;left:70%;top:52%;animation-duration:44s,22s}
.liquid::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 65% 25%,transparent 0,var(--bg) 78%)}
@keyframes spin{to{--a:360deg}}
@keyframes drift{to{transform:translate(-5vmax,4vmax) scale(1.08) rotate(24deg)}}
.bar{position:sticky;top:14px;z-index:20;margin:14px auto 0;width:min(var(--max),calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.logo{font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo b{width:26px;height:26px;border-radius:50%;background:var(--chrome);animation:spin 14s linear infinite}
.nav{display:flex;gap:2px}.nav a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--mute);transition:.3s}
.nav a:hover,.nav a[aria-current]{color:var(--fg);background:var(--line)}
.tbtn{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--glass-b);background:var(--chrome);cursor:pointer;animation:spin 20s linear infinite}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center;margin:0}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.display{font-size:clamp(54px,11vw,176px);line-height:.86;letter-spacing:-.06em;font-weight:620;margin:.2em 0 .25em}
.metal{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;animation:spin 18s linear infinite}
.lead{font-size:clamp(19px,1.05rem + .6vw,26px);line-height:1.35;letter-spacing:-.015em;max-width:32ch;margin:0}
.h2{font-size:clamp(36px,5.4vw,80px);letter-spacing:-.05em;line-height:.95;font-weight:600;margin:0}
.muted{color:var(--mute)}
.hero{min-height:86svh;display:grid;align-content:end;padding:14vh 0 7vh}
.hero-row{display:flex;flex-wrap:wrap;gap:28px 64px;align-items:end;justify-content:space-between}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:13px 22px;border-radius:999px;border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px;transition:.35s var(--ease)}
.pill:hover{transform:translateY(-2px);border-color:var(--fg)}
.pill.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sec{padding:clamp(64px,9vw,128px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap}
.bento{display:grid;gap:14px;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(170px,auto)}
.tile{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);padding:clamp(22px,2.4vw,34px);background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),border-color .5s}
a.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.tile h3{margin:0;font-size:clamp(24px,1rem + 1.4vw,36px);letter-spacing:-.04em;line-height:1;font-weight:600}
.tile p{margin:0;color:var(--mute);max-width:44ch}
.tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.go{margin-top:auto;font-size:14px}.go::after{content:" →";display:inline-block;transition:.4s var(--ease)}a.tile:hover .go::after{transform:translateX(6px)}
.orb{position:absolute;z-index:-1;width:min(70%,420px);aspect-ratio:1;right:-14%;top:-22%;border-radius:50%;background:var(--chrome);filter:url(#goo);opacity:.9;animation:spin 30s linear infinite}
.stat{font-size:clamp(38px,8cqi,80px);letter-spacing:-.055em;line-height:.9;font-weight:560}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}.r2{grid-row:span 2}
.cases{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cases a{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:baseline;padding:22px 6px;border-bottom:1px solid var(--line);transition:.4s var(--ease)}
.cases a:hover{padding-left:18px;background:linear-gradient(90deg,var(--line),transparent)}
.cases .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cases strong{font-size:clamp(20px,1rem + .9vw,28px);font-weight:560;letter-spacing:-.03em;display:block}
.cases .d{color:var(--mute);font-size:15px}.cases .arr{color:var(--mute)}
.foot{padding:48px 0 64px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
@supports (animation-timeline:view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
@keyframes rise{from{opacity:0;transform:translateY(36px);filter:blur(6px)}}}
@view-transition{navigation:auto}
@media (max-width:860px){.nav{display:none}.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important;grid-row:auto!important}.cases a{grid-template-columns:1fr;gap:4px}.cases .arr{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root[data-theme=light] .metal{background:conic-gradient(from var(--a),#1a1c1f,#7d848d 15%,#2b2f34 30%,#a9afb7 45%,#16181b 60%,#6b727b 78%,#1a1c1f)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .metal{background:conic-gradient(from var(--a),#1a1c1f,#7d848d 15%,#2b2f34 30%,#a9afb7 45%,#16181b 60%,#6b727b 78%,#1a1c1f)}}
.metal{-webkit-background-clip:text!important;background-clip:text!important}
.display{font-size:clamp(50px,9.4vw,160px)}
.orb{top:auto;bottom:-38%;right:-16%;width:min(58%,460px)}
@container (min-width:560px){.tile .txt{max-width:56%}}
@font-face{font-family:Lib;src:url(fonts/LibertinusSerif-Regular.otf);font-display:swap}
@font-face{font-family:Lib;font-style:italic;src:url(fonts/LibertinusSerif-Italic.otf);font-display:swap}
@font-face{font-family:Lib;font-weight:600;src:url(fonts/LibertinusSerif-Semibold.otf);font-display:swap}

/* variant B */

:root{--chrome:conic-gradient(from var(--a),#f3eee2,#9a8a6c 12%,#e8dfc9 22%,#4d463a 34%,#d9cfb8 46%,#938062 58%,#fffaf0 70%,#6c302d 80%,#5d564b 88%,#f3eee2);--accent:#C97860;--bg:#0d0c0b}
:root[data-theme=light]{--accent:#6C302D;--bg:#efebe3}
.kicker::before{box-shadow:0 0 14px #C97860}
.liquid .g{opacity:.7}
.tile .tag{color:#C8B373}
.pill.solid{background:linear-gradient(180deg,#e9dcc0,#b49b6a);color:#191C18;border-color:#C8B373}
.stat{background:conic-gradient(from 120deg,#f3eee2,#9a8a6c 12%,#e8dfc9 22%,#4d463a 34%,#d9cfb8 46%,#938062 58%,#fffaf0 70%,#6c302d 80%,#5d564b 88%,#f3eee2);-webkit-background-clip:text;background-clip:text;color:transparent}
.cases .k{color:#938062}

/* ---- site_b pages ---- */
.page-hero{padding:clamp(110px,16vh,180px) 0 clamp(40px,6vw,72px)}
.page-hero h1{font-size:clamp(46px,7.5vw,120px);line-height:.9;letter-spacing:-.055em;font-weight:620;margin:.2em 0 .3em;max-width:16ch}
.crumbs{font-size:13px;color:var(--mute);display:flex;gap:8px}.crumbs a:hover{color:var(--fg)}
.sample{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px dashed var(--accent);color:var(--accent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.sample::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prose>*{max-width:780px}
.prose h2{font-size:clamp(26px,1rem + 1.6vw,38px);letter-spacing:-.04em;line-height:1.05;font-weight:600;margin:2.2em 0 .6em}
.prose h3{font-size:22px;letter-spacing:-.025em;font-weight:600;margin:1.6em 0 .4em}
.prose p,.prose li{color:color-mix(in srgb,var(--fg) 82%,var(--bg))}
.prose a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.prose ul{padding-left:1.1em}.prose li{margin:.35em 0}
.prose .lead{font-size:clamp(19px,1rem + .5vw,24px);max-width:none;color:var(--fg)}
.prose blockquote{margin:1.6em 0;padding:18px 24px;border-left:2px solid var(--accent);border-radius:0 18px 18px 0;background:var(--glass)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:32px 0}
.metrics span,.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;padding:20px 22px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:var(--mute);font-size:14px}
.metrics b{display:block;font-size:clamp(28px,3vw,44px);letter-spacing:-.05em;line-height:1;font-weight:560;margin-bottom:8px;background:var(--chrome);background:conic-gradient(from 120deg,#f3eee2,#9a8a6c 12%,#e8dfc9 22%,#4d463a 34%,#d9cfb8 46%,#938062 58%,#fffaf0 70%,#6c302d 80%,#5d564b 88%,#f3eee2);-webkit-background-clip:text;background-clip:text;color:transparent}
/* resume (live markup) */
.resume .identity{display:flex;gap:22px;align-items:center}
.resume .avatar{border-radius:50%;width:96px;height:96px;object-fit:cover;border:1px solid var(--glass-b)}
.resume .identity h1{font-size:clamp(44px,6.5vw,100px);letter-spacing:-.055em;line-height:.9;margin:.1em 0}
.resume .role{font-size:clamp(17px,1rem + .4vw,22px);margin:.4em 0 0}.resume .role span{color:var(--mute)}
.resume .eyebrow,.resume .section-heading .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
.resume .availability{display:inline-flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font-size:14px;margin:28px 0 8px}
.resume .availability span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.resume .summary,.resume .value-statement{font-size:clamp(18px,1rem + .4vw,22px);max-width:40em}
.resume .quick-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.resume .quick-facts li{padding:7px 14px;border-radius:999px;border:1px solid var(--glass-b);font-size:14px;color:var(--mute)}
.resume .primary-contacts{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 10px}
.resume .contact{padding:13px 22px;border-radius:999px;border:1px solid var(--glass-b);background:var(--glass)}
.resume .contact--primary{background:linear-gradient(180deg,#e9dcc0,#b49b6a);color:#191C18;border-color:#C8B373}
.resume .direct-contacts{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
.resume .proofs,.resume .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}
.resume .proof,.resume .case-card,.resume .job,.resume .skill-group,.resume section article{background:var(--glass);border:1px solid var(--glass-b);border-radius:24px;padding:24px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;flex-direction:column;gap:8px}
.resume .proof strong{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.05em;font-weight:560}
.resume .proof span,.resume .case-card span{color:var(--mute);font-size:14px}
.resume .proof__label{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:#C8B373!important}
.resume .case-card strong{font-size:20px;letter-spacing:-.03em;font-weight:560}
.resume .hero__secondary{font-size:14px;color:var(--mute)}
.resume .section{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line)}
.resume .section-heading{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;margin-bottom:28px}
.resume .section-heading h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.05em;margin:0;width:100%;line-height:1}
.resume .record-link{font-size:14px;color:var(--mute);text-decoration:underline}
.resume .experience-list{display:grid;gap:12px}
.resume .job{display:grid;grid-template-columns:220px 1fr;gap:24px}
.resume .job__meta{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--mute)}.resume .job__meta time{color:var(--fg);font-weight:600}
.resume .job h3{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}
.resume .job p,.resume .job li{color:var(--mute);font-size:15px}
.resume section ul{padding-left:1.1em}
.resume a{text-decoration-color:var(--accent)}
.listing{display:grid;gap:12px}
.entry{display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:baseline;padding:24px 26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(22px);transition:.4s var(--ease)}
.entry:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.entry .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C8B373}
.entry strong{font-size:clamp(20px,1rem + .8vw,28px);font-weight:560;letter-spacing:-.03em;display:block}
.entry .d{color:var(--mute);font-size:15px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}.filters span{padding:7px 14px;border-radius:999px;border:1px solid var(--glass-b);font-size:13px;color:var(--mute)}.filters span:first-child{background:var(--fg);color:var(--bg)}
.survey{display:grid;gap:10px;margin-top:12px}.survey label{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;border:1px solid var(--glass-b);font-size:14px;color:var(--mute)}
.survey i{width:14px;height:14px;border-radius:50%;border:1px solid var(--mute)}
@media(max-width:860px){.resume .proofs,.resume .case-grid{grid-template-columns:1fr}.resume .job{grid-template-columns:1fr;gap:8px}.entry{grid-template-columns:1fr;gap:6px}}
.prose h1{font-size:clamp(40px,6vw,92px);line-height:.92;letter-spacing:-.055em;font-weight:620;margin:0 0 .4em}
.prose img{max-width:100%;border-radius:18px}
.prose table{border-collapse:collapse;width:100%;font-size:15px}.prose td,.prose th{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;text-align:left}
.case-nav{display:flex;justify-content:space-between;gap:12px;margin-top:56px;flex-wrap:wrap}
/* procedural (liquid.js sets vars; defaults = no-JS shape) */
.liquid i{background:conic-gradient(from calc(var(--a) + var(--a0,0deg)),#f3eee2,#9a8a6c 12%,#e8dfc9 22%,#4d463a 34%,#d9cfb8 46%,var(--cb,#938062) 58%,#fffaf0 70%,var(--cw,#6c302d) 80%,#5d564b 88%,#f3eee2)}
.liquid i:nth-child(1){left:var(--x0,52%);top:var(--y0,2%);width:var(--w0,46vmax);height:var(--h0,40vmax)}
.liquid i:nth-child(2){left:var(--x1,30%);top:var(--y1,30%);width:var(--w1,30vmax);height:var(--h1,34vmax)}
.liquid i:nth-child(3){left:var(--x2,70%);top:var(--y2,52%);width:var(--w2,22vmax);height:var(--h2,20vmax)}
.orb{right:var(--ox,-16%);bottom:var(--oy,-38%);width:min(var(--os,58%),460px);background:conic-gradient(from calc(var(--a) + var(--a0,0deg) + 90deg),#f3eee2,#9a8a6c 12%,#e8dfc9 22%,#4d463a 34%,#d9cfb8 46%,var(--cb,#938062) 58%,#fffaf0 70%,var(--cw,#6c302d) 80%,#5d564b 88%,#f3eee2)}
/* fix: B light overrides also for system light */
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--accent:#6C302D;--bg:#efebe3}}
/* drift: leaves on water. Filter sits on each drop (static, cached); motion = transform only */
.liquid .g{filter:none}
.liquid .g>b{position:absolute;display:block;will-change:transform;animation:dx var(--tx,61s) ease-in-out var(--p,0s) infinite alternate,sc var(--ts,47s) ease-in-out var(--p,0s) infinite alternate}
.liquid .g>b:nth-child(1){left:var(--x0,52%);top:var(--y0,2%);width:var(--w0,46vmax);height:var(--h0,40vmax)}
.liquid .g>b:nth-child(2){left:var(--x1,30%);top:var(--y1,30%);width:var(--w1,30vmax);height:var(--h1,34vmax)}
.liquid .g>b:nth-child(3){left:var(--x2,70%);top:var(--y2,52%);width:var(--w2,22vmax);height:var(--h2,20vmax)}
.liquid .g>b i{inset:0;left:0;top:0;width:100%;height:100%;filter:url(#goo);border-radius:var(--br,58% 42% 47% 53%/45% 55% 45% 55%);will-change:transform;animation:rt var(--tr,83s) linear var(--p,0s) infinite var(--rv,normal),dy var(--ty,73s) ease-in-out var(--p,0s) infinite alternate}
@keyframes dx{0%{translate:0 0}23%{translate:calc(var(--m,1)*3vmax) calc(var(--m,1)*-2vmax)}51%{translate:calc(var(--m,1)*-2vmax) calc(var(--m,1)*-4vmax)}77%{translate:calc(var(--m,1)*4vmax) calc(var(--m,1)*1vmax)}100%{translate:calc(var(--m,1)*-1vmax) calc(var(--m,1)*3vmax)}}
@keyframes dy{0%{translate:0 0}31%{translate:calc(var(--n,1)*-2.5vmax) calc(var(--n,1)*2vmax)}64%{translate:calc(var(--n,1)*1.5vmax) calc(var(--n,1)*3.5vmax)}100%{translate:calc(var(--n,1)*2vmax) calc(var(--n,1)*-1.5vmax)}}
@keyframes sc{0%{scale:1 1}30%{scale:1.12 .9}62%{scale:.93 1.09}100%{scale:1.06 .95}}
@keyframes rt{to{rotate:1turn}}
@media (prefers-reduced-motion:reduce){.liquid .g>b,.liquid .g>b i{animation:none}}
/* === FADE: html.f2 (default). No contour: semi-transparent fill + backdrop blur on a pseudo-layer whose edges fade out via mask; no SVG, no JS === */
html.f2{--hl:color-mix(in srgb,var(--fg) 8%,transparent);--hl2:color-mix(in srgb,var(--fg) 18%,transparent);--F:16px;--fill:color-mix(in srgb,var(--bg) 82%,transparent);--bfill:color-mix(in srgb,var(--fg) 7%,var(--glass))}
html.f2{--F:40px;--fill:color-mix(in srgb,var(--bg) 70%,transparent)}
html.f2 :is(.bar,.top,.tile,.glass,.metrics span,.steps li,.why li,.card,.spec,.lessons,.flower,.contact,.preview,.resume .proof,.resume .case-card,.resume .job,.resume .skill-group,.resume section article){border-color:transparent!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;isolation:isolate}
html.f2 :is(.bar,.top,.tile,.glass,.metrics span,.steps li,.why li,.card,.spec,.lessons,.flower,.contact,.preview,.resume .proof,.resume .case-card,.resume .job,.resume .skill-group,.resume section article):not(.bar,.top,.preview){position:relative}
html.f2 :is(.bar,.top,.tile,.glass,.metrics span,.steps li,.why li,.card,.spec,.lessons,.flower,.contact,.preview,.resume .proof,.resume .case-card,.resume .job,.resume .skill-group,.resume section article)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 100% at 30% 0%,var(--hl),transparent 60%),var(--fill);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);box-shadow:inset 0 0 calc(var(--F)*1.6) calc(var(--F)*-.4) var(--hl);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent),linear-gradient(transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent) intersect,linear-gradient(transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent)}
html.f2 :is(.bar,.top,.tile,.glass,.metrics span,.steps li,.why li,.card,.spec,.lessons,.flower,.contact,.preview,.resume .proof,.resume .case-card,.resume .job,.resume .skill-group,.resume section article)::after{inset:-14px;backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2)}
html.f2 :is(.bar,.top)::after{--F:12px}
html.f2 :is(.bar,.top)::after{--F:26px;inset:-8px -20px}
/* buttons: soft discs of light, edges melt into background */
html.f2 :is(.pill,.btn,.num){border-color:transparent!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;position:relative;isolation:isolate}
html.f2 :is(.pill,.btn,.num)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(100% 140% at 50% 0%,var(--hl2),transparent 70%),var(--bfill);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 12px -2px var(--hl);--F:6px;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent),linear-gradient(transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent) intersect,linear-gradient(transparent,#000 var(--F),#000 calc(100% - var(--F)),transparent)}
html.f2 :is(.pill,.btn,.num)::before{inset:-8px -12px;--F:14px;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
html.f2 :is(.pill.solid,.btn-solid){color:#191C18}
html.f2 :is(.pill.solid,.btn-solid)::before{background:radial-gradient(90% 120% at 35% 10%,#fffaf0,transparent 60%),linear-gradient(180deg,#e9dcc0,#b49b6a);backdrop-filter:none}
html.f2 :is(.pill.solid,.btn-solid)::before{-webkit-mask:radial-gradient(closest-side,#000 74%,transparent);mask:radial-gradient(closest-side,#000 74%,transparent)}
html.f2 :is(.pill,.btn,.num):hover{border-color:transparent!important}
html.f2 :is(.pill,.btn,.num):hover::before{filter:brightness(1.15)}
html.f2 .tbtn{border-color:transparent}
html.f2 :is(.nav a:hover,.nav a[aria-current]){background:radial-gradient(closest-side,var(--hl2),transparent)}
/* separators: light, not lines */
html.f2 :is(.sec,.foot,.status,.cases){border-top-color:transparent}
html.f2 :is(.sec,.foot){background:radial-gradient(46% 60px at 50% 0,var(--hl),transparent) no-repeat}
html.f2 :is(.status li,.cases a,.spec div,.flower figcaption){border-color:transparent!important;background:linear-gradient(90deg,transparent,var(--hl2),transparent) no-repeat 0 100%/100% 1px}
html.f2 :is(.status li,.cases a,.spec div,.flower figcaption){background:radial-gradient(40% 8px at 50% 100%,var(--hl),transparent) no-repeat 0 100%/100% 16px}
html.f2 .cases a:hover{background:radial-gradient(60% 80% at 10% 50%,var(--hl),transparent)}
html.f2 .fine{border-left-color:transparent;background:linear-gradient(90deg,var(--hl),transparent 40%)}
html.f2 :is(a,button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* light theme: headings toward dark bronze / tobacco, >=7:1 vs page bg at lightest gradient stop */
:root[data-theme=light] h1,:root[data-theme=light] h2,:root[data-theme=light] h3,:root[data-theme=light] .h2,:root[data-theme=light] .display{color:#24170e}
:root[data-theme=light] .metal,:root[data-theme=light] .accent,:root[data-theme=light] .stat,:root[data-theme=light] .metrics b{background:conic-gradient(from var(--a,0deg),#1f150d,#553a27 14%,#3a2717 30%,#4b3322 46%,#24170e 60%,#523825 76%,#1f150d)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) h1,:root:not([data-theme=dark]) h2,:root:not([data-theme=dark]) h3,:root:not([data-theme=dark]) .h2,:root:not([data-theme=dark]) .display{color:#24170e}
:root:not([data-theme=dark]) .metal,:root:not([data-theme=dark]) .accent,:root:not([data-theme=dark]) .stat,:root:not([data-theme=dark]) .metrics b{background:conic-gradient(from var(--a,0deg),#1f150d,#553a27 14%,#3a2717 30%,#4b3322 46%,#24170e 60%,#523825 76%,#1f150d)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}}
/* light: soft veil of page colour behind headings over chrome drops (keeps 7:1) */
:root[data-theme=light] h1,:root[data-theme=light] .display,:root[data-theme=light] .stat{position:relative;isolation:isolate}
:root[data-theme=light] h1::before,:root[data-theme=light] .display::before,:root[data-theme=light] .stat::before{content:"";position:absolute;inset:-.28em -.45em;z-index:-1;background:color-mix(in srgb,var(--bg) 94%,transparent);filter:blur(18px);border-radius:48%;pointer-events:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) h1,:root:not([data-theme=dark]) .display,:root:not([data-theme=dark]) .stat{position:relative;isolation:isolate}
:root:not([data-theme=dark]) h1::before,:root:not([data-theme=dark]) .display::before,:root:not([data-theme=dark]) .stat::before{content:"";position:absolute;inset:-.28em -.45em;z-index:-1;background:color-mix(in srgb,var(--bg) 94%,transparent);filter:blur(18px);border-radius:48%;pointer-events:none}}
/* f2: buttons float — only the blurred under-layer (::before) drifts 2–4px and breathes; label stays */
html.f2 :is(.pill,.btn,.num)::before{will-change:transform,opacity;animation:bfloat var(--fd,8s) ease-in-out var(--fdl,0s) infinite alternate}
html.f2 :is(.pill,.btn,.num):nth-child(3n+1)::before{--fd:7.2s;--fdl:-1.3s}
html.f2 :is(.pill,.btn,.num):nth-child(3n+2)::before{--fd:9.4s;--fdl:-4.1s;animation-name:bfloat2}
html.f2 :is(.pill,.btn,.num):nth-child(3n)::before{--fd:6.3s;--fdl:-2.7s}
html.f2 :is(.pill,.btn,.num):nth-child(4n+3)::before{--fd:8.6s;--fdl:-5.6s}
@keyframes bfloat{0%{transform:translate(0,0) scale(1,1) rotate(0);opacity:1}35%{transform:translate(3px,-2px) scale(1.04,.97) rotate(.8deg);opacity:.88}70%{transform:translate(-2px,2.5px) scale(.97,1.03) rotate(-.6deg);opacity:.96}100%{transform:translate(1.5px,3.5px) scale(1.02,.98) rotate(.4deg);opacity:.9}}
@keyframes bfloat2{0%{transform:translate(0,0) scale(1,1) rotate(0);opacity:.92}40%{transform:translate(-3.5px,1.5px) scale(.97,1.04) rotate(-.9deg);opacity:1}75%{transform:translate(2.5px,-3px) scale(1.03,.97) rotate(.5deg);opacity:.86}100%{transform:translate(-1px,-2px) scale(1,1.02) rotate(-.3deg);opacity:.95}}
@media (prefers-reduced-motion:reduce){html.f2 :is(.pill,.btn,.num)::before{animation:none}}
/* logo: faceted star (star_c2), no rotation, very slow twinkle */
html .logo b,html .logo::before{border-radius:0;background:url(logo-star-dark.svg) center/contain no-repeat;animation:twinkle 9s ease-in-out infinite alternate;width:28px;height:28px}
:root[data-theme=light] .logo b,:root[data-theme=light] .logo::before{background-image:url(logo-star-light.svg)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .logo b,:root:not([data-theme=dark]) .logo::before{background-image:url(logo-star-light.svg)}}
@keyframes twinkle{0%{opacity:1;transform:scale(1)}45%{opacity:.8;transform:scale(.97)}100%{opacity:.95;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){html .logo b,html .logo::before{animation:none}}
html.f2 .resume .contact--primary{color:#191C18!important}
html.f2 .resume .contact--primary::after{background:radial-gradient(90% 120% at 35% 10%,#fffaf0,transparent 60%),linear-gradient(180deg,#e9dcc0,#b49b6a)}