@font-face {
  font-family: Freesentation;
  src: url('assets/Freesentation-4Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --margin: 40px;
  --peek: 43px;
  --fade: 650ms;
  --ink: #2a2a2a;
  --text-ink: #000000;
  /* Difference blending: #fff - #d5d5d5 = #2a2a2a on a white background. */
  --cursor-ink: #d5d5d5;
}
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color:var(--text-ink); background: #fff; font-family: Freesentation, Arial, sans-serif; font-weight: 400; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }
.site-header {
  position: fixed;
  z-index: 20;
  inset: 40px var(--margin) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
}
.site-header a { pointer-events: auto; }
.site-header nav { display: flex; gap: 100px; }
.site-header a { transition: opacity 160ms ease; }
.site-header a:hover { opacity: .5; }
.site-header a,
.intro-copy { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.intro { position: relative; height: calc(100svh - var(--peek)); min-height: 600px; }
.intro-copy {
  position: absolute;
  left: 50%;
  top: 50svh;
  transform: translate(-50%, -50%);
  width: min(804px, calc(100% - 2 * var(--margin)));
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
  text-align: center;
}
.work { margin: 0 var(--margin); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.work-card { position: relative; min-width: 0; aspect-ratio: 459 / 557; margin: 0; overflow: hidden; background: #e5e5e5; }
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity var(--fade) cubic-bezier(.4, 0, .2, 1); }
.slide.is-visible { opacity: 1; }
.slide > .gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-card img { display: block; max-width: none; }
.speaker { background: linear-gradient(#87b8bf, #e2ebed); }
.speaker-crop { position: absolute; left: 15.835%; top: 11.331%; width: 68.537%; height: 88.669%; overflow: hidden; }
.speaker-crop img { position: absolute; width: 321.9%; height: 134.55%; left: -104.31%; top: -34.51%; }
.object { background: linear-gradient(#b8b8b8, #f1f1f1); }
.object-art { position: absolute; left: 50.15%; top: 52.268%; width: 80.925%; height: 81.409%; transform: translate(-50%, -50%) rotate(3.63deg); object-position: bottom; }
.street { background: #e5e5e5; }
.street-art { position: absolute; left: -4.772%; top: -14.028%; width: 107.159%; height: 134.353%; object-fit: contain; }
.book { background: #e3e3e3; }
.book-crop { position: absolute; left: 15.47%; top: 0; width: 69.28%; height: 100%; overflow: hidden; }
.book-crop img { position: absolute; width: 243.46%; height: 100.03%; left: -72.78%; top: -.02%; }
.contact { position: relative; min-height: 65svh; padding: 130px var(--margin) 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 24px; line-height: 1.6; }
.contact h2 { font-size: inherit; font-weight: 400; margin: 0 0 40px; }
.contact p { margin: 0; }
.contact-details { margin-top: 12px !important; }
.contact-details a { text-decoration: underline; text-underline-offset: 5px; }
.back-top { display: inline-block; font-size: 18px; margin-top: 70px; }
.back-top span { margin-left: 8px; }
.noscript-note { padding: 25px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 50; padding: 12px 16px; color: #fff; background:var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 1100px) {
  .site-header nav { gap: clamp(28px, 5.2vw, 70px); }
  .intro-copy { width: min(804px, calc(100% - 120px)); }
}
@media (max-width: 700px) {
  :root { --margin: 20px; --peek: 43px; }
  .site-header { top: 24px; font-size: 18px; }
  .site-header nav { gap: 22px; }
  .intro { min-height: 620px; }
  .intro-copy { top: max(50svh, 310px); width: calc(100% - 48px); font-size: 20px; line-height: 1.6; }
  .contact { font-size: 20px; }
}
@media (max-width: 360px) {
  .site-header { font-size: 16px; }
  .site-header nav { gap: 14px; }
  .intro-copy { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .site-header a { transition: none; }
}
/* Page 3: independent About and half-width project canvas. */
.site-header::before { content:''; position:absolute; z-index:-1; top:-40px; left:calc(-1 * var(--margin)); right:calc(-1 * var(--margin)); height:87px; background:#fff; }
.intro { min-height:0; }
.intro-copy { width:auto; white-space:nowrap; }
.work { scroll-margin-top:87px; }
.work-grid { transition:width 500ms cubic-bezier(.22,.61,.36,1); width:100%; }
.work-card { cursor:pointer; }
.work-card:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; z-index:1; }
.design-crop { position:absolute; overflow:hidden; }
.design-crop img { position:absolute; max-width:none; }
.composition-speaker { background:linear-gradient(#87b8bf,#e2ebed); }
.composition-object { background:linear-gradient(#b8b8b8,#f1f1f1); }
.composition-object .design-crop { overflow:visible; }
.composition-object img { transform:rotate(3.63deg) scale(.93); }
.composition-street { background:#e5e5e5; }
.composition-street img { object-fit:contain; }
.composition-book { background:#e3e3e3; }
.composition-pink { background:linear-gradient(#bbb,#f1f1f1); }
.pink-vector { position:absolute; left:-4.825%; top:68.773%; width:508.308px; height:260.475px; transform-origin:top left; transform:scale(var(--tile-scale,1)); }
.composition-robot,.composition-small,.composition-belt,.composition-edit,.composition-photo,.composition-scene { background:#f1f1f1; }
.composition-orange { background:#e8e8e8; }
.composition-camera { background:linear-gradient(#bfbfbf,#f1f1f1); }
.composition-book2,.composition-dark { background:#252525; }
.composition-last { background:linear-gradient(#ababab,#f1f1f1); }
.project-panel { position:fixed; z-index:15; top:0; right:0; bottom:0; width:51.15%; padding:87px 30px 30px; background:#fff; overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); transition:transform 500ms cubic-bezier(.22,.61,.36,1); scrollbar-width:thin; }
.project-panel[hidden] { display:none; }
.detail-open .project-panel { transform:translateX(0); }
.detail-open .work-grid { width:48.8%; grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-open .intro { display:none; }
.detail-open .work { padding-top:87px; }
.detail-open .contact { display:none; }
.panel-close { position:fixed; z-index:2; top:63px; right:30px; font:inherit; font-size:14px; background:white; border:0; padding:2px 0 4px 12px; cursor:pointer; }
.detail-hero { position:relative; aspect-ratio:922/654; overflow:hidden; background:#f1f1f1; }
.detail-hero .slide { opacity:1; }
.detail-hero .composition-belt .design-crop { left:22.89% !important; top:11.31% !important; width:54.12% !important; height:79.97% !important; }
.detail-caption { margin:30px 0 40px; max-width:705px; font-size:18px; line-height:1.6; }
.detail-caption h2 { font-size:18px; font-weight:400; margin:0; }
.detail-image { display:block; width:100%; height:auto; margin:0 0 30px; }
.detail-secondary { margin-top:40px; }
.about-layout { padding:137px var(--margin) 0; display:grid; grid-template-columns:minmax(0,705fr) minmax(0,529fr) minmax(0,606fr); height:100svh; overflow:hidden; }
.biography { grid-column:1; margin:0; font-size:18px; line-height:1.6; text-box-trim:trim-both; text-box-edge:cap alphabetic; }
.resume-scroll { grid-column:3; height:100%; overflow-y:auto; overscroll-behavior:contain; padding:0 40px 80px 0; scrollbar-width:thin; }
.resume-section { display:grid; grid-template-columns:216fr 299fr; column-gap:0; margin:0 0 90px; font-size:18px; line-height:1.5; }
.resume-section h2 { margin:0; font-size:18px; font-weight:400; }
.resume-section p { margin:0 0 30px; color:var(--text-ink); letter-spacing:-.02em; }
.resume-section p:last-child { margin:0; }
@media(max-width:1100px) { .about-layout { grid-template-columns:1fr 1fr; gap:8vw; } .resume-scroll { grid-column:2; padding-right:0; } .resume-section { grid-template-columns:110px 1fr; } }
@media(max-width:700px) {
 .site-header::before { top:-24px; height:72px; }
 .intro-copy { font-size:20px; top:50svh; }
 .intro { min-height:0; }
 .work { scroll-margin-top:72px; }
 .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .project-panel { width:100%; top:72px; padding:30px 20px; }
 .panel-close { top:4px; right:20px; }
 .detail-open .work-grid { width:100%; transform:translateX(-25%); opacity:.4; }
 .detail-open .work { padding-top:72px; }
 .about-layout { padding-top:110px; display:flex; flex-direction:column; gap:40px; }
 .biography { font-size:16px; flex-shrink:0; }
 .resume-scroll { min-height:0; width:100%; }
 .resume-section { font-size:16px; grid-template-columns:110px 1fr; margin-bottom:55px; }
 .resume-section h2 { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .work-grid,.project-panel { transition:none; } }
.composition-object .design-crop { left:9.68% !important; top:11.56% !important; width:80.925% !important; height:81.409% !important; }
.composition-object img { transform:rotate(3.63deg); object-position:bottom; }
.resume-scroll { padding-right:91px; }
.resume-section { grid-template-columns:216px minmax(0,1fr); }
.resume-section p,.resume-section h2 { text-box-trim:trim-both; text-box-edge:cap alphabetic; }
.resume-section:not(:first-child) { line-height:1.25; }
.panel-close { position:sticky; top:0; float:right; margin:0 8px -26px 0; transform:translateY(8px); padding:4px 8px; }
.detail-hero:not(.composition-belt):not(.original-project) .slide { left:20.75%; width:58.5%; background:none; }
@media(max-width:1100px) { .resume-scroll { padding-right:0; } .resume-section { grid-template-columns:110px minmax(0,1fr); } }
@media(max-width:700px) { .panel-close { top:0; right:auto; } }
/* Requested navigation, footer, and original vector cursor. */
.site-header::before { content:none; }
.detail-open .site-header::before { content:''; left:auto; right:calc(-1 * var(--margin)); width:51.15vw; top:-40px; height:87px; background:#fff; }
.contact-toggle { font:inherit; letter-spacing:inherit; line-height:inherit; color:inherit; background:none; border:0; padding:0; pointer-events:auto; cursor:pointer; text-box-trim:trim-both; text-box-edge:cap alphabetic; }
.contact-toggle:hover { opacity:.5; }
.contact-toggle:focus-visible,.panel-close:focus-visible { outline:1px solid currentColor; outline-offset:6px; }
.contact-popover { position:absolute; right:0; top:40px; padding:16px 20px; background:white; border:1px solid #e5e5e5; font-size:18px; line-height:1.6; letter-spacing:-.02em; pointer-events:auto; }
.contact-popover[hidden] { display:none; }
.contact-popover a { display:block; white-space:nowrap; }
.copyright { text-align:center; margin:40px var(--margin) 0; padding-bottom:40px; font-family:Freesentation,Arial,sans-serif; font-size:14pt; font-weight:400; line-height:1.2; letter-spacing:-.02em; text-box-trim:trim-start; text-box-edge:cap alphabetic; }
.detail-open .copyright { display:none; }
.panel-close { display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:6px; background:none; border:0; box-shadow:none; border-radius:0; color:var(--ink); }
.panel-close svg { display:block; flex:none; }
#cursor { position:fixed; left:0; top:0; z-index:300; width:0; height:0; pointer-events:none; mix-blend-mode:difference; opacity:0; will-change:transform; }
#cursor svg { position:absolute; left:0; top:0; height:auto; }
#cursor .cur-mark { display:block; width:40px; transform:translate(-50%,-50%); }
#cursor .cur-mark path { fill:var(--cursor-ink); }
#cursor .cur-star { display:none; width:25px; transform:translate(-50%,-50%); fill:none; stroke:var(--cursor-ink); stroke-width:28; stroke-linecap:butt; }
body.star-cursor #cursor .cur-mark { display:none; }
body.star-cursor #cursor .cur-star { display:block; animation:starSpin 2600ms cubic-bezier(.65,0,.35,1) infinite; }
@keyframes starSpin { 0% { transform:translate(-50%,-50%) rotate(0deg); } 42.31%,100% { transform:translate(-50%,-50%) rotate(360deg); } }
@media(hover:hover) and (pointer:fine) { body.cursor-on, body.cursor-on * { cursor:none !important; } body.cursor-on #cursor { opacity:1; } }
@media(hover:none),(pointer:coarse) { #cursor { display:none; } }
@media(prefers-reduced-motion:reduce) { body.star-cursor #cursor .cur-star { animation:none; } }
@media(max-width:700px) { .detail-open .site-header::before { width:100vw; top:-24px; height:72px; } .contact-popover { top:32px; font-size:16px; } }
.contact-popover a { text-box-trim:none; text-box-edge:auto; line-height:1.6; }
/* Final spacing and 1.5-second entrance. */
.contact-phone { display:block; white-space:nowrap; line-height:1.6; }
.copyright { font-size:12pt; margin:0 var(--margin); padding:10pt 0; text-box-trim:trim-both; }
.panel-close { margin:0 8px -24px 0; transform:translateY(8px); padding:0; width:12px; height:12px; }
body.is-loading { overflow:hidden; }
#page-loader { position:fixed; inset:0; z-index:400; display:grid; place-items:center; background:#fff; animation:loaderExit 200ms ease 1300ms forwards; }
.loading-mark { display:block; width:80px; height:auto; fill:var(--ink); transform-origin:center; animation:loaderTurn 800ms cubic-bezier(.16,.8,.24,1) 500ms both; }
@keyframes loaderTurn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes loaderExit { from { opacity:1; } to { opacity:0; visibility:hidden; } }
@media(prefers-reduced-motion:reduce) { .loading-mark { animation:none; } }
.panel-close { right:auto; }
.loading-mark { animation:none; }
.contact-line { display:block; white-space:nowrap; line-height:1.6; }
.biography,.resume-section p,.detail-text { white-space:pre-wrap; }
.detail-text p { margin:0; }
.detail-text a { text-decoration:underline; text-underline-offset:3px; }

/* Shared About / main page entrance and exit; the fixed navigation stays in place. */
html.page-transition-ready body > main {
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:opacity 560ms cubic-bezier(.22,.61,.36,1), transform 560ms cubic-bezier(.22,.61,.36,1);
}
html.page-transition-ready.is-page-visible body > main {
  opacity:1;
  transform:none;
}
html.page-transition-ready.is-page-leaving body > main {
  opacity:0;
  transform:translate3d(0,-8px,0);
  transition-duration:240ms;
  pointer-events:none;
}
html.is-internal-navigation #page-loader { display:none; }
html.is-page-leaving .project-panel {
  opacity:0;
  transition:opacity 240ms ease;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce) {
  html.page-transition-ready body > main,
  html.page-transition-ready.is-page-visible body > main,
  html.page-transition-ready.is-page-leaving body > main {
    opacity:1;
    transform:none;
    transition:none;
  }
  html.is-page-leaving .project-panel { transition:none; }
}

/* Text can be selected in page content; navigation stays non-selectable. */
body > main, #project-content { -webkit-user-select:text; user-select:text; }
.site-header, .site-header * { -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
main::selection, main *::selection, #project-content::selection, #project-content *::selection { background:#2a2a2a; color:#fff; text-shadow:none; }
main::-moz-selection, main *::-moz-selection, #project-content::-moz-selection, #project-content *::-moz-selection { background:#2a2a2a; color:#fff; text-shadow:none; }

/* About's 1 × 50px marker only displays position; it has no mouse controls. */
.about-page .resume-scroll { scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-y; }
.about-page .resume-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.about-scroll-indicator { position:fixed; top:0; right:var(--margin); z-index:18; width:1px; height:50px; background:#2a2a2a; pointer-events:none; -webkit-user-select:none; user-select:none; }
.about-scroll-indicator[hidden] { display:none; }
html.page-transition-ready .about-scroll-indicator { opacity:0; transition:opacity 560ms cubic-bezier(.22,.61,.36,1); }
html.page-transition-ready.is-page-visible .about-scroll-indicator { opacity:1; }
html.page-transition-ready.is-page-leaving .about-scroll-indicator { opacity:0; transition-duration:240ms; }
@media(max-width:700px) {
  .about-page .about-layout { padding-top:calc((110px + var(--about-header-bottom, 37px)) / 2); gap:80px; }
  .about-scroll-indicator { display:none; }
  .project-panel, .resume-scroll { scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  .project-panel::-webkit-scrollbar, .resume-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
}
@media(hover:none), (pointer:coarse) {
  .about-scroll-indicator { display:none; }
  .project-panel, .resume-scroll { scrollbar-width:none; }
  .project-panel::-webkit-scrollbar, .resume-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
}
@media(prefers-reduced-motion:reduce) { .about-scroll-indicator { transition:none !important; } }