/* ============================================================
   JOCELYN LIM — design system
   Warm editorial · Fraunces + DM Sans · one brand across the site
   ============================================================ */
:root{
  --paper:#f6f0e6; --paper-2:#efe7d8; --ink:#2c2420; --ink-soft:#6f655c; --faint:#9a9085;
  --line:#e2d8c6; --card:#fffdf8;
  --bloom:#c4644f; --host:#b07d3a; --app:#3f8a82; --scent:#4a5e94; --blog:#7d8a4f; --hub:#93577f;
  --accent:var(--bloom);
  --shadow-sm:0 1px 2px rgba(60,45,30,.05),0 6px 18px rgba(60,45,30,.06);
  --shadow-lg:0 2px 6px rgba(60,45,30,.06),0 24px 60px rgba(60,45,30,.13);
  --disp:'Fraunces',Georgia,serif; --body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip}
body{background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; max-width:100%; position:relative}
body::before{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
::selection{background:var(--bloom); color:#fff}

/* nav */
.nav{position:sticky; top:0; z-index:100; background:rgba(246,240,230,.82); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-.01em}
.brand .d{color:var(--bloom)}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font-size:14px; font-weight:500; color:var(--ink-soft); position:relative; transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--bloom); transition:width .25s}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{background:var(--ink); color:var(--paper)!important; padding:9px 18px; border-radius:40px; font-size:13.5px; font-weight:600}
.nav-cta:hover{background:var(--bloom)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px}
.burger span{width:24px; height:2px; background:var(--ink); transition:.3s}
/* My Playground dropdown */
.nav-pg{position:relative; display:flex; align-items:center}
.nav-pg-t{font-family:inherit; font-size:14px; font-weight:500; color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:5px; position:relative; transition:color .2s}
.nav-pg-t .cv{font-size:10px; transition:transform .25s}
.nav-pg-t::after{content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--bloom); transition:width .25s}
.nav-pg:hover .nav-pg-t, .nav-pg:focus-within .nav-pg-t, .nav-pg-t.active{color:var(--ink)}
.nav-pg:hover .nav-pg-t::after, .nav-pg:focus-within .nav-pg-t::after, .nav-pg-t.active::after{width:100%}
.nav-pg:hover .nav-pg-t .cv, .nav-pg:focus-within .nav-pg-t .cv{transform:rotate(180deg)}
.nav-pg::after{content:""; position:absolute; top:100%; left:-14px; right:-14px; height:14px}
.nav-pg-menu{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px); min-width:176px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity .18s, transform .18s; z-index:60}
.nav-pg:hover .nav-pg-menu, .nav-pg:focus-within .nav-pg-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-pg-menu a{font-size:14px; font-weight:500; color:var(--ink-soft); padding:10px 13px; border-radius:10px; transition:background .15s, color .15s}
.nav-pg-menu a:hover{background:var(--card); color:var(--ink)}
.nav-pg-menu a::after{display:none!important}
@media(max-width:880px){
  .nav-pg{display:block; width:100%}
  .nav-pg-t{font-size:16px}
  .nav-pg-t .cv{display:none}
  .nav-pg::after{display:none}
  .nav-pg-menu{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; background:none; padding:10px 0 0 16px; min-width:0; gap:14px}
  .nav-pg-menu a{padding:0; font-size:15px}
}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; padding:13px 26px; border-radius:44px; transition:transform .2s, background .2s, box-shadow .2s; cursor:pointer; border:none}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--bloom); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-bloom{background:var(--bloom); color:#fff; border:none}
.btn-bloom:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.ev-chips{display:flex; flex-wrap:wrap; gap:8px}
.ev-chip{font-family:inherit; font-size:13.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:8px 13px; cursor:pointer; transition:all .15s}
.ev-chip:hover{border-color:var(--bloom)}
.ev-chip.on{background:var(--bloom); color:#fff; border-color:var(--bloom)}
.wm-row{display:flex; gap:12px}
.wm-row .wm-field{flex:1; min-width:0}
.wm-opt{color:var(--faint); font-weight:400; font-size:.9em}
#wmEvents .wm-modal{max-height:92vh; overflow:auto}
@media(max-width:480px){.wm-row{flex-direction:column; gap:0}}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* reveal motion */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee{animation:none}}

/* typography */
.eyebrow{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); font-weight:600}
.section{padding:96px 0}
.section-h{font-family:var(--disp); font-weight:600; font-size:clamp(28px,4.4vw,46px); line-height:1.05; letter-spacing:-.015em}
.section-h em{font-style:italic; color:var(--bloom)}
.lead{font-size:18px; color:var(--ink-soft); max-width:620px; margin-top:18px}
.prose p{font-size:17.5px; color:#43392f; margin-bottom:18px; max-width:660px}
.prose p .hl{background:linear-gradient(transparent 62%, rgba(196,100,79,.28) 62%); padding:0 1px}
.prose .pullquote{font-family:var(--disp); font-weight:500; font-style:italic; font-size:clamp(20px,2.6vw,27px); line-height:1.32; color:var(--accent); border-left:3px solid var(--accent); padding-left:20px; margin:26px 0; max-width:660px}

/* ===== Writing hub ===== */
.writing-intro{max-width:660px;margin-bottom:24px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 26px}
.chip{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.writing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.wcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 24px 20px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;text-decoration:none}
.wcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.wcat{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:10px;color:var(--accent)}
.wcard[data-cat="community"] .wcat{color:var(--bloom)}
.wcard[data-cat="building"] .wcat{color:var(--scent)}
.wcard[data-cat="growth"] .wcat{color:var(--hub)}
.wcard[data-cat="marketing"] .wcat{color:var(--host)}
.wcard h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.22;color:var(--ink);margin-bottom:9px}
.wcard .wex{font-size:14.5px;line-height:1.5;color:var(--ink-soft);flex:1}
.wmeta{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:12.5px;color:var(--faint);font-weight:500}
.wsource{font-weight:600;color:var(--accent)}
.empty-note{display:none;color:var(--ink-soft);font-style:italic;padding:26px 2px}

/* ===== Post page ===== */
.postwrap{max-width:720px;margin:0 auto}
.post-cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.post-title{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.1;margin:10px 0 14px}
.post-byline{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:30px}
.post-byline b{color:var(--ink);font-weight:600}
.post-body p{font-size:18px;line-height:1.7;color:#43392f;margin-bottom:22px}
.post-body h2{font-family:var(--disp);font-weight:600;font-size:25px;margin:34px 0 10px;color:var(--ink)}
.post-cta{margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.post-deck{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(18px,2.4vw,22px);color:var(--ink-soft);line-height:1.4;margin:0 0 18px}
.post-body>img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin:6px 0 30px}
.post-scene{color:var(--ink-soft)}
.post-scene em{font-style:italic}
.post-more{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}

/* comments + likes */
.comments{max-width:720px;margin:46px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.cm-likebar{margin-bottom:26px}
.cm-like{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .2s,transform .12s,background .2s}
.cm-like:hover{border-color:var(--accent)}
.cm-like:active{transform:scale(.95)}
.cm-like.liked{background:var(--accent);color:#fff;border-color:var(--accent)}
.cm-like-n{font-weight:700}
.cm-title{font-family:var(--disp);font-weight:600;font-size:23px;margin-bottom:16px}
.cm-count{color:var(--faint);font-weight:400;font-size:18px}
.cm-form{margin-bottom:32px}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cm-form input,.cm-form textarea{width:100%;font-family:var(--body);font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.cm-form textarea{min-height:96px;resize:vertical;margin-bottom:14px}
.cm-form input:focus,.cm-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,100,79,.14)}
.cm-msg{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.cm-list{display:flex;flex-direction:column;gap:14px}
.cm-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:12px}
.cm-head b{font-weight:600;color:var(--ink)}
.cm-head span{font-size:12.5px;color:var(--faint);flex:none}
.cm-del{background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0 0 0 8px}
.cm-del:hover{opacity:.7}
.cm-item p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.cm-empty{color:var(--ink-soft);font-style:italic}
@media(max-width:600px){.cm-row{grid-template-columns:1fr}}

/* hero */
.hero{position:relative; padding:64px 0 40px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center}
.hero h1{font-family:var(--disp); font-weight:600; font-size:clamp(40px,6.4vw,78px); line-height:.98; letter-spacing:-.025em; margin:20px 0 0}
.hero h1 em{font-style:italic; color:var(--bloom)}
.hero .sub{font-size:19px; color:var(--ink-soft); margin-top:24px; max-width:480px}
.hero .cta-row{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.portrait{position:relative}
.portrait img{width:100%; border-radius:200px 200px 22px 22px; object-fit:cover; aspect-ratio:4/5; box-shadow:var(--shadow-lg)}
.portrait .ring{position:absolute; inset:-18px; border:1.5px solid var(--line); border-radius:210px 210px 30px 30px; z-index:-1}
.portrait .tagchip{position:absolute; bottom:22px; left:-18px; background:var(--card); border:1px solid var(--line); border-radius:40px; padding:9px 17px; font-size:13px; font-weight:600; box-shadow:var(--shadow-sm)}
.portrait .tagchip .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bloom); margin-right:7px; vertical-align:middle}

/* side-quest cards */
.quests{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:46px}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px}
.quest{position:relative; display:block; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; border-top:4px solid var(--qc,var(--bloom))}
.quest:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.quest .ph{height:200px; overflow:hidden}
.quest .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.quest:hover .ph img{transform:scale(1.06)}
.quest .body{padding:22px 24px 26px}
.quest .verb{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--qc,var(--bloom))}
.quest h3{font-family:var(--disp); font-weight:600; font-size:23px; margin:7px 0 8px}
.quest p{font-size:14.5px; color:var(--ink-soft); line-height:1.55}
.quest .go{display:inline-flex; align-items:center; gap:7px; margin-top:15px; font-weight:600; font-size:14px; color:var(--ink)}
.quest .go .arrow{transition:transform .25s}
.quest:hover .go .arrow{transform:translateX(5px)}

/* story split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split.flip .split-media{order:2}
.split-media img{width:100%; border-radius:18px; object-fit:cover; box-shadow:var(--shadow-sm)}
.split-media.tall img{aspect-ratio:4/5}

/* proof marquee */
.proof{background:var(--ink); color:var(--paper); padding:30px 0; overflow:hidden}
.proof .label{text-align:center; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,240,230,.5); margin-bottom:18px; font-weight:600}
.marquee{display:flex; gap:54px; white-space:nowrap; width:max-content; animation:slide 26s linear infinite}
.marquee span{font-family:var(--disp); font-size:24px; font-weight:500; color:rgba(246,240,230,.82)}
.marquee span::after{content:"·"; margin-left:54px; color:rgba(246,240,230,.3)}
@keyframes slide{to{transform:translateX(-50%)}}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:34px}
.gallery figure{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--card)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{font-size:12.5px; color:var(--ink-soft); padding:10px 14px}

/* detail hero */
.dhero{padding:54px 0 20px}
.dhero .back{font-size:13.5px; color:var(--ink-soft); font-weight:600; display:inline-flex; gap:7px; align-items:center; margin-bottom:26px}
.dhero .back:hover{color:var(--ink)}
.dhero .verb{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.dhero h1{font-family:var(--disp); font-weight:600; font-size:clamp(36px,6vw,64px); line-height:1; letter-spacing:-.02em; margin:12px 0 0}
.dhero .sub{font-size:19px; color:var(--ink-soft); margin-top:20px; max-width:580px}
.dhero-img{margin-top:40px; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); max-height:460px}
.dhero-img img{width:100%; height:100%; max-height:460px; object-fit:cover}

/* tie-back band */
.tieback{background:var(--paper-2); border-radius:24px; padding:48px; text-align:center; margin:30px auto 0; max-width:820px}
.tieback .q{font-family:var(--disp); font-style:italic; font-size:clamp(20px,3vw,28px); line-height:1.35; color:var(--ink)}
.tieback .q b{font-style:normal; color:var(--accent)}

/* footer */
footer{background:var(--ink); color:var(--paper); padding:72px 0 40px; margin-top:90px}
footer .ftop{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
footer h4{font-family:var(--disp); font-size:30px; font-weight:600; line-height:1.1}
footer h4 em{font-style:italic; color:var(--bloom)}
footer .col h5{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,240,230,.5); margin-bottom:16px; font-weight:600}
footer .col a{display:block; color:rgba(246,240,230,.85); font-size:15px; margin-bottom:11px; transition:color .2s; width:fit-content}
footer .col a:hover{color:var(--bloom)}
footer .fbot{display:flex; justify-content:space-between; align-items:center; margin-top:54px; padding-top:26px; border-top:1px solid rgba(246,240,230,.14); font-size:13px; color:rgba(246,240,230,.5); flex-wrap:wrap; gap:10px}

/* responsive */
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .portrait{max-width:380px; margin:0 auto}
  .quests{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr; gap:18px}
  .split{grid-template-columns:1fr; gap:30px}
  .split.flip .split-media{order:0}
  footer .ftop{grid-template-columns:1fr 1fr}
  footer h4{grid-column:1/-1}
  .nav-links{position:fixed; inset:70px 0 auto 0; background:var(--paper); flex-direction:column; padding:24px 28px; gap:20px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .35s; align-items:flex-start}
  .nav-links.open{transform:none}
  .burger{display:flex}
  .section{padding:66px 0}
  .tieback{padding:34px 22px}
}
@media(max-width:520px){ footer .ftop{grid-template-columns:1fr} }

/* ============================================================
   v2 additions — full nav, illustrations, notes, Medium posts
   ============================================================ */
/* full nav always visible + active state */
.nav-links{gap:23px}
.nav-links a{font-size:13.5px; white-space:nowrap}
.nav-links a.active{color:var(--ink)}
.nav-links a.active:not(.nav-cta)::after{width:100%}
@media(min-width:881px) and (max-width:1080px){ .nav-links{gap:15px} .nav-links a{font-size:12.5px} }

/* illustration / AI tag on figures */
.figtag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); background:#ece4d4; border:1px solid var(--line); border-radius:30px; padding:3px 9px; margin-left:8px; vertical-align:middle}
.gallery figure.illus img{background:var(--paper-2); aspect-ratio:auto}

/* callout note (NDA etc.) */
.note{display:flex; gap:14px; align-items:flex-start; background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-top:32px; max-width:680px; font-size:14.5px; color:var(--ink-soft); line-height:1.6}
.note .ic{flex:none; width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; font-size:16px}

/* Medium post list */
.posts{margin-top:38px; border-top:1px solid var(--line)}
.post{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:23px 4px; border-bottom:1px solid var(--line); transition:padding-left .25s, background .2s}
.post:hover{padding-left:10px}
.post .pmain{min-width:0}
.post h3{font-family:var(--disp); font-weight:600; font-size:clamp(18px,2.3vw,23px); line-height:1.22}
.post p{font-size:14px; color:var(--ink-soft); margin-top:5px; max-width:600px}
.post .meta{display:flex; align-items:center; gap:12px; flex:none; color:var(--faint); font-size:12.5px; font-weight:600; white-space:nowrap}
.post .meta .arrow{transition:transform .25s}
.post:hover .meta .arrow{transform:translateX(5px); color:var(--blog)}
@media(max-width:640px){ .post{flex-direction:column; align-items:flex-start; gap:7px} .post .meta{order:-1} }

/* ============================================================
   v3 — atmosphere, accent & motion (same layout/fonts/palette)
   ============================================================ */
body{background:radial-gradient(125% 85% at 50% -12%, #f9f3e7 0%, #f3ecde 55%, #efe6d4 100%) fixed;}

/* hero + detail-hero atmosphere */
.hero, .dhero{position:relative; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 44% at 86% 8%, rgba(196,100,79,.20), transparent 70%),
    radial-gradient(42% 42% at 4% 94%, rgba(74,94,148,.14), transparent 72%),
    radial-gradient(38% 50% at 60% 120%, rgba(176,125,58,.10), transparent 70%);}
.hero-bg::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(90deg, transparent 0, transparent calc(14.285% - 1px), rgba(44,36,32,.05) calc(14.285% - 1px), rgba(44,36,32,.05) 14.285%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%); mask-image:linear-gradient(180deg,#000,transparent 92%);}
.hero .wrap, .dhero .wrap{position:relative; z-index:1}

/* headline: smaller second clause */
.hero h1 .tail{display:block; font-size:.42em; font-style:normal; font-weight:400; color:var(--ink-soft); letter-spacing:0; line-height:1.2; margin-top:.45em}

/* gradient primary button */
.btn-primary{background:linear-gradient(135deg,#c8674f 0%,#a8462f 100%); color:#fff; box-shadow:0 8px 20px rgba(168,70,47,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#d2735a 0%,#9c3f29 100%); transform:translateY(-2px); box-shadow:0 12px 28px rgba(168,70,47,.30)}

/* card hover accent wash */
.quest::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--qc,var(--bloom)) 16%, transparent));}
.quest:hover::after{opacity:1}

/* soft accent glows behind content sections */
#why, #about{position:relative}
#why::before, #about::before{content:""; position:absolute; pointer-events:none; width:520px; height:520px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(196,100,79,.09), transparent 70%);}
#why::before{top:-120px; right:-120px}
#about::before{bottom:-160px; left:-160px; background:radial-gradient(circle, rgba(74,94,148,.09), transparent 70%)}
#why .wrap, #about .wrap{position:relative; z-index:1}

/* ============================================================
   v4 — responsive polish (professional phone + desktop)
   ============================================================ */
/* raise the menu breakpoint a touch so the full nav never crowds */
@media(max-width:920px){
  .nav-links{position:fixed; inset:70px 0 auto 0; background:var(--paper); flex-direction:column; padding:24px 28px; gap:20px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateY(-130%); transition:transform .35s; align-items:flex-start}
  .nav-links.open{transform:none}
  .nav-links a{font-size:16px}
  .nav-cta{margin-top:4px}
  .burger{display:flex}
}
/* tablet / small laptop */
@media(max-width:880px){
  .section{padding:60px 0}
  .hero{padding:40px 0 24px}
  .hero .cta-row{margin-top:28px}
  .quests{grid-template-columns:1fr; gap:18px}
  /* cancel the Stories card's desktop 2-col span so every card stacks in one column */
  .quests .quest{grid-column:auto !important}
}
/* phones */
@media(max-width:600px){
  .wrap{padding:0 20px}
  .section{padding:48px 0}
  .hero{padding:28px 0 20px}
  .hero h1{font-size:clamp(33px,8.8vw,46px); line-height:1.03}
  .hero h1 .tail{font-size:.5em; margin-top:.5em}
  .hero .sub{font-size:16.5px; margin-top:18px}
  .section-h{font-size:clamp(26px,7.4vw,36px)}
  .lead{font-size:16px; margin-top:14px}
  .prose p{font-size:16.5px}
  /* full-width, stacked CTAs read cleaner on a phone */
  .hero .cta-row{gap:10px}
  .hero .cta-row .btn{width:100%; justify-content:center}
  /* contact pathways: stack label over a full-width button */
  #connect .pathways > div{flex-direction:column!important; align-items:stretch!important; gap:12px!important; padding:16px 18px!important}
  #connect .pathways > div .btn{width:100%; justify-content:center}
  /* cards + galleries */
  .quest .ph{height:180px}
  .gallery{grid-template-columns:1fr}
  /* tie-back band */
  .tieback{padding:30px 20px; border-radius:18px}
  /* detail page hero */
  .dhero{padding:30px 0 6px}
  .dhero h1{font-size:clamp(30px,8.2vw,40px)}
  .dhero .sub{font-size:16.5px; margin-top:16px}
  .dhero-img{margin-top:26px; border-radius:18px}
  /* footer */
  footer{padding:52px 0 32px; margin-top:60px}
  footer h4{font-size:25px}
  footer .fbot{flex-direction:column; align-items:flex-start; gap:8px}
}
/* small phones */
@media(max-width:380px){
  .wrap{padding:0 16px}
  .hero h1{font-size:30px}
  .brand{font-size:19px}
  .btn{font-size:14.5px; padding:12px 22px}
}

/* ============================================================
   v5 — kill any horizontal scroll / sideways empty space
   ============================================================ */
/* clip the decorative section glows so they can't bleed past the screen edge */
#why, #about{overflow-x:clip}
/* on phones & tablets, drop the bleed-glows entirely (belt-and-suspenders for older browsers) */
@media(max-width:920px){
  #why::before, #about::before{display:none}
}

/* ============================================================
   v6 — conversion funnel: router, modals, contact form, CTA hierarchy
   ============================================================ */

/* --- self-segmentation router --- */
.router{margin-top:14px}
.router-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.rcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;border-top:4px solid var(--rc,var(--accent))}
.rcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.rcard .ric{width:50px;height:50px;border-radius:15px;background:var(--paper-2);display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.rcard .raud{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--rc,var(--accent));margin-bottom:7px}
.rcard h3{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.15;margin-bottom:8px}
.rcard p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:20px;flex:1}
.rcard .ract{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.rcard .rlink{font-size:13.5px;font-weight:600;color:var(--ink-soft);display:inline-flex;gap:5px;align-items:center}
.rcard .rlink:hover{color:var(--ink)}
@media(max-width:880px){.router-grid{grid-template-columns:1fr;gap:14px}}

/* --- CTA hierarchy --- */
.btn-xl{font-size:17px;padding:17px 38px;box-shadow:0 10px 26px rgba(168,70,47,.28)}
.cta-stack{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:30px}
.cta-secondary{display:inline-flex;gap:6px;align-items:center;font-weight:600;color:var(--ink-soft);font-size:15px}
.cta-secondary:hover{color:var(--accent)}
.cta-tertiary{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.cta-tertiary a{font-size:13.5px;color:var(--faint);font-weight:600;letter-spacing:.02em}
.cta-tertiary a:hover{color:var(--ink-soft)}
.copy-email{background:none;border:none;font:inherit;cursor:pointer;color:var(--ink-soft);font-size:13.5px;display:inline-flex;gap:7px;align-items:center;padding:6px 0}
.copy-email b{color:var(--accent);font-weight:600}
.copy-email .ce-done{color:#2f9460;font-weight:600}

/* --- modal system --- */
.wm-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(36,26,18,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.wm-overlay.open{display:flex;opacity:1}
.wm-modal{position:relative;width:100%;max-width:480px;background:var(--paper);border-radius:24px;padding:38px 34px;box-shadow:0 30px 80px rgba(0,0,0,.32);transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.9,.2,1);max-height:90vh;overflow-y:auto}
.wm-overlay.open .wm-modal{transform:none}
.wm-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:var(--paper-2);color:var(--ink-soft);font-size:18px;cursor:pointer;display:grid;place-items:center;line-height:1}
.wm-close:hover{background:var(--line);color:var(--ink)}
.wm-modal .wm-eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.wm-modal h3{font-family:var(--disp);font-weight:600;font-size:27px;line-height:1.1;margin:8px 0 6px}
.wm-modal .wm-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:24px}
/* chooser routes */
.wm-route{display:flex;gap:15px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;font:inherit}
.wm-route:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.wm-route .wr-ic{font-size:22px;width:44px;height:44px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;flex-shrink:0}
.wm-route .wr-t{display:block;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink)}
.wm-route .wr-d{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px}
.wm-route .wr-arrow{margin-left:auto;color:var(--accent);font-size:18px}
/* contact form */
.wm-field{display:block;margin-bottom:14px}
.wm-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.wm-field input,.wm-field textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.wm-field input:focus,.wm-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,100,79,.14)}
.wm-field textarea{resize:vertical;min-height:110px}
.wm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wm-submit{width:100%;justify-content:center;margin-top:4px}
.wm-msg{font-size:13.5px;margin-top:12px;text-align:center}
.wm-msg.err{color:#c0392b}
.wm-success{text-align:center;padding:14px 0}
.wm-success .ws-ic{width:64px;height:64px;border-radius:50%;background:rgba(63,174,116,.14);color:#2f9460;display:grid;place-items:center;font-size:30px;margin:0 auto 16px}
.wm-success h3{margin-bottom:8px}
.wm-success p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
@media(max-width:480px){.wm-modal{padding:32px 22px}.wm-modal h3{font-size:23px}}
/* topic chip pre-filled from what they picked */
.wm-topic{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;margin:2px 0 14px}
.wm-topic b{color:var(--accent);font-weight:600}
/* "or book a call" secondary choice */
.wm-alt{margin-top:16px;font-size:13.5px;color:var(--ink-soft);text-align:center}
.wm-alt a{color:#b8533a;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* sending spinner */
.wm-submit.loading{opacity:.9}
.wm-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-2px;margin-right:6px;animation:wmspin .7s linear infinite}
@keyframes wmspin{to{transform:rotate(360deg)}}

/* --- testimonials (sub-page social proof) --- */
.quotes{display:grid;gap:18px;margin-top:24px}
.quotes.two{grid-template-columns:1fr 1fr}
.quotes.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.quotes.three{grid-template-columns:1fr}}
.quote{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px 26px;box-shadow:var(--shadow-sm);text-align:left;margin:0}
.quote::before{content:"\201C";position:absolute;top:6px;left:18px;font-family:var(--disp);font-size:62px;line-height:1;color:var(--accent);opacity:.26}
.quote p{font-size:16.5px;line-height:1.55;color:var(--ink);font-style:italic;margin:8px 0 16px;position:relative}
.quote cite{font-style:normal;font-size:13px;color:var(--ink-soft);font-weight:600}
@media(max-width:760px){.quotes.two{grid-template-columns:1fr}}
/* editorial (borderless) testimonials — used on the homepage to contrast with the bordered trust cards above */
.quotes.editorial .quote{background:none;border:none;box-shadow:none;padding:6px 4px 0}
.quotes.editorial .quote::before{font-size:78px;top:-20px;left:-2px;opacity:.20}
.quotes.editorial .quote p{font-size:18px;line-height:1.5;color:var(--ink)}
.quotes.editorial .quote cite{color:var(--soft)}
/* scannable credentials checklist (portfolio skim-proof) */
.creds{display:grid;gap:11px;margin:22px 0 18px;max-width:680px}
.cred{position:relative;padding-left:30px;font-size:16.5px;line-height:1.5;color:var(--ink)}
.cred::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.cred b{font-weight:700}

/* --- stat cards (Scentura proof) --- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 24px;box-shadow:var(--shadow-sm);text-align:center;border-top:4px solid var(--accent)}
.stat .fig{font-family:var(--disp);font-weight:600;font-size:clamp(36px,4.4vw,48px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.stat .desc{font-size:14px;color:var(--ink);line-height:1.5;margin-top:14px}
.stat .src{font-size:11px;color:var(--faint);margin-top:12px;line-height:1.4}
@media(max-width:760px){.stats{grid-template-columns:1fr}}

/* CTA rows (letsbloom tie-back etc.): center on desktop, stack full-width on phones */
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:560px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%;justify-content:center}
  .rcard .ract .btn{width:100%;justify-content:center}
}

/* ============================================================
   v7 — mobile engagement layer (desktop is NOT affected; all
   rules live inside max-width media queries or are hidden by default)
   ============================================================ */
.m-note{display:none}
.m-cta{display:none}

@media(max-width:600px){
  /* tiny "best on desktop" note at the very top */
  .m-note{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:12.5px;font-weight:500;color:var(--ink-soft);background:var(--paper-2);border-bottom:1px solid var(--line);padding:8px 14px;line-height:1.3}
  .m-note .m-note-x{flex:none;background:none;border:none;color:var(--faint);font-size:12px;cursor:pointer;padding:2px 4px;line-height:1}

  /* sticky bottom "Work with me" bar */
  .m-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 62%,rgba(246,240,230,0));transform:translateY(135%);transition:transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  .m-cta.show{transform:none}
  .m-cta-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:#fff;font-weight:600;font-size:16px;padding:15px;border-radius:14px;box-shadow:0 8px 26px rgba(60,45,30,.20)}
  body{padding-bottom:64px}

  /* pacing — cut dead space so every scroll reveals something */
  .section{padding:40px 0}
  .hero{padding:18px 0 6px}
  .hero .wrap{gap:22px}
  .hero .cta-row{margin-top:22px}
  .split{gap:20px}
  .dhero{padding:20px 0 2px}

  /* punchier headlines (editorial energy on a phone) */
  .hero h1{font-size:clamp(35px,9.6vw,48px);line-height:1.0;letter-spacing:-.012em}
  .section-h{font-size:clamp(28px,8vw,38px);line-height:1.06}
  .dhero h1{font-size:clamp(32px,8.8vw,42px);line-height:1.02}

  /* immersive, edge-to-edge images (safe full-bleed via symmetric breakout) */
  .portrait,.dhero-img,.split-media,.post-body img{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    max-width:100vw;width:auto;border-radius:0}
  .portrait img,.dhero-img img,.split-media img{border-radius:0;width:100%}

  /* photo galleries become a swipeable snap-carousel */
  .gallery{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:2px 20px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 80%;scroll-snap-align:center;margin:0}
  .gallery figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}

  /* writing cards a touch tighter */
  .writing-grid{grid-template-columns:1fr;gap:14px}
}

@media(max-width:380px){
  .m-cta-btn{font-size:15px;padding:14px}
  .gallery figure{flex:0 0 84%}
}

/* ============================================================
   v8 — mobile refinements (desktop NOT affected; all in ≤600)
   ============================================================ */
@media(max-width:600px){
  /* hero headline dominates the first screen */
  .hero h1{font-size:clamp(41px,11.4vw,58px);line-height:.98;letter-spacing:-.016em}
  .hero h1 .tail{font-size:.5em;margin-top:.42em}
  .hero .sub{font-size:16px}

  /* clean, borderless hero photo — kill the arch ring + shadow line */
  .portrait .ring{display:none}
  .portrait img{box-shadow:none}

  /* sets of cards become swipeable carousels (glance + swipe, next peeks in) */
  .router-grid,
  .quotes.three{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:4px 20px 14px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .router-grid::-webkit-scrollbar,
  .quotes.three::-webkit-scrollbar{display:none}
  .router-grid > .rcard,
  .quotes.three > .quote{
    flex:0 0 82%;
    scroll-snap-align:center;
    margin:0;
  }
  .router-grid > .rcard:hover{transform:none}

  /* "what I'm building" ventures grid also swipes */
  .quests{display:flex !important;grid-template-columns:none !important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:4px 20px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .quests::-webkit-scrollbar{display:none}
  .quests > .quest{flex:0 0 86%;scroll-snap-align:center;margin:0}
}