:root {
  --bg:#141514; --paper:#eeece5; --muted:#a5a59e; --line:#363833;
  --orange:#ec922b; --media:#1b1c1a;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,4vw,100px); --header-height:96px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--paper); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
a { color:inherit; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
.cursor-trail { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:40; }
@media (hover:hover) and (pointer:fine) {
  html { cursor:url('/assets/cursor.svg') 22 19, auto; }
  a,button { cursor:url('/assets/cursor.svg') 22 19, pointer; }
  input,textarea,[contenteditable="true"] { cursor:text; }
  button:disabled { cursor:not-allowed; }
}
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--orange); outline-offset:6px; }
::selection { background:var(--paper); color:var(--bg); }
p,h1,h2,h3,figure { margin:0; }
h1,h2,h3 { font-weight:700; line-height:1.02; letter-spacing:-.055em; }
p { color:var(--muted); }
.page-frame { width:100%; }
.wrap { width:100%; padding-inline:var(--gutter); margin-inline:auto; }
.eyebrow,.small,.review-note { font-family:var(--mono); }
.eyebrow { font-size:10px; line-height:1.6; letter-spacing:.035em; color:var(--muted); }
.small { font-size:11px; line-height:1.7; color:var(--muted); }
.orange { color:var(--orange); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:30; background:var(--paper); color:var(--bg); padding:12px; }
.skip-link:focus { top:12px; }
.text-link { display:inline-flex; align-items:center; gap:0; font-size:13px; padding-block:10px; }
.arrow-link { display:inline-block; font-size:34px; line-height:1; padding:8px 0; width:44px; }

/* One header. Full-width sections share only a comfortable text gutter. */
.site-header { height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark { font-size:24px; font-weight:500; letter-spacing:-.035em; white-space:nowrap; flex-shrink:0; }
.site-header nav { display:flex; align-items:center; gap:36px; font:12px var(--mono); }
.site-header nav a { padding-block:14px; position:relative; }
.contact-dot { display:grid; place-items:center; width:24px; }

.hero { position:relative; min-height:calc(94svh - var(--header-height)); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; isolation:isolate; overflow:clip; padding-block:40px 90px; }
.hero-copy { position:relative; z-index:2; pointer-events:none; }
.hero h1 { font-size:clamp(68px,7.8vw,120px); letter-spacing:-.063em; white-space:nowrap; }
.tagline { font-size:clamp(24px,2.7vw,46px); line-height:1.25; letter-spacing:-.025em; margin-top:28px; }
.signal-stage { position:relative; width:min(46vw,74svh); max-width:900px; justify-self:end; z-index:1; }
.signal-art { width:100%; aspect-ratio:1; position:relative; }
.signal-art img,.signal-art canvas { width:100%; height:100%; display:block; position:absolute; inset:0; }
.signal-art canvas { opacity:0; }
.signal-stage.is-live canvas { opacity:1; }
.signal-stage.is-live .signal-fallback { visibility:hidden; }
.signal-stage figcaption { position:absolute; bottom:2%; left:20%; right:12%; display:flex; gap:18px; align-items:center; justify-content:space-between; }
.signal-stage figcaption .eyebrow { font-size:8px; letter-spacing:.07em; color:#999d90; }
.caption-divider { padding-inline:7px; color:#63685b; }
.signal-controls[hidden] { display:none; }
.signal-controls button { display:grid; place-items:center; width:32px; height:32px; background:transparent; border:1px solid #3f4439; border-radius:50%; font-size:10px; }
.signal-controls button:hover { border-color:var(--paper); }

.writing,.projects,.selected-work { min-height:96svh; border-top:1px solid var(--line); padding-block:clamp(40px,6svh,80px); display:flex; flex-direction:column; scroll-margin-top:24px; }
.writing { min-height:0; }
.section-intro { max-width:75ch; margin-top:30px; font-size:clamp(16px,1.35vw,21px); line-height:1.7; }
.section-label { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.section-label h2 { font-size:clamp(44px,5.4vw,92px); letter-spacing:-.055em; }
.section-label>span,.section-label>a { font:11px var(--mono); color:var(--muted); }
.section-label a:hover { color:var(--paper); }
.section-number { margin-left:40px; color:#767b6e; }
.writing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(25px,4vw,90px); flex:1; align-content:center; padding-block:40px 0; }
.writing-card { display:flex; flex-direction:column; min-width:0; }
.writing-image { background:var(--bg); display:block; overflow:hidden; aspect-ratio:1.4; margin-bottom:28px; }
.writing-image img { display:block; width:100%; height:100%; object-fit:contain; opacity:.82; transition:transform .6s cubic-bezier(.2,.65,.3,1),opacity .4s; }
.writing-image:hover img { transform:scale(1.035); opacity:1; }
.note-date { font-size:10px; color:#979a8e; text-transform:uppercase; margin-bottom:16px; }
.writing-card h3 { font-size:clamp(26px,2.4vw,44px); line-height:1.1; letter-spacing:-.045em; }
.note-description { font:13px/1.7 var(--mono); margin-block:21px 27px; color:#b3b5aa; max-width:42ch; }
.writing-title-link { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.writing-title-link .row-arrow { flex:none; }
.writing-title-link:hover .row-arrow { transform:translate(3px,-3px); }

.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,5vw,100px); flex:1; align-content:center; padding-block:60px 20px; }
.project { min-width:0; }
.project-art { background:var(--bg); display:flex; align-items:center; justify-content:center; aspect-ratio:1.4; overflow:hidden; }
.project-art img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .7s cubic-bezier(.2,.65,.3,1); }
.vj-art img { width:90%; height:90%; max-width:none; flex-shrink:0; mix-blend-mode:screen; }
.project-art:hover img { transform:scale(1.025); }
.phone-art { background:#1c201d; }
.phone-art img { height:85%; width:auto; max-width:100%; }
.project-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:30px; }
.project-caption h3 { font-size:clamp(30px,3.3vw,58px); letter-spacing:-.045em; font-weight:600; }
.project-caption p { font:13px/1.6 var(--mono); margin-top:12px; }
.project-caption .arrow-link { width:auto; min-width:30px; }
.project-product-link { display:inline-block; margin-top:18px; padding-block:8px; font:11px/1.7 var(--mono); color:var(--muted); text-decoration:underline; text-underline-offset:5px; }
.project-product-link:hover { color:var(--paper); }
.project-tool { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); min-height:740px; border-top:1px solid var(--line); overflow:hidden; overflow:clip; background:#eeece5; color:#20211e; --line:#c4c2b7; --paper:#20211e; --muted:#505248; }
.project-tool-copy { position:relative; z-index:2; align-self:center; padding-block:80px 88px; padding-right:35px; max-width:600px; }
.project-tool h2 { margin-top:26px; font-size:clamp(54px,6.1vw,96px); line-height:.98; letter-spacing:-.06em; }
.project-tool .project-tool-lead { margin-block:24px; max-width:22ch; color:var(--paper); font-size:clamp(22px,2.1vw,30px); line-height:1.25; letter-spacing:-.025em; }
.project-tool-copy>p:not(.eyebrow):not(.project-tool-lead) { max-width:45ch; font-size:16px; line-height:1.75; margin-top:18px; }
.project-tool-action { margin-top:32px; min-height:60px; padding:18px 28px; border:1px solid var(--bg); border-radius:3px; background:var(--bg); color:#eeece5; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.01em; transition:border-color .2s; }
.project-tool-action:is(:hover,:focus-visible) { border-color:var(--orange); }
.project-tool-preview { position:relative; z-index:1; display:block; min-width:0; perspective:1500px; }
.project-tool-preview img { position:absolute; top:160px; left:8%; display:block; width:clamp(720px,60vw,1200px); max-width:none; height:auto; transform-origin:top left; transform:rotate(-8deg); border:1px solid #aaa99f; border-radius:3px; box-shadow:-15px 20px 55px #282b2326; }
.project-tool-preview:focus-visible { outline-offset:-8px; }
@media(max-width:900px) {
  .project-tool { grid-template-columns:1fr; }
  .project-tool-copy { max-width:620px; padding:52px 0 36px; }
  .project-tool h2 { font-size:clamp(54px,10vw,80px); }
  .project-tool-preview { height:370px; }
  .project-tool-preview img { top:100px; left:12%; width:920px; }
}
@media(max-width:500px) {
  .project-tool-copy { padding-top:44px; }
  .project-tool h2 { margin-top:22px; }
  .project-tool-copy>p:not(.eyebrow):not(.project-tool-lead) { font-size:15px; }
  .project-tool-preview { height:270px; }
  .project-tool-preview img { width:660px; }
}

.newsletter { max-width:440px; width:100%; min-width:0; justify-self:end; }
.newsletter-description { margin-bottom:18px; }
.newsletter-embed { min-height:58px; width:100%; color-scheme:light; }
.newsletter-fallback { margin-top:12px; color:var(--muted); }
.newsletter-fallback a { text-decoration:underline; text-underline-offset:4px; }
.newsletter-fallback a:hover { color:var(--paper); }
.review-note { font-size:8px; color:#818578; text-align:right; padding-bottom:25px; }
.archive{padding-block:75px 110px;min-height:75vh}.archive h1{font-size:clamp(60px,8vw,106px);margin-block:20px 30px}.archive-intro{font-size:22px;line-height:1.5}.archive .note-list{margin-top:70px}.archive .note-row{padding-block:36px}.archive .note-row h2{font-size:30px;line-height:1.2}.archive .note-row p{font-size:14px;margin-top:15px;max-width:670px}.archive-foot{margin-top:30px}.article,.project-detail{padding-block:55px 95px}.back-link{margin-bottom:55px}.article-header{max-width:930px;margin-bottom:50px}.article-header h1{font-size:clamp(45px,6.3vw,85px);line-height:1.06;margin-block:20px 28px}.article-deck{font-size:20px;max-width:780px;line-height:1.6}.article-image{max-width:980px;margin-bottom:65px}.article-image img{display:block;width:100%;height:auto}.article-image figcaption{margin-top:13px}.prose{max-width:700px;margin-inline:auto;font-size:18px;line-height:1.85}.prose p{margin-bottom:25px;color:var(--paper)}.prose h2{font-size:32px;line-height:1.2;margin-block:45px 24px}.prose h3{font-size:26px;margin-block:35px 18px}.prose ul,.prose ol{padding-left:24px}.prose blockquote{border-left:1px solid var(--muted);margin-inline:0;padding-left:24px}.prose img{max-width:100%;height:auto}.project-detail-art{max-width:1000px;margin-bottom:55px}.project-detail-art img{display:block;width:100%;max-height:500px;object-fit:contain;background:var(--media)}
/* Article reading measures stay bounded independently of the homepage. */
.archive,.article,.project-detail { max-width:1340px; }
.archive .note-list { border-top:1px solid var(--line); }
.note-row { display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:center; border-bottom:1px solid var(--line); padding-block:30px; }
.row-arrow { font-size:28px; transition:transform .2s; }
.article-header h1 { font-weight:600; }
.article-image img { border-radius:3px; }
.article .prose,.project-detail .prose { padding-inline:12px; }
.project-detail-art img { background:transparent; height:auto; }
.vjxy-story .project-detail-art { max-width:1100px; margin-inline:auto; }
.vjxy-story .project-detail-art img { max-height:none; }
.vjxy-story .vjxy-wide { width:min(1060px,calc(100vw - var(--gutter)*2 - 24px)); max-width:none; margin-left:50%; transform:translateX(-50%); }
.vjxy-story .case-figure--wide { width:min(1060px,calc(100vw - var(--gutter)*2 - 24px)); }
.vjxy-story .case-figure { margin-block:48px 64px; }
.vjxy-story .case-figure figcaption { max-width:700px; margin:16px auto 0; color:var(--muted); font-size:14px; line-height:1.65; }
.back-link { font-size:12px; }

@media(prefers-reduced-motion:no-preference) {
  .hero h1 { animation:arrive .9s .1s both; }
  .tagline { animation:arrive .9s .2s both; }
  .signal-stage { animation:signal-arrive 1.8s both; }
  .writing-card,.project { animation:section-arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 20%; }
  @keyframes arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
  @keyframes signal-arrive { from { opacity:0; transform:scale(.93) rotate(-8deg); } to { opacity:1; transform:none; } }
  @keyframes section-arrive { from { opacity:.45; transform:translateY(18px); } to { opacity:1; transform:none; } }
}
@media(max-width:1000px) {
  .hero { grid-template-columns:1fr; align-content:center; gap:10px; padding-top:48px; }
  .hero h1 { font-size:clamp(64px,10vw,96px); }
  .hero-copy { align-self:end; }
  .signal-stage { width:min(65vw,51svh); justify-self:end; }
  .signal-stage figcaption .eyebrow { font-size:7px; }
  .tagline { margin-top:20px; font-size:28px; }
  .writing-grid { gap:25px; }
  .note-description { font-size:12px; }
  .writing-card h3 { font-size:28px; }
}
@media(max-width:650px) {
  :root { --gutter:24px; --header-height:76px; }
  .wordmark { font-size:21px; }
  .site-header nav { gap:22px; font-size:11px; }
  .site-header { gap:18px; }
  .contact-dot { width:18px; }
  .hero { min-height:calc(96svh - var(--header-height)); padding-block:38px 86px; gap:12px; }
  .hero h1 { font-size:clamp(60px,13vw,82px); white-space:normal; max-width:560px; }
  .tagline { font-size:23px; margin-top:22px; }
  .signal-stage { width:min(92vw,48svh); max-width:100%; justify-self:center; }
  .signal-stage figcaption { left:17%; right:9%; bottom:0; }
  .signal-stage figcaption .eyebrow { font-size:7px; }
  .writing,.projects,.selected-work { padding-block:40px 50px; }
  .section-label { gap:18px; }
  .section-label h2 { font-size:48px; }
  .section-label>span,.section-label>a { font-size:9px; }
  .section-number { display:none; }
  .writing-grid { grid-template-columns:1fr; gap:48px; padding-top:38px; }
  .writing-card { border-bottom:1px solid var(--line); padding-bottom:35px; }
  .writing-card:last-child { border:0; padding-bottom:0; }
  .writing-image { aspect-ratio:1.4; margin-bottom:26px; }
  .writing-card h3 { font-size:34px; }
  .note-date { font-size:9px; }
  .note-description { font-size:13px; margin-block:18px 22px; }
  .project-grid { grid-template-columns:1fr; gap:70px; padding-block:45px 5px; }
  .project-art { aspect-ratio:1.35; }
  .project-caption { padding-top:22px; }
  .project-caption h3 { font-size:38px; }
  .project-caption p { font-size:12px; }
  .newsletter { max-width:none; }
  .input-row { min-height:49px; }
  .input-row button { padding-inline:18px; font-size:11px; }
  .input-row input { font-size:11px; padding-inline:14px; }
  .review-note { font-size:7px; }
  .archive { padding-block:40px 65px; }
  .archive h1 { font-size:61px; }
  .archive-intro { font-size:18px; }
  .archive .note-list { margin-top:40px; }
  .note-row { grid-template-columns:1fr; gap:12px; }
  .note-row>.small { grid-column:1; }
  .note-row>div { grid-column:1; grid-row:2; }
  .archive .note-row h2 { font-size:28px; }
  .article,.project-detail { padding-block:30px 65px; }
  .back-link { margin-bottom:35px; }
  .article-header { margin-bottom:35px; }
  .article-header h1 { font-size:43px; }
  .article-deck { font-size:17px; }
  .article-image { margin-bottom:38px; }
  .prose { font-size:16px; }
  .prose h2 { font-size:28px; }

}
@media(max-width:380px) {
  :root { --gutter:20px; }
  .wordmark { font-size:19px; }
  .site-header nav { font-size:9px; gap:15px; }
  .contact-dot { width:12px; }
  .hero h1 { font-size:60px; }
  .tagline { font-size:21px; }
  .section-label h2 { font-size:42px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .signal-art canvas { display:none; }
  .signal-stage.is-live .signal-fallback { visibility:visible; }
}

/* Consultancy stories and owned products have their own reading hierarchy. */
.case-study-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,5vw,100px); margin-top:38px; }
.case-study-card { min-width:0; border-top:1px solid var(--line); }
.case-study-card-link { position:relative; display:block; height:100%; padding:29px 54px 35px 0; }
.case-study-card h3 { font-size:clamp(25px,2.5vw,39px); font-weight:600; line-height:1.16; letter-spacing:-.04em; margin:14px 0 17px; }
.case-study-card p { max-width:53ch; font-size:14px; line-height:1.65; }
.case-study-arrow { position:absolute; right:5px; top:30px; font-size:28px; transition:transform .2s,color .2s; }
.case-study-card-link:hover .case-study-arrow { transform:translate(3px,-3px); color:var(--orange); }
.additional-work { margin-top:42px; }
.additional-work h3 { font-weight:400; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; }
.additional-work ul { list-style:none; padding:0; margin:0; }
.additional-work li { border-top:1px solid var(--line); }
.additional-work li:last-child a { padding-bottom:0; }
.additional-work a { display:grid; grid-template-columns:minmax(160px,1fr) 2fr 28px; gap:24px; align-items:center; padding-block:20px; }
.additional-work-client { font:11px/1.6 var(--mono); color:var(--muted); }
.additional-work-title { font-size:clamp(16px,1.5vw,23px); line-height:1.4; letter-spacing:-.02em; }
.additional-work a:hover .row-arrow { transform:translate(3px,-3px); color:var(--orange); }
.project-facts { max-width:1000px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-block:23px; border-block:1px solid var(--line); margin:0 0 55px; }
.project-facts div { min-width:0; }
.project-facts dt { color:var(--muted); font:10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.project-facts dd { margin:7px 0 0; font-size:14px; line-height:1.45; }
@media(max-width:650px) {
  .case-study-grid { grid-template-columns:1fr; margin-top:28px; }
  .case-study-card-link { padding-block:26px 32px; }
  .case-study-card h3 { font-size:30px; }
  .case-study-card p { font-size:13px; }
  .additional-work a { grid-template-columns:1fr 28px; gap:7px 15px; }
  .additional-work-client { grid-column:1; }
  .additional-work-title { grid-column:1; grid-row:2; }
  .additional-work .row-arrow { grid-column:2; grid-row:1 / 3; }
  .project-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 18px; margin-bottom:40px; }
}

/* Body figures follow the text column; wide figures extend beyond it. */
.case-figure { width:100%; margin:42px 0 54px; }
.case-figure--wide { width:min(1000px,calc(100vw - 2 * var(--gutter))); max-width:none; margin-left:50%; transform:translateX(-50%); }
.case-figure > a { display:block; }
.case-figure img { display:block; width:100%; height:auto; background:var(--media); }
.case-figure--transparent img { background:transparent; }
/* Original chart screenshot: display source rows 165–1305, keeping the heading and top three entries. */
.case-figure > .happy-buckets-chart-crop { aspect-ratio:1206 / 1140; overflow:hidden; }
.happy-buckets-chart-crop img { transform:translateY(-6.292906%); }
.case-figure figcaption { margin-top:12px; color:var(--muted); font:11px/1.65 var(--mono); }
@media(max-width:650px) { .case-figure { margin-block:34px 44px; } .case-figure figcaption { font-size:10px; } }

/* LinkedIn stays quiet in the navigation. */
.nav-linkedin { white-space:nowrap; }
@media(max-width:760px) {
  :root { --header-height:112px; }
  .site-header { flex-wrap:wrap; align-content:center; gap:4px; }
  .site-header>.wordmark { width:100%; }
  .site-header nav { width:100%; justify-content:space-between; gap:16px; font-size:11px; }
  .site-header nav a { padding-block:10px; }
}

@media(max-width:600px) {
  .site-header nav { gap:8px; font-size:10px; }
  .site-header .contact-dot { display:none; }
}

/* A quiet, permanent notice; privacy choices never interrupt the page. */
.privacy-note { margin:0 0 24px; color:var(--muted); font-size:12px; line-height:1.6; }
.privacy-controls { display:flex; flex-wrap:wrap; gap:12px; margin-block:24px; }
.privacy-controls[hidden] { display:none; }
.privacy-controls button { padding:12px 18px; color:var(--paper); background:transparent; border:1px solid var(--muted); border-radius:3px; font:inherit; cursor:pointer; }
.privacy-controls button:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.privacy-controls button:disabled { opacity:.55; cursor:default; }
.privacy-controls [role=status] { flex-basis:100%; font-size:15px; }