:root{color-scheme:dark;--gold:#e5bf57;--gold-soft:#be9e50;--bg:#0c0d0c;--surface:#141613;--ink:#f0eee5;--muted:#b5b7ad;--line:rgba(221,209,167,.17);--mint:#a6d7bc;--serif:'Playfair Display',Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip}body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font:16px/1.7 var(--sans)}button,a,input{touch-action:manipulation}button{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.2}h1,h2{font-family:var(--serif);font-weight:500}img,video{max-width:100%;display:block}button{color:inherit;background:transparent;border:0}[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-80px;z-index:5000;background:var(--gold);color:var(--bg);padding:12px}.skip-link:focus{top:15px}.site-nav{position:sticky;top:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:15px max(5vw,24px);border-bottom:1px solid var(--line);background:rgba(12,13,12,.95);backdrop-filter:blur(12px)}.wordmark{font-size:14px;font-weight:600;letter-spacing:.06em}.wordmark span{color:var(--gold);margin-left:12px}.site-nav>div{display:flex;gap:28px;font-size:14px;color:var(--muted)}.site-nav a:hover{color:var(--gold)}main{max-width:1440px;margin:auto;padding:0 5vw}.spark-field{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .3s}.gallery-open .spark-field{opacity:.18}.hero-section{display:grid;grid-template-columns:1.1fr 1fr;gap:5%;align-items:center;min-height:560px;padding:68px 0 76px}.eyebrow,.section-number,.project-meta{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}.hero-copy h1{font-size:clamp(40px,4.1vw,66px);letter-spacing:-.035em;margin:21px 0 24px}.gold-dot{color:var(--gold)}.hero-copy p{max-width:460px;color:var(--muted);font-size:18px;line-height:1.7}.primary-link{display:inline-flex;gap:42px;align-items:center;color:var(--gold);border-bottom:1px solid var(--gold-soft);padding:12px 0;font-size:14px;font-weight:600}.hero-art{position:relative;display:block;border:1px solid var(--line);border-radius:4px;transform:rotate(-2deg);background:var(--surface);box-shadow:0 25px 80px #0007}.hero-art img{width:100%;height:auto;aspect-ratio:1.4;object-fit:cover}.hero-art>span{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;font-size:15px;color:var(--gold)}.hero-art>span span{font-size:12px;color:var(--muted);text-align:right}.content-section{padding:45px 0 55px;border-top:1px solid var(--line)}.section-header{display:flex;align-items:baseline;gap:22px;margin-bottom:30px}.section-number{min-width:28px}.section-header h2{font-size:34px;letter-spacing:-.025em;margin-bottom:9px}.section-header p{color:var(--muted);font-size:15px;margin:0}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.project-card{position:relative;min-width:0;display:flex;flex-direction:column;background:linear-gradient(140deg,rgba(28,29,24,.92),rgba(15,17,15,.94));border:1px solid var(--line);border-radius:6px;transition:border-color .2s,box-shadow .2s;scroll-margin-top:100px}.project-card:hover,.project-card:focus-within{border-color:var(--gold-soft);box-shadow:0 7px 28px #0004}.project-picture{display:block;overflow:hidden;border-radius:5px 5px 0 0}.project-picture img{aspect-ratio:1.8;object-fit:cover;width:100%;height:auto;transition:transform .4s}.project-card:hover .project-picture img{transform:scale(1.025)}.project-content{padding:24px;display:flex;flex-direction:column;flex:1}.project-meta{display:flex;align-items:center;gap:15px;justify-content:space-between;min-height:21px;margin-bottom:13px;font-size:11px}.intent{padding:3px 8px;border:1px solid currentColor;font-size:10px;white-space:nowrap}.intent-research{color:var(--mint)}.intent-open-ended{color:#aac6e8}.project-title{font-family:var(--serif);font-size:29px;font-weight:500;letter-spacing:-.02em;margin:0 0 15px}.project-title a:hover{color:var(--gold)}.project-description{font-size:15px;color:var(--muted);margin-bottom:20px;line-height:1.7}.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.tag{font-size:12px;color:#c9c4b2;border:1px solid var(--line);padding:3px 8px;border-radius:3px;line-height:1.7}.tag:hover{color:var(--gold);border-color:var(--gold-soft)}.project-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:23px;padding-top:15px;border-top:1px solid var(--line);font-size:13px}.project-actions>a{color:var(--gold)}.preview-button{color:var(--muted);padding:0}.preview-button:hover{color:var(--ink)}.study-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.compact-card{flex-direction:row;background:rgba(18,20,17,.8)}.compact-card .project-picture{width:76px;flex-shrink:0;margin:18px 0 0 16px;border-radius:3px}.compact-card .project-picture img{aspect-ratio:1;width:76px}.compact-card .project-content{padding:18px;min-width:0}.compact-card .project-title{font:500 18px/1.3 var(--sans);margin-bottom:9px}.compact-card .project-description{font-size:13px;line-height:1.65;margin-bottom:13px}.compact-card .project-meta{font-size:10px;margin-bottom:8px;letter-spacing:.05em}.compact-card .tag{font-size:11px;padding:1px 5px}.compact-card .project-actions{font-size:12px;margin-top:13px;padding-top:10px}.tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;padding:28px 20px 35px;max-width:1000px;margin:auto}.cloud-tag{font-family:var(--serif);color:var(--muted);line-height:1.3;transition:color .2s}.cloud-tag:hover,.cloud-tag[aria-pressed=true]{color:var(--gold)}.cloud-tag.size-1{font-size:18px}.cloud-tag.size-2{font-size:25px}.cloud-tag.size-3{font-size:34px;color:#d7c795}.cloud-tag[aria-pressed=true]{text-decoration:underline;text-underline-offset:8px}.technique-results{border-top:1px solid var(--line);padding:25px 0;scroll-margin-top:110px}.results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.results-heading h3{font-family:var(--serif);font-weight:500;font-size:26px}.clear-technique{color:var(--muted);font-size:13px}.technique-results ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px}.technique-results li a{display:block;padding:8px 0;border-bottom:1px solid var(--line);color:var(--gold);font-size:14px}.project-card.highlight-project{outline:2px solid var(--gold);outline-offset:5px}.about-section{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;padding:70px 0;border-top:1px solid var(--line)}.about-section h2{font-size:38px;margin-top:22px}.about-section p{color:var(--muted);font-size:16px}.about-section .subtle{font-size:13px}.footer{max-width:1440px;margin:auto;display:flex;align-items:center;gap:30px;padding:28px 5vw 40px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.footer span{margin-right:auto}
/* Two screenshot hands occupy the free side of the active card. */
.project-actions{flex-wrap:wrap;justify-content:flex-start;gap:10px 14px}.project-primary,.preview-button{white-space:nowrap}.preview-button{margin-left:auto}.learn-more{display:inline-flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--gold-soft);border-radius:4px;background:#e5bf5709;color:var(--gold);font:500 12px/1.3 var(--sans);white-space:nowrap}.learn-more:hover{background:#e5bf571c;border-color:var(--gold)}.compact-card .learn-more{order:3;font-size:11px;padding:6px 9px}.hero-more{display:flex;justify-content:flex-end;margin-top:24px}.story-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}.story-links a{border-bottom:1px solid var(--line)}
.gallery-panel{position:fixed;z-index:1000;top:94px;bottom:25px;pointer-events:none;opacity:0;transform:translateY(9px);filter:blur(5px);transition:opacity .2s,filter .25s,transform .25s}.gallery-panel.visible{opacity:1;transform:none;filter:none}.gallery-images{position:relative;width:100%;height:100%}.gallery-image{position:absolute;margin:0;background:#171913;padding:5px;border:1px solid rgba(229,191,87,.7);border-radius:5px;box-shadow:0 12px 40px #000c,0 0 20px #e5bf5720;transition:opacity .2s}.gallery-image img{width:100%;height:100%;object-fit:contain;border-radius:2px;background:#090b09}.gallery-image figcaption{position:absolute;left:6px;right:6px;bottom:8px;background:rgba(8,10,8,.92);padding:5px 8px;color:#e8d49c;font-size:12px;line-height:1.4;border:1px solid #e5bf5733}.preview-dialog{width:min(1000px,94vw);max-height:90dvh;background:#10130f;color:var(--ink);border:1px solid var(--gold-soft);border-radius:8px;padding:24px;overscroll-behavior:contain}.preview-dialog::backdrop{background:#060807dd;backdrop-filter:blur(8px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:-24px;padding:10px 0;background:#10130f;z-index:1}.dialog-heading h2{font-size:24px;margin:0}.close-preview{color:var(--gold);white-space:nowrap}.dialog-images{display:grid;gap:22px;margin-top:18px}.dialog-images figure{margin:0}.dialog-images img{max-height:65vh;margin:auto}.dialog-images figcaption{font-size:14px;color:var(--muted);text-align:center;padding-top:8px}
/* Shared, modular project stories. The full application keeps its own controls. */
.project-page{max-width:1220px}.story-trail{display:flex;justify-content:space-between;padding:30px 0;color:var(--muted);font-size:13px}.story-trail a{color:var(--gold)}.project-hero{padding:30px 0}.project-hero h1{font-size:clamp(38px,5vw,68px);letter-spacing:-.035em;margin:15px 0 22px;max-width:1000px}.project-hero>p{font-size:20px;line-height:1.65;color:var(--muted);max-width:820px}.project-hero .project-tags{margin:26px 0 10px}.launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:10px 0 35px}.launch-item{display:flex;flex-direction:column;gap:7px;border:1px solid var(--gold-soft);background:#e5bf5709;padding:18px 22px;border-radius:4px}.launch-item strong{font-size:16px;font-weight:500;color:var(--gold)}.launch-item strong span{float:right}.launch-item>span{font-size:13px;color:var(--muted)}.launch-item:hover{background:#e5bf5718}.project-lead-image{margin:0 0 50px}.project-lead-image img{width:100%;height:auto;max-height:620px;object-fit:contain;background:#080a08;border:1px solid var(--line);border-radius:5px}.project-lead-image figcaption,.story-gallery figcaption,.evolution figcaption{font-size:13px;color:var(--muted);margin-top:10px}.story-section{display:grid;grid-template-columns:1fr 2fr;gap:8%;padding:38px 0;border-top:1px solid var(--line);scroll-margin-top:100px}.story-section h2{font-size:29px;line-height:1.35}.story-section p,.story-section li{color:var(--muted);font-size:16px}.story-section ul{padding-left:20px;margin-top:0}.story-section li{margin-bottom:12px}.story-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;padding:25px 0 40px}.story-gallery figure{margin:0}.story-gallery img{height:auto;aspect-ratio:1.6;object-fit:contain;background:#080a08;border:1px solid var(--line)}.evolution{border-color:var(--gold-soft);margin-top:20px}.evolution figure{margin:25px 0}.evolution img{max-height:370px;object-fit:contain}.evolution video{margin:25px 0}.text-link{color:var(--gold);font-size:14px}.scope-section{margin-top:20px}.scope-section li{font-size:14px}.page-revision{font-size:12px;color:var(--muted);padding:30px 0 50px}
@media(min-width:1450px){main{padding-left:65px;padding-right:65px}}
@media(max-width:1100px){.study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy h1{font-size:45px}.hero-section{min-height:490px}.project-title{font-size:25px}.hero-art>span{flex-direction:column;align-items:flex-start}.hero-art>span span{text-align:left}}
@media(max-width:760px){html{scroll-padding-top:120px}.site-nav{padding:13px 20px;align-items:flex-start;flex-direction:column;gap:10px}.site-nav>div{gap:23px;font-size:12px;flex-wrap:wrap}.wordmark{font-size:12px}main{padding:0 20px}.hero-section{grid-template-columns:1fr;padding:42px 0;gap:32px}.hero-copy h1{font-size:42px}.hero-copy p{font-size:16px}.hero-art{transform:none;max-width:600px}.hero-art img{aspect-ratio:1.9}.hero-art>span{flex-direction:row;align-items:center}.hero-art>span span{font-size:11px;text-align:right}.eyebrow{font-size:10px}.section-header{gap:12px}.section-header h2{font-size:29px}.section-header p{font-size:14px}.project-grid{grid-template-columns:1fr;gap:20px}.study-grid{grid-template-columns:1fr}.project-title{font-size:27px}.project-content{padding:22px}.content-section{padding:32px 0 38px}.about-section{grid-template-columns:1fr;gap:18px;padding:40px 0}.about-section h2{font-size:33px}.footer{padding:24px 20px;flex-wrap:wrap;gap:20px}.footer span{width:100%}.gallery-panel{display:none}.tag-cloud{gap:12px 15px;padding:20px 0}.cloud-tag.size-3{font-size:27px}.cloud-tag.size-2{font-size:22px}.cloud-tag.size-1{font-size:16px}.technique-results ul{grid-template-columns:1fr}.results-heading{align-items:flex-start}.results-heading h3{font-size:23px}.clear-technique{white-space:nowrap;font-size:12px}.story-section{grid-template-columns:1fr;gap:12px;padding:30px 0}.story-section h2{font-size:27px;margin-bottom:0}.project-hero{padding:15px 0}.project-hero>p{font-size:18px}.story-gallery{grid-template-columns:1fr}.project-lead-image{margin-bottom:30px}.project-page .project-hero h1{font-size:43px}.dialog-heading h2{font-size:20px}.preview-dialog{padding:15px}.story-trail{padding:22px 0}.project-meta{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.spark-field{opacity:.25}.hero-art{transform:none}}
.project-equation{aspect-ratio:1.8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at center,#e5bf5710,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 25px,#e5bf5705 26px),repeating-linear-gradient(90deg,transparent,transparent 25px,#e5bf5705 26px);color:var(--gold)}.project-equation strong{font:italic 500 clamp(36px,4vw,58px)/1.2 Georgia,serif;letter-spacing:.04em}.project-equation span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.evolution video{width:100%;max-height:460px;background:#060806}.story-trail>span{display:flex;align-items:center;gap:12px}.technique-results h3:focus{outline:2px solid var(--gold);outline-offset:6px}@media(max-width:480px){.story-trail>span{align-items:flex-end;flex-direction:column;gap:8px}}
/* Each hand keeps its own arc and depth; preview surfaces never intercept the cursor. */
.gallery-panel{filter:none;transition:opacity .42s ease,transform .48s cubic-bezier(.22,.68,.25,1)}
.gallery-panel.visible{filter:none}
.gallery-image{transform-origin:center;overflow:hidden}
.gallery-image[data-hand=far]{border-color:#c4ac7599;box-shadow:0 10px 34px #000b,0 0 15px #e5ae4220}
.gallery-image[data-hand=far] img{filter:saturate(.9) brightness(.94)}
.gallery-image[data-hand=near]{box-shadow:0 18px 48px #000c,0 0 23px #e5ae4240}
.gallery-image[data-frame-style=quiet]{border-color:#bcb69f70;box-shadow:0 13px 31px #0009,0 0 7px #d6b96b12}
.gallery-image[data-frame-style=frameless]{padding:0;border-color:transparent;background:transparent;box-shadow:none}
.gallery-image figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(10px,.7vw,12px)}
@media(prefers-reduced-motion:reduce){.gallery-panel{transition:none;transform:none}}

/* Authorable page density. Small screens retain the one-column reading layout. */
@media(min-width:761px){
  .project-grid{grid-template-columns:repeat(var(--project-columns,2),minmax(0,1fr));gap:var(--project-card-gap,28px)}
  html[data-authored-page-width] body[data-page=home].has-section-rail>main,
  html[data-authored-page-width] body[data-page=home].has-section-rail>.footer,
  html[data-authored-page-width] body[data-page=home]>main,
  html[data-authored-page-width] body[data-page=home]>.footer{width:auto;max-width:none;margin-left:var(--page-side-margin);margin-right:var(--page-side-margin);padding-left:0;padding-right:0}
}
@media(min-width:1280px){html[data-authored-page-width] .section-rail{left:max(14px,calc(var(--page-side-margin)/2 - 37px))}}
/* Balance the free space after reserving the scaled elevator's left-hand lane. */
@media(min-width:1280px){
  html[data-margin-excludes-elevator]{--balanced-side-margin:var(--page-side-margin, max(120px,calc((100vw - 1440px)/2 + 32px)));--elevator-lane:calc(28px + 74px * var(--elevator-scale,1))}
  html[data-margin-excludes-elevator] body[data-page=home].has-section-rail>main,
  html[data-margin-excludes-elevator] body[data-page=home].has-section-rail>.footer{width:auto;max-width:none;padding-left:0;padding-right:0;margin-left:max(var(--balanced-side-margin),calc(var(--elevator-lane) + 24px));margin-right:max(24px,calc(var(--balanced-side-margin) - var(--elevator-lane)))}
  html[data-margin-excludes-elevator] body[data-page=home] .section-rail{left:14px}
}

.portfolio-self-card{grid-column:1/-1;overflow:hidden;background:radial-gradient(circle at 88% 18%,rgba(220,190,112,.12),transparent 28%),linear-gradient(130deg,rgba(31,35,29,.96),rgba(12,19,20,.96));border-color:rgba(218,190,120,.42)}
.portfolio-self-card::after{content:"";position:absolute;right:5%;top:20%;width:24%;height:50%;pointer-events:none;opacity:.42;background:linear-gradient(90deg,transparent 0 9%,rgba(222,194,121,.7) 9% 10%,transparent 10% 28%,rgba(143,202,190,.65) 28% 29%,transparent 29% 52%,rgba(222,194,121,.7) 52% 53%,transparent 53%);transform:skewX(-18deg)}
.portfolio-self-card .project-content{max-width:min(920px,75%)}
.portfolio-self-card .project-title{font-size:clamp(31px,3vw,44px)}
.portfolio-self-card .tag{pointer-events:none}
.portfolio-self-presence{color:var(--gold);letter-spacing:.04em}
@media(max-width:760px){.portfolio-self-card .project-content{max-width:none}.portfolio-self-card::after{display:none}}
.scope-section .manual-media{max-width:560px;margin-top:24px}
.project-card[data-card-href]{cursor:pointer}
.project-card[data-card-kind=live] .project-primary::before{content:'●';margin-right:7px;color:#88d9bc;font-size:9px;filter:drop-shadow(0 0 5px #88d9bc)}
/* The document owns reading scroll; embedded labs hide their own scroll tracks. */
html{scrollbar-color:#a99055 #101b20;scrollbar-width:thin}
html::-webkit-scrollbar{width:11px;height:11px}
html::-webkit-scrollbar-track{background:#101b20}
html::-webkit-scrollbar-thumb{background:linear-gradient(#c9b378,#82703f);border:3px solid #101b20;border-radius:9px}
html::-webkit-scrollbar-thumb:hover{background:#e1c87c}

/* project-context:start */
.project-context{box-sizing:border-box;min-width:0;max-width:1120px;margin:22px auto;padding:17px 20px;border:1px solid rgba(218,190,120,.3);border-left:3px solid #d7bc77;border-radius:12px;background:rgba(20,29,29,.9);color:#dfdfd5;font-family:Inter,Arial,sans-serif;text-align:left}
.project-context>p{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;margin:0;font-size:.94rem;line-height:1.6;letter-spacing:normal}
.project-context>p+p{margin-top:8px}
.project-context>p>strong{color:#e3ca88;font-size:.75rem;font-weight:600;line-height:2;letter-spacing:.04em}
.project-context>p>span{min-width:0;overflow-wrap:anywhere}
.project-context-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(218,190,120,.18)}
.project-context-links>a{max-width:100%;color:#e3ca88;font-size:.86rem;line-height:1.5;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.project-context-links>a>small{display:block;color:#b6bdb6;font-size:.74rem;text-decoration:none}
.project-context-links>a:focus-visible{outline:2px solid #f4d98c;outline-offset:4px;border-radius:2px}
.overview-masthead .project-context{margin:18px 0 0;padding:13px 15px}
.overview-masthead .project-context>p{grid-template-columns:1fr;gap:2px;font-size:.88rem}
.overview-masthead .project-context-links>a{font-size:.82rem}
@media(max-width:600px){.project-context{padding:14px;margin:18px 0}.project-context>p{grid-template-columns:1fr;gap:2px}.project-context>p+p{margin-top:10px}}
/* project-context:end */