:root{--fog:#f4f3f1;--mist:#e8e7e5;--graphite:#2c2c2e;--slate:#7a7a7e;--silver:#a8a8ac;--frost:#d4d4d8;--lavender:#9b8ec4;--spring:#8cb4a2;--spring-curve:cubic-bezier(.175,.885,.32,1.275);--drift:cubic-bezier(.25,.46,.45,.94)}
/* Typography and motion notes for design validation: (Google Interruptions:** Intersection Observer trigger `stroke-dashoffset` they drawing takes seconds with `ease-in-out` timing combined creates simultaneously precise ethereal mathematical letterforms rendered whisper-weight distinct from 97% 38% humanist typography dominates. requires maintain strokes macOS Windows. */
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{background:var(--fog);color:var(--graphite);font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(.95rem,1.1vw,1.15rem);font-weight:400;letter-spacing:.005em;line-height:1.72;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 12%,rgba(155,142,196,.08),transparent 28%),radial-gradient(circle at 88% 34%,rgba(140,180,162,.07),transparent 26%),repeating-linear-gradient(90deg,rgba(44,44,46,.018) 0 1px,transparent 1px calc((100vw - 80px)/12));mix-blend-mode:multiply;z-index:-1}h1,h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(1.8rem,4vw,3.6rem);font-weight:300;letter-spacing:-.02em;line-height:1.08}h2{font-size:clamp(1.75rem,3.4vw,3rem)}.kicker,.meta-text{font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:300;letter-spacing:.06em;text-transform:uppercase;color:var(--silver)}.caption{color:var(--slate);font-size:.8rem;font-weight:500;line-height:1.65}.intro-text,.body-text{max-width:34rem}.accent-lavender{color:var(--lavender)}.accent-spring{color:var(--spring)}.portfolio-shell{width:100%;min-height:100vh}.spread{position:relative;padding:144px 0}.hero-spread{min-height:100vh;padding-top:0;display:flex;flex-direction:column;justify-content:center}.editorial-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;max-width:1600px;margin:0 auto;padding:0 40px;align-items:start}.hero-grid{align-items:start}.portfolio-piece{position:relative;min-height:18rem;background:var(--mist);overflow:visible;opacity:0;transform:translateY(30px);transition:transform .8s var(--spring-curve),opacity .8s var(--spring-curve),filter 1.2s var(--spring-curve)}.portfolio-piece.in-view{opacity:1;transform:translateY(0)}.photo-container{cursor:pointer}.photo-container::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(155,142,196,.05),rgba(140,180,162,.05));mix-blend-mode:color;pointer-events:none}.synthetic-photo{position:absolute;inset:0;overflow:hidden;filter:contrast(.92) brightness(1.04) saturate(.25);transition:filter 1.2s var(--spring-curve),transform 1.2s var(--spring-curve)}.photo-container:hover .synthetic-photo{filter:contrast(1) brightness(1) saturate(.7);transform:scale(1.015)}.photo-container:hover{transform:translateY(0) scale(1.015)}.workspace{grid-column:1/span 8;height:78vh;min-height:580px}.hero-copy{grid-column:10/span 3;padding-top:6px}.hero-copy h1{margin:34px 0}.intro-text{margin-bottom:55px}.wide-desk{grid-column:4/span 7;grid-row:1;height:430px}.note-left{grid-column:1/span 3;grid-row:1;padding-top:89px}.caption-wide{grid-column:4/span 7;grid-row:2;margin-top:34px}.frost-glass{grid-column:2/span 4;height:620px}.body-block{grid-column:7/span 5;align-self:center}.body-block .body-text{margin:34px 0 55px}.concrete-plane{grid-column:1/span 9;height:500px}.concrete-caption{grid-column:1/span 6;grid-row:2;margin-top:34px}.note-right{grid-column:10/span 3;grid-row:1;align-self:end;margin-bottom:55px}.reflection-copy{grid-column:1/span 5}.glass-facade{grid-column:8/span 5;height:650px}.fog-field{grid-column:2/span 10;height:430px}.fog-caption{grid-column:2/span 8;margin-top:55px}.terminal-still{grid-column:1/span 6;height:540px}.closing-copy{grid-column:8/span 5}.final-spread{padding-bottom:0}.escape.in-view.escape-right{transform:translateX(40px)}.escape.in-view.escape-left{transform:translateX(-40px)}.escape-line{position:absolute;width:220px;height:90px;pointer-events:none;opacity:.8}.escape-line path{fill:none;stroke:var(--frost);stroke-width:1;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s ease-in-out .35s}.in-view .escape-line path{stroke-dashoffset:0}.escape-right .escape-line{right:-72px;top:-32px}.escape-left .escape-line{left:-72px;bottom:-30px}.monogram{position:fixed;top:16px;left:16px;z-index:20;color:var(--lavender);font-family:"Space Grotesk",sans-serif;font-size:1.35rem;font-weight:300;letter-spacing:-.18em;opacity:1;transition:opacity .4s ease}.monogram span{display:inline-block;animation:breath 12s var(--drift) infinite}.monogram span+span{animation-delay:-6s}.monogram:hover{opacity:1}body.is-scrolling .monogram{opacity:.3}@keyframes breath{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}.section-divider{display:block;width:100%;height:120px;max-width:1600px;margin:89px auto 0;padding:0 40px}.section-divider path{fill:none;stroke:var(--frost);stroke-width:1;stroke-dasharray:1600;stroke-dashoffset:1600}.section-divider.drawn path{animation:drawCurve 2s ease-in-out forwards}@keyframes drawCurve{to{stroke-dashoffset:0}}.footer{padding:233px 40px 40px;text-align:center;background:var(--fog);color:var(--silver);font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:300;letter-spacing:.06em;text-transform:uppercase}#cursor-trail{position:fixed;inset:0;width:100%;height:100%;z-index:19;pointer-events:none}.workspace .synthetic-photo{background:linear-gradient(180deg,rgba(244,243,241,.35),rgba(212,212,216,.2)),linear-gradient(105deg,transparent 0 35%,rgba(44,44,46,.18) 35.2% 51%,transparent 51.2%),radial-gradient(ellipse at 24% 68%,#9b8ec4 0 9%,transparent 10%),linear-gradient(0deg,#d4d4d8 0 8%,transparent 8.5%),linear-gradient(90deg,#c4c3c1 0 14%,#e8e7e5 14% 72%,#b6b6ba 72% 75%,#efeeeb 75%);}.wide-desk .synthetic-photo{background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(44,44,46,.07) 23px 24px),linear-gradient(90deg,transparent 0 9%,rgba(44,44,46,.26) 9% 39%,transparent 39%),radial-gradient(ellipse at 72% 35%,rgba(140,180,162,.45) 0 10%,transparent 11%),linear-gradient(135deg,#d4d4d8,#f4f3f1 52%,#b9b9bd)}.frost-glass .synthetic-photo{background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 16px),radial-gradient(circle at 50% 20%,rgba(155,142,196,.42),transparent 24%),linear-gradient(160deg,#f4f3f1,#bfc0c4 48%,#e8e7e5)}.concrete-plane .synthetic-photo{background:linear-gradient(105deg,transparent 0 42%,rgba(44,44,46,.22) 42.2% 44%,transparent 44.2%),repeating-linear-gradient(0deg,rgba(44,44,46,.04) 0 1px,transparent 1px 17px),radial-gradient(ellipse at 85% 20%,rgba(244,243,241,.8),transparent 30%),linear-gradient(120deg,#a8a8ac,#e8e7e5 55%,#c7c7ca)}.glass-facade .synthetic-photo{background:repeating-linear-gradient(115deg,rgba(255,255,255,.2) 0 9px,transparent 9px 42px),linear-gradient(90deg,rgba(155,142,196,.45) 0 2%,transparent 2.5% 19%,rgba(44,44,46,.2) 19.4% 20%,transparent 20.6%),radial-gradient(circle at 65% 18%,rgba(140,180,162,.35),transparent 20%),linear-gradient(145deg,#b9b9bd,#f4f3f1 42%,#8f9095)}.fog-field .synthetic-photo{background:repeating-linear-gradient(90deg,rgba(44,44,46,.045) 0 1px,transparent 1px 72px),radial-gradient(ellipse at 24% 64%,rgba(140,180,162,.38),transparent 26%),radial-gradient(ellipse at 76% 28%,rgba(155,142,196,.32),transparent 25%),linear-gradient(180deg,#f4f3f1,#d4d4d8 58%,#ecebea)}.terminal-still .synthetic-photo{background:linear-gradient(90deg,transparent 0 16%,rgba(44,44,46,.72) 16% 70%,transparent 70%),repeating-linear-gradient(0deg,rgba(140,180,162,.28) 0 2px,transparent 2px 18px),radial-gradient(ellipse at 78% 74%,rgba(155,142,196,.4),transparent 18%),linear-gradient(130deg,#e8e7e5,#bfc0c4)}@media(max-width:1024px){body::before{background:radial-gradient(circle at 22% 14%,rgba(155,142,196,.06),transparent 30%)}.editorial-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:0 24px}.spread{padding:89px 0}.hero-spread{min-height:auto;padding-top:89px}.workspace,.wide-desk,.concrete-plane,.fog-field{grid-column:1/span 6;height:460px;min-height:0}.hero-copy,.note-left,.caption-wide,.body-block,.concrete-caption,.note-right,.reflection-copy,.glass-facade,.terminal-still,.closing-copy{grid-column:1/span 6;grid-row:auto}.frost-glass{grid-column:1/span 3;height:520px}.glass-facade{height:520px}.escape.in-view.escape-right{transform:translateX(20px)}.escape.in-view.escape-left{transform:translateX(-20px)}#cursor-trail{display:none}.section-divider{padding:0 24px}}@media(max-width:768px){.editorial-grid{display:block;padding:0 16px}.spread{padding:89px 0}.portfolio-piece,.workspace,.wide-desk,.frost-glass,.concrete-plane,.glass-facade,.fog-field,.terminal-still{width:100%;height:62vh;min-height:360px;margin:0 0 34px}.escape.in-view.escape-right,.escape.in-view.escape-left,.portfolio-piece.in-view{transform:translateY(0)}.escape-line{display:none}.monogram{display:none}.caption,.project-note,.body-block,.text-column{margin:34px 0 0}.section-divider{height:70px;margin-top:55px;padding:0 16px}.footer{padding-top:144px}}