/* ---------- tokens ---------- */
:root{
  --bg:#E8EEE9; --surface:#FFFFFF; --ink:#10241A; --muted:#52665A; --line:#CBD6CE; --g:#043A22; --gt:#fff;
  --hl:rgba(246,213,92,.78); --shadow:rgba(20,28,45,.42); --hbmix:62%;
  --disp:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --text:'Newsreader',Georgia,'Times New Roman',serif;
  --wrap:1200px; --pad:clamp(20px,5vw,64px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1511; --surface:#121D17; --ink:#E6EFE9; --muted:#9BB0A3; --line:#25362C; --g:#8EDDB0; --gt:#0C1511;
    --hl:rgba(246,213,92,.30); --shadow:rgba(0,0,0,.75); --hbmix:34%; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1511; --surface:#121D17; --ink:#E6EFE9; --muted:#9BB0A3; --line:#25362C; --g:#8EDDB0; --gt:#0C1511;
  --hl:rgba(246,213,92,.30); --shadow:rgba(0,0,0,.75); --hbmix:34%; color-scheme:dark;
}
.hue-yellow{--h:#F6D55C}.hue-pink{--h:#F4A6C0}.hue-blue{--h:#8FC6F2}.hue-green{--h:#A9DDA6}.hue-orange{--h:#F6B27C}
[class*="hue-"]{--hb:color-mix(in srgb,var(--h) var(--hbmix),var(--bg))}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19px/1.65 var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;z-index:100;border-radius:6px;font-family:var(--disp)}
.skip:focus{left:8px}
.wrapw{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
button{font:inherit;color:inherit}

/* link highlighter: links read like marked-up transcript */
.prose a,.refs a,.fbody a,.callout a,.sub a,.pubs a.ext{background:linear-gradient(transparent 58%,var(--hl) 58% 94%,transparent 94%);text-decoration:none}
.prose a:hover,.refs a:hover{background:linear-gradient(transparent 20%,var(--hl) 20% 100%)}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.mark{display:grid;place-items:center;min-width:44px;height:36px;padding:0 8px;background:var(--h);color:#1B2232;font:700 15px/1 var(--disp);letter-spacing:.02em;text-decoration:none;transform:rotate(-2deg);box-shadow:0 6px 10px -8px var(--shadow)}
.top nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px);font:500 15.5px/1 var(--disp);overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{text-decoration:none;padding:8px 2px;white-space:nowrap;background:linear-gradient(transparent 62%,var(--hl) 62% 92%,transparent 92%) no-repeat 0 0/0 100%;transition:background-size .22s}
.top nav a:hover{background-size:100% 100%}
.top nav a.ghost{color:var(--muted);font-style:italic}
.theme{background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);display:grid;place-items:center;border-radius:50%}
.theme:hover{background:var(--line)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,6vw,88px);padding-block:clamp(48px,9vw,120px) clamp(48px,7vw,96px);align-items:start}
.name{font:700 clamp(40px,6.6vw,88px)/.98 var(--disp);letter-spacing:-.035em;margin:0;font-variation-settings:"wdth" 92;text-wrap:balance}
.role{font:500 clamp(19px,2.2vw,26px)/1.25 var(--disp);margin:22px 0 0;color:var(--ink)}
.bio{margin-top:28px;max-width:34em;font-size:clamp(18px,1.6vw,21px);color:color-mix(in srgb,var(--ink) 88%,var(--bg))}
.bio p{margin:0 0 1em}
.hero-r{display:flex;flex-direction:column;gap:30px}
.avatar{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--line);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .imgbtn{left:50%;top:50%;transform:translate(-50%,-50%);bottom:auto;right:auto;white-space:nowrap}
.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.note{position:relative;background:var(--h);color:#1B2232;padding:16px 16px 24px;min-height:100px;font:600 18px/1.2 var(--disp);letter-spacing:-.005em;transform:rotate(var(--r,0deg));box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 18px -14px var(--shadow);overflow-wrap:anywhere}
.note:nth-child(even){margin-top:20px}
.note:nth-child(5){grid-column:1/2}
.addnote{align-self:start;background:transparent;border:1.5px dashed var(--muted);color:var(--muted);min-height:100px;cursor:pointer;font:500 15px var(--disp);border-radius:2px}
.intro .note{animation:drop .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0ms) + 120ms)}
@keyframes drop{from{opacity:0;transform:translateY(-18px) rotate(calc(var(--r,0deg) * -4))}to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(40px,6vw,80px)}
.sh{font:650 clamp(28px,3.4vw,40px)/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 clamp(24px,3vw,40px)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,64px) clamp(24px,3.5vw,48px)}
.card{position:relative}
.cover{display:grid;place-items:center;aspect-ratio:4/3;background:var(--hb);overflow:hidden;position:relative;text-decoration:none}
.cover.fit-contain img{width:auto;height:auto;max-width:82%;max-height:82%;background:#fff;box-shadow:0 1px 2px rgba(20,28,45,.22),0 18px 30px -16px var(--shadow)}
.cover.fit-cover img{width:100%;height:100%;object-fit:cover}
.cover .nocov{font:500 15px var(--disp);color:var(--muted)}
.card .cover img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover.fit-contain img{transform:translateY(-4px)}
.card:hover .cover.fit-cover img{transform:scale(1.02)}
.cbody{padding-top:18px}
.cbody h3{font:650 clamp(24px,2.5vw,30px)/1.12 var(--disp);letter-spacing:-.015em;margin:0}
.cbody h3 a{text-decoration:none}
.hl{background:linear-gradient(transparent 60%,var(--h) 60% 92%,transparent 92%) no-repeat 0 0/0 100%;transition:background-size .25s}
.card:hover .hl,.card:focus-within .hl{background-size:100% 100%}
.sub{margin:8px 0 0;font-size:19px;font-style:italic;color:var(--muted);line-height:1.45}
.tags{margin:10px 0 0;font:500 14.5px/1.4 var(--disp);color:var(--muted)}
.draft .cover{opacity:.55}
.badge{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--bg);font:600 12px/1 var(--disp);padding:6px 9px;border-radius:99px;z-index:2}

.pubs-g{margin:0 0 44px}
.pubs-g h3{font:650 22px/1.2 var(--disp);margin:0 0 14px;padding-left:14px;border-left:8px solid var(--h)}
.pubs-g h3 a{text-decoration:none}
.pubs{margin:0;padding:0;list-style:none;display:grid;gap:14px;max-width:62rem}
.pubs li{font-size:17.5px;line-height:1.55;padding-left:22px;text-indent:-22px;margin-left:22px}

.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,80px);align-items:start;border-top:1px solid var(--line)}
.contact p{margin:0 0 18px;max-width:28em}
.clinks{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 16px var(--disp)}
.clinks a{text-decoration:none;background:linear-gradient(transparent 62%,var(--hl) 62% 92%,transparent 92%)}
.cform{display:grid;gap:18px}
.cform label{display:grid;gap:6px;font:500 15px var(--disp)}
.cform input,.cform textarea{font:400 18px/1.4 var(--text);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.btn{justify-self:start;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:13px 26px;font:600 16px var(--disp);cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--ink) 82%,var(--h,#F6D55C))}
.fstat{margin:0;font:500 15px var(--disp);color:var(--muted);min-height:1.4em}
.notice{background:color-mix(in srgb,var(--h,#F6D55C) 40%,var(--surface));border-radius:10px;padding:14px 16px;font:500 15px/1.45 var(--disp)}

.foot{border-top:1px solid var(--line);padding-block:32px 56px;font:500 15px/1.4 var(--disp);color:var(--muted);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot a{color:inherit}
.foot .editlink{background:none;border:0;cursor:pointer;color:inherit;text-decoration:underline;padding:0}

/* ---------- case study ---------- */
.back{display:inline-block;margin:28px 0 0;font:500 15.5px var(--disp);text-decoration:none;padding:6px 0;background:linear-gradient(transparent 62%,var(--hl) 62% 92%,transparent 92%) no-repeat 0 0/0 100%;transition:background-size .22s}
.back:hover{background-size:100% 100%}
.chero{background:var(--hb);margin-top:18px}
.chero-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(36px,6vw,80px)}
.ctitle{font:700 clamp(36px,5.6vw,76px)/1 var(--disp);letter-spacing:-.03em;margin:0;text-wrap:balance}
.csub{font:italic 400 clamp(20px,2.2vw,26px)/1.4 var(--text);margin:20px 0 0;max-width:24em}
.ctags{margin:18px 0 0;font:500 15.5px/1.4 var(--disp)}
.chero .cover{background:transparent;aspect-ratio:4/3}
.chero .cover.fit-cover{box-shadow:0 20px 40px -22px var(--shadow)}
.cwrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);padding-block:clamp(40px,5vw,72px) 24px}
.cwrap>.blk,.cwrap>.insb{max-width:1040px}
.blk{position:relative;margin:clamp(48px,7vw,88px) 0}
.blk:first-child{margin-top:0}
.bh{font:650 clamp(26px,3vw,34px)/1.15 var(--disp);letter-spacing:-.018em;margin:0 0 18px;text-wrap:balance}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.b-text .bh,.b-text .prose,.b-bul .bh{max-width:40rem}
.b-text .prose{max-width:41rem}
.list{margin:16px 0 0;padding:0 0 0 1.25em;display:grid;gap:8px}
.list li::marker{color:var(--muted)}
.fig{margin:0}
.fig .imgw{position:relative}
.fig img{width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 0 0 1px var(--line),0 16px 28px -22px var(--shadow)}
.cap{font:italic 400 15.5px/1.4 var(--text);color:var(--muted);margin:10px 0 0}
.b-img.narrow .fig{max-width:640px;margin-inline:auto}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.split.flip .fig{order:2}
.split.noimg{grid-template-columns:minmax(0,40rem)}
.split .list{margin-top:14px}
.facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:28px}
.fcol{border-top:6px solid var(--h,#F6D55C);padding-top:14px}
.ft{font:650 19px/1.2 var(--disp);margin:0 0 10px}
.fbody{font-size:17.5px;line-height:1.6}
.fbody p{margin:0 0 .8em}
.fcol .list{margin-top:6px;font-size:17.5px;gap:4px}
.refs{margin:0;padding:0 0 0 1.4em;display:grid;gap:14px;font-size:17.5px;line-height:1.55;max-width:56rem}
.callout{border-left:10px solid var(--h,#F6D55C);padding:8px 0 8px 26px;max-width:46rem}
.callout-t{font:550 clamp(22px,2.8vw,32px)/1.25 var(--disp);letter-spacing:-.012em;margin:0}
.more{background:var(--surface);border-block:1px solid var(--line);margin-top:48px}
.more .sh{font-size:26px;margin-bottom:22px}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mc{display:block;text-decoration:none}
.mc .cover{aspect-ratio:4/3}
.mc span{display:block;margin-top:10px;font:600 16px/1.25 var(--disp)}
.cta{padding-block:clamp(48px,7vw,88px);max-width:var(--wrap)}
.cta p{font:550 clamp(24px,3.4vw,40px)/1.2 var(--disp);letter-spacing:-.02em;margin:0 0 22px;max-width:22em;text-wrap:balance}
.cta a.btn{text-decoration:none;display:inline-block}


.gal{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:20px}
.vid{aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;box-shadow:0 16px 28px -22px var(--shadow)}
.vid iframe{width:100%;height:100%;border:0;display:block}
.vurl{font:500 14px var(--disp);color:var(--muted);margin:8px 0 0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.ents{display:grid;gap:28px}
.ent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;padding-top:18px;border-top:1px solid var(--line)}
.em{font:500 15.5px/1.45 var(--disp);color:var(--muted)}
.et{font:650 20px/1.25 var(--disp);margin:0 0 6px}
.blk.tint{background:var(--hb);padding:clamp(20px,3vw,36px);border-radius:14px}
.phead{padding-block:clamp(36px,6vw,72px) 0}
.b-btn .btn{text-decoration:none;display:inline-block}
.modal{position:fixed;inset:0;background:rgba(10,14,22,.58);z-index:90;display:grid;place-items:center;padding:20px}
.mbox{background:var(--surface);color:var(--ink);border-radius:18px;max-width:940px;width:100%;max-height:88vh;overflow:auto;padding:26px;font-family:var(--disp);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.mh{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.mh h2{font:700 24px var(--disp);margin:0 0 4px}
.mh .hint{font:400 14px/1.4 var(--disp);color:var(--muted);margin:0}
.x2{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:99px}
.x2:hover{background:var(--line)}
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.lg.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.lg button{display:grid;gap:6px;align-content:start;text-align:left;border:1.5px solid var(--line);background:var(--bg);border-radius:14px;padding:12px;cursor:pointer;color:var(--ink)}
.lg button:hover,.lg button:focus-visible{border-color:var(--ink);background:color-mix(in srgb,#F6D55C 22%,var(--bg))}
.lg svg{width:100%;height:auto;display:block;background:var(--surface);border-radius:8px}
.lg strong{font:650 15px/1.2 var(--disp)}
.lg small{font:400 12.5px/1.35 var(--disp);color:var(--muted)}
.pgrow{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font:500 14px var(--disp)}
.pgrow span:last-child{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pgrow button{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:6px 10px}
.pgrow button.dng{color:#C0392B}
@media (max-width:680px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}.ent{grid-template-columns:1fr;gap:6px}}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero{grid-template-columns:1fr}
  .hero-r{flex-direction:row;align-items:flex-start;flex-wrap:wrap}
  .notes{flex:1 1 320px}
  .chero-in{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  body{font-size:18px}
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.flip .fig{order:0}
  .facts{grid-template-columns:1fr}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .note{min-height:84px;font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- edit mode ---------- */
.edit-only{font-family:var(--disp)}
body.editing [data-p]{outline:1px dashed transparent;outline-offset:3px;border-radius:3px;transition:outline-color .15s;min-width:2ch;cursor:text}
body.editing [data-p]:hover{outline-color:color-mix(in srgb,var(--ink) 38%,transparent)}
body.editing [data-p]:focus{outline:2px solid var(--ink);background:color-mix(in srgb,var(--h,#F6D55C) 22%,transparent)}
body.editing [data-p]:empty::before{content:attr(data-ph);color:var(--muted);opacity:.75;font-style:italic;font-weight:400}
body.editing [data-p].raw{white-space:pre-wrap}
body.editing .note [data-p]{display:block;min-height:1.2em}
.imgbtn,.bbar button,.cpanel button,.addi,.insb,.menu button,.etb button,.drawer button,.drawer .btn2{font:600 13px/1 var(--disp);cursor:pointer}
.imgbtn{position:absolute;right:10px;bottom:10px;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:9px 14px;opacity:.94;z-index:3}
.imgph{display:grid;place-items:center;min-height:180px;border:2px dashed var(--muted);border-radius:6px;color:var(--muted);font:500 15px var(--disp)}
.bbar{position:absolute;right:0;top:-18px;display:none;gap:4px;align-items:center;background:var(--ink);color:var(--bg);border-radius:99px;padding:4px 6px 4px 12px;z-index:5;max-width:100%;flex-wrap:wrap}
body.editing .blk:hover>.bbar,body.editing .blk:focus-within>.bbar,body.editing .card:hover>.bbar,body.editing .card:focus-within>.bbar{display:flex}
.bbar .bt{font:600 12px var(--disp);opacity:.75;margin-right:4px}
.bbar button{background:transparent;color:inherit;border:0;padding:7px 9px;border-radius:99px}
.bbar button:hover{background:rgba(255,255,255,.18)}
.bbar button.dng:hover{background:#C0392B;color:#fff}
.card>.bbar{top:8px;right:8px}
.insb{display:block;width:100%;margin:-30px 0 -30px;height:36px;background:transparent;border:0;position:relative;color:var(--muted);opacity:0}
.insb::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--muted)}
.insb span{position:relative;background:var(--bg);padding:0 12px;font:600 13px var(--disp)}
.insb:hover,.insb:focus-visible{opacity:1}
.addi{background:none;border:1.5px dashed var(--muted);color:var(--muted);border-radius:99px;padding:6px 12px;margin-top:10px}
.addi:hover{color:var(--ink);border-color:var(--ink)}
.newcard{display:grid;place-items:center;aspect-ratio:4/3;border:2px dashed var(--muted);background:transparent;color:var(--muted);cursor:pointer;font:600 17px var(--disp);width:100%}
.newcard:hover{color:var(--ink);border-color:var(--ink)}
.cpanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 8px;max-width:1040px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;font-size:14px}
.cpanel strong{font:650 15px var(--disp)}
.cpanel label{display:flex;gap:8px;align-items:center;font:500 14px var(--disp)}
.cpanel select{font:500 14px var(--disp);padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.cpanel button{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:8px 13px}
.cpanel button:hover{border-color:var(--ink)}
.cpanel button.dng{color:#C0392B}
.sw{width:26px;height:26px;border-radius:50%!important;padding:0!important;background:var(--h)!important;border:2px solid transparent!important}
.sw[aria-pressed="true"]{border-color:var(--ink)!important}
.etb{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:flex;gap:6px;align-items:center;background:var(--ink);color:var(--bg);border-radius:99px;padding:8px 10px 8px 18px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center;font-family:var(--disp)}
.etb .est{font:500 13px var(--disp);opacity:.8;margin-right:6px}
.etb button{background:transparent;border:0;color:inherit;padding:10px 13px;border-radius:99px}
.etb button:hover{background:rgba(255,255,255,.16)}
.etb button.pri{background:var(--h,#F6D55C);color:#1B2232}
.menu{position:absolute;z-index:70;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45);display:grid;min-width:220px}
.menu button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:8px}
.menu button:hover{background:var(--bg)}
.menu small{display:block;font:400 12.5px var(--disp);color:var(--muted);margin-top:3px}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--surface);color:var(--ink);border:1px solid var(--ink);border-radius:12px;padding:12px 16px;z-index:80;font:500 14px var(--disp);display:flex;gap:14px;align-items:center;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
.toast button{background:none;border:0;font:700 14px var(--disp);text-decoration:underline;cursor:pointer}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--surface);color:var(--ink);border-left:1px solid var(--line);z-index:60;overflow:auto;padding:22px 22px 120px;transform:translateX(102%);transition:transform .25s;font-family:var(--disp)}
.drawer.open{transform:none}
.drawer h2{font:700 20px var(--disp);margin:0 0 4px}
.drawer h3{font:650 15px var(--disp);margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.drawer label{display:grid;gap:5px;font:500 13.5px var(--disp);margin:12px 0}
.drawer input[type=text],.drawer input[type=email],.drawer input[type=url],.drawer textarea{font:400 15px/1.4 var(--disp);padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
.drawer .hint{font:400 12.5px/1.4 var(--disp);color:var(--muted);margin:0}
.drawer .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.drawer .btn2{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:10px 14px}
.drawer .btn2:hover{border-color:var(--ink)}
.drawer .btn2.dng{color:#C0392B}
.drawer .x{position:absolute;top:14px;right:14px;background:none;border:0;font-size:22px;padding:6px 10px;cursor:pointer}
@media print{.etb,.drawer,.toast,.bbar,.top{display:none!important}}

/* ---------- v2: classic green theme, new header/hero/about/experience/footer ---------- */
a.btn{text-decoration:none;display:inline-block}
.btn{background:var(--g);color:var(--gt)}.btn:hover{background:color-mix(in srgb,var(--g) 85%,#000)}
.top nav{margin-left:auto}.top nav a{color:var(--g)}
.soc{display:flex;gap:8px;align-items:center}
.soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--g);border:1px solid var(--line);transition:background .2s,color .2s}
.soc a:hover{background:var(--g);color:var(--gt);border-color:var(--g)}
.soc svg{width:16px;height:16px;fill:currentColor}
.top nav a.dl{background:var(--g);color:var(--gt);padding:11px 18px;border-radius:10px;font-weight:600}
.top nav a.dl:hover{background:color-mix(in srgb,var(--g) 85%,#000)}
.hero{display:block;padding-block:clamp(40px,7vw,96px) 0}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:start}
.hi{font:500 18px var(--disp);color:var(--g);margin:0 0 8px}
.name{color:var(--g);font-size:clamp(40px,5.6vw,80px)}
.hr{padding-top:clamp(8px,4vw,56px)}
.role{font:600 clamp(18px,2vw,22px)/1.3 var(--disp);color:var(--g);margin:0}
.bio{max-width:none;margin-top:14px;font:400 clamp(16px,1.4vw,18.5px)/1.65 var(--disp)}
.collab{display:inline-block;margin-top:18px;font:700 18px var(--disp);color:var(--g);text-decoration:none;border-bottom:2px solid transparent}
.collab:hover{border-color:var(--g)}.collab i{font-style:normal;display:inline-block;transition:transform .2s}.collab:hover i{transform:translateX(5px)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:end;margin-top:clamp(24px,3vw,44px)}
.ncol{display:flex;flex-direction:column;gap:26px;padding-bottom:clamp(20px,5vw,72px)}
.ncol.l{align-items:flex-end;gap:30px}.ncol.r{align-items:flex-start;padding-left:clamp(0px,3.5vw,48px)}
.ncol.l{justify-content:flex-end}
.ncol.r .notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;width:100%;max-width:360px}
.ncol .note{min-height:96px;padding:14px 12px 22px;font-size:16px;overflow-wrap:break-word}
.stat{font-family:var(--disp);color:var(--g)}.sn{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1}.sl{font:500 16px/1.3 var(--disp);margin-top:4px}
.ncol.l .stat{text-align:right}
.sq{width:96px;height:28px;stroke:var(--ink);fill:none;stroke-width:2.5;stroke-linecap:round;margin-top:8px}
.pw{position:relative;width:clamp(230px,25vw,330px)}
.pw::before,.pw::after{content:"";position:absolute;background:var(--g);border-radius:99px}
.pw::before{width:72%;height:25%;right:-8%;top:10%;transform:rotate(-42deg)}
.pw::after{width:72%;height:22%;right:-10%;top:54%}
.photo{position:relative;z-index:1;min-height:260px}
.photo img{width:100%;height:auto;display:block}
.photo .imgbtn{left:50%;bottom:16px;right:auto;transform:translateX(-50%);white-space:nowrap}
.band{background:var(--surface)}
.about{padding-block:clamp(48px,7vw,96px)}
.abtn{font:400 clamp(30px,4.2vw,52px)/1.08 var(--disp);letter-spacing:-.02em;margin:0 0 22px}
.abp{max-width:42rem;font:400 clamp(17px,1.5vw,20px)/1.7 var(--disp)}.abp p{margin:0 0 1em}
.abs{display:flex;flex-wrap:wrap;gap:20px clamp(28px,6vw,72px);margin-top:24px;color:var(--g)}
.abs b{display:block;font:700 clamp(38px,5vw,60px)/1 var(--disp)}.abs span{font:500 17px var(--disp)}
.lab{font:600 13px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:56px 0 14px}
.caps{columns:3 220px;column-gap:40px;margin:0;padding-left:1.1em;font:400 clamp(17px,1.5vw,20px)/1.9 var(--disp)}.caps li{break-inside:avoid}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.tc{background:var(--bg);border-top:4px solid var(--g);border-radius:6px;padding:24px 26px 14px}
.tc h3{font:700 15px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--g);margin:0 0 10px}
.tl{list-style:none;margin:0;padding:0}.tl li{padding:12px 0;border-top:1px solid var(--line);font:400 16px/1.45 var(--disp)}.tl li:first-child{border-top:0}
.exp{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.exg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.exs{font:400 clamp(32px,4.4vw,56px)/1.05 var(--disp);letter-spacing:-.02em;margin:0;position:sticky;top:96px}
.xp{position:relative;padding:0 0 clamp(32px,4vw,52px) 64px}
.xp::before{content:"";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;background:var(--g);box-shadow:0 0 0 4px var(--surface),0 0 0 5.5px var(--g)}
.xp::after{content:"";position:absolute;left:9.5px;top:42px;bottom:8px;border-left:1.5px dashed var(--ink)}
.xp:last-of-type::after{display:none}
.xp h3{font:400 clamp(26px,3vw,36px)/1.15 var(--disp);margin:0}
.xm{display:flex;flex-wrap:wrap;font:500 14.5px/1.4 var(--disp);color:var(--muted);margin:8px 0 14px}
.xm span+span::before{content:"•";margin:0 10px}.xm .rl{font-weight:800}
.xpb p{margin:0 0 1.1em;font:400 16.5px/1.7 var(--disp)}
.xmore{display:none}.xp.open .xmore,body.editing .xmore{display:block}
.rm{background:none;border:0;padding:0;font:500 16px var(--disp);cursor:pointer;color:var(--ink)}.rm:hover{text-decoration:underline}
body.editing .xp:hover>.bbar,body.editing .xp:focus-within>.bbar{display:flex}
#work{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.card:not(.framed) .cover,.card:not(.framed) .cover.fit-contain{background:#18181b;border-radius:16px;box-shadow:0 2px 14px -6px rgba(0,0,0,.28)}
.card:not(.framed) .cover.fit-contain img,.card:not(.framed) .cover.fit-cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;background:none;box-shadow:none}
.card:not(.framed):hover .cover.fit-contain img,.card:not(.framed):hover .cover.fit-cover img{transform:scale(1.02)}
.cbody{padding-top:16px}.cbody h3{font:700 clamp(21px,2vw,25px)/1.2 var(--disp);color:color-mix(in srgb,var(--ink) 62%,var(--bg))}
#work .sh{font:400 clamp(26px,3vw,34px)/1.1 var(--disp);color:var(--muted)}
.cover{border-radius:18px;box-shadow:0 14px 30px -18px var(--shadow)}
.cbody h3{font:700 clamp(20px,2vw,24px)/1.2 var(--disp)}
.sub{font:400 clamp(18px,1.8vw,21px)/1.35 var(--disp);color:var(--muted);margin:6px 0 0}.tags{font:400 17px/1.5 var(--disp);color:var(--ink);margin:6px 0 0}
.testi{background:var(--bg)}.testi .wrapw{padding-block:clamp(40px,6vw,88px)}
.tq{max-width:46rem;font:400 clamp(18px,1.7vw,22px)/1.75 var(--disp);color:var(--g)}.tq p{margin:0 0 1em}
.ft2{background:var(--surface);border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,6vw,96px);padding-block:clamp(40px,6vw,80px)}
.flogo{font:800 22px/.95 var(--disp);color:var(--g);letter-spacing:-.02em;max-width:8em}
.flinks{display:grid;gap:14px;margin:28px 0 22px;font:500 15px var(--disp)}.flinks a{text-decoration:none}
.fh{font:400 clamp(32px,4.4vw,56px)/1.12 var(--disp);letter-spacing:-.02em;margin:0 0 26px;max-width:14em}
.fh em{font-style:normal;color:color-mix(in srgb,var(--g) 70%,var(--surface))}
.ft2 .foot{border-top:1px solid var(--line);padding-block:20px 28px}
@media (max-width:860px){
  .hrow,.exg,.fgrid{grid-template-columns:1fr}.tri{grid-template-columns:1fr}.exs{position:static}
  .stage{grid-template-columns:1fr 1fr;align-items:start}
  .pw{grid-column:1/-1;grid-row:1;justify-self:center;width:min(300px,80%)}
  .ncol{padding-bottom:20px}.ncol.l,.ncol.l .stat{align-items:flex-start;text-align:left}
}
@media (max-width:620px){.soc{display:none}.xp{padding-left:46px}}

/* ---------- v3: broader hero, docx-style stage ---------- */
.hero{max-width:min(1400px,100%)}
.hrow{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px)}
.name{font-size:clamp(40px,5.4vw,78px)}
.stage{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(0,1.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(16px,2.5vw,32px)}
.sl2{display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-bottom:clamp(30px,6vw,90px)}
.pw{width:clamp(300px,34vw,500px)}
.pw::before{width:70%;height:25%;right:-9%;top:6%;transform:rotate(-42deg)}
.pw::after{width:66%;height:22%;right:-10%;top:58%}
.photo{min-height:0;aspect-ratio:10/11;border-radius:26px 26px 0 0;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.rc{display:grid;grid-template-columns:auto minmax(0,360px);gap:clamp(20px,3.5vw,56px);justify-content:end;align-items:end}
.sr2{align-self:center;margin-bottom:clamp(20px,5vw,80px)}
.rc .notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;list-style:none;margin:0;padding:0}
.rc .note{min-height:96px;padding:14px 12px 22px;font-size:16px;overflow-wrap:break-word}
@media (max-width:980px){
  .stage{grid-template-columns:1fr 1fr;align-items:start}
  .pw{grid-column:1/-1;grid-row:1;justify-self:center;width:min(380px,86%)}
  .sl2{grid-row:2;align-items:flex-start;text-align:left;padding:0}
  .rc{grid-column:2;grid-row:2;grid-template-columns:1fr;justify-content:stretch}
  .sr2{margin:0}
}

/* v3b */
.stage{grid-template-columns:minmax(120px,1fr) auto minmax(280px,340px)}
.pw{width:clamp(300px,31vw,460px)}
.photo{aspect-ratio:1/1.04}
.rc{display:flex;flex-direction:column;align-items:flex-start;gap:20px;justify-self:end;width:100%}
.sr2{margin:0;align-self:flex-start}
.rc .notes{width:100%}
@media (max-width:980px){.stage{grid-template-columns:1fr 1fr}.rc{justify-self:stretch}}

/* v3c: cutout photo, natural ratio, flush to the band like the docx */
.photo{aspect-ratio:auto;min-height:0}
.photo img{height:auto;object-fit:contain;display:block}
.pw{width:clamp(300px,32vw,470px)}
.pw::before{width:74%;height:24%;right:-12%;top:12%}
.pw::after{width:68%;height:20%;right:-12%;top:56%}

/* v3d: stats hug the photo, notes shifted right */
.stage{grid-template-columns:minmax(120px,1fr) auto minmax(130px,170px) minmax(250px,320px);column-gap:clamp(16px,2vw,32px)}
.rc{display:contents}
.sl2{align-self:end;padding-bottom:clamp(40px,7vw,110px)}
.sr2{align-self:start;margin:clamp(170px,15vw,230px) 0 0;padding-left:clamp(20px,2.6vw,40px)}
.rc .notes{align-self:end;margin-left:clamp(0px,1.6vw,28px);width:100%}
@media (max-width:1240px){
  .stage{grid-template-columns:1fr 1fr;align-items:start}
  .pw{grid-column:1/-1;grid-row:1;justify-self:center;width:min(420px,88%)}
  .sl2{grid-row:2;grid-column:1;align-items:flex-start;text-align:left;padding:0}
  .sr2{grid-row:2;grid-column:2;margin:0;padding:0}
  .rc .notes{grid-column:1/-1;grid-row:3;margin:8px 0 0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
.sr2 .sl,.sl2 .sl{white-space:nowrap}
.stage{grid-template-columns:minmax(120px,1fr) auto minmax(150px,190px) minmax(250px,310px)}
@media (max-width:1240px){.stage{grid-template-columns:1fr 1fr}}

/* ---------- Cal.com Booking Modal & Admin Toolbar Enhancements ---------- */
.cal-modal{position:fixed;inset:0;background:rgba(10,14,22,.68);z-index:95;display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}
.cal-box{background:var(--surface);color:var(--ink);border-radius:18px;max-width:980px;width:100%;height:min(88vh,780px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.65);border:1px solid var(--line)}
.cal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font:600 16px var(--disp)}
.cal-head a{font:500 13.5px var(--disp);color:var(--muted);text-decoration:underline;margin-left:auto;margin-right:14px}
.cal-close{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:99px;color:var(--ink)}
.cal-close:hover{background:var(--line)}
.cal-frame{flex:1;width:100%;border:0;background:#fff}
.etb button.pub-live{background:#8EDDB0;color:#0C1511;font-weight:700}
.etb button.pub-live:hover{background:#A9DDA6}

/* ---------- Interactive Booking Scheduler Modal ---------- */
.bk-modal{position:fixed;inset:0;background:rgba(8,14,11,.74);z-index:95;display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}
.bk-box{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:780px;width:100%;max-height:90vh;overflow:auto;padding:28px;font-family:var(--disp);box-shadow:0 30px 80px -20px rgba(0,0,0,.65)}
.bk-box.wide-embed{max-width:980px;height:min(88vh,780px);padding:0;display:flex;flex-direction:column;overflow:hidden}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.bk-box.wide-embed .bk-top{padding:14px 20px;margin:0;border-bottom:1px solid var(--line);align-items:center}
.bk-badge{display:inline-block;background:color-mix(in srgb,var(--g) 18%,transparent);color:var(--g);font:700 11.5px/1 var(--disp);padding:5px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.bk-top h2{font:700 clamp(22px,2.5vw,28px)/1.15 var(--disp);margin:0}
.bk-top p{margin:4px 0 0;color:var(--muted);font-size:14px}
.bk-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.bk-sec-label{font:650 13px/1.2 var(--disp);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 10px}
.bk-dur{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bk-dur button,.bk-slots button{background:var(--bg);border:1.5px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 13px;font:600 13.5px/1.2 var(--disp);cursor:pointer;transition:all .15s}
.bk-dur button.active,.bk-slots button.active{background:var(--g);color:var(--gt);border-color:var(--g)}
.bk-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.bk-slots button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.bk-field{display:grid;gap:5px;font:500 13.5px var(--disp);margin-bottom:12px}
.bk-field input,.bk-field select,.bk-field textarea{font:400 15px/1.4 var(--disp);padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);width:100%}
.bk-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.bk-note{font-size:12.5px;color:var(--muted);line-height:1.4}
.bk-ok{text-align:center;padding:28px 16px}
.bk-ok h3{font:700 24px var(--disp);color:var(--g);margin:0 0 8px}
@media (max-width:700px){.bk-grid{grid-template-columns:1fr}}