@font-face{font-family:Chicago;src:url('assets/ChicagoFLF.ttf') format('truetype')}
@font-face{font-family:Apple;src:url('assets/AppleGaramond.ttf') format('truetype');font-weight:400}
@font-face{font-family:Apple;src:url('assets/AppleGaramond-Bold.ttf') format('truetype');font-weight:700}
:root{
  --serif:Apple,Georgia,serif;--mono:'Fira Code','SFMono-Regular','SF Mono',Menlo,monospace;
  --ink:#111;--gutter:clamp(18px,2.2vw,34px);
  --display:48px;--h1:34px;--h2:26px;--body:15px;--small:13px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink)}
body{font-family:var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}

/* Navigation */
.site-header{position:fixed;z-index:2147483647;top:0;left:0;right:0;height:72px;padding:0 var(--gutter);display:flex;align-items:center;gap:34px;isolation:isolate;background:transparent}
.site-header:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;height:clamp(128px,14vh,150px);pointer-events:none;background:transparent;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.1) 84%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.1) 84%,transparent 100%)}
.wordmark{display:inline-block;font:700 30px/1 Chicago,monospace;letter-spacing:-.085em;transform:scaleX(1.08);transform-origin:left center;white-space:nowrap}
.site-header .wordmark,.site-header nav a{position:relative;z-index:0}
.site-header nav{display:flex;gap:clamp(26px,3.5vw,50px);align-items:center;font:16px var(--serif)}
.site-header nav a{padding:8px 0;white-space:nowrap}.site-header nav a:hover{opacity:1}
#app{min-height:100vh;padding-top:72px}
.site-header .wordmark,.site-header nav a{color:rgba(17,17,17,.5);transition:color .28s ease}
.site-header:hover .wordmark,.site-header:hover nav a,.site-header:focus-within .wordmark,.site-header:focus-within nav a{color:#111}
.site-header nav a[data-nav="about"]{color:#398bd0}

/* Featured landing page */
.apple-home{padding-top:0}
.home-hero{min-height:calc(100vh - 18px);padding:88px 0 0;text-align:center;background:#fff;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.home-hero.soft{background:#f5f5f7}.home-hero-copy{position:relative;z-index:1}
.home-hero h1{margin:0;font:700 var(--display)/1.04 var(--serif);letter-spacing:-.02em}
.home-hero p{margin:8px 0 10px;font:20px/1.3 var(--serif)}
.home-hero-copy>a{display:inline-block;margin:2px 0 10px;color:#06c;font:15px var(--serif)}
.home-hero-copy>a:hover{text-decoration:underline;text-underline-offset:4px}
.home-hero-media{position:relative;display:block;flex:none;width:100vw;height:calc(100vh - 258px);min-height:330px;margin:8px auto 0;overflow:hidden;background:#111}
.home-hero-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.home-hero-image img,.home-hero-image video{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;pointer-events:none}
.home-hero-image .home-video-poster{position:absolute;inset:0}
.home-youtube-frame{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.home-audio-toggle{position:absolute;z-index:2;left:50%;bottom:18px;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,.14);font:11px/1 var(--mono);color:#111;white-space:nowrap;cursor:pointer;transform:translateX(-50%);transition:background .2s ease,box-shadow .2s ease}
.home-audio-toggle:hover{background:rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.18)}
.home-audio-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.home-audio-toggle .audio-on{display:none}.home-audio-toggle.is-audio-on .audio-off{display:none}.home-audio-toggle.is-audio-on .audio-on{display:block}

/* Projects index: identical card, image and description dimensions */
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px clamp(14px,1.4vw,24px);padding:30px var(--gutter) 40px}
.project-card{--hover-angle:0deg;position:relative;display:flex;flex-direction:column;min-width:0;height:auto;padding:8px;border:1px solid #111;background:#fff;transform:translateY(0) rotate(0deg);transform-origin:50% 55%;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;will-change:transform}
.project-card:hover,.project-card:focus-visible{z-index:4;transform:translateY(-5px) rotate(var(--hover-angle));box-shadow:0 10px 24px #0002}
.project-card-image{display:block;flex:none;width:100%;aspect-ratio:1/1;overflow:hidden}
.project-card img{display:block;width:100%;height:100%;object-fit:cover;border:2px solid #111}
.project-grid .project-card h2{flex:none;height:2.15em;overflow:hidden;margin:11px 0 5px;font:700 21px/1.08 var(--serif)}
.project-grid .project-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;flex:none;height:2.5em;overflow:hidden;margin:0 0 7px;font:14px/1.25 var(--mono);color:#444}

/* Blog desk */
body[data-page="blog"]{overflow:hidden}.desk-viewport{position:fixed;z-index:1;inset:0;overflow:auto;overscroll-behavior:contain;cursor:grab}.desk-viewport:active{cursor:grabbing}
.desk-world{position:relative;width:2700px;height:2500px;background:#fff}
.desk-paper{position:absolute;width:clamp(620px,57vw,760px);min-height:980px;padding:48px 44px;background:#f7f4ea;background-image:url('assets/paper-texture.svg'),radial-gradient(ellipse at 20% 25%,#d6c9a51c,transparent 45%),radial-gradient(ellipse at 80% 70%,#a88b6410,transparent 52%);background-size:240px 240px,auto,auto;background-blend-mode:multiply,normal,normal;border:1px solid #e3ddcc;border-radius:8px;box-shadow:0 16px 46px #29221420;touch-action:none;cursor:grab;user-select:none;transform:rotate(var(--paper-tilt,0deg));transform-origin:50% 12%;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s ease}
.desk-paper:hover:not(.lifted){transform:translateY(-5px) rotate(var(--paper-tilt,0deg)) scale(1.006);box-shadow:0 21px 48px #2922142c}
.desk-paper.lifted{z-index:1000!important;cursor:grabbing;transform:translateY(-6px) rotate(var(--paper-tilt,0deg)) scale(1.012);box-shadow:0 22px 45px #29221430}
.desk-paper time{display:block;text-align:right;margin-bottom:17px;font:14px var(--serif)}
.desk-paper h1{margin:0 0 36px;font:700 27px/1.1 var(--serif)}
.paper-copy{font:18px/1.32 var(--serif);color:#211e18}.paper-copy p{margin:0 0 13px}.paper-copy h2,.paper-copy h3{font:700 20px var(--serif);margin:23px 0 9px}

/* Project and About infinite photo desks */
body[data-page="detail"],body[data-page="about"]{overflow:hidden}
.visual-page{position:fixed;z-index:0;inset:0;background:#fff}
.visual-viewport{position:absolute;z-index:1;inset:0;overflow:auto;overscroll-behavior:contain;cursor:grab}
.project-visual .visual-viewport{right:0;overflow:hidden;touch-action:none}
.visual-viewport:active{cursor:grabbing}
.visual-world{position:relative;width:2800px;height:2200px;min-height:100%;background:#fff;transform-origin:0 0}
.desk-photo{position:absolute;display:block;max-width:none;height:auto;object-fit:contain;padding:8px;border:1px solid #111;background:#fff;box-shadow:0 8px 24px #0002;transform:rotate(var(--photo-tilt,0deg));transform-origin:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s ease,filter .65s ease}
.desk-photo:hover{z-index:20!important;transform:translateY(-4px) rotate(var(--photo-tilt,0deg)) scale(1.006);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.desk-photo.is-lifted{z-index:1000!important;cursor:grabbing;transform:translateY(-6px) rotate(var(--photo-tilt,0deg)) scale(1.012);filter:drop-shadow(0 12px 18px #0003)}
.project-visual .desk-photo{width:min(calc(50vw - 110px),740px)}.about-visual .desk-photo{box-shadow:0 8px 24px #0002}
.copy-panel{position:fixed;z-index:5;top:92px;bottom:auto;width:min(45vw,620px);max-height:calc(100vh - 120px);overflow-y:auto;isolation:isolate;pointer-events:auto;padding:clamp(22px,2.6vw,36px);border:1px solid rgba(255,255,255,.88);border-radius:22px;background:rgba(255,255,255,.76);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);box-shadow:0 14px 42px rgba(18,24,34,.12),inset 0 1px 0 rgba(255,255,255,.92)}
.copy-right{right:clamp(22px,4vw,60px)}
.copy-left{left:clamp(22px,4vw,60px)}
.project-visual .copy-panel{top:0;right:0;bottom:0;width:33.333vw;max-width:33.333vw;max-height:none;border:0;border-left:1px solid rgba(255,255,255,.88);border-radius:0;padding:104px clamp(30px,3.2vw,54px) clamp(30px,4vw,60px);background:rgba(255,255,255,.76);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);box-shadow:-14px 0 42px rgba(18,24,34,.08),inset 1px 0 0 rgba(255,255,255,.92)}
.project-description,.about-copy{max-width:540px}
.project-description h1,.about-copy h1{margin:0 0 14px;font:700 var(--h1)/1.06 var(--serif)}
.about-copy h2,.detail-copy h2,.detail-copy h3{font:700 var(--h2)/1.12 var(--serif);margin:21px 0 10px}
.project-intro,.detail-copy,.about-copy p{font:var(--body)/1.35 var(--mono)}
.project-intro{margin:0 0 20px}.detail-copy p,.about-copy p{margin:0 0 14px}.about-copy strong{font-weight:bold}
.about-links{display:flex;gap:10px;margin:0 0 22px!important}.about-links a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(17,17,17,.72);border-radius:999px;background:rgba(255,255,255,.56);font:13px/1.2 var(--mono);text-decoration:none;transition:color .25s ease,border-color .25s ease,box-shadow .25s ease}.about-links a:hover{color:#398bd0;border-color:#398bd0;box-shadow:0 0 12px rgba(57,139,208,.18)}.about-links svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1050px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.copy-panel{width:min(46vw,560px)}}
@media(max-width:700px){
  :root{--display:36px;--h1:30px;--h2:23px;--body:14px;--small:12px}
  .site-header{height:64px;padding:0 14px;gap:clamp(12px,3vw,20px)}.wordmark{font-size:27px}
  .site-header nav{display:flex;position:static;padding:0;gap:clamp(12px,3.5vw,20px);background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:14px}#app{padding-top:64px}
  .home-hero{min-height:calc(100svh - 8px);padding:78px 0 0}.home-hero p{font-size:17px}.home-hero-media{height:calc(100svh - 215px);min-height:280px}.home-youtube-frame{width:max(100vw,177.78vh);height:max(100vh,56.25vw)}.home-audio-toggle{bottom:12px}
  .mobile-blog{position:fixed;z-index:2;top:64px;right:0;bottom:0;left:0;overflow:hidden;background:#fff}
  .mobile-blog-toolbar{position:absolute;z-index:4;top:0;right:16px;height:42px;display:flex;align-items:center}
  .mobile-blog-index-trigger,.mobile-blog-index-close{padding:6px 2px;border:0;border-bottom:1px solid rgba(17,17,17,.55);background:transparent;font:12px/1.2 var(--mono);cursor:pointer}
  .mobile-letter-stack{position:absolute;top:48px;right:18px;bottom:16px;left:12px;touch-action:pan-y}
  .mobile-letter-layers,.mobile-letter-top,.mobile-letter-back{position:absolute;inset:0}
  .mobile-letter-layers{pointer-events:none}
  .mobile-letter-back,.mobile-letter-top{border:1px solid #e3ddcc;border-radius:8px;background:#f7f4ea url('assets/paper-texture.svg') repeat;background-size:240px 240px;box-shadow:0 12px 34px #29221420}
  .mobile-letter-back[data-depth="1"]{z-index:2;transform:translate(6px,6px) rotate(.25deg)}
  .mobile-letter-back[data-depth="2"]{z-index:1;transform:translate(12px,12px) rotate(.5deg)}
  .mobile-letter-top{z-index:3;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:26px 22px 32px;touch-action:pan-y;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease;will-change:transform}
  .mobile-letter-top.is-dragging{transition:none;transform:translate(var(--drag-x,0px),0) rotate(var(--drag-rotation,0deg));cursor:grabbing}
  .mobile-letter-top.throw-left{transform:translate(-115%,4%) rotate(-4deg);opacity:0}
  .mobile-letter-top.throw-right{transform:translate(115%,4%) rotate(4deg);opacity:0}
  .mobile-letter-top time{display:block;margin-bottom:18px;text-align:right;font:12px var(--serif)}
  .mobile-letter-top h1{margin:0 0 28px;font:700 25px/1.12 var(--serif)}
  .mobile-letter-top .paper-copy{font:17px/1.38 var(--serif);color:#211e18}
  .mobile-blog-index{position:absolute;z-index:6;inset:0;overflow-y:auto;padding:18px 20px 30px;background:rgba(255,255,255,.98);-webkit-overflow-scrolling:touch}
  .mobile-blog-index[hidden]{display:none}
  .mobile-blog-index-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:0 0 14px;background:rgba(255,255,255,.98)}
  .mobile-blog-index-head h1{margin:0;font:700 25px/1.1 var(--serif)}
  .mobile-blog-index ol{margin:0;padding:0;list-style:none;border-top:1px solid #ddd}
  .mobile-blog-index li{border-bottom:1px solid #ddd}
  .mobile-blog-index li button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:15px 0;border:0;background:transparent;text-align:left;cursor:pointer}
  .mobile-blog-index li span{font:18px/1.2 var(--serif)}.mobile-blog-index li time{flex:none;font:12px var(--mono);color:#666}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 14px}.project-card{height:auto;padding:6px}.project-grid .project-card h2{height:2.2em;font-size:17px;margin:9px 0 4px}.project-grid .project-card p{height:2.5em;font-size:12px}
  .desk-world{width:2200px;height:2200px}.desk-paper{width:86vw;min-height:900px;padding:35px 28px}.desk-paper h1{font-size:25px;margin-bottom:30px}.paper-copy{font-size:17px}
  .visual-viewport{inset:0}.project-visual .visual-viewport{right:0;bottom:0}.visual-world{width:1800px;height:1900px}.desk-photo{max-width:90vw}.project-visual .desk-photo{width:calc(100vw - 110px)}
  .copy-panel{top:76px;bottom:auto;left:12px;right:12px;width:auto;max-height:44vh;overflow-y:auto;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.83);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}.project-description,.about-copy{max-width:100%}.about-links{margin:0 0 16px!important}
  .project-visual .copy-panel{top:0;left:0;right:0;bottom:auto;width:100%;max-width:none;height:calc(44vh + 64px);max-height:none;border:0;border-bottom:1px solid rgba(255,255,255,.88);border-radius:0;padding:80px 22px 22px;background:rgba(255,255,255,.76);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}