/* ═══════════════════════════════════════════════════════════
   ROCHAA — "The Sketchbook"
   chalk on charcoal (default) · ink on paper (light)
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#121210; --bg-2:#1b1a17;
  --ink:#eeebe3; --ink-2:rgba(238,235,227,.68); --ink-3:rgba(238,235,227,.4);
  --rule:rgba(238,235,227,.14); --dot:rgba(238,235,227,.075);
  --accent:#ff6a3d; --thread:rgba(238,235,227,.82); --ok:#3ecf8e;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --gut:clamp(22px,4vw,56px);
  --hand-radius:255px 18px 225px 18px / 18px 225px 18px 255px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f2eee5; --bg-2:#e8e2d5;
  --ink:#1b1a17; --ink-2:rgba(27,26,23,.7); --ink-3:rgba(27,26,23,.45);
  --rule:rgba(27,26,23,.15); --dot:rgba(27,26,23,.1);
  --accent:#d6401a; --thread:rgba(27,26,23,.78);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  font:400 1rem/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size:26px 26px; background-position:13px 13px;
  overflow-x:hidden; transition:background-color .4s ease, color .4s ease;
}
/* paper grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-family:var(--serif); font-style:italic; font-weight:400; }
.hand{ font-family:var(--hand); font-weight:500; }
:focus-visible{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:4px; }
.skip{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:8px; }
.skip:focus{ top:12px; }

/* ─── hand-drawn strokes (draw-on + line boil) ─── */
.sk{ overflow:visible; filter:url(#b0); }
html[data-boil="1"] .sk{ filter:url(#b1); }
html[data-boil="2"] .sk{ filter:url(#b2); }
.sk path{ fill:none; stroke:var(--accent); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1 1.2; stroke-dashoffset:1.1; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ─── nav ─── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut); transition:background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; }
.nav.scrolled{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--rule); }
.nav-logo{ height:24px; width:auto; }
:root[data-theme="light"] .nav-logo{ filter:invert(1); }
.nav-links{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,2rem); font-size:.92rem; }
.nav-links a{ color:var(--ink-2); position:relative; padding:.3rem 0; transition:color .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.6,0,.2,1); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cv{ color:var(--ink)!important; }
.theme{ width:34px; height:34px; display:grid; place-items:center; border:1.5px solid var(--rule); border-radius:var(--hand-radius); transition:transform .3s, border-color .2s; }
.theme:hover{ border-color:var(--ink-2); transform:rotate(-8deg); }
.theme-ico{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink); background:linear-gradient(90deg,var(--ink) 50%,transparent 50%); }

/* ─── page + the continuous thread ─── */
.page{ position:relative; max-width:1280px; margin:0 auto; padding:0 var(--gut); }
.thread{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.thread path{ fill:none; stroke:var(--thread); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1000; stroke-dashoffset:1000; }
.thread circle{ fill:var(--accent); opacity:0; transition:opacity .3s; }
.thread.drawing circle{ opacity:1; }
.page > section{ position:relative; z-index:1; }

/* ─── sketch → final image component ─── */
.sketch{ position:relative; width:100%; aspect-ratio:4/3; background:var(--bg); z-index:2; }
.sketch canvas, .sketch .sk-color{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sketch canvas{ opacity:0; transition:opacity .6s ease; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.sketch canvas.ready{ opacity:1; }
.sketch .sk-frame{ position:absolute; inset:-9px; width:calc(100% + 18px); height:calc(100% + 18px); overflow:visible; pointer-events:none; }
.sketch .sk-frame path{ fill:none; stroke:var(--ink); stroke-opacity:.55; stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* ─── hero ─── */
.hero{ min-height:100svh; display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:5vw; padding:120px 0 90px; }
.hi{ position:relative; display:inline-block; margin:0; font-size:1.9rem; color:var(--accent); transform:rotate(-3deg); }
.hi-arrow{ position:absolute; left:100%; top:.35em; width:64px; height:44px; margin-left:4px; }
.hi-arrow path{ animation:draw .7s ease forwards .7s; }
.hi-arrow path + path{ animation-delay:1.3s; animation-duration:.3s; }
.hero-name{ font-family:var(--serif); font-weight:400; font-size:clamp(4.2rem,11.5vw,10.8rem); line-height:.86; letter-spacing:-.025em; margin:.12em 0 .3em; }
.hero-role{ font-size:clamp(1.15rem,1.8vw,1.55rem); line-height:1.45; margin:0 0 1rem; max-width:30em; }
.circled{ position:relative; display:inline-block; padding:0 .25em; color:var(--ink); font-weight:500; }
.circle-svg{ position:absolute; left:-6%; top:-28%; width:112%; height:156%; }
.circle-svg path{ animation:draw 1s cubic-bezier(.5,0,.3,1) forwards 1.5s; }
.hero-sub{ color:var(--ink-2); max-width:34em; margin:0 0 2.2rem; font-size:1.02rem; }
.under{ position:relative; color:var(--ink); white-space:nowrap; }
.under-svg{ position:absolute; left:0; bottom:-7px; width:100%; height:10px; }
.under-svg path{ animation:draw .6s ease forwards 2.3s; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.95rem 1.5rem; border-radius:var(--hand-radius); font-weight:500; font-size:.98rem;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1), background-color .2s, color .2s; }
.btn:hover{ transform:translateY(-2px) rotate(-1.2deg); }
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-line{ border:1.6px solid var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--bg); }
.status{ display:flex; align-items:center; gap:.55rem; margin:1.8rem 0 0; font-size:.86rem; color:var(--ink-2); }
.status i{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(62,207,142,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(62,207,142,0); } 100%{ box-shadow:0 0 0 0 rgba(62,207,142,0); } }
.hero-portrait{ position:relative; margin:0; width:100%; max-width:400px; justify-self:end; transform:rotate(2.2deg); z-index:2; }
.pin-note{ position:absolute; left:-2.6rem; bottom:-4.4rem; margin:0; font-size:1.4rem; line-height:1.05; color:var(--accent); transform:rotate(-4deg); }
.scroll-hint{ position:absolute; left:0; bottom:22px; margin:0; font-size:1.25rem; color:var(--ink-3); }

/* ─── clients ─── */
.clients{ padding:4vh 0 14vh; }
.clients-label{ margin:0 0 .8rem; font-size:1.6rem; color:var(--accent); }
.clients-list{ list-style:none; margin:0; padding:0 0 1.2rem; display:flex; flex-wrap:wrap; gap:.6rem 0; }
.clients-list li{ font-family:var(--serif); font-size:clamp(1.55rem,3.1vw,2.7rem); line-height:1.15; }
.clients-list li:not(:last-child)::after{ content:"✳"; font-family:var(--sans); font-size:.45em; color:var(--accent); margin:0 .9em; vertical-align:.45em; }

/* ─── section heads ─── */
.sec-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.6rem; }
.sec-title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.7rem,6.4vw,5.6rem); line-height:.95; letter-spacing:-.015em; margin:0; }
.sec-note{ margin:0; font-size:1.55rem; color:var(--accent); transform:rotate(-3deg); }

/* ─── featured projects ─── */
.proj{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2.6vw,2.6rem); align-items:center; margin:15vh 0; }
.proj-media{ grid-column:1 / span 7; grid-row:1; display:block; position:relative; }
.proj-info{ grid-column:9 / span 4; grid-row:1; position:relative; }
.proj.flip .proj-media{ grid-column:6 / span 7; }
.proj.flip .proj-info{ grid-column:1 / span 4; }
.proj-media .sketch{ transition:transform .5s cubic-bezier(.3,1.2,.5,1); }
.proj-media:hover .sketch{ transform:rotate(-.8deg) scale(1.012); }
.proj-num{ font-size:.78rem; letter-spacing:.14em; color:var(--ink-3); }
.proj-title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,3.9vw,3.5rem); line-height:1; margin:.35em 0 .4em; }
.proj-title a:hover{ font-style:italic; }
.proj-meta{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); margin:0 0 1rem; }
.proj-sum{ color:var(--ink-2); margin:0 0 1.4rem; font-size:.98rem; }
.proj-note{ position:relative; display:inline-block; margin:0 0 1.6rem; font-size:1.55rem; line-height:1.1; color:var(--accent); transform:rotate(-2.5deg); }
.proj-note .sk{ position:absolute; top:-.2em; width:70px; height:46px; }
.proj:not(.flip) .proj-note .sk{ right:100%; margin-right:6px; transform:scaleX(-1); }
.proj.flip .proj-note .sk{ left:100%; margin-left:6px; }
/* generic reveal: .rv fades up, hand-drawn marks inside draw themselves in */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv .sk path{ animation:none; }
.rv.in .sk path{ animation:draw .7s ease forwards .35s; }
.rv.in .sk path + path{ animation-delay:.95s; animation-duration:.25s; }
.proj-link{ display:inline-flex; gap:.5rem; align-items:center; font-weight:500; padding-bottom:4px;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0 2px no-repeat; transition:background-size .4s cubic-bezier(.6,0,.2,1); }
.proj-link:hover{ background-size:100% 2px; }

/* ─── archive ─── */
.archive{ margin:6vh 0 0; }
.archive-title{ font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .6rem; }
.archive-list{ list-style:none; margin:0; padding:0; }
.archive-list a{ display:grid; grid-template-columns:1fr auto 4rem; gap:1rem; align-items:baseline; padding:1.15rem 0; border-top:1px dashed var(--rule); position:relative; }
.archive-list li:last-child a{ border-bottom:1px dashed var(--rule); }
.archive-list .a-title{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.1; position:relative; justify-self:start; }
.archive-list .a-cat{ font-size:.85rem; color:var(--ink-2); }
.archive-list .a-yr{ font-size:.85rem; color:var(--ink-3); text-align:right; }
.archive-list .sk{ position:absolute; left:-3%; bottom:-.1em; width:106%; height:12px; }
.archive-list .sk path{ animation:none; transition:stroke-dashoffset .45s ease; }
.archive-list a:hover .sk path, .archive-list a:focus-visible .sk path{ stroke-dashoffset:0; }

/* ─── about ─── */
.about{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,6vw,6rem); padding:20vh 0 14vh; align-items:start; }
.about .sec-title{ font-size:clamp(2.3rem,4.6vw,4.2rem); margin-bottom:2rem; }
.about-lead{ font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.65; color:var(--ink-2); margin:0 0 1.6rem; }
.about-lead .hl{ color:var(--ink); font-weight:500; }
.about-lead em{ color:var(--ink); font-size:1.12em; }
.link-hand{ font-family:var(--hand); font-size:1.6rem; color:var(--accent); display:inline-block; transition:transform .25s; }
.link-hand:hover{ transform:translateX(6px) rotate(-2deg); }
.stats{ list-style:none; margin:0 0 3rem; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.stats li{ position:relative; }
.stats b{ display:block; position:relative; font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,4.2vw,3.8rem); line-height:1; width:max-content; }
.stats span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.side-label{ font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .4rem; }
.roles{ list-style:none; margin:0; padding:0; }
.roles li{ padding:.95rem 0; border-top:1px dashed var(--rule); }
.roles b{ display:block; font-weight:500; }
.roles span{ font-size:.86rem; color:var(--ink-2); }

/* ─── contact ─── */
.contact{ padding:16vh 0 14vh; }
.contact-kicker{ margin:0; font-size:1.8rem; color:var(--accent); transform:rotate(-3deg); display:inline-block; }
.contact-title{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,8.4vw,7.6rem); line-height:.92; letter-spacing:-.02em; margin:.2em 0 .6em; max-width:11em; }
.contact-mail{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin:0 0 2.6rem; }
.mail{ font-family:var(--serif); font-size:clamp(1.6rem,4.2vw,3.3rem); line-height:1.1; overflow-wrap:anywhere; }
.mail:hover{ font-style:italic; }
.copy{ padding:.45rem .9rem; border:1.5px solid var(--rule); border-radius:var(--hand-radius); font-size:.82rem; color:var(--ink-2); transition:border-color .2s, color .2s; }
.copy:hover{ border-color:var(--ink-2); color:var(--ink); }
.copied{ font-size:1.5rem; color:var(--accent); min-width:4em; }
.socials{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; }
.socials a{ color:var(--ink-2); font-size:.98rem; transition:color .2s; }
.socials a:hover{ color:var(--ink); }

/* ─── footer ─── */
.foot{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1.4rem;
  max-width:1280px; margin:0 auto; padding:26px var(--gut) 34px; border-top:1px dashed var(--rule); font-size:.82rem; color:var(--ink-3); }
.foot .hand{ font-size:1.3rem; color:var(--ink-2); }
.foot .hand:hover{ color:var(--accent); }

/* ─── cursor: handwritten tag + faint ink trail ─── */
.cursor-tag{ position:fixed; left:0; top:0; z-index:60; pointer-events:none; font-size:1.5rem; color:var(--accent); opacity:0; transition:opacity .2s; white-space:nowrap; }
.cursor-tag.on{ opacity:1; }
.trail{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:55; }

/* ─── responsive ─── */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:4.5rem; padding:110px 0 110px; min-height:auto; }
  .hero-portrait{ justify-self:start; max-width:300px; margin-left:2.4rem; }
  .pin-note{ left:auto; right:-1rem; bottom:-3.6rem; font-size:1.25rem; }
  .scroll-hint{ display:none; }
  .proj{ margin:11vh 0; row-gap:1.6rem; }
  .proj .proj-media, .proj.flip .proj-media{ grid-column:1 / -1; grid-row:1; }
  .proj .proj-info, .proj.flip .proj-info{ grid-column:1 / -1; grid-row:2; }
  .proj-note .sk{ display:none; }
  .about{ grid-template-columns:1fr; padding:14vh 0 10vh; }
}
@media (max-width:560px){
  .nav-links{ gap:.85rem; font-size:.86rem; }
  .nav-links a[href="#about"]{ display:none; }
  .archive-list a{ grid-template-columns:1fr auto; }
  .archive-list .a-cat{ display:none; }
  .stats b{ font-size:2.4rem; }
}
@media (hover:none){ .trail, .cursor-tag{ display:none; } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .sk{ filter:none!important; }
  .sk path, .rv .sk path, .rv.in .sk path{ animation:none!important; stroke-dashoffset:0; }
  .rv{ opacity:1; transform:none; transition:none; }
  .status i{ animation:none; }
  .trail{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED EXTRAS + INNER PAGES
   ═══════════════════════════════════════════════════════════ */
.all-work{ margin-top:1.4rem; }
.foot a{ transition:color .2s; }
.foot a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.hl{ color:var(--ink); font-weight:500; }

/* ─── kind words (testimonials) ─── */
.kind{ padding:14vh 0 2vh; }
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(1.4rem,3vw,2.6rem); margin-top:3rem; }
.quote{ margin:0; padding:2rem 2rem 1.6rem; border:1.5px solid var(--rule); border-radius:var(--hand-radius); background:color-mix(in srgb,var(--bg-2) 55%,transparent); transform:rotate(-.6deg); }
.quote.tilt{ transform:rotate(.7deg); }
.quote.rv{ transform:translateY(22px) rotate(-.6deg); }
.quote.rv.in{ transform:rotate(-.6deg); }
.quote.tilt.rv.in{ transform:rotate(.7deg); }
.quote blockquote{ margin:0 0 1.2rem; font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.3; }
.quote figcaption b{ display:block; font-weight:500; }
.quote figcaption span{ font-size:.86rem; color:var(--ink-2); }

/* ─── inner page head ─── */
.page-head{ padding:150px 0 9vh; position:relative; z-index:1; }
.kicker{ display:inline-block; margin:0 0 .6rem; font-size:1.7rem; color:var(--accent); transform:rotate(-3deg); }
.page-title{ font-family:var(--serif); font-weight:400; font-size:clamp(3.2rem,9vw,8rem); line-height:.9; letter-spacing:-.02em; margin:0 0 .6em; max-width:12em; }
.page-lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink-2); max-width:36em; margin:0; }
.page-lead em{ color:var(--ink); }
.uline{ position:relative; display:inline-block; }
.uline .under-svg{ position:absolute; left:0; bottom:-.08em; width:100%; height:.16em; min-height:8px; }
.uline .under-svg path{ animation:draw .7s ease forwards .6s; }
.back{ display:inline-flex; gap:.4rem; font-size:.86rem; color:var(--ink-2); margin-bottom:2rem; transition:color .2s, transform .2s; }
.back:hover{ color:var(--ink); transform:translateX(-4px); }
.page > section, .page > header{ position:relative; z-index:1; }

/* ─── works grid ─── */
.wgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(3rem,7vw,6.5rem) clamp(1.5rem,4vw,4rem); padding-bottom:16vh; }
.wcard{ display:block; }
.wcard:nth-child(even){ margin-top:clamp(0px,9vw,140px); }
.wcard .sketch{ transition:transform .5s cubic-bezier(.3,1.2,.5,1); }
.wcard:hover .sketch{ transform:rotate(-.8deg) scale(1.012); }
.wcard-meta{ display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; margin-top:1.4rem; align-items:baseline; }
.wcard-meta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.05; margin:0; }
.wcard:hover .wcard-meta h2{ font-style:italic; }
.wcard-meta .yr{ font-size:.82rem; color:var(--ink-3); }
.wcard-meta p{ grid-column:1 / -1; margin:0; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }

/* ─── case study (project.html) ─── */
.case{ padding-bottom:4vh; }
.case .proj-hero{ padding:140px 0 6vh; }
.case .proj-back{ display:inline-flex; font-size:.86rem; color:var(--ink-2); margin-bottom:2.2rem; transition:color .2s, transform .2s; }
.case .proj-back:hover{ color:var(--ink); transform:translateX(-4px); }
.case .proj-eyebrow{ display:block; font-family:var(--hand); font-size:1.6rem; color:var(--accent); transform:rotate(-2deg); transform-origin:left; margin-bottom:.4rem; }
.case .proj-title{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,8.5vw,7.6rem); line-height:.92; letter-spacing:-.02em; margin:0 0 .6em; max-width:13em; }
.case .proj-summary{ font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.55; color:var(--ink-2); max-width:34em; margin:0 0 3rem; }
.case .proj-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.4rem 2rem; padding:1.4rem 0; border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule); margin:0; text-transform:none; letter-spacing:0; font-size:1rem; color:var(--ink); }
.case .proj-meta .mono{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem; }
.case .proj-meta p{ margin:0; font-weight:500; }
.case .proj-ws{ color:var(--ink); background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 1.5px no-repeat; padding-bottom:2px; }
.case .proj-cover{ margin:0 0 12vh; }
.case .proj-cover .sketch{ aspect-ratio:16/10; }
.case .proj-content{ max-width:880px; margin:0 auto; padding-bottom:6vh; }
.case .proj-content > p, .case .pv-block > p{ font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.75; color:var(--ink-2); margin:0 0 1.6rem; }
.case .proj-h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.6vw,3rem); line-height:1.05; margin:4.5rem 0 1.4rem; }
.case .proj-quote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1.25; margin:3.6rem 0; padding:0 0 0 1.6rem; border-left:2px solid var(--accent); }
.case .proj-shot, .case .proj-video{ margin:3.4rem 0; position:relative; }
.case .proj-shot.wide{ width:min(1180px, 100vw - 2*var(--gut)); margin-left:50%; transform:translateX(-50%); }
.case .proj-shot img, .case .proj-pair img{ width:100%; height:auto; border-radius:3px; box-shadow:0 0 0 1.5px var(--rule); }
.case .proj-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:3.4rem 0; }
.case .proj-pair figure{ margin:0; }
.case figcaption{ font-family:var(--hand); font-size:1.35rem; color:var(--accent); margin-top:.6rem; transform:rotate(-1deg); transform-origin:left; }
.case .proj-embed{ position:relative; aspect-ratio:16/9; }
.case .proj-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border-radius:3px; }
.case .vid-wrap{ position:relative; cursor:pointer; }
.case .proj-vid{ width:100%; display:block; border-radius:3px; background:#000; }
.case .vid-toggle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-3deg); width:84px; height:84px; display:grid; place-items:center;
  background:var(--ink); color:var(--bg); border-radius:var(--hand-radius); font-size:1.4rem; transition:opacity .3s, transform .3s; }
.case .vid-wrap:hover .vid-toggle{ transform:translate(-50%,-50%) rotate(2deg) scale(1.05); }
.case .proj-video.playing .vid-toggle{ opacity:0; }
.case .proj-video.playing .vid-wrap:hover .vid-toggle{ opacity:.85; }
.case .proj-next{ display:block; padding:12vh 0 14vh; border-top:1px dashed var(--rule); margin-top:6vh; }
.case .proj-next .mono{ font-family:var(--hand); font-size:1.6rem; color:var(--accent); }
.case .proj-next h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.8rem,8vw,7rem); line-height:.95; margin:.2em 0 0; transition:transform .4s cubic-bezier(.3,1.2,.5,1); }
.case .proj-next:hover h2{ font-style:italic; transform:translateX(10px); }
.case .proj-next h2 span{ color:var(--accent); }
/* reveal for case-study blocks */
.case .reveal-up{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.case .reveal-up.in{ opacity:1; transform:none; }
.case .proj-shot.wide.reveal-up{ transform:translate(-50%,22px); }
.case .proj-shot.wide.reveal-up.in{ transform:translateX(-50%); }

/* dashboard live preview (project.html?preview=1) */
.is-preview .reveal-up{ opacity:1!important; transform:none!important; }
.is-preview .case .proj-shot.wide{ transform:translateX(-50%)!important; }
.is-preview [contenteditable]{ cursor:text; border-radius:6px; transition:box-shadow .2s, background .2s; }
.is-preview [contenteditable]:hover{ box-shadow:0 0 0 1px var(--rule); }
.is-preview [contenteditable]:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.is-preview [contenteditable]:empty:before{ content:'Type here…'; color:var(--ink-3); }
.is-preview .pv-block{ position:relative; }
.is-preview .pv-block:hover{ outline:1px dashed var(--rule); outline-offset:10px; border-radius:4px; }
.is-preview .pv-block.drag-over{ outline:2px solid var(--accent); outline-offset:10px; }
.is-preview .pv-tools{ position:absolute; top:-14px; right:0; display:flex; gap:.35rem; opacity:0; transition:opacity .15s; z-index:6; }
.is-preview .pv-block:hover .pv-tools{ opacity:1; }
.is-preview .pv-tools > *{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:var(--bg-2); border:1px solid var(--rule); color:var(--ink); border-radius:7px; font-size:15px; cursor:pointer; }
.is-preview .pv-grip{ cursor:grab; }
.is-preview .pv-del:hover{ color:#ff6b6b; border-color:#ff6b6b; }
.is-preview .pv-empty{ padding:1.6rem; border:1px dashed var(--rule); border-radius:12px; color:var(--ink-3); text-align:center; font-size:.9rem; }
.is-preview .pv-upload{ display:block; width:100%; font:inherit; font-size:.9rem; cursor:pointer; padding:2.4rem 1.6rem; background:none; border:1.5px dashed var(--rule); border-radius:12px; color:var(--ink-2); }
.is-preview .pv-upload:hover{ color:var(--ink); border-color:var(--accent); }
.is-preview .proj-shot[data-upload], .is-preview .proj-video[data-upload]{ cursor:pointer; }
.is-preview .pv-replace{ position:absolute; top:.7rem; right:.7rem; background:rgba(0,0,0,.72); color:#fff; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:.4rem .7rem; border-radius:30px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:4; }
.is-preview [data-upload]:hover .pv-replace{ opacity:1; }
.is-preview .pv-add{ display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.6rem; border-top:1px dashed var(--rule); }
.is-preview .pv-add-label{ color:var(--ink-3); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-right:.3rem; }
.is-preview .pv-add button{ border:1px dashed var(--rule); color:var(--ink-2); border-radius:9px; padding:.5rem 1rem; font-size:.85rem; }
.is-preview .pv-add button:hover{ border-color:var(--accent); color:var(--accent); }

/* ─── about page ─── */
.ab-hero{ display:grid; grid-template-columns:1.25fr .75fr; gap:5vw; align-items:end; padding:150px 0 10vh; }
.ab-hero .page-title{ font-size:clamp(3rem,7.4vw,6.6rem); }
.ab-portrait{ margin:0; justify-self:end; width:100%; max-width:360px; transform:rotate(-2deg); position:relative; z-index:2; }
.ab-portrait .pin-note{ left:auto; right:-1rem; bottom:-3.8rem; transform:rotate(3deg); }
.ab-intro{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding:4vh 0 10vh; }
.ab-intro > div{ grid-column:4 / span 8; }
.ab-intro p{ font-size:clamp(1.12rem,1.65vw,1.42rem); line-height:1.65; color:var(--ink-2); margin:0 0 1.4rem; }
.ab-intro p:first-child{ color:var(--ink); font-size:clamp(1.3rem,2.1vw,1.8rem); line-height:1.45; }
.ab-stats{ list-style:none; margin:0; padding:5vh 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule); }
.ab-stats b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(3.2rem,8vw,6.4rem); line-height:1; }
.ab-stats span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ab-exp{ padding:14vh 0 8vh; }
.ab-exp .sec-title{ margin-bottom:3rem; }
.exp-list{ list-style:none; margin:0; padding:0; }
.exp{ display:grid; grid-template-columns:13rem 1fr auto; gap:.4rem 2rem; padding:1.5rem 0; border-top:1px dashed var(--rule); align-items:baseline; }
.exp:last-child{ border-bottom:1px dashed var(--rule); }
.exp-when{ font-size:.86rem; color:var(--ink-3); }
.exp h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; margin:0; }
.exp-co{ margin:.25rem 0 0; color:var(--ink-2); font-size:.95rem; }
.exp-loc{ font-size:.86rem; color:var(--ink-3); text-align:right; }
.exp.now h3::after{ content:"now"; font-family:var(--hand); font-size:1.15rem; color:var(--accent); margin-left:.6rem; vertical-align:.25em; }
.ab-clients{ padding:8vh 0; }
.cta-band{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; padding:12vh 0 14vh; }
.cta-band h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5.6vw,4.8rem); line-height:.95; margin:0; max-width:12em; }

/* ─── contact page ─── */
.ct-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); padding:2vh 0 10vh; }
.ct-card{ padding:clamp(1.6rem,3vw,2.6rem); border:1.5px solid var(--rule); border-radius:var(--hand-radius); }
.ct-card:nth-child(2){ transform:rotate(.6deg); }
.ct-card h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; margin:.2rem 0 .8rem; }
.ct-card p{ color:var(--ink-2); margin:0 0 1.6rem; }
.ct-card .kicker{ font-size:1.45rem; margin:0; }
.ct-mail{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:6vh 0 3vh; border-top:1px dashed var(--rule); }
.ct-links{ display:flex; flex-wrap:wrap; gap:.8rem; }
.ct-meta{ display:flex; flex-wrap:wrap; gap:1rem 3rem; padding:2vh 0 14vh; color:var(--ink-2); }
.ct-meta b{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:.3rem; }

/* ─── services (capabilities) ─── */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:clamp(1.2rem,2.4vw,2rem); padding:2vh 0 8vh; }
.cap-card{ display:flex; flex-direction:column; padding:1.8rem 1.7rem 1.5rem; border:1.5px solid var(--rule); border-radius:var(--hand-radius); background:color-mix(in srgb,var(--bg-2) 40%,transparent); transition:transform .4s cubic-bezier(.3,1.3,.5,1), border-color .25s; }
.cap-card:nth-child(3n+2){ transform:rotate(.5deg); }
.cap-card:nth-child(3n){ transform:rotate(-.4deg); }
.cap-card:hover{ transform:rotate(-1deg) translateY(-4px); border-color:var(--ink-3); }
.cap-card.rv{ opacity:0; }
.cap-card.rv.in{ opacity:1; }
.c-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; }
.c-no{ font-size:.78rem; letter-spacing:.14em; color:var(--ink-3); }
.c-badge{ font-family:var(--hand); font-size:1.35rem; color:var(--accent); transform:rotate(-6deg); }
.cap-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,2.4vw,2.1rem); line-height:1.05; margin:0 0 .8rem; }
.cap-card p{ color:var(--ink-2); font-size:.96rem; margin:0 0 1.2rem; flex:1; }
.c-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
.c-tags span{ font-size:.74rem; padding:.28rem .65rem; border:1px dashed var(--rule); border-radius:30px; color:var(--ink-2); }
.svc-get{ align-self:flex-start; font-weight:500; padding-bottom:3px; background:linear-gradient(var(--accent),var(--accent)) left bottom / 0 2px no-repeat; transition:background-size .4s cubic-bezier(.6,0,.2,1); }
.svc-get:hover{ background-size:100% 2px; }
.cap-more{ padding:0 0 14vh; color:var(--ink-2); font-size:1.05rem; }

/* ─── forms: notebook lines ─── */
.field{ display:block; margin:0 0 1.5rem; }
.field label{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem; }
.field label small{ text-transform:none; letter-spacing:0; font-size:.82rem; }
.field input, .field textarea, .field select{ width:100%; font:inherit; font-size:1.05rem; color:var(--ink); background:transparent; border:0; border-bottom:1.5px solid var(--rule); padding:.6rem 0; border-radius:0; transition:border-color .2s; }
.field select{ cursor:pointer; }
.field select option{ background:var(--bg); color:var(--ink); }
.field textarea{ min-height:130px; resize:vertical; line-height:1.6;
  background-image:repeating-linear-gradient(transparent 0 calc(1.68em - 1px), var(--rule) calc(1.68em - 1px) 1.68em); background-attachment:local; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-bottom-color:var(--accent); }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-err{ color:var(--accent); font-family:var(--hand); font-size:1.3rem; min-height:1.6rem; margin-top:.6rem; }
.f-note{ font-size:.86rem; color:var(--ink-3); margin-top:1rem; }

/* quote modal */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:var(--gut); visibility:hidden; opacity:0; transition:opacity .3s, visibility .3s; }
.modal.open{ visibility:visible; opacity:1; }
.modal-bg{ position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card{ position:relative; width:min(640px,100%); max-height:calc(100svh - 2*var(--gut)); overflow:auto; background:var(--bg); border:1.5px solid var(--ink-3); border-radius:var(--hand-radius);
  padding:clamp(1.6rem,4vw,2.8rem); transform:translateY(16px) rotate(-.6deg); transition:transform .4s cubic-bezier(.3,1.3,.5,1); }
.modal.open .modal-card{ transform:rotate(-.4deg); }
.modal-card h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,4.4vw,3.2rem); line-height:1; margin:0 0 .5rem; }
.modal-card .lead{ color:var(--ink-2); margin:0 0 2rem; }
.modal-x{ position:absolute; top:.9rem; right:1rem; font-size:1.7rem; line-height:1; color:var(--ink-2); width:40px; height:40px; }
.modal-x:hover{ color:var(--ink); }

/* ─── testimonial form ─── */
.tm{ max-width:720px; padding:140px 0 14vh; }
.tm-id{ display:flex; align-items:center; gap:1rem; margin-bottom:3rem; }
.tm-id img{ width:58px; height:58px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1.5px var(--rule); }
.tm-id b{ display:block; font-weight:500; }
.tm-id span{ font-size:.88rem; color:var(--ink-2); }
.tm .page-title{ font-size:clamp(2.8rem,7vw,5.4rem); }
.tm .page-lead{ margin-bottom:3rem; }
.tm-done{ display:none; }
body.sent .tm-form{ display:none; }
body.sent .tm-done{ display:block; }

/* ─── 404 ─── */
.lost{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 10vh; }
.lost .page-title{ max-width:9em; }
.lost .hero-cta{ margin-top:2.4rem; }
.lost-doodle{ width:min(320px,70vw); height:auto; margin-bottom:1rem; }
.lost-doodle path{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1.2; stroke-dashoffset:1.1; animation:draw 2.4s ease forwards .3s; }
.lost-doodle path.ac{ stroke:var(--accent); animation-delay:2.4s; animation-duration:.6s; }

@media (max-width:900px){
  .wgrid{ grid-template-columns:1fr; gap:4.5rem; }
  .wcard:nth-child(even){ margin-top:0; }
  .ab-hero{ grid-template-columns:1fr; gap:3.5rem; padding-top:120px; }
  .ab-portrait{ justify-self:start; max-width:280px; margin-left:1.6rem; }
  .ab-intro > div{ grid-column:1 / -1; }
  .exp{ grid-template-columns:1fr; }
  .exp-loc{ text-align:left; }
  .ct-grid{ grid-template-columns:1fr; }
  .case .proj-pair{ grid-template-columns:1fr; }
  .page-head{ padding-top:120px; }
}
@media (max-width:560px){
  .f-row{ grid-template-columns:1fr; }
  .ab-stats b{ font-size:2.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .case .reveal-up{ opacity:1; transform:none; transition:none; }
  .case .proj-shot.wide.reveal-up{ transform:translateX(-50%); }
  .lost-doodle path, .uline .under-svg path{ animation:none!important; stroke-dashoffset:0; }
}

/* ═══ "Ask Roshan" — drawn character chat ═══ */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.boil{ filter:url(#b0); }
html[data-boil="1"] .boil{ filter:url(#b1); }
html[data-boil="2"] .boil{ filter:url(#b2); }
.ask{ position:fixed; right:18px; bottom:18px; z-index:65; }
.ask-launch{ display:flex; align-items:center; gap:.5rem; flex-direction:row-reverse; }
.ask-face{ width:68px; height:68px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 1.5px var(--ink-3), 0 10px 30px rgba(0,0,0,.25); animation:askFloat 3.6s ease-in-out infinite; transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.ask-launch:hover .ask-face{ transform:rotate(-6deg) scale(1.06); }
.ask-hint{ font-size:1.35rem; color:var(--accent); transform:rotate(-5deg); background:var(--bg); padding:0 .3rem; border-radius:6px; transition:opacity .3s; }
.ask.open .ask-hint{ opacity:0; pointer-events:none; }
@keyframes askFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
.ask-panel{ position:fixed; right:18px; bottom:100px; width:min(400px, calc(100vw - 24px)); height:min(620px, calc(100svh - 130px)); display:flex; flex-direction:column;
  background:var(--bg); border:1.5px solid var(--ink-3); border-radius:20px 20px 6px 20px; box-shadow:0 24px 70px rgba(0,0,0,.4); overflow:hidden;
  transform-origin:bottom right; animation:askIn .35s cubic-bezier(.3,1.3,.5,1); }
.ask-panel[hidden]{ display:none; }
@keyframes askIn{ from{ opacity:0; transform:translateY(14px) scale(.96) rotate(1deg); } }
.ask-head{ display:grid; grid-template-columns:96px 1fr auto auto; align-items:center; gap:.4rem .7rem; padding:.7rem .9rem; border-bottom:1px dashed var(--rule);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px); background-size:18px 18px; }
.ask-char{ width:96px; height:96px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 1.5px var(--rule); }
.ask-panel.talking .ask-char{ animation:askTalk .38s ease-in-out infinite alternate; }
@keyframes askTalk{ from{ transform:rotate(-2deg) translateY(0); } to{ transform:rotate(2deg) translateY(-2px); } }
.ask-title b{ display:block; font-family:var(--serif); font-weight:400; font-size:1.55rem; line-height:1; }
.ask-title span{ font-family:var(--hand); font-size:1.15rem; color:var(--accent); }
.ask-voice, .ask-x{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:var(--ink-2); font-size:1.05rem; }
.ask-x{ font-size:1.6rem; }
.ask-voice:hover, .ask-x:hover{ color:var(--ink); background:var(--bg-2); }
.ask-voice[aria-pressed="true"]{ color:var(--accent); }
.ask-log{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
.ask-msg{ max-width:88%; font-size:.93rem; line-height:1.55; padding:.7rem .9rem; overflow-wrap:anywhere; }
.ask-msg.bot{ align-self:flex-start; background:color-mix(in srgb,var(--bg-2) 75%,transparent); border:1.5px solid var(--rule); border-radius:4px 18px 18px 18px; }
.ask-msg.me{ align-self:flex-end; background:var(--ink); color:var(--bg); border-radius:18px 4px 18px 18px; padding:.55rem .85rem; }
.ask-msg a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.ask-msg b{ font-weight:600; }
.ask-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .7rem; }
.ask-chip{ font-size:.8rem; padding:.38rem .8rem; border:1px dashed var(--ink-3); border-radius:30px; color:var(--ink-2); text-align:left; transition:color .2s, border-color .2s, transform .2s; }
.ask-chip:hover{ color:var(--accent); border-color:var(--accent); transform:rotate(-1.5deg); }
.ask-form{ display:flex; border-top:1px dashed var(--rule); }
.ask-form input{ flex:1; min-width:0; font:inherit; font-size:.95rem; color:var(--ink); background:transparent; border:0; padding:1rem; }
.ask-form input:focus{ outline:none; }
.ask-form input::placeholder{ color:var(--ink-3); }
.ask-form button{ width:54px; font-size:1.35rem; color:var(--accent); }
.ask-form:focus-within{ box-shadow:inset 0 2px 0 var(--accent); }
@media (max-width:560px){
  .ask{ right:12px; bottom:12px; }
  .ask-face{ width:58px; height:58px; }
  .ask-hint{ display:none; }
  .ask-panel{ right:8px; left:8px; width:auto; bottom:82px; height:calc(100svh - 104px); }
}
@media (prefers-reduced-motion:reduce){
  .ask-face, .ask-panel, .ask-panel.talking .ask-char{ animation:none; }
  .boil{ filter:none!important; }
}

/* ─── phones & tablets: calmer rendering (no flicker) ─── */
.thread{ contain:layout paint; }
@media (hover:none), (pointer:coarse){
  body::after{ display:none; }                                  /* blended grain overlay */
  .nav.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg); }
  .sk, .boil{ filter:none!important; }                          /* no line boil */
  .modal-bg{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ─── vector cartoon avatar (js/avatar.js) ─── */
.ask-face, .ask-char{ display:block; overflow:hidden; }
.ask-face svg, .ask-char svg{ display:block; width:100%; height:100%; }
.rav-head{ transform-origin:100px 165px; animation:ravIdle 4.2s ease-in-out infinite; }
.rav.talking .rav-head{ animation:ravTalk .52s ease-in-out infinite alternate; }
.rav-brows{ transition:transform .25s ease; }
.rav.talking .rav-brows{ transform:translateY(-1.4px); }
.rav-eye{ transform-box:fill-box; transform-origin:center; transition:transform .07s ease; }
.rav-eyes.blink .rav-eye{ transform:scaleY(.08); }
@keyframes ravIdle{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1.2px) rotate(-.8deg); } }
@keyframes ravTalk{ from{ transform:rotate(-1.8deg) translateY(0); } to{ transform:rotate(1.6deg) translateY(-1px); } }
.ask-panel.talking .ask-char{ animation:none; }
@media (prefers-reduced-motion:reduce){ .rav-head, .rav.talking .rav-head{ animation:none; } }

/* ─── showreel player ─── */
.reel-modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:clamp(12px,3vw,40px); background:rgba(8,8,7,.92); animation:reelIn .3s ease; }
@keyframes reelIn{ from{ opacity:0; } }
.reel-box{ width:min(100%, calc((100svh - 80px) * 16 / 9)); aspect-ratio:16/9; border-radius:6px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.reel-box iframe{ display:block; width:100%; height:100%; border:0; }
.reel-x{ position:absolute; top:14px; right:18px; width:46px; height:46px; font-size:2rem; line-height:1; color:#eeebe3; border-radius:50%; }
.reel-x:hover{ background:rgba(255,255,255,.1); }