/* Original landing-page structure, purpose-built monochrome surfaces. */
html[data-theme="mono"]{--mode-bg:#fff;--mode-text:#111;--mode-muted:#505050;--mode-line:#ccc;--mode-shadow:none;--line:#ccc}
html[data-theme="mono"],html[data-theme="mono"] body{background:#fff;color:#111;background-image:none}
body::before,.glow-clip{display:none!important}
html[data-theme="mono"] .text-bone{color:#111!important}html[data-theme="mono"] .text-mute{color:#505050!important}html[data-theme="mono"] .border-line{border-color:#ccc!important}
::selection{background:#111;color:#fff}:focus-visible{outline:2px solid currentColor;outline-offset:5px}
html[data-theme="mono"] .glass{background:#fff;border:1px solid #ccc;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#111}
html[data-theme="mono"] .glass:hover{background:#eee;border-color:#111}
.hero-box{background:#f5f5f5;border:1px solid #ddd;border-radius:24px;height:calc(100svh - 48px);min-height:560px;max-height:820px}
.hero-content{padding:100px 30px 60px}.hero-box h1{color:#111;font-size:clamp(34px,4vw,58px);letter-spacing:-.045em;line-height:1.1;max-width:950px}
.hero-el-1.glass{background:white;box-shadow:none;border-color:#ddd}

.nav-pill{color:#333}.nav-pill::before{background:#111}.nav-pill:hover{color:white}.burger-line{background:#111}
#mobile-menu{background:#fff;backdrop-filter:none}#mobile-menu::before,#mobile-menu::after{display:none}#mobile-menu a.m-link{color:#111;border-color:#ccc}

#work .headline{color:#111}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px;align-items:start}
.project{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;min-width:0;color:#111}
.project-image{aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#fff;width:100%}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s}.project:hover img{transform:scale(1.02)}
.project-caption{padding:20px 0 0}.card-year{font-size:12px;color:#555}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}.project-tags span{background:#eee;color:#333;font-size:13px;line-height:1.35;padding:9px 13px;border-radius:5px}
#about{background:#111;color:#fff;max-width:none;padding-left:max(32px,calc((100vw - 1088px)/2));padding-right:max(32px,calc((100vw - 1088px)/2));margin-top:30px}#about .about-story{border:0}#about .about-label{color:#ddd}#about .about-lead{color:#fff}#about .about-secondary-copy{color:#d0d0d0}html[data-theme="mono"] #about .text-mute{color:#ccc!important}

#contact{background:#111;color:white}html[data-theme="mono"] #contact .text-mute{color:#ccc!important}.footer-social{color:#fff;background:transparent;border-color:#666}.btn-swap::after{background:#fff}
@media(max-width:767px){.hero-box{min-height:0;height:calc(100svh - 24px);max-height:780px;border-radius:18px}.hero-content{padding:100px 22px 40px}.hero-box h1{font-size:clamp(29px,7.5vw,40px);max-width:100%;overflow-wrap:normal}.projects{grid-template-columns:1fr;gap:30px}.project-tags{gap:7px;margin-top:18px}.project-tags span{font-size:12px;padding:8px 11px}#about{padding-inline:24px}}
@media(max-height:600px){.hero-box{height:auto;min-height:0}.hero-content{padding-top:110px;padding-bottom:35px}.hero-box h1{font-size:32px}}
/* Reference-led finishing: crisp pill navigation and a subtle graphic field. */
.hero-box{background:#fff;border-color:#e3e3e3;box-shadow:0 12px 40px #00000006;isolation:isolate;}
.hero-box::before{content:'';position:absolute;top:100px;left:5%;width:270px;height:250px;z-index:-1;pointer-events:none;background-image:radial-gradient(#111 1px,transparent 1px);background-size:13px 13px;opacity:.10;mask-image:linear-gradient(135deg,#000,transparent 72%);}
.hero-box::after{content:'';position:absolute;right:5%;bottom:8%;width:170px;height:170px;pointer-events:none;z-index:-1;background-image:radial-gradient(#111 1px,transparent 1px);background-size:13px 13px;opacity:.07;mask-image:linear-gradient(315deg,#000,transparent 75%);}
html[data-theme="mono"] .site-nav .glass{border-color:#e3e3e3;background:#fff;box-shadow:0 2px 6px #00000004;}

.nav-pill{position:relative;z-index:1;padding:10px 19px;color:#555;transition:color .2s ease;overflow:visible;}
.nav-pill::before{display:none!important;}.nav-pill:not(.nav-highlight):hover{color:#111;}
html[data-theme="mono"] .nav-side.right>a:last-of-type{background:#111;color:#fff;border-color:#111;transition:transform .25s,background .25s;}
html[data-theme="mono"] .nav-side.right>a:last-of-type:hover{background:#333;color:#fff;transform:translateY(-2px);}

.hero-el-1.glass{padding:7px 17px 7px 7px;border-color:#e5e5e5;box-shadow:0 3px 12px #00000004!important;}

.project-image{border:1px solid #e8e8e8;border-radius:14px;}.project-tags span{border:1px solid #dedede;background:#f7f7f7;transition:background .2s,color .2s;}.project:hover .project-tags span{background:#111;color:#fff;border-color:#111;}
#about{border-radius:24px;max-width:calc(100% - 48px);padding-inline:max(28px,calc((100vw - 1088px)/2 - 24px));}

.footer-social{transition:background .25s,color .25s,transform .25s;}.footer-social:hover{background:#fff;color:#111;transform:translateY(-2px);}
@media(max-width:767px){.hero-box::before{top:90px;width:160px;height:170px;}.hero-box::after{width:110px;height:110px;}#about{max-width:calc(100% - 24px);padding-inline:24px;border-radius:18px;}}
@media(prefers-reduced-motion:reduce){.nav-pill{transition:none!important;}}
/* Page-level navigation stays above project and section stacking contexts. */
.site-nav{z-index:1000!important;}
#mobile-menu{z-index:900;}
.hero-box::before{opacity:.22;width:320px;height:290px;background-size:12px 12px;}
.hero-box::after{opacity:.17;width:220px;height:220px;background-size:12px 12px;}
#work>div:first-child{padding-bottom:25px;border-bottom:1px solid #dedede;}
.projects{column-gap:40px;row-gap:36px;}
.project-caption{padding-bottom:24px;border-bottom:1px solid #ddd;}

#contact{width:calc(100% - 48px);max-width:none;margin:0 auto 24px;border-radius:24px;overflow:hidden;}
@media(min-width:768px){.projects{position:relative;}.projects::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e7e7e7;pointer-events:none;}}
@media(max-width:767px){.hero-box::before{width:190px;height:190px;opacity:.20;}.hero-box::after{width:140px;height:140px;opacity:.15;}#contact{width:calc(100% - 24px);margin-bottom:12px;border-radius:18px;}.projects{gap:28px;}}
/* Clean neo-grotesque typography inspired by the reference. */
html[data-theme="mono"] body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;}
html[data-theme="mono"] .font-display{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;}
.hero-box h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-weight:400;letter-spacing:-.045em;line-height:1.075;}
.headline{font-weight:400;letter-spacing:-.04em;}

.nav-pill{font-size:14px;font-weight:400;letter-spacing:-.02em;}
.hero-el-1{font-weight:400;letter-spacing:-.015em;}
.nav-side.right a{font-weight:400;letter-spacing:-.015em;}
#work .headline,#awards .headline{font-weight:400;letter-spacing:-.045em;line-height:1.1;}

.card-year,.project-tags span{font-weight:400;letter-spacing:-.01em;}
.about-label{font-weight:400;letter-spacing:.025em;font-size:12px;}

.about-lead{font-weight:400;letter-spacing:-.03em;line-height:1.35;}
.about-secondary-copy{font-weight:400;font-size:16px;line-height:1.65;letter-spacing:-.015em;}

.footer-social{font-weight:400;letter-spacing:-.01em;}
@media(max-width:767px){.hero-box h1{letter-spacing:-.04em;line-height:1.1;}.about-secondary-copy{font-size:15px;}}
/* Abrazo artwork includes a transparent outer inset; crop only that inset. */
.project-2 .project-image{background:#fff;}
.project-2 .project-image img{object-fit:cover;object-position:center bottom;transform:scale(1.045);transform-origin:center;}
.project-2:hover .project-image img{transform:scale(1.065);}
/* A personal recognition spread and a connected closing composition. */
#awards.recognition-edit{display:grid;grid-template-columns:1fr 1.5fr;gap:9%;width:calc(100% - 96px);max-width:1088px;margin:0 auto;padding:76px 0 64px;}
.recognition-intro h2{font-size:44px;line-height:1.08;font-weight:400;letter-spacing:-.045em;}.recognition-intro h2 span{color:#666;}.recognition-intro>p{font-size:12px;line-height:1.5;color:#666;}.award-season{display:grid;grid-template-columns:50px 1fr;gap:20px;border-top:1px solid #bcbcbc;padding-top:6px;}.award-season+.award-season{margin-top:18px;}.season-year{font-size:12px;padding-top:22px;}.award-season article{position:relative;padding:20px 80px 20px 0;border-bottom:1px solid #e7e7e7;}.award-season article:last-child{border-bottom:0;}.award-season h3{font-size:18px;line-height:1.35;font-weight:400;letter-spacing:-.02em;}.award-season article p{font-size:12px;color:#666;margin-top:7px;}
#contact.closing-panel{padding:24px 32px 0;background:#141414;border:1px solid #333;margin-bottom:24px;position:relative;isolation:isolate;}
.closing-invite{position:relative;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;min-height:300px;border:1px solid #414141;background:#1d1d1d;border-radius:20px;padding:45px 48px;overflow:hidden;}
.closing-invite h2{font-size:clamp(32px,3.6vw,53px);line-height:1.08;letter-spacing:-.04em;font-weight:400;color:#fff;}

.closing-info{display:flex;justify-content:space-between;gap:30px;align-items:start;padding:40px 16px 30px;}.closing-bottom a:hover{text-decoration:underline;text-underline-offset:5px;}.closing-bottom{margin:0 16px;border-top:1px solid #444;padding-top:20px;display:flex;justify-content:space-between;color:#a9a8ae;font-size:12px;}
#about{position:relative;overflow:hidden;background:#181818;border:1px solid #333;isolation:isolate;}#about::after{content:'';position:absolute;width:450px;height:450px;border:1px solid #ffffff12;border-radius:50%;left:-220px;bottom:-290px;box-shadow:0 0 0 50px #ffffff05,0 0 0 100px #ffffff03;pointer-events:none;z-index:-1;}.about-story{position:relative;z-index:1;}
@media(max-width:767px){#awards.recognition-edit{width:calc(100% - 48px);grid-template-columns:1fr;gap:28px;padding:44px 0 38px;}.recognition-intro{position:relative;}.recognition-intro h2{font-size:35px;}.recognition-intro>p{margin-top:15px;}.award-season{grid-template-columns:36px 1fr;gap:14px;}.award-season h3{font-size:16px;}.award-season article{padding-right:60px;}#contact.closing-panel{padding:12px 12px 0;margin-bottom:12px;}.closing-invite{display:block;padding:30px 24px;min-height:0;border-radius:14px;}.closing-invite>div:first-child{position:relative;z-index:1;}.closing-invite h2{font-size:32px;}.closing-info{padding:28px 12px 24px;flex-direction:column;gap:25px;}.closing-bottom{margin:0 12px;font-size:12px;}}

/* Quieter closing: one message, familiar controls, no decorative wordmark. */
#contact.closing-panel{padding:42px 48px 25px;}
.closing-invite{display:block;min-height:0;padding:10px 0 36px;background:transparent;border:0;border-radius:0;}
.closing-invite h2{font-size:clamp(32px,3.8vw,52px);line-height:1.12;max-width:650px;}
.closing-info{padding:0 0 28px;align-items:center;}

.closing-bottom{margin:0;padding-top:20px;border-color:#383838;}
.recognition-intro>p{margin-top:16px;}.award-season article{padding-right:0;}.recognition-intro h2{font-size:38px;}.award-season h3{font-size:17px;}
@media(max-width:767px){#contact.closing-panel{padding:30px 24px 22px;}.closing-invite{padding:0 0 30px;}.closing-invite h2{font-size:32px;}.closing-info{padding:0 0 25px;align-items:flex-start;gap:25px;}.closing-bottom{margin:0;}.recognition-intro h2{font-size:34px;}.award-season h3{font-size:16px;}}
/* Organic dot fields respond to the pointer without moving the copy. */

.hero-box::before{top:9%;left:-3%;width:52%;height:66%;opacity:.32;background-image:radial-gradient(#111 1.25px,transparent 1.55px);background-size:14px 14px;mask-image:radial-gradient(ellipse at 35% 36%,#000 10%,#0009 38%,transparent 69%);transform:translate(var(--dots-x,0px),var(--dots-y,0px));transition:transform .65s cubic-bezier(.2,.8,.2,1);}
.hero-box::after{right:-2%;bottom:-4%;width:44%;height:55%;opacity:.25;background-image:radial-gradient(#111 1.2px,transparent 1.5px);background-size:15px 15px;mask-image:radial-gradient(ellipse at 65% 66%,#000 9%,#0008 36%,transparent 68%);transform:translate(calc(var(--dots-x,0px) * -.65),calc(var(--dots-y,0px) * -.65));transition:transform .8s cubic-bezier(.2,.8,.2,1);}

@media(max-width:767px){.hero-box::before{width:80%;height:48%;opacity:.28;}.hero-box::after{width:75%;height:42%;opacity:.23;}}
@media(prefers-reduced-motion:reduce){.hero-box::before,.hero-box::after{transform:none!important;transition:none!important;}}

/* Contain the moving artwork within the rounded hero. */
.hero-box{overflow:hidden;}
.hero-box::before{left:2%;top:12%;mask-image:radial-gradient(ellipse at 42% 45%,#000 10%,#0009 34%,transparent 65%);}
.hero-box::after{right:2%;bottom:2%;mask-image:radial-gradient(ellipse at 55% 52%,#000 9%,#0008 32%,transparent 64%);}
/* A consistent image and metadata baseline for every project. */
.projects{align-items:stretch;}
.project-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 22px;}
.project-tags{order:0;margin:0;gap:8px;}
.project-tags span{font-size:15px;padding:10px 14px;line-height:1.35;}
.card-year{order:1;font-size:14px;flex-shrink:0;color:#555;}
@media(max-width:1050px){.project-caption{align-items:flex-start;}.project-tags span{font-size:13px;padding:9px 11px;}}
@media(max-width:767px){.project-caption{gap:10px;padding-top:16px;}.project-tags{gap:6px;}.project-tags span{font-size:13px;padding:9px 10px;}.card-year{font-size:13px;padding-top:9px;}}

/* Project names lead; compact tags remain secondary. */
.project-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px 16px;}
.project-title{grid-column:1;grid-row:1;margin:0;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.035em;color:#111;}
.project-caption .card-year{grid-column:2;grid-row:1;padding:0;font-size:13px;}
.project-caption .project-tags{grid-column:1 / -1;grid-row:2;margin:0;gap:7px;}
.project-caption .project-tags span{font-size:12px;line-height:1.35;padding:7px 10px;}
@media(max-width:767px){.project-title{font-size:23px;}.project-caption{gap:12px;}.project-caption .project-tags span{font-size:12px;padding:7px 9px;}}

/* Gentle movement of the existing dots, without overlapping moving grids. */
.hero-box::before,.hero-box::after{transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.hero-box h1{text-wrap:balance;}

.project-title{text-wrap:balance;}.project-caption{align-items:start;}.project-caption .card-year{padding-top:5px;}
/* Keep project headings compact within each card. */
.project-title{font-size:clamp(14px,1.35vw,18px);letter-spacing:-.025em;line-height:1.35;text-wrap:initial;}
.project-caption{column-gap:10px;}
@media(max-width:767px){.project-title{font-size:clamp(12px,3.05vw,17px);letter-spacing:-.03em;}.project-caption .card-year{font-size:12px;padding-top:2px;}}
/* Image-led work grid with inset captions, following the supplied reference. */
#work{width:calc(100% - 48px);max-width:1600px;margin-inline:auto;padding-inline:0;}
.projects{gap:18px;}
.projects::before{display:none;}
.project{position:relative;display:block;overflow:hidden;border-radius:20px;isolation:isolate;}
.project-image{aspect-ratio:3/2;border:0;border-radius:20px;}
.project-image::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.56));pointer-events:none;}
.project-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:24px;border:0;gap:0;pointer-events:none;}
.project-title{color:#fff;font-size:clamp(14px,1.3vw,20px);font-weight:400;line-height:1.3;letter-spacing:-.025em;text-wrap:initial;order:1;}
.project-caption .project-tags{position:absolute;top:20px;left:20px;right:20px;display:flex;gap:6px;margin:0;}
.project-caption .project-tags span,.project:hover .project-tags span{background:rgba(255,255,255,.94);color:#333;border:0;border-radius:100px;font-size:12px;padding:6px 10px;line-height:1.2;}
.project-caption .card-year{display:none;}
@media(max-width:767px){#work{width:calc(100% - 24px);}.projects{gap:14px;}.project,.project-image{border-radius:15px;}.project-caption{padding:17px;}.project-title{font-size:14px;}.project-caption .project-tags{top:14px;left:14px;right:14px;gap:5px;}.project-caption .project-tags span{font-size:12px;padding:5px 8px;}}

/* Readable captions stay below the artwork in every interaction state. */
.project{overflow:visible;border-radius:0;}
.project-image{position:relative;overflow:hidden;}
.project-image::after{display:none;}
.project-caption{position:static;inset:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:16px 0 8px;gap:12px;}
.project-title{order:0;color:#111;font-size:clamp(14px,1.3vw,20px);line-height:1.35;}
.project-caption .project-tags{position:static;inset:auto;order:1;display:flex;gap:6px;}
.project-caption .project-tags span,.project:hover .project-tags span{background:#f0f0f0;color:#444;border:1px solid #e5e5e5;font-size:12px;padding:6px 10px;}
.projects{row-gap:28px;}

@media(hover:hover) and (pointer:fine){.cursor-project{cursor:none;}}
@media(max-width:767px){.project-caption{padding-top:13px;gap:10px;}.project-title{font-size:14px;}.project-caption .project-tags span{font-size:12px;}}
/* A quiet edge keeps light artwork distinct from the page. */
.project-image{border:1px solid #dedede;box-sizing:border-box;}

.project-image video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;transition:transform .3s;}
.project:hover .project-image video{transform:scale(1.02);}
/* Define the media edges against white without adding visual weight. */
.project-image{border:1px solid #d0d0d0;box-shadow:0 2px 8px rgba(0,0,0,.035);}
#work>div:first-child{border-bottom:0;}

/* The reference uses a local, fading trail; retire the translated dot patches. */
.hero-box::before,.hero-box::after{display:none;}
/* Keep the about panel clear for a future personal illustration. */
#about::after{display:none;}
#vega-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 64px);max-width:1200px;height:calc(100dvh - 48px);max-height:none;padding:0;border:1px solid #ddd;border-radius:22px;background:#fff;color:#111;overflow:hidden;box-shadow:0 24px 100px #0004;}
#vega-dialog::backdrop{background:rgba(15,15,15,.6);backdrop-filter:blur(5px);}
#vega-dialog[open]{display:flex;flex-direction:column;}
.vega-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;border-bottom:1px solid #e8e8e8;flex-shrink:0;font-size:15px;}.vega-toolbar small{color:#777;font-size:12px;}.vega-toolbar nav{display:flex;gap:18px;font-size:12px;}.vega-toolbar button:hover{color:#777;}#vega-close{border:1px solid #ddd;border-radius:100px;padding:8px 14px;font-size:13px;}#vega-close span{margin-left:14px;}#vega-frame{width:100%;flex:1;min-height:0;border:0;}
@media(max-width:767px){#vega-dialog{width:100%;height:100dvh;border:0;border-radius:0;}.vega-toolbar{padding:12px 16px;flex-wrap:wrap;}.vega-toolbar nav{order:3;width:100%;justify-content:space-between;}.vega-toolbar small{display:none;}}
#vega-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #ddd;background:#f5f5f5;color:#111;flex-shrink:0;cursor:pointer;transition:background .2s;}
#vega-close:hover{background:#e8e8e8;color:#111;}#vega-close:focus-visible{outline:2px solid #111;outline-offset:3px;}
@keyframes vega-backdrop-in{from{background-color:rgba(15,15,15,0);backdrop-filter:blur(0px);}to{background-color:rgba(15,15,15,.6);backdrop-filter:blur(5px);}}
@media(prefers-reduced-motion:no-preference){#vega-dialog[open]::backdrop{animation:vega-backdrop-in 240ms cubic-bezier(.22,1,.36,1) both;}}
@keyframes vega-backdrop-out{from{background-color:rgba(15,15,15,.6);backdrop-filter:blur(5px);}to{background-color:rgba(15,15,15,0);backdrop-filter:blur(0px);}}
@media(prefers-reduced-motion:no-preference){#vega-dialog[open].is-closing::backdrop{animation:vega-backdrop-out 240ms cubic-bezier(.4,0,.6,1) both;}}
#vega-dialog.is-closing{pointer-events:auto;}

/* Compact, consistent case-study chrome. */
.vega-toolbar-title{display:flex;align-items:center;gap:12px;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;}
.vega-toolbar-title strong{font-size:15px;font-weight:600;letter-spacing:-.02em;}
.vega-toolbar-title>span{font-size:12px;font-weight:400;color:#737373;border-left:1px solid #ddd;padding-left:12px;}
.vega-toolbar-actions{display:flex;align-items:center;gap:8px;}
.vega-toolbar-actions button{display:grid;place-items:center;width:36px!important;height:36px!important;padding:0;border:1px solid #e5e5e5;border-radius:50%;background:#f5f5f5;color:#222;cursor:pointer;transition:background .18s,color .18s;}
.vega-toolbar-actions button:hover{background:#e8e8e8;color:#111;}
.vega-toolbar-actions button:focus-visible{outline:2px solid #111;outline-offset:3px;}
#vega-dialog.is-expanded{width:100%;max-width:none;height:100dvh;border:0;border-radius:0;}
@media(max-width:767px){#vega-expand{display:none;}}

/* Keep the frame geometry stable as the viewport-sized overlay expands. */
#vega-dialog{box-sizing:border-box;}
#vega-dialog.is-expanded{border:1px solid transparent;}

/* Full-page reading header. */
#project-back{display:none;}
#vega-dialog.is-expanded .vega-toolbar{display:grid;grid-template-columns:1fr auto 1fr;padding:16px clamp(24px,4vw,72px);}
#vega-dialog.is-expanded #project-back{display:block;justify-self:start;border:0;background:none;color:#444;padding:8px 0;font:inherit;font-size:14px;cursor:pointer;}
#project-back:hover{color:#111;text-decoration:underline;text-underline-offset:4px;}
#project-back:focus-visible{outline:2px solid #111;outline-offset:4px;}
#vega-dialog.is-expanded .vega-toolbar-title>span{display:none;}
#vega-dialog.is-expanded .vega-toolbar-actions{justify-self:end;}

/* A small drafting pointer, with a directional link state. */
@media(hover:hover) and (pointer:fine){
 body{cursor:url("../assets/cursor-design.svg") 4 3,auto;}
 a,button,[role="button"],a *,button *{cursor:url("../assets/cursor-link.svg") 16 16,pointer;}
 .cursor-project,.cursor-project *{cursor:none;}
 input,textarea,[contenteditable="true"]{cursor:text;}
}

/* Landing rhythm: one gap between sections, without stacked padding. */
:root{--landing-gap:48px;--landing-panel-padding:56px;}
.hero-box{margin-bottom:0;}
#work.landing-section{padding-top:var(--landing-gap);padding-bottom:0;margin-bottom:0;}
#work>div:first-child{padding-bottom:0;}
#about{margin-top:var(--landing-gap);margin-bottom:0;padding-top:0;padding-bottom:0;}
#about .about-story{padding-block:var(--landing-panel-padding);}
#awards.recognition-edit{margin-top:var(--landing-gap);margin-bottom:var(--landing-gap);padding-block:0;}
#contact.closing-panel{margin-top:0;}
@media(max-width:767px){:root{--landing-gap:32px;--landing-panel-padding:36px;}}

/* Difference blending creates a black cursor on white and inverts its backdrop. */
#portfolio-cursor{position:fixed;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2147483647;opacity:0;transform:translate(-50%,-50%);}

@media(hover:none),(pointer:coarse){#portfolio-cursor{display:none;}}

/* Mobile navigation as a compact editorial panel. */
@media(max-width:767px){
 #mobile-menu{inset:86px 12px 12px;padding:26px 24px 22px;border-radius:24px;background:#151515;color:#fff;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 40px #0002;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .3s;}
 #mobile-menu.open{transform:translateY(0) scale(1);}
 body.menu-open::after{content:'';position:fixed;inset:0;background:#fff;z-index:850;}
 
 
 #mobile-menu a.m-link{align-items:center;padding:18px 0;font-size:clamp(32px,10vw,48px);font-weight:400;letter-spacing:-.045em;color:#fff;border-bottom:1px solid #ffffff26;}
 
 
 #mobile-menu a.m-link:hover,#mobile-menu a.m-link:focus-visible{color:#fff;padding-left:8px;border-color:#fff;}
 
 #mobile-menu a.m-link:focus-visible{outline:1px solid #fff;outline-offset:5px;border-radius:4px;}
 #mobile-menu .mobile-menu-actions{padding-top:22px;margin-top:auto;border:0;}
 #mobile-menu .mobile-socials{gap:10px;}
 #mobile-menu .mobile-socials a{background:#252525;border:1px solid #ffffff30;color:#fff;box-shadow:none;}
 #mobile-menu a.m-link:last-child{font-size:22px;letter-spacing:-.02em;}
}
@media(max-width:767px) and (max-height:650px){#mobile-menu{padding:18px 22px;}#mobile-menu a.m-link{padding:12px 0;font-size:30px;}}
@media(prefers-reduced-motion:reduce){#mobile-menu,#mobile-menu.open a.m-link{animation:none!important;transition:none!important;}#mobile-menu.open a.m-link{opacity:1;transform:none;}}

@media(max-width:767px){
 #mobile-menu .m-menu-nav{display:grid;gap:10px;}
 #mobile-menu a.m-link,#mobile-menu a.m-link:last-child{font-size:clamp(28px,8vw,38px);line-height:1.15;letter-spacing:-.035em;padding:18px 20px;min-height:72px;border:1px solid #555;border-radius:14px;background:#292929;color:#fff;}
 #mobile-menu a.m-link:hover,#mobile-menu a.m-link:focus-visible{padding-left:20px;background:#fff;color:#111;border-color:#fff;}
 #mobile-menu .mobile-socials a{background:#fff;color:#111;border:1px solid #fff;width:52px;height:52px;}
 #mobile-menu .mobile-socials a:hover{background:#ddd;border-color:#ddd;}
}
@media(max-width:767px) and (max-height:650px){#mobile-menu a.m-link,#mobile-menu a.m-link:last-child{font-size:28px;min-height:60px;padding:14px 18px;}}

/* The mobile header sits within the same rounded panel as the menu. */
@media(max-width:767px){
 #mobile-menu{inset:12px;padding-top:88px;}
 body.menu-open .site-nav{top:28px;left:36px;right:36px;width:auto;max-width:none;transform:none!important;}
 
 body.menu-open #burger{background:#fff;border-color:#fff;box-shadow:none;}
 body.menu-open .burger-line{background:#111;}
}
@media(max-width:767px) and (max-height:650px){#mobile-menu{padding-top:78px;}body.menu-open .site-nav{top:24px;left:34px;right:34px;}}

/* Equal navigation rows, separated by fine rules. */
@media(max-width:767px){
 #mobile-menu .m-menu-nav{gap:0;position:relative;padding-top:34px;}
 #mobile-menu .m-menu-corner{position:absolute;top:0;right:0;color:#fff;font-size:28px;line-height:1;}
 #mobile-menu a.m-link,#mobile-menu a.m-link:last-child{background:transparent;border:0;border-bottom:1px solid #ffffff40;border-radius:0;padding:20px 0;min-height:76px;font-size:clamp(28px,8vw,38px);}
 #mobile-menu a.m-link:hover,#mobile-menu a.m-link:focus-visible{background:transparent;color:#fff;border-color:#fff;padding-left:6px;}
}
@media(max-width:767px) and (max-height:650px){#mobile-menu .m-menu-nav{padding-top:28px;}#mobile-menu a.m-link,#mobile-menu a.m-link:last-child{font-size:28px;min-height:58px;padding:13px 0;}}

/* Equal inset in both states; avoid viewport-width overflow beside scrollbars. */
@media(max-width:767px){
 .site-nav,body.menu-open .site-nav{top:28px;left:28px;right:28px;width:auto;max-width:none;box-sizing:border-box;}
 #burger,html[data-theme="mono"] .site-nav #burger{width:44px;height:44px;min-width:44px;padding:0;border:1px solid #ddd;background:#fff;box-shadow:none!important;backdrop-filter:none;transform:none!important;-webkit-tap-highlight-color:transparent;}
 #burger:focus:not(:focus-visible){outline:none;}
 #burger:focus-visible{outline:2px solid #555;outline-offset:3px;}
 body.menu-open #burger:focus-visible{outline-color:#fff;}
 #burger::before,#burger::after{display:none;}
}

/* Compact introduction, aligned with the page's content inset. */
html[data-theme="mono"] .hero-box{height:auto;min-height:0;max-height:none;}
html[data-theme="mono"] .hero-box>.hero-content{width:100%;max-width:none;box-sizing:border-box;margin:0;padding:140px clamp(28px,5vw,72px) 48px;align-items:flex-start;justify-content:flex-start;text-align:left;}
html[data-theme="mono"] .hero-box h1{font-size:clamp(30px,3.1vw,44px);line-height:1.15;letter-spacing:-.035em;max-width:760px;text-wrap:pretty;margin:0 0 16px;}
.hero-study{font-size:16px;line-height:1.55;margin:0;color:#555;text-align:left;}

@media(max-width:767px){html[data-theme="mono"] .hero-box>.hero-content{padding:112px 24px 32px;}html[data-theme="mono"] .hero-box h1{font-size:30px;}.hero-study{font-size:15px;}}

html[data-theme="mono"] .hero-study{max-width:640px;margin-top:12px;}

/* Editorial introduction: compact sentences, selective emphasis. */
html[data-theme="mono"] .hero-box>.hero-content{padding:132px clamp(28px,5vw,72px) 44px;}
html[data-theme="mono"] .hero-box h1{font-size:clamp(22px,2.1vw,30px);line-height:1.45;letter-spacing:-.035em;max-width:none;margin:0;text-wrap:pretty;}
html[data-theme="mono"] .hero-box h1 strong{font-weight:600;}
html[data-theme="mono"] .hero-study{font-size:clamp(20px,2.1vw,30px);line-height:1.45;letter-spacing:-.035em;color:#333;max-width:none;margin-top:6px;}
html[data-theme="mono"] .hero-study strong{font-weight:500;}
html[data-theme="mono"] .hero-el-1{margin-bottom:20px;}
@media(max-width:767px){html[data-theme="mono"] .hero-box>.hero-content{padding:108px 24px 32px;}html[data-theme="mono"] .hero-box h1,html[data-theme="mono"] .hero-study{font-size:22px;line-height:1.4;}html[data-theme="mono"] .hero-study{margin-top:12px;}}

html[data-theme="mono"] .hero-box h1,html[data-theme="mono"] .hero-study{font-size:clamp(20px,1.75vw,25px);line-height:1.5;}
@media(max-width:767px){html[data-theme="mono"] .hero-box h1,html[data-theme="mono"] .hero-study{font-size:20px;}}

/* Plain greeting and editorial about / recognition sections. */
html[data-theme="mono"] .hero-box .hero-el-1.glass{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;}
html[data-theme="mono"] #about{background:transparent;color:#171717;border:0;border-radius:0;box-shadow:none;width:calc(100% - 96px);max-width:1088px;margin:64px auto 0;padding:0;}
html[data-theme="mono"] #about::after{display:none;}
html[data-theme="mono"] #about .about-story{padding:0;border:0;}
html[data-theme="mono"] #about .about-label,#awards .recognition-intro h2{font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-.045em;text-transform:none;line-height:1.15;color:#171717;margin:0 0 36px;}
html[data-theme="mono"] #about .about-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
html[data-theme="mono"] #about .about-lead{color:#171717;font-size:24px;line-height:1.35;max-width:400px;margin:0;}
html[data-theme="mono"] #about .about-secondary-copy{color:#555;font-size:17px;line-height:1.65;margin:0;}
html[data-theme="mono"] #about .text-mute{color:#666!important;}
#about .about-actions{margin-top:20px;}#about .availability-dot{display:none;}
#awards.recognition-edit{display:block;width:calc(100% - 96px);max-width:1088px;margin:64px auto;padding:48px 0 0;border-top:1px solid #e5e5e5;}
#awards .award-season{grid-template-columns:1fr 1fr;gap:64px;border:0;padding:0;}
#awards .award-season+.award-season{margin-top:28px;padding-top:28px;border-top:1px solid #eee;}
#awards .season-year{font-size:17px;color:#666;padding:0;}
#awards .award-season article{padding:0 0 20px;border:0;}#awards .award-season article:last-child{padding-bottom:0;}
#awards .award-season h3{font-size:19px;font-weight:500;line-height:1.4;}#awards .award-season article p{font-size:15px;margin-top:4px;color:#666;}
@media(max-width:767px){html[data-theme="mono"] #about,#awards.recognition-edit{width:calc(100% - 48px);margin-top:40px;margin-bottom:40px;}html[data-theme="mono"] #about .about-layout{grid-template-columns:1fr;gap:20px;}html[data-theme="mono"] #about .about-lead{font-size:22px;}html[data-theme="mono"] #about .about-label,#awards .recognition-intro h2{margin-bottom:24px;}#awards .award-season{grid-template-columns:64px 1fr;gap:20px;}#awards .award-season h3{font-size:17px;}#awards.recognition-edit{padding-top:32px;}}

/* Unframed hero and simple text navigation. */
html[data-theme="mono"] .hero-box{border:0;border-radius:0;background:#fff;box-shadow:none;margin:0;}
html[data-theme="mono"] .hero-box>.hero-content{padding:124px clamp(24px,5vw,72px) 44px;}
@media(min-width:768px){
 html[data-theme="mono"] .site-nav{left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);top:28px;justify-content:flex-start;gap:28px;}
 .site-nav>.nav-side.left{display:none;}
 .site-nav>.nav-side.right{margin-left:auto;flex:0 0 auto;gap:24px;}
 html[data-theme="mono"] .site-nav .glass{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;}
 .nav-center>.glass{gap:28px;padding:0;}
 html[data-theme="mono"] .site-nav .nav-pill{padding:8px 0;color:#555!important;border-radius:0;}
 .site-nav .nav-pill::before{display:none!important;}
 html[data-theme="mono"] .site-nav .nav-pill:hover,html[data-theme="mono"] .site-nav .nav-side.right>a:hover{color:#111!important;text-decoration:underline;text-underline-offset:6px;transform:none;}
 html[data-theme="mono"] .site-nav .nav-side.right>a{color:#333!important;padding:8px 0;}
 
}
@media(max-width:767px){html[data-theme="mono"] .hero-box>.hero-content{padding:104px 24px 32px;}}

/* Keep the four desktop links together on the intro alignment. */
@media(min-width:768px){
 html[data-theme="mono"] .site-nav .nav-center{position:static;transform:none;margin:0;flex:0 0 auto;}
 html[data-theme="mono"] .site-nav>.nav-side.right{display:none;}
 html[data-theme="mono"] .site-nav .nav-pill:focus-visible{outline:2px solid #777;outline-offset:5px;}
}
@media(min-width:768px){
 html[data-theme="mono"] .site-nav .nav-center>.glass{display:flex!important;align-items:center;gap:28px;padding:0!important;}
}
@media(min-width:768px){html[data-theme="mono"] .site-nav .nav-center>.glass{gap:28px!important;}}

/* Quiet editorial navigation with clear spacing and a fine active rule. */
@media(min-width:768px){
 html[data-theme="mono"] .site-nav{top:22px;}
 html[data-theme="mono"] .site-nav .nav-center>.glass{gap:36px!important;}
 html[data-theme="mono"] .site-nav .nav-pill{font-size:16px;font-weight:400;line-height:24px;letter-spacing:-.015em;padding:10px 0 12px!important;overflow:visible;color:#777!important;text-decoration:none!important;}
 html[data-theme="mono"] .site-nav .nav-pill::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
 html[data-theme="mono"] .site-nav .nav-pill:hover,html[data-theme="mono"] .site-nav .nav-pill:focus-visible,html[data-theme="mono"] .site-nav .nav-pill[aria-current]{color:#111!important;}
 html[data-theme="mono"] .site-nav .nav-pill:hover::after,html[data-theme="mono"] .site-nav .nav-pill:focus-visible::after,html[data-theme="mono"] .site-nav .nav-pill[aria-current]::after{transform:scaleX(1);}
}
@media(prefers-reduced-motion:reduce){.site-nav .nav-pill::after{transition:none!important;}}

/* Stable footer labels: one quiet color transition, no rolling text or lift. */
html[data-theme="mono"] #contact .footer-social{transform:none!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease!important;}
html[data-theme="mono"] #contact .footer-social::after,html[data-theme="mono"] #contact .footer-social::before{display:none!important;}
html[data-theme="mono"] #contact .footer-social:hover,html[data-theme="mono"] #contact .footer-social:focus-visible{transform:none!important;background:#e8e8e8;color:#111;border-color:#e8e8e8;}

/* Static photo editorial: SDN moments, with all biography copy together. */
html[data-theme="mono"] #about .about-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:0;}
html[data-theme="mono"] #about .about-secondary{margin:0;max-width:none;}
html[data-theme="mono"] #about .about-lead{font-size:clamp(24px,2.4vw,32px);line-height:1.3;letter-spacing:-.035em;max-width:none;margin:0 0 24px;}
.about-photo-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:14px;align-items:start;}
.about-photo{position:relative;overflow:hidden;margin:0;background:#eee;border-radius:22px;isolation:isolate;}
.about-photo-1{aspect-ratio:1.12;margin-top:26px;border-top-left-radius:48px;}
.about-photo-2{aspect-ratio:.86;border-top-right-radius:48px;}
.about-photo-3{aspect-ratio:.96;border-bottom-left-radius:48px;}
.about-photo-4{aspect-ratio:1.13;margin-top:8px;border-bottom-right-radius:48px;}
.about-photo img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;}
.about-photo-1 img{object-position:42% 62%;}.about-photo-2 img{object-position:54% center;}.about-photo-3 img{object-position:24% center;}.about-photo-4 img{object-position:52% center;}
.about-photo figcaption{position:absolute;inset:auto 10px 10px;padding:10px 12px;background:rgba(255,255,255,.94);border-radius:12px;color:#222;font-size:12px;line-height:1.4;opacity:0;pointer-events:none;}
.about-photo figcaption span{display:block;color:#626262;font-size:11px;}
.about-photo:hover figcaption,.about-photo:focus figcaption{opacity:1;}
.about-photo:focus-visible{outline:2px solid #555;outline-offset:4px;}
html[data-theme="mono"] .project-description{order:0;margin:0;color:#666;font-size:14px;line-height:1.5;max-width:56ch;font-weight:400;letter-spacing:0;}
@media(hover:none){.about-photo figcaption{opacity:1;}}
@media(max-width:767px){html[data-theme="mono"] #about .about-layout{grid-template-columns:1fr;gap:32px;}.about-photo-grid{gap:12px;max-width:520px;}.about-photo{border-radius:20px;}.about-photo-1{border-top-left-radius:40px;}.about-photo-2{border-top-right-radius:40px;}.about-photo-3{border-bottom-left-radius:40px;}.about-photo-4{border-bottom-right-radius:40px;}html[data-theme="mono"] #about .about-lead{font-size:25px;margin-bottom:20px;}html[data-theme="mono"] .project-description{font-size:13px;}}

/* Compact editorial hierarchy, inspired by Haptic's restrained type scale. */
html[data-theme="mono"] #about .about-label,html[data-theme="mono"] #awards .recognition-intro h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#171717;margin-bottom:28px;}
html[data-theme="mono"] #about .about-layout{gap:clamp(32px,5vw,64px);}
html[data-theme="mono"] #about .about-lead{font-size:clamp(24px,2.2vw,28px);line-height:1.3;letter-spacing:-.025em;margin-bottom:20px;}
html[data-theme="mono"] #about .about-secondary-copy{font-size:16px;line-height:1.6;color:#666;letter-spacing:-.01em;}
html[data-theme="mono"] #awards .award-season h3{font-size:17px;font-weight:400;letter-spacing:-.015em;}
html[data-theme="mono"] #awards .award-season article p,html[data-theme="mono"] #awards .season-year{font-size:14px;color:#747474;}
html[data-theme="mono"] .project-title{font-size:16px;font-weight:400;letter-spacing:-.02em;line-height:1.35;}
html[data-theme="mono"] .project-caption{gap:10px;padding-top:14px;}
html[data-theme="mono"] .project-image{position:relative;}
html[data-theme="mono"] .project-image .project-description{position:absolute;inset:auto 0 0;z-index:2;max-width:none;margin:0;padding:48px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.76));color:#fff;font-size:15px;line-height:1.45;font-weight:400;letter-spacing:-.01em;opacity:0;pointer-events:none;transition:none;transform:none;}
html[data-theme="mono"] .project:hover .project-description,html[data-theme="mono"] .project:focus-visible .project-description{opacity:1;}
@media(hover:none),(max-width:767px){html[data-theme="mono"] .project-image .project-description{opacity:1;font-size:13px;padding:36px 16px 14px;}html[data-theme="mono"] .project-title{font-size:15px;}html[data-theme="mono"] #about .about-layout{gap:28px;}}

/* Tighter supplied photo crops and quiet, opacity-only hover reveals. */
.about-photo-1 img{object-position:50% 62%;}.about-photo-2 img{object-position:50% 50%;}.about-photo-3 img{object-position:50% 50%;}
.about-photo figcaption,html[data-theme="mono"] .project-image .project-description{transition:opacity 220ms ease-out;}
@media(prefers-reduced-motion:reduce){.about-photo figcaption,html[data-theme="mono"] .project-image .project-description{transition:none;}}

/* Minimal shared overlay toolbar: fullscreen and close. */
.vega-toolbar,#vega-dialog.is-expanded .vega-toolbar{display:flex;justify-content:flex-end;padding:12px 24px;}
#project-back,#vega-dialog.is-expanded #project-back{display:none;}

/* Landing views: Work (hero + cards) and About (about + awards). See scripts/landing-views.js. */
html:not([data-view="about"]) [data-view="about"],html[data-view="about"] [data-view="work"]{display:none!important;}
html[data-view="about"] #about{margin-top:112px;}
#about:focus{outline:none;}
@media(max-width:767px){html[data-view="about"] #about{margin-top:96px;}}
/* Work view: the space from the cards to the footer matches the hero text to the cards
   (the hero's bottom padding, from heading-type.css, plus --landing-gap). */
:root{--hero-tail:34.2px;}
@media(max-width:767px){:root{--hero-tail:28.8px;}}
html:not([data-view="about"]) #work.landing-section{padding-bottom:calc(var(--landing-gap) + var(--hero-tail));}

/* Awards list: a small award mark beside each award. */
#awards .award-season article{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:start;}
#awards .award-season article::before{content:'';grid-row:span 2;width:18px;height:18px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6' r='4.25'/%3E%3Cpath d='M5.6 9.5 4.8 15l3.2-1.8 3.2 1.8-.8-5.5'/%3E%3C/svg%3E") center/contain no-repeat;}
#awards .award-season article>*{grid-column:2;}