:root{
  --bg:#fffeea; --card:#ffffff; --ink:#1a1a1a; --dim:#5d5e53; --line:rgba(26,26,26,.12);
  --green:#044f45; --green-2:#0a6a5c; --lav:#ebd8fb; --orange:#ffa748; --coral:#ff6b4d; --pink:#f7b5f0;
  --direct:#044f45; --transferable:#8a5cf0; --partial:#ff9a2e; --none:#ff6b4d;
  --direct-t:#044f45; --transferable-t:#6a3fc4; --partial-t:#a85500; --none-t:#c23a20;
  --direct-bg:#e3f2e6; --transferable-bg:#f1e6fd; --partial-bg:#ffeed4; --none-bg:#ffe1d9;
  --sans:"Figtree","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
main{max-width:1120px;margin:0 auto;padding:0 20px 80px}
section{padding:76px 0 8px}
.kicker{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 16px}
h1,h2,h3{font-family:var(--sans);margin:0;letter-spacing:-.02em}
h2{font-size:clamp(28px,4.4vw,48px);font-weight:700;line-height:1.08;margin-bottom:20px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink);max-width:58ch}
.lede.small{font-size:16px;color:var(--dim)}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,56px);
  background:rgba(255,254,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mark{font:800 26px var(--sans);text-decoration:none;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.mark i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green)}
.top-cta{display:flex;gap:12px}
.pill{font:600 15px var(--sans);text-decoration:none;border-radius:999px;padding:13px 26px;border:1.5px solid var(--green);color:var(--green);background:transparent;display:inline-block;cursor:pointer;transition:transform .15s,background .15s}
.pill:hover{transform:translateY(-1px)}
.pill.solid{background:var(--green);color:#fffeea}
.pill.solid:hover{background:var(--green-2)}
@media(max-width:620px){.top-cta .pill:not(.solid){display:none}.pill{padding:11px 20px}}

/* hero */
.hero{position:relative;overflow:hidden;margin:0 calc(50% - 50vw);padding:72px 20px 96px;text-align:center}
.hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto}
.swirl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.swirl path{fill:none;stroke:var(--lav);stroke-linecap:round}
.blob{position:absolute;z-index:1;pointer-events:none}
.blob-l{left:-110px;bottom:-70px;width:320px;height:270px;background:var(--orange);border-radius:58% 42% 52% 48%/52% 56% 44% 48%}
.blob-l::after{content:"";position:absolute;right:46px;top:-34px;width:96px;height:96px;border-radius:50%;background:var(--ink)}
.blob-r{right:-100px;bottom:-60px;width:300px;height:280px;background:var(--coral);border-radius:46% 54% 44% 56%/56% 46% 54% 44%}
.blob-r::after{content:"";position:absolute;left:40px;top:-30px;width:110px;height:78px;border-radius:50px;border:10px solid var(--pink);background:transparent}
@media(max-width:760px){.blob{display:none}}
.eyebrow{display:inline-flex;gap:14px;align-items:center;font:800 24px var(--sans);letter-spacing:-.02em;margin:0}
.eyebrow span{font:400 14px var(--sans);color:var(--dim)}
.dates{font:500 15px var(--sans);letter-spacing:.08em;color:var(--dim);margin:20px 0 22px}
h1{font-weight:500}
.h1a{display:block;font-size:clamp(34px,5.6vw,66px);line-height:1.05;color:var(--ink)}
.h1b{display:block;font-size:clamp(42px,8vw,104px);line-height:.98;font-weight:800;color:var(--green);letter-spacing:-.035em;margin-top:6px}
.hero .lede{margin:28px auto 0;text-align:center;max-width:46ch}
.hero .lede em{font-style:italic}

.panel{margin:36px auto 0;max-width:760px;text-align:left;background:var(--card);border:1.5px solid rgba(4,79,69,.25);border-radius:28px;padding:18px;box-shadow:0 18px 50px rgba(4,79,69,.12)}
textarea{width:100%;resize:vertical;min-height:170px;background:#fffef5;color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:16px;font:400 16px/1.55 var(--sans)}
textarea:focus{outline:2px solid var(--green);outline-offset:1px}
.panel-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.btn{font:600 15px var(--sans);border-radius:999px;padding:13px 24px;border:1.5px solid var(--green);background:transparent;color:var(--green);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.tab:focus-visible,.chip:focus-visible,.ev:focus-visible,.pill:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn.primary{background:var(--green);color:#fffeea}
.btn.primary:hover{background:var(--green-2)}
.btn.ghost:hover{background:rgba(4,79,69,.07)}
.btn.small{padding:7px 16px;font-size:13.5px}
.btn .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:6px}
.btn[aria-pressed="true"]{border-color:var(--coral);color:var(--none-t)}
.btn[aria-pressed="true"] .dot{animation:pulse 1s infinite}
.strict{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);cursor:pointer;margin-left:auto}
.strict input{position:absolute;opacity:0}
.switch{width:38px;height:22px;border-radius:99px;background:#d8d7c6;position:relative;transition:.2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.strict input:checked + .switch{background:var(--green)}
.strict input:checked + .switch::after{left:19px}
.strict input:focus-visible + .switch{outline:3px solid var(--orange);outline-offset:2px}
.samples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:13.5px;color:var(--dim)}
.samples button{font:500 13.5px var(--sans);background:var(--lav);border:0;color:var(--ink);padding:6px 14px;border-radius:99px;cursor:pointer}
.samples button:hover{background:#e0c5f8}
.hint{min-height:20px;margin:10px 2px 0;font-size:13.5px;color:var(--none-t)}

/* stage */
.stage{padding-top:52px}
.stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px}
.thoughts{font:700 clamp(22px,3.4vw,34px) var(--sans);letter-spacing:-.02em;color:var(--green);margin:0}
.thoughts::after{content:"";display:inline-block;width:3px;height:.9em;background:var(--green);margin-left:6px;vertical-align:-.1em;animation:blink 1s steps(1) infinite}
.canvas-wrap{border:1.5px solid rgba(4,79,69,.2);border-radius:28px;background:var(--card);padding:12px;margin-top:14px;overflow:hidden;box-shadow:0 12px 40px rgba(4,79,69,.08)}
canvas{display:block;max-width:100%}
.legend{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;margin:14px 4px 0;font-size:13.5px;color:var(--dim)}
.legend li::before{content:"";display:inline-block;width:20px;height:0;border-top:3px solid;margin-right:8px;vertical-align:middle}
.l-direct::before{border-color:var(--direct)}.l-transferable::before{border-color:var(--transferable);border-top-style:dotted!important}
.l-partial::before{border-color:var(--partial);border-top-style:dashed!important}.l-none::before{border-color:var(--none);opacity:.5}

/* report */
.report{animation:rise .6s ease both}
.read h2{font-size:clamp(26px,3.8vw,42px);max-width:28ch;font-weight:700;color:var(--green)}
.meter{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:4px;margin:24px 0 16px;max-width:660px}
.meter i{display:block;min-width:10px;border-radius:99px;transition:flex-grow .8s}
.m-direct{background:var(--direct)}.m-transferable{background:var(--transferable)}.m-partial{background:var(--partial)}.m-none{background:var(--none)}
.counts{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--dim)}
.counts b{color:var(--ink);font-size:22px;font-weight:800;margin-right:5px}
.modeNote{font:italic 400 16px var(--sans);color:var(--dim);margin:14px 0 0}
.ai{margin:26px 0 0;padding:22px 26px;border-radius:28px;background:var(--lav);max-width:780px}
.ai h3{font:700 clamp(21px,2.8vw,28px)/1.15 var(--sans);margin:0 0 10px;color:var(--green)}
.ai p{margin:0 0 8px;color:var(--ink)}
.ai small{display:block;margin-top:12px;color:#5b4b73;font-size:12.5px}
.aistat{font-size:13.5px;color:var(--dim);margin:18px 0 0}
.aistat::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;animation:pulse 1s infinite}
.aistat.off::before{animation:none;background:#b8b7a4}
.summary{display:grid;gap:14px;margin-top:34px}
@media(min-width:760px){.summary{grid-template-columns:repeat(2,1fr)}}
.sum{border-radius:24px;padding:18px 22px;background:var(--card);border:1px solid var(--line)}
.sum h4{margin:0 0 8px;font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.sum p{margin:0;font-size:15.5px}
.sum.best{background:var(--lav)}.sum.best h4{color:var(--green)}
.sum.direct{background:var(--direct-bg)}.sum.direct h4{color:var(--direct-t)}
.sum.transferable{background:var(--transferable-bg)}.sum.transferable h4{color:var(--transferable-t)}
.sum.partial{background:var(--partial-bg)}.sum.partial h4{color:var(--partial-t)}
.sum.none{background:var(--none-bg)}.sum.none h4{color:var(--none-t)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:42px 0 16px}
.chip{font:600 13.5px var(--sans);padding:8px 16px;border-radius:99px;border:1.5px solid var(--green);background:transparent;color:var(--green);cursor:pointer}
.chip[aria-pressed="true"]{color:#fffeea;background:var(--green)}
.cards{display:grid;gap:14px}
@media(min-width:820px){.cards{grid-template-columns:repeat(2,1fr);align-items:start}}
.rc{border:1px solid var(--line);border-radius:24px;padding:18px 22px 14px;background:var(--card);position:relative;overflow:hidden;animation:rise .5s ease both}
.rc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.lvl-direct{--c:var(--direct);--t:var(--direct-t)}.lvl-transferable{--c:var(--transferable);--t:var(--transferable-t)}
.lvl-partial{--c:var(--partial);--t:var(--partial-t)}.lvl-none{--c:var(--none);--t:var(--none-t)}
.rc-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.badge{font:700 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.rc-q{font:700 20px/1.25 var(--sans);letter-spacing:-.01em;margin:0 0 8px;word-break:break-word}
.rc-t{margin:0;font-size:15px;color:var(--dim)}
.lvl-none .rc-t{color:var(--none-t)}
.rc-ai{font:italic 500 16.5px/1.35 var(--sans);color:var(--green);margin:12px 0 0;padding:10px 14px;background:var(--lav);border-radius:16px}
.ev{font:600 13.5px var(--sans);background:none;border:0;color:var(--green);cursor:pointer;padding:8px 0 0;margin-top:6px}
.ev:hover{text-decoration:underline}
.drawer{margin-top:10px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:12px;font-size:14px;color:var(--dim)}
.drawer b{color:var(--ink)}
.drawer ul{margin:4px 0 0;padding-left:18px}
.drawer a{color:var(--green);font-weight:600}

/* story */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px}
.tab{font:600 14.5px var(--sans);padding:10px 18px;border-radius:99px;border:1.5px solid var(--green);background:transparent;color:var(--green);cursor:pointer}
.tab[aria-selected="true"]{background:var(--green);color:#fffeea}
.story-body{display:grid;gap:30px;border-radius:32px;padding:26px;background:var(--card);border:1.5px solid rgba(4,79,69,.2);box-shadow:0 12px 40px rgba(4,79,69,.07)}
@media(min-width:860px){.story-body{grid-template-columns:1.1fr .9fr;padding:40px}}
.story-body h3{font-size:clamp(30px,4.6vw,52px);font-weight:800;color:var(--green);letter-spacing:-.03em;line-height:1}
.story-body .kind{color:var(--dim);margin:10px 0 4px;font-size:15px}
.story-body .tag{font-size:18px;margin:12px 0}
.note{display:inline-block;margin:8px 0 0;padding:6px 14px;border-radius:99px;background:var(--orange);color:var(--ink);font:600 14px var(--sans)}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--lav)}
.timeline li{position:relative;padding:0 0 20px 18px}
.timeline li::before{content:"";position:absolute;left:-28px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--green)}
.timeline b{display:block;font:700 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.timeline span{font-size:15.5px}
.did{margin:0;padding-left:18px;font-size:15.5px}
.did li{margin:5px 0}
.sub{font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px}
.skillchips{display:flex;flex-wrap:wrap;gap:7px}
.skillchips span{font:500 13px var(--sans);padding:5px 12px;border-radius:99px}
.skillchips .lvl-direct{background:var(--direct-bg);color:var(--direct-t)}
.skillchips .lvl-transferable{background:var(--transferable-bg);color:var(--transferable-t)}
.skillchips .lvl-partial{background:var(--partial-bg);color:var(--partial-t)}
.visit{display:inline-block;margin-top:16px;color:var(--green);font-weight:700}

/* gaps */
.gap-grid{display:grid;gap:14px;margin-top:22px}
@media(min-width:700px){.gap-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gap-grid{grid-template-columns:repeat(3,1fr)}}
.gg{border-radius:24px;padding:18px 22px;background:var(--none-bg)}
.gg h4{margin:0 0 8px;font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--none-t)}
.gg ul{margin:0;padding-left:18px;font-size:15px}
.gg li{margin:5px 0}.gg em{color:var(--dim);font-style:normal;font-size:13.5px}

/* contact */
.contact{padding-top:96px;text-align:center}
.contact .lede{margin:0 auto}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;justify-content:center}
.links a{padding:13px 26px;border:1.5px solid var(--green);border-radius:99px;text-decoration:none;font-weight:600;color:var(--green)}
.links a:first-child{background:var(--green);color:#fffeea}
.links a:hover{transform:translateY(-1px)}
footer{border-top:1px solid var(--line);padding:24px 20px;text-align:center;color:var(--dim);font-size:13.5px}
footer p{margin:0}

/* voice-first (Wispr Flow) */
.voice{display:flex;gap:14px;align-items:flex-start;background:var(--lav);border-radius:20px;padding:14px 18px;margin-bottom:14px}
.voice p{margin:0;font-size:14.5px;line-height:1.5}
.voice strong{color:var(--green)}
.voice a{color:var(--green);font-weight:700;white-space:nowrap;margin-left:4px}
.voice-ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);position:relative;margin-top:2px}
.voice-ico::before,.voice-ico::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid var(--green);transform:translate(-50%,-50%);animation:ring 2.2s ease-out infinite}
.voice-ico::before{width:34px;height:34px}.voice-ico::after{width:34px;height:34px;animation-delay:1.1s}
.nudge{margin:10px 2px 0;padding:10px 14px;border-radius:14px;background:var(--direct-bg);color:var(--direct-t);font-size:14px}
.fixes{margin:10px 2px 0;font-size:13.5px;color:var(--dim)}
@keyframes ring{from{width:34px;height:34px;opacity:.6}to{width:70px;height:70px;opacity:0}}

/* reference badge on cards */
.refbadge{font:700 11px var(--sans);letter-spacing:.04em;background:var(--orange);color:var(--ink);padding:3px 11px;border-radius:99px}
h2 em{font-style:italic;color:var(--green)}

/* creative side + reference */
.subhead{font:700 clamp(22px,3vw,32px) var(--sans);margin:60px 0 8px;letter-spacing:-.02em}
.quote{margin:30px 0 0;padding:clamp(24px,4vw,46px);border-radius:36px;background:var(--lav);position:relative;overflow:hidden}
.quote::before{content:"\201C";position:absolute;left:20px;top:-14px;font:800 150px/1 var(--sans);color:var(--green);opacity:.16}
.quote blockquote{margin:0;position:relative}
.quote p{font:500 clamp(18px,2.1vw,23px)/1.55 var(--sans);margin:0 0 16px;max-width:64ch}
.quote mark{background:linear-gradient(transparent 52%,var(--orange) 52%);color:inherit;padding:0 3px;font-weight:700;border-radius:3px}
.quote figcaption{font:700 14.5px var(--sans);color:var(--green);margin-top:10px;position:relative}
.tells{display:grid;gap:14px;margin-top:24px}
@media(min-width:820px){.tells{grid-template-columns:repeat(3,1fr)}}
.tell{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:24px}
@media(min-width:820px){.tell:nth-child(1){transform:rotate(-.7deg)}.tell:nth-child(2){transform:translateY(10px)}.tell:nth-child(3){transform:rotate(.7deg)}}
.tell h4{margin:0 0 10px;font:800 clamp(24px,2.8vw,32px)/1.02 var(--sans);color:var(--green);letter-spacing:-.025em}
.tell p{margin:0;font-size:15.5px;color:var(--dim)}
.tell small{display:block;margin-top:12px;font-size:12.5px;color:var(--green);font-weight:700}
.receipts{display:grid;gap:12px;margin-top:20px}
.rcp{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px 24px}
@media(min-width:820px){.rcp{grid-template-columns:1fr 1fr;gap:28px}}
.rcp h5{margin:0 0 6px;font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.rcp p{margin:0;font-size:15.5px}
.rcp .said p{font-style:italic;font-weight:500}
.rcp .rnote{margin-top:8px;font-size:13.5px;color:var(--dim)}
.stat{display:inline-block;margin-top:10px;font:700 12px var(--sans);padding:4px 12px;border-radius:99px}
.stat.same{background:var(--direct-bg);color:var(--direct-t)}
.stat.rel{background:var(--lav);color:var(--transferable-t)}
.stat.only{background:var(--partial-bg);color:var(--partial-t)}
.exhibit{margin-top:44px;padding:26px 30px;border-radius:32px;background:var(--green);color:#fffeea}
.exhibit p{margin:0 0 8px;font:500 clamp(18px,2.2vw,24px)/1.35 var(--sans)}
.exhibit p:last-child{margin:0;opacity:.85;font-size:clamp(16px,1.8vw,19px)}
.exhibit strong{color:var(--orange)}

/* full resume */
.resume-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:flex-end}
.paper{margin-top:22px;background:var(--card);border:1.5px solid rgba(4,79,69,.2);border-radius:32px;padding:clamp(22px,4vw,52px);box-shadow:0 12px 40px rgba(4,79,69,.07)}
.paper .r-name{font:800 clamp(32px,5.4vw,56px)/1 var(--sans);letter-spacing:-.03em;color:var(--green);text-align:center}
.paper .r-headline{margin:10px 0 4px;text-align:center;font-weight:600}
.paper .r-contact{margin:0;text-align:center;color:var(--dim);font-size:15px}
.paper a{color:var(--green);font-weight:600}
.r-sec{margin-top:30px}
.r-sec > h4{margin:0 0 10px;font:800 14px var(--sans);letter-spacing:.18em;color:var(--green);border-bottom:2px solid var(--green);padding-bottom:6px}
.r-item{margin:16px 0}
.r-row{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;font-weight:700}
.r-sub{color:var(--dim);font-weight:500}
.paper ul{margin:6px 0 0;padding-left:20px}
.paper li{margin:6px 0;font-size:15.5px}
.r-skill{margin:5px 0;font-size:15.5px}
@media print{
  body{background:#fff}
  .top,.hero,.stage,.report,.voices,.story,.gaps,.contact,footer,.resume-head .btn,.resume-head > div > .lede{display:none!important}
  main{padding:0;max-width:none}.resume{padding:0}.resume-head{display:none}
  .paper{border:0;box-shadow:none;padding:0}
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}