@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bodoni+Moda:ital,opsz,wght@1,6..96,400..700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   STUDIO — the mengxikarawang.com design system (Oct 2026)
   "Dark feminine product studio": plum-black night + blush-white,
   hot pink as the signal colour, blush for the editorial italic.
   Sharp corners, precise 1px rules, assertive display type, and one
   Bodoni italic word per headline.

   Linked LAST on every page, so these tokens override each page's
   inline ones. Legacy case/about/contact pages carry body.legacy,
   which scopes the heavier !important overrides to them only.

   Contrast (WCAG): paper/night 17.6 · pink/night 6.5 · blush/night 11.8
   · muted-dark #B3A3B0 on night 8.2 · pink-ink #B0124F on paper 6.2.
   Pink and blush are never text on light backgrounds — use pink-ink.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* palette — "dark feminine": plum-black night, hot-pink signal, blush accents */
  --night:#0E0A10; --night-2:#1A1320; --night-3:#2A1F2E;
  --paper:#FFF4F8; --white:#FFFFFF;
  --pink:#FF4FA3; --blush:#FFB3CF; --pink-ink:#B0124F;
  --muted:#5E4F5C; --muted-dark:#B3A3B0;
  --line:rgba(14,10,16,.14); --line-soft:rgba(14,10,16,.08); --line-strong:rgba(14,10,16,.32);
  --line-dark:#33263A; --grid-line:rgba(255,179,207,.05);
  /* type */
  --display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --sans:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the feminine counter-voice: a fashion-editorial didone italic,
     used ONLY for single accent words inside display headlines */
  --editorial:'Bodoni Moda','Didot','Bodoni 72',serif;
  /* shape + motion */
  --r-sm:2px; --r:4px; --nav-h:64px; --maxw:1280px;
  --eo:cubic-bezier(.16,.84,.44,1);
  /* contextual (flipped inside dark surfaces) */
  --focus:var(--pink-ink); --accent-text:var(--pink-ink);
  --btn-bg:var(--night); --btn-fg:var(--paper); --btn-hover-bg:var(--pink); --btn-hover-fg:var(--night);
  --ghost-line:var(--line-strong); --ghost-fg:var(--night);

  /* legacy aliases — older pages read these names */
  --bg:var(--paper); --panel:var(--white); --ink:var(--night);
  --accent:var(--pink-ink); --accent-ink:var(--white);
  --paper2:var(--white); --pop:var(--pink-ink); --pop2:var(--pink); --pop-deep:var(--night);
  --sage:#1D7A4F; --rose:var(--blush); --border:var(--line); --border-soft:var(--line-soft);
  --serif:var(--display); --radius:var(--r);
}

/* dark surfaces flip the contextual tokens */
nav,.hero,.os,.contact,.contact-strip,footer,.next-proj,#chat-panel,.messy-out,
.legacy .cta-strip,.legacy .honesty-box,.legacy .about-cta,.legacy .shakiro-strip,.legacy .photo-block,
.legacy .results-bar{
  --focus:var(--pink); --accent-text:var(--pink);
  --btn-bg:var(--pink); --btn-fg:var(--night); --btn-hover-bg:var(--paper); --btn-hover-fg:var(--night);
  --ghost-line:rgba(247,241,242,.32); --ghost-fg:var(--paper);
}
.os,.contact{--muted:var(--muted-dark); --line:var(--line-dark)}

/* ── BASE ─────────────────────────────────────────────────────────── */
html,body{cursor:auto!important}
body{background:var(--paper)!important;color:var(--night)!important;font-family:var(--sans)!important;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
#cursor,#fun-cursor,.fun-cursor,.cursor-dot,.cursor-ring{display:none!important}
::selection{background:var(--pink);color:var(--night)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
img:not(.brand-av):not(.nav-avatar){cursor:inherit}
.cs-img,.cs-body img{cursor:zoom-in}

/* ── NAV — one night command bar on every page ─────────────────────── */
nav{position:fixed!important;inset:0 0 auto 0!important;z-index:200!important;background:var(--night)!important;color:var(--paper)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line-dark)!important;min-height:var(--nav-h)}
.nav-in{max-width:var(--maxw);margin:0 auto;min-height:var(--nav-h);padding:0 clamp(1.25rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.legacy nav{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 clamp(1.25rem,4vw,3rem)!important}
.brand,.nav-logo{font-family:var(--display)!important;font-weight:800!important;font-stretch:106%;font-size:17px!important;letter-spacing:-.02em!important;
  color:var(--paper)!important;display:flex!important;align-items:center;gap:.6rem;text-transform:none!important}
.nav-logo em{color:var(--pink)!important;font-style:normal!important}
.brand-av,.nav-avatar{width:28px!important;height:28px!important;border-radius:var(--r-sm)!important;object-fit:cover;flex-shrink:0;outline:1px solid var(--line-dark)}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.9rem);list-style:none}
.nav-links a{font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;font-weight:500!important;
  color:rgba(247,241,242,.72)!important;position:relative;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--paper)!important}
.nav-links a.active::before{content:"";position:absolute;left:-.85rem;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--pink)}
.nav-links a:not(.nav-cta):not(.nav-pill):not(.nav-y2k)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;
  background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--eo)}
.nav-links a:not(.nav-cta):not(.nav-pill):not(.nav-y2k):hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.nav-cta,.nav-links a.nav-pill,.nav-pill{background:var(--pink)!important;color:var(--night)!important;border:1px solid var(--pink)!important;border-radius:var(--r-sm)!important;
  padding:.55rem .9rem!important;font-weight:500!important;transition:background .2s,color .2s,border-color .2s,transform .2s!important}
.nav-links a.nav-cta:hover,.nav-links a.nav-pill:hover,.nav-pill:hover{background:var(--paper)!important;border-color:var(--paper)!important;color:var(--night)!important;transform:translateY(-1px)}
/* Y2K portal — a deliberate anachronism, kept */
.nav-y2k{position:relative;display:inline-flex;align-items:center;gap:.35rem;overflow:visible;border:2px solid;border-color:#fff #5a5a5a #5a5a5a #fff;
  color:#fff!important;border-radius:3px;background:linear-gradient(100deg,#000080 0%,#1a5fd6 30%,#5db4ff 48%,#1a5fd6 66%,#000080 100%);
  background-size:230% 100%;animation:y2kShimmer 3.4s linear infinite;padding:.3rem .65rem!important;letter-spacing:.02em!important;
  box-shadow:1px 1px 0 rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.35);transition:transform .2s}
.nav-y2k:hover{color:#fff!important;transform:translateY(-2px)}
@keyframes y2kShimmer{0%{background-position:0% 0}100%{background-position:230% 0}}
.nav-y2k-star{display:inline-block;color:#ffe066;animation:y2kSpin 3.5s linear infinite}
.nav-y2k-spark{position:absolute;pointer-events:none;color:#ffe066;line-height:1;animation:y2kTwinkle 1.7s ease-in-out infinite}
.nav-y2k-spark.k1{top:-8px;right:8px;font-size:12px}
.nav-y2k-spark.k2{bottom:-8px;left:14px;font-size:9px;color:#fff;animation-delay:.55s}
.nav-y2k-spark.k3{top:-5px;left:-7px;font-size:8px;color:#9ad4ff;animation-delay:1.05s}
.nav-y2k-spark.k4{bottom:-6px;right:-7px;font-size:10px;color:#ff9ecb;animation-delay:.8s}
@keyframes y2kTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}
@keyframes y2kSpin{to{transform:rotate(360deg)}}
@media(max-width:720px){
  .nav-links{gap:.6rem}
  .nav-links a{white-space:nowrap}
  .nav-links a:not(.nav-cta):not(.nav-pill):not(.nav-y2k){display:none!important}
  .legacy .nav-links li:not(:has(.nav-pill)){display:none}
  .nav-y2k{font-size:10.5px!important;padding:.25rem .5rem!important}
}

/* phones: the hero repeats "Schedule a call", so the nav keeps brand + Y2K only */
@media(max-width:520px){
  .nav-links a.nav-cta{display:none!important}
  .legacy .nav-pill{padding:.45rem .65rem!important;font-size:10.5px!important}
}

/* scroll-progress bar (interactions.js) rides on the night bar */
#scroll-progress,.scroll-progress{background:var(--pink)!important}

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;border-radius:var(--r-sm);padding:.85rem 1.25rem;
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--eo)}
.btn .arr{font-family:var(--mono);transition:transform .2s var(--eo)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn-primary,.legacy .btn-primary,.legacy .btn-sage{background:var(--btn-bg)!important;color:var(--btn-fg)!important;border:1px solid var(--btn-bg)!important;border-radius:var(--r-sm)!important}
.btn-primary:hover,.legacy .btn-primary:hover,.legacy .btn-sage:hover{background:var(--btn-hover-bg)!important;color:var(--btn-hover-fg)!important;border-color:var(--btn-hover-bg)!important;transform:translateY(-2px)}
.btn-ghost,.legacy .btn-ghost{background:transparent;color:var(--ghost-fg)!important;border:1px solid var(--ghost-line)!important;border-radius:var(--r-sm)!important}
.btn-ghost:hover,.legacy .btn-ghost:hover{border-color:currentColor!important;transform:translateY(-2px)}
.btn-accent{background:var(--pink);color:var(--night);border-color:var(--pink)}
.btn-accent:hover{background:var(--night);color:var(--paper);border-color:var(--night)}
.btn-ghost-light{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.05em;text-transform:uppercase;color:var(--paper)!important;
  border-bottom:1px solid rgba(247,241,242,.35)!important;padding-bottom:3px}
.btn-ghost-light:hover{color:var(--pink)!important;border-color:var(--pink)!important}

/* ── FOCUS — pink-ink on light, hot pink on night ────────────────────────── */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--focus)!important;outline-offset:3px!important;border-radius:var(--r-sm)!important}
:where(input,textarea):focus-visible{outline-offset:1px!important}

/* ── FOOTER ───────────────────────────────────────────────────────── */
footer{background:var(--night)!important;color:var(--muted-dark)!important;border-top:1px solid var(--line-dark)!important;padding:1.6rem 0!important}
.legacy footer{padding:1.6rem clamp(1.25rem,4vw,3rem)!important;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer,footer p,.foot-in,.footer-links a{font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.05em;text-transform:uppercase}
footer a,.foot-in a,.footer-links a{color:var(--paper)!important;transition:color .2s}
footer a:hover,.foot-in a:hover,.footer-links a:hover{color:var(--pink)!important}
footer p em{color:var(--pink)!important;font-style:normal}

/* ── CHAT (homepage "chat with her") ──────────────────────────────── */
#chat-fab{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;align-items:center;gap:.4rem;background:none;border:none;padding:2px;cursor:pointer}
#chat-fab .fab-bubble{width:58px;height:58px;border-radius:var(--r);background:var(--pink);border:1px solid var(--night);display:grid;place-items:center;
  box-shadow:4px 4px 0 var(--night);transition:transform .2s var(--eo),box-shadow .2s var(--eo);animation:fabBob 3.4s ease-in-out infinite}
#chat-fab .fab-bubble svg{width:42px;height:42px;display:block}
#chat-fab:hover .fab-bubble{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--night);animation:none}
@keyframes fabBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#chat-fab .fab-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;background:var(--night);color:var(--paper);
  border-radius:var(--r-sm);padding:.35rem .6rem;white-space:nowrap;transition:background .2s,color .2s}
#chat-fab:hover .fab-label{background:var(--pink);color:var(--night)}
#chat-fab:focus-visible{outline:none!important}
#chat-fab:focus-visible .fab-label{outline:2px solid var(--pink-ink);outline-offset:3px}
#chat-panel{position:fixed;right:18px;bottom:112px;z-index:901;width:min(320px,calc(100vw - 28px));display:none;flex-direction:column;
  background:var(--night);color:var(--paper);border:1px solid var(--line-dark);border-radius:var(--r);box-shadow:8px 8px 0 rgba(14,10,16,.22);overflow:hidden;transform-origin:bottom right}
@keyframes chatPanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#chat-panel.open{display:flex;animation:chatPanelIn .28s var(--eo) both}
.chat-head{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border-bottom:1px solid var(--line-dark);background:var(--night-2)}
.chat-head::before{content:"";width:7px;height:7px;background:var(--pink);flex-shrink:0}
.chat-head .nm{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em}
.chat-head .sub{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .x{margin-left:auto;background:none;border:1px solid var(--line-dark);width:24px;height:24px;font-size:12px;color:var(--muted-dark);cursor:pointer;flex-shrink:0;border-radius:var(--r-sm)}
.chat-head .x:hover{color:var(--night);background:var(--pink);border-color:var(--pink)}
.chat-msgs{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;min-height:110px;max-height:min(46vh,280px);overflow-y:auto}
.cm{max-width:87%;padding:.5rem .65rem;border-radius:var(--r-sm);font-size:13.5px;line-height:1.45;overflow-wrap:break-word}
.cm.me{align-self:flex-end;background:var(--pink);color:var(--night)}
.cm.her{align-self:flex-start;background:var(--night-2);border:1px solid var(--line-dark);color:var(--paper)}
.cm.typing{color:var(--muted-dark);font-family:var(--mono);font-size:12px}
.chat-in{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line-dark)}
.chat-in input{flex:1;font:inherit;font-size:13.5px;padding:.5rem .7rem;border:1px solid var(--line-dark);border-radius:var(--r-sm);background:var(--night-2);color:var(--paper);outline:none;min-width:0}
.chat-in input::placeholder{color:var(--muted-dark)}
.chat-in input:focus{border-color:var(--pink)}
.chat-in button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;border:none;border-radius:var(--r-sm);padding:.5rem .8rem;
  background:var(--pink);color:var(--night);cursor:pointer;transition:background .18s}
.chat-in button:hover{background:var(--paper)}
.chat-in button:disabled{opacity:.5;cursor:default}
.chat-foot{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted-dark);text-align:center;padding:0 .6rem .55rem}
.cm.brief{max-width:100%;display:flex;flex-direction:column;gap:.45rem}
.b-label{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--pink)}
.b-meta{font-size:12px;color:var(--muted-dark)}
.b-meta b{color:var(--paper)}
.fit-strong{color:var(--pink)!important}.fit-weak{color:var(--blush)!important}
.b-mail{white-space:pre-wrap;background:var(--night);border:1px solid var(--line-dark);border-radius:var(--r-sm);padding:.6rem .7rem;font-size:12.5px}
.b-copy{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:var(--r-sm);
  background:none;padding:.35rem .7rem;cursor:pointer;color:var(--paper)}
.b-copy:hover{border-color:var(--pink);color:var(--pink)}
@media(max-width:560px){
  #chat-fab .fab-bubble{width:50px;height:50px}
  #chat-fab .fab-bubble svg{width:36px;height:36px}
  #chat-panel{bottom:98px;width:min(300px,calc(100vw - 24px))}
}

/* "Ask about this project" widget on case pages (ask-widget.js) */
.askw{background:var(--night)!important;color:var(--paper)!important;border:1px solid var(--night)!important;border-radius:var(--r)!important;box-shadow:none!important}
.askw *{--ink:var(--paper);--paper:var(--night-2);--border:var(--line-dark);--muted:var(--muted-dark);--white:var(--night)}
.askw [class*="askw-m"]{border-radius:var(--r-sm)!important}
.askw .askw-m.q{background:var(--pink)!important;color:var(--night)!important}
.askw input,.askw button,.askw [class*="chip"]{border-radius:var(--r-sm)!important}
.askw button{background:var(--pink)!important;color:var(--night)!important;border-color:var(--pink)!important}

/* ── PAGE HEADERS (work, case studies) ────────────────────────────── */
.page-header{padding:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2rem,4vw,3rem)}
.crumb,.breadcrumb{font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--muted)!important;display:inline-flex;gap:.5rem;align-items:center}
.crumb a,.breadcrumb a{color:var(--muted)!important}
.crumb a:hover,.breadcrumb a:hover{color:var(--night)!important;text-decoration:underline;text-underline-offset:3px}
.page-title,.cs-title,.hero-title{font-family:var(--display)!important;font-weight:800!important;font-stretch:110%;letter-spacing:-.045em!important;line-height:.92!important;color:var(--night)}
.page-title{font-size:clamp(2.8rem,7.5vw,6rem)}
.page-title em,.cs-title em,.hero-title em{font-family:var(--display)!important;font-style:normal!important;font-weight:800!important;color:var(--night)!important;
  background:linear-gradient(transparent 62%,var(--pink) 62%,var(--pink) 92%,transparent 92%)}
.page-desc{font-size:17px!important;line-height:1.65!important;color:var(--muted)!important;max-width:62ch}
.page-desc strong{color:var(--night)!important}

/* ── WORK PAGE ────────────────────────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:0 0 2rem;border-bottom:2px solid var(--night)}
.filter-label{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-right:.75rem}
.filter-btn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--night);background:var(--white);
  border:1px solid var(--line);padding:.45rem .8rem;border-radius:var(--r-sm);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filter-btn:hover{border-color:var(--night)}
.filter-btn.active{background:var(--night);color:var(--pink);border-color:var(--night)}
.section-divider{display:flex;align-items:center;gap:1rem;padding:2.75rem 0 1.1rem}
.section-divider-label{font-family:var(--display)!important;font-weight:800!important;font-size:clamp(1.15rem,1.8vw,1.45rem)!important;letter-spacing:-.02em!important;white-space:nowrap}
.section-divider-line{flex:1;height:1px;background:var(--line-strong)}
.section-divider-count{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--night);background:var(--pink);padding:.2rem .45rem;white-space:nowrap}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px!important;background:var(--line)!important;border:1px solid var(--line);margin-bottom:1px!important;box-shadow:none!important}
.proj-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.proj-grid.cols-1{grid-template-columns:1fr}
.proj-card{background:var(--white)!important;border:0!important;border-radius:0!important;overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:background .2s!important}
.proj-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--eo);z-index:2}
.proj-card:hover{transform:none!important;box-shadow:none!important}
.proj-card:hover::before,.proj-card:focus-visible::before{transform:scaleX(1)}
.proj-grid.cols-1 .proj-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.proj-visual{height:240px;border-bottom:0;background-color:var(--night);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:28px;font-weight:800;color:rgba(247,241,242,.08);overflow:hidden;flex-shrink:0;position:relative}
.proj-visual.tall{height:auto;min-height:340px}
.proj-visual::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,10,16,0) 45%,rgba(14,10,16,.5));opacity:1}
.vis-dark,.vis-bali,.vis-ai,.vis-web3,.vis-health,.vis-amber,.vis-tollo{background-color:var(--night)}
.vis-label{position:absolute;bottom:.9rem;left:1.1rem;z-index:2;font-family:var(--mono)!important;font-style:normal!important;font-size:10.5px!important;letter-spacing:.07em!important;
  text-transform:uppercase;color:var(--paper)!important;font-weight:500!important;background:var(--night);padding:.25rem .5rem}
.proj-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.proj-client{font-family:var(--mono)!important;font-style:normal!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important}
.proj-title{font-family:var(--display)!important;font-weight:800!important;font-stretch:104%;font-size:clamp(1.3rem,2vw,1.75rem)!important;line-height:1.02!important;letter-spacing:-.03em!important}
.proj-card:hover .proj-title{transform:none}
.proj-what{font-size:14.5px!important;line-height:1.6!important;color:var(--muted)!important}
.proj-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.proj-tag{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--night)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;padding:.22rem .5rem}
.proj-tag.red{background:var(--pink);border-color:var(--pink)!important}
.proj-tag.green{color:var(--sage)!important;border-color:rgba(29,122,79,.4)!important}
.proj-result{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.02em;color:var(--night)!important;border-top:1px solid var(--line)!important;padding-top:.85rem;margin-top:auto}
.proj-result .num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--pink-ink)!important}
.proj-result .sep{color:var(--line-strong)!important}
.proj-cta{display:flex;align-items:center;gap:.45rem;font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.06em!important;text-transform:uppercase;
  color:var(--night)!important;opacity:1!important;transform:none!important;font-weight:500}
.proj-card:hover .proj-cta .arr{transform:translateX(4px)}
.contact-strip{margin:4rem 0 0;background:var(--night)!important;color:var(--paper)!important;border-radius:0!important;
  padding:clamp(2rem,4vw,3.25rem);display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center;border-left:6px solid var(--pink)}
.contact-strip h2{font-family:var(--display)!important;font-weight:800!important;font-size:clamp(1.8rem,3.4vw,2.8rem)!important;line-height:1!important;letter-spacing:-.035em!important;color:var(--paper)!important}
.contact-strip h2 em{font-style:normal!important;color:var(--pink)!important}
.contact-strip p{color:var(--muted-dark)!important;font-size:15px}
@media(max-width:860px){
  .proj-grid,.proj-grid.cols-3{grid-template-columns:1fr}
  .proj-grid.cols-1 .proj-card{grid-template-columns:1fr}
  .proj-card.span2{grid-column:auto}
  .contact-strip{grid-template-columns:1fr}
}

/* ── CASE STUDIES (bespoke elara + legacy pages) ──────────────────── */
.cs-hero{padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem))!important;border-bottom:2px solid var(--night)!important}
.cs-title{font-size:clamp(2.8rem,7vw,5.6rem)!important;margin-bottom:1.25rem!important}
.cs-eyebrow,.cs-section-tag,.kara-col-label,.price-eyebrow{font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;
  color:var(--pink-ink)!important;font-weight:500!important;display:inline-flex;align-items:center;gap:.5rem}
.cs-section-tag::before{content:"";width:8px;height:8px;background:var(--blush)}
.cs-sub,.cs-subtitle{color:var(--muted)!important;font-size:17px!important;line-height:1.65!important}
.cs-live,.cs-live-link{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--night)!important;font-weight:500!important;
  background:var(--pink);border:0!important;padding:.55rem .8rem!important;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,color .2s}
.cs-live:hover,.cs-live-link:hover{background:var(--night)!important;color:var(--pink)!important}
.cs-meta,.meta-row{gap:1px!important;background:var(--line)!important;border:1px solid var(--line)!important;border-radius:0!important;overflow:hidden}
.meta-cell{background:var(--white)!important;padding:1rem 1.1rem!important}
.meta-label{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--muted)!important;font-weight:500!important}
.meta-value{font-family:var(--display)!important;font-weight:700!important;font-size:15px!important;line-height:1.25!important;color:var(--night)!important}
.cs-tag{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.05em!important;text-transform:uppercase;font-weight:500!important;
  color:var(--night)!important;background:transparent!important;border:1px solid var(--line-strong)!important;border-radius:var(--r-sm)!important;padding:.25rem .5rem!important}
.cs-tag.red{background:var(--pink)!important;border-color:var(--pink)!important}
.cs-tag.green{color:var(--sage)!important;border-color:rgba(29,122,79,.45)!important}
.cs-tag.purple,.cs-tag.navy{background:var(--night)!important;color:var(--paper)!important;border-color:var(--night)!important}
/* results: a night instrument strip */
.results-bar{background:var(--line-dark)!important;border:0!important}
.result-cell{background:var(--night)!important;color:var(--paper)!important;padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.25rem,3vw,2rem)!important}
.result-num{font-family:var(--display)!important;font-weight:800!important;font-stretch:112%;font-size:clamp(2.3rem,4.4vw,3.4rem)!important;letter-spacing:-.045em!important;
  line-height:1!important;color:var(--pink)!important;font-variant-numeric:tabular-nums}
.result-label{font-family:var(--sans)!important;font-size:13px!important;line-height:1.5!important;color:var(--muted-dark)!important}
/* body */
.cs-section{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.cs-section h2{font-family:var(--display)!important;font-weight:800!important;font-stretch:104%;font-size:clamp(1.8rem,3.6vw,2.7rem)!important;line-height:1!important;letter-spacing:-.035em!important;color:var(--night)!important}
.cs-section h2 b{font-weight:800;background:linear-gradient(transparent 62%,var(--pink) 62%,var(--pink) 92%,transparent 92%)}
.cs-section p{color:var(--muted)!important;font-size:16.5px!important;line-height:1.72!important}
.cs-section p strong{color:var(--night)!important;font-weight:600!important}
.cs-lead p{color:var(--night)!important;font-size:18.5px!important}
.cs-quote,.cs-pullquote,.pull-quote{font-family:var(--display)!important;font-style:normal!important;font-weight:700!important;font-size:clamp(1.35rem,2.6vw,1.9rem)!important;line-height:1.2!important;
  letter-spacing:-.02em;color:var(--night)!important;border-left:6px solid var(--pink)!important;padding:.2rem 0 .2rem 1.25rem!important}
.cs-img,.cs-body img:not(.brand-av){border-radius:var(--r)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.cs-img:hover{transform:translateY(-3px)!important;box-shadow:6px 6px 0 var(--night)!important}
.cs-cap,.cs-img-caption,.product-cap{font-family:var(--mono)!important;font-style:normal!important;font-size:11.5px!important;letter-spacing:.03em!important;color:var(--muted)!important}
.cs-divider{height:1px!important;background:var(--line)!important;display:block!important}
/* next project = a night bar */
.next-proj{background:var(--night)!important;color:var(--paper)!important;border-top:0!important}
.next-label{font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--muted-dark)!important}
.next-title{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--paper)!important}
.next-arrow{font-family:var(--mono)!important;color:var(--pink)!important}
.next-proj a:hover .next-title{color:var(--pink)!important}

/* ── LEGACY PAGES (body.legacy): kill the old Syne / DM Mono / Fraunces
   and the soft rounded panels, then map their components onto studio ── */
.legacy *{font-family:var(--sans)!important}
.legacy :is(h1,h2,h3,h4,.cs-title,.cs-section h2,.result-num,.next-title,.meta-value,.hero-title,.section-title,.section-divider-label,
  .kara-heading,.milestone-name,.price-amount,.decision-num,.finding-num,[class*="-headline"],[class*="-heading"],[class*="-name"],[class*="-title"],
  blockquote,.pull-quote,.cs-pullquote,.expect-num){font-family:var(--display)!important}
.legacy :is(.cs-eyebrow,.cs-section-tag,.meta-label,.breadcrumb,.breadcrumb a,.nav-links a,.nav-pill,.cs-tag,.next-label,.section-tag,.section-label,.hero-eyebrow,
  .tl-date,.tl-tag,.footer-links a,footer,footer p,.decision-label,.vis-label,.ca-label,.shakiro-label,.avail-panel-label,.badge,.cs-img-caption,.product-cap,
  .cs-live-link,.btn-ghost-light,.sc-handle,.building-status,.skill-category,.price-eyebrow,code,pre,kbd){font-family:var(--mono)!important}
.legacy :is(.hero-title,.section-title,h1,h2){letter-spacing:-.035em!important;font-weight:800!important}
.legacy :is(.hero-title em,.section-title em,h1 em,h2 em){font-style:normal!important;color:var(--night)!important;font-weight:800!important;
  background:linear-gradient(transparent 62%,var(--pink) 62%,var(--pink) 92%,transparent 92%)}
.legacy :is(.hero-eyebrow,.section-tag,.section-label,.avail-panel-label){font-size:11.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--pink-ink)!important}
.legacy .cs-banner{display:none!important}
.legacy ::selection{background:var(--pink);color:var(--night)}
/* shape: soft rounded panels → sharp, ruled blocks */
.legacy :is([class*="card"],[class*="cell"],[class*="box"],[class*="panel"],[class*="strip"],[class*="block"],[class*="grid"],.product-shot,.palette,.decisions,
  .meta-row,.timeline,.finding,.price-card,.kara-section,.contact-action,.social-card,.building-card,.edu-row,.tl-item,.milestone,.deck-grid img,.brand-grid img){border-radius:var(--r-sm)!important}
.legacy :is(.photo-block,.photo-img){border-radius:0!important}
.legacy :is(.price-card,.finding,.kara-section,.decision,.expect-cell,.skill-cell,.edu-cell,.building-card,.social-card,.contact-action,.product-meta){
  background:var(--white)!important;border-color:var(--line)!important;box-shadow:none!important}
.legacy :is(.cta-strip,.honesty-box,.about-cta,.shakiro-strip){background:var(--night)!important;color:var(--paper)!important;border-radius:0!important;border-left:6px solid var(--pink)!important}
.legacy :is(.cta-strip,.honesty-box,.about-cta,.shakiro-strip) :is(p,span){color:var(--muted-dark)}
.legacy :is(.cta-strip,.honesty-box,.about-cta,.shakiro-strip) :is(h2,h3,strong,[class*="-title"]){color:var(--paper)!important}
.legacy .honesty-box .tag{color:var(--pink)!important}
.legacy :is(.tl-tag,.badge,.price-badge){border-radius:var(--r-sm)!important;font-size:10.5px!important;letter-spacing:.05em!important}
.legacy .tl-tag.pop,.legacy .badge-open{background:var(--pink)!important;color:var(--night)!important}
.legacy .tl-tag.sage,.legacy .badge-avail{background:var(--sage)!important;color:var(--white)!important}
.legacy .badge-sold{background:var(--blush)!important;color:var(--night)!important}
.legacy :is(.contact-action.primary){background:var(--night)!important;color:var(--paper)!important;border-color:var(--night)!important}
.legacy .contact-action.primary *{color:inherit!important}
.legacy .contact-action:hover,.legacy .social-card:hover{border-color:var(--night)!important;box-shadow:4px 4px 0 var(--night)!important;transform:translate(-2px,-2px)!important}
.legacy :is(.milestone-pct,.price-amount,.expect-num,.finding-num,.decision-num){color:var(--pink-ink)!important}
.legacy :is(.about-hero,.contact-hero){padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem))!important;border-bottom:2px solid var(--night)!important}
.legacy .hero-title{font-size:clamp(2.8rem,6.6vw,5.4rem)!important;line-height:.92!important}
.legacy .hero-body,.legacy .hero-body p{font-size:16.5px!important;line-height:1.7!important;color:var(--muted)!important}
.legacy .hero-body strong{color:var(--night)!important}
.legacy .divider{background:var(--line)!important}
.legacy .about-section,.legacy .expect-section{border-color:var(--line)!important}
/* the old pages' hero photo float animation — calmer, framed */
.legacy .hero-photo{animation:none!important;border-radius:0!important;box-shadow:8px 8px 0 var(--night)!important}

/* ── REDUCED MOTION ───────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nav-y2k,.nav-y2k-star,.nav-y2k-spark{animation:none!important}
  .nav-y2k-spark{opacity:.9}
  #chat-fab .fab-bubble{animation:none}
  #chat-panel.open{animation:none}
  .card::before,.proj-card::before,.nav-links a::after{transition:none}
}

/* cross-page view transitions */
@view-transition{navigation:auto}

/* ── EDITORIAL ITALIC — the accent word in every headline ─────────────
   Heavy grotesk does the talking; one word per headline switches to a
   high-contrast didone italic, like a magazine cover line. Never for
   body copy, labels or more than a few words. */
.ed,.sec-title b,.hero-hl .em,.contact h2 .em,.page-title em,.cs-title em,.hero-title em,.legacy :is(.hero-title em,.section-title em,h1 em,h2 em),
.contact-strip h2 em,.cs-section h2 b{
  font-family:var(--editorial)!important;font-style:italic!important;font-weight:500!important;font-stretch:normal!important;
  letter-spacing:-.01em!important;font-size:1.08em;line-height:.9;background:none!important;padding-right:.04em}
.page-title em,.cs-title em,.hero-title em,.legacy :is(.hero-title em,.section-title em,h1 em,h2 em),.cs-section h2 b{color:var(--pink-ink)!important}
.sec-title b{color:inherit}
.os .sec-title b,.dark-home .sec-title b,.contact-strip h2 em{color:var(--blush)!important}
.hero-hl .em,.contact h2 .em{color:var(--blush)!important}
.legacy .cs-title{font-size:clamp(2.4rem,4.6vw,4rem)!important}
/* hand-drawn underline under the italic word: a fine pen flourish, not a marker */
.sq-u{bottom:-.26em!important;height:.3em!important}
.sq-u path{stroke-width:1.6!important;stroke:var(--blush)!important}
.hero-hl .em .ms-line{bottom:-.2em}
.hero-hl .em .ms-line path{stroke-width:1.8!important;stroke-linecap:round!important}
/* contact: let the availability panel shrink on phones instead of clipping */
.legacy .contact-hero>*{min-width:0}
.legacy .avail-panel{background:var(--night)!important;color:var(--paper)!important;border-radius:0!important;border-left:6px solid var(--pink)!important}
.legacy .avail-panel :is(.avail-name,.avail-sub-text){color:var(--paper)!important}
.legacy .avail-panel .avail-sub-text{color:var(--muted-dark)!important}
.legacy .avail-panel .avail-panel-label{color:var(--pink)!important}
@media(max-width:820px){.legacy .contact-hero{grid-template-columns:1fr!important}.legacy .avail-row{flex-wrap:wrap;gap:.35rem}}
/* the pen flourish anchors to its italic word */
.sec-title b,.page-title em,.contact h2 .em{position:relative;display:inline-block}
.crumb span,.breadcrumb span{color:var(--muted)!important}

/* ═══ DARK ZONES — page headers + the Work page sit on night; long-form
   reading (case-study bodies, about, contact details) stays on the
   very light pink paper. Inside a zone the light-surface tokens flip. */
.cs-hero,.legacy .about-hero,.legacy .contact-hero,body.dark-page,.page-header{
  background:var(--night)!important;color:var(--paper)!important;
  --white:var(--night-2);--muted:var(--muted-dark);--line:var(--line-dark);--line-strong:rgba(255,244,248,.3);
  --pink-ink:var(--blush);--focus:var(--pink);--accent-text:var(--pink);
  --btn-bg:var(--pink);--btn-fg:var(--night);--btn-hover-bg:var(--paper);--btn-hover-fg:var(--night);
  --ghost-line:rgba(255,244,248,.32);--ghost-fg:var(--paper)}
:is(.cs-hero,.legacy .about-hero,.legacy .contact-hero,body.dark-page,.page-header) :is(h1,h2,h3,.page-title,.cs-title,.hero-title,.meta-value,.proj-title,.proj-result,
  .section-divider-label,.page-desc strong,.cs-sub strong,.cs-subtitle strong,.hero-body strong,.crumb a:hover,.breadcrumb a:hover){color:var(--paper)!important}
:is(.cs-hero,.legacy .about-hero,.legacy .contact-hero,body.dark-page) :is(.cs-eyebrow,.hero-eyebrow,.section-tag){color:var(--pink)!important}
:is(.cs-hero,.legacy .about-hero,.legacy .contact-hero,body.dark-page) :is(.cs-tag:not(.red),.proj-tag:not(.red),.filter-btn:not(.active)){color:var(--paper)!important}
:is(.cs-hero,body.dark-page) .cs-tag.red,body.dark-page .proj-tag.red{color:var(--night)!important;background:var(--pink)!important;border-color:var(--pink)!important}
body.dark-page .filter-btn.active{background:var(--pink);color:var(--night);border-color:var(--pink)}
body.dark-page .filter-bar{border-bottom-color:var(--line-dark)}
body.dark-page .proj-card:hover{background:var(--night-3)!important}
body.dark-page .proj-card::before{background:var(--pink)}
body.dark-page .proj-cta{color:var(--pink)!important}
body.dark-page .proj-result .num{color:var(--pink)!important}
body.dark-page .section-divider-count{background:var(--pink);color:var(--night)}
body.dark-page .contact-strip{background:var(--night-2)!important}
.cs-hero .cs-live,.cs-hero .cs-live-link{background:var(--pink)!important;color:var(--night)!important}
.cs-hero .cs-live:hover,.cs-hero .cs-live-link:hover{background:var(--paper)!important;color:var(--night)!important}
.cs-hero,.legacy .about-hero,.legacy .contact-hero{border-bottom:0!important}
:is(.legacy .about-hero,.legacy .contact-hero) :is(.ca-value,.sc-name,.avail-name,[class*="-name"],[class*="-value"],[class*="-title"]:not(.hero-title)){color:var(--paper)!important}
:is(.legacy .about-hero,.legacy .contact-hero) :is(.ca-sub,.sc-handle,.ca-arrow,.sc-arrow){color:var(--muted-dark)!important}
.legacy .contact-hero .contact-action.primary{background:var(--pink)!important;border-color:var(--pink)!important}
.legacy .contact-hero .contact-action.primary,.legacy .contact-hero .contact-action.primary *{color:var(--night)!important}
.legacy .contact-hero :is(.contact-action,.social-card):hover{box-shadow:4px 4px 0 var(--pink)!important;border-color:var(--pink)!important}

/* Work page: dark header, portfolio pieces on the light pink */
.page-header{margin-bottom:clamp(2rem,4vw,3rem)}
.dark-home #work .sec-title b{color:var(--pink-ink)!important}