@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&display=swap');

:root { --ink:#172348; --paper:#fffaf1; --cream:#fff3d8; --pink:#ff5b76; --yellow:#ffd64d; --blue:#83dcff; --mint:#79e1c4; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; }
.site-header { position:absolute; z-index:5; top:0; left:0; width:100%; padding:1.65rem clamp(1.25rem,5vw,5rem); display:flex; justify-content:space-between; align-items:center; color:white; }
.wordmark { font-family:'DM Mono',monospace; font-size:.88rem; font-weight:500; text-decoration:none; letter-spacing:-.04em; }
.wordmark span { color:var(--yellow); }
nav { display:flex; gap:1.5rem; }
nav a { color:white; font-size:.82rem; font-weight:700; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:.18rem; }
nav a:hover { border-color:var(--yellow); }
.hero { min-height:780px; height:100svh; overflow:hidden; position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); align-items:center; padding:8.5rem clamp(1.25rem,9vw,10rem) 7rem; background:linear-gradient(90deg,rgba(8,26,31,.82),rgba(8,26,31,.53)),url('../images/demons.jpg') center/cover; color:white; isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:-1; width:68vw; height:68vw; max-width:850px; max-height:850px; border-radius:50%; background:rgba(38,118,104,.38); right:-17vw; bottom:-29vw; filter:blur(6px); }
.hero::after { content:""; position:absolute; z-index:-1; width:29vw; height:29vw; border-radius:50%; background:rgba(150,218,218,.2); left:-10vw; top:-14vw; filter:blur(8px); }
.eyebrow { margin:0 0 1rem; font:500 .67rem/1.2 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.hero-copy { max-width:560px; animation:rise .65s ease-out both; }
.hero h1,.section-heading h2,.contact-section h2 { font-family:Fraunces,Georgia,serif; letter-spacing:-.085em; margin:0; line-height:.82; }
.hero h1 { font-size:clamp(4.8rem,10vw,9rem); }
.hero h1 em,.contact-section h2 em { font-weight:600; color:var(--yellow); }
.hero h1 span,.section-heading h2 span { color:var(--pink); font-family:'DM Sans',sans-serif; }
.intro { max-width:430px; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.55; margin:1.8rem 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.button { display:inline-block; padding:.75rem 1rem; border:1px solid white; text-decoration:none; font-size:.83rem; font-weight:700; border-radius:99px; transition:transform .2s,background .2s,color .2s; }
.button span { margin-left:.35rem; font-size:1.1em; }.button:hover { transform:translateY(-3px) rotate(-1.5deg); }.button-primary { background:var(--yellow); border-color:var(--yellow); color:var(--ink); }.button-ghost:hover { background:white; color:var(--ink); }
.french-note { margin:1.4rem 0 0; color:#c9d3f5; font-size:.83rem; }
.hero-photo-wrap { position:relative; top:-2.25rem; width:min(29vw,370px); min-width:270px; justify-self:center; animation:rise .75s .12s ease-out both; }
.polaroid { position:relative; z-index:2; background:#fffdf8; padding:13px 13px 45px; transform:rotate(5deg); box-shadow:13px 15px 0 rgba(8,16,42,.34); }
.polaroid img { display:block; height:clamp(270px,33vw,410px); width:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03); }.polaroid p { position:absolute; bottom:13px; left:0; width:100%; text-align:center; margin:0; color:var(--ink); font:500 .75rem 'DM Mono',monospace; }
.orbit { border:1px solid rgba(255,255,255,.45); border-radius:50%; position:absolute; z-index:1; }.orbit-a { inset:-10% -15%; transform:rotate(-18deg); }.orbit-b { inset:-22% -3%; transform:rotate(29deg); border-color:rgba(255,214,77,.65); }
.hero-spark { position:absolute; z-index:2; color:var(--yellow); font-size:clamp(3rem,6vw,6rem); }.spark-one { top:16%; right:9%; transform:rotate(10deg); }.spark-two { bottom:9%; left:48%; color:var(--blue); font-size:3rem; }.hero-squiggle { color:var(--pink); position:absolute; bottom:13%; left:6%; font-size:8rem; transform:rotate(-24deg); }
.now-playing { position:absolute; z-index:3; right:clamp(1.25rem,5vw,5rem); bottom:1.75rem; width:300px; }.now-playing iframe { display:block; width:100%; height:88px; border:0; border-radius:10px; }.now-playing p { margin:.4rem 0 0; color:white; text-align:center; font:500 .61rem 'DM Mono',monospace; }

.projects-section { position:relative; padding:clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,5rem); background:linear-gradient(rgba(255,250,241,.72),rgba(255,250,241,.72)),url('../images/plane.jpg') center/cover; overflow:hidden; }.section-heading { max-width:690px; margin:0 auto 4rem; text-align:center; }.section-heading .eyebrow { color:#627090; }.section-heading h2 { font-size:clamp(3.1rem,7vw,6.5rem); }.section-heading > p:last-child { color:#627090; margin:.95rem 0 0; font-size:1.05rem; }
.projects-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1440px; margin:auto; gap:1.1rem; align-items:start; }.project-link { display:block; color:inherit; text-decoration:none; }.project-card { position:relative; overflow:hidden; min-height:400px; padding:1.2rem; border:1.5px solid #304b4b; border-radius:18px; box-shadow:5px 5px 0 rgba(48,75,75,.78); transition:transform .22s ease,box-shadow .22s ease; }.project-card:hover { transform:translate(-4px,-5px) rotate(-.65deg); box-shadow:10px 11px 0 rgba(48,75,75,.78); }.card-detached{background:linear-gradient(145deg,#d9e9db,#accac4)}.card-coral{background:#f1b6a4}.card-blue{background:#bad9df}.card-violet{background:#d4c6db}.card-lime{background:#d6dfa7}.card-orange{background:#eac28d}.card-pink{background:#e9b9c7}.card-mint{background:#add6c4}.card-sun{background:#eddb96}.project-link .project-card { height:100%; }.card-top { display:flex; justify-content:space-between; align-items:center; }.card-top span { font-size:1.25rem; }.project-number { margin:0; font:500 .62rem 'DM Mono',monospace; letter-spacing:.08em; }.project-card h3 { font-family:Fraunces,Georgia,serif; letter-spacing:-.065em; font-size:clamp(1.45rem,2.3vw,2.3rem); line-height:.93; margin:1.2rem 0; }.detached-tags { display:flex; flex-wrap:wrap; gap:.3rem; min-height:29px; margin-bottom:.95rem; }.detached-tags span { padding:.28rem .42rem; border:1px solid rgba(48,75,75,.66); border-radius:99px; background:rgba(255,255,255,.38); font:500 .54rem 'DM Mono',monospace; }.tech-stack { display:flex; gap:.35rem; min-height:29px; margin-bottom:.95rem; }.tech-stack img { width:27px; height:27px; object-fit:cover; background:white; border:1px solid #304b4b; border-radius:50%; padding:2px; }.project-visual { height:142px; overflow:hidden; background:#fff8e7; border:1px solid rgba(48,75,75,.7); border-radius:9px; box-shadow:2px 3px 0 rgba(48,75,75,.55); }.project-visual img,.project-visual video { height:100%; width:100%; display:block; object-fit:cover; }.project-card > p { margin:1rem 0 0; font-size:.82rem; line-height:1.43; }.project-card > p a { font-weight:700; text-underline-offset:2px; }

.project-card-button { width:100%; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }.project-card-button:focus-visible { outline:3px solid white; outline-offset:3px; }.expand-project-cue { display:inline-flex; align-items:center; gap:.35rem; margin-top:.95rem; padding:.38rem .6rem; border:1px solid rgba(48,75,75,.65); border-radius:99px; background:rgba(255,255,255,.34); color:#385c53; font:500 .62rem 'DM Mono',monospace; transition:transform .2s,background .2s; }.expand-project-cue b { font-size:.9rem; transition:transform .2s; }.project-card-button:hover .expand-project-cue { background:#f9f6ed; transform:translateX(3px); }.project-card-button:hover .expand-project-cue b { transform:translate(2px,-2px); }.detached-dialog { width:min(1040px,calc(100% - 2rem)); max-height:min(880px,calc(100dvh - 2rem)); padding:0; border:0; border-radius:24px; background:#f9f6ed; color:var(--ink); box-shadow:0 25px 90px rgba(0,0,0,.5); }.detached-dialog::backdrop { background:rgba(8,26,31,.7); }.detached-dialog[open] { animation:detached-open .35s cubic-bezier(.2,.8,.2,1) both; }.detached-detail { position:relative; padding:clamp(1.5rem,5vw,4.5rem); }.dialog-close { position:absolute; z-index:2; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); margin:0; }.dialog-close button { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0 0 2px; border:1px solid rgba(48,75,75,.5); border-radius:50%; background:#f9f6ed; color:var(--ink); cursor:pointer; font-family:Arial,sans-serif; font-size:1.7rem; font-weight:300; line-height:1; }.detached-detail-header { max-width:670px; margin-bottom:2rem; }.detached-detail-header .eyebrow,.detail-section-heading .eyebrow { color:#55736c; }.detached-detail-header h2 { margin:.15rem 0 .8rem; font:700 clamp(4rem,10vw,7.5rem)/.8 Fraunces,Georgia,serif; letter-spacing:-.095em; }.detached-detail-header > p:last-child { max-width:545px; margin:0; color:#40554d; font-size:clamp(1rem,2vw,1.25rem); line-height:1.5; }.detached-demo { overflow:hidden; width:100%; border:1px solid rgba(48,75,75,.5); border-radius:16px; background:#1f3432; box-shadow:5px 6px 0 rgba(48,75,75,.65); }.detached-demo video { display:block; width:100%; max-height:520px; object-fit:contain; }.detached-shots { margin-top:clamp(3rem,7vw,5rem); }.detail-section-heading { max-width:490px; margin-bottom:1.4rem; }.detail-section-heading h3 { margin:0; font:700 clamp(2rem,4vw,3.5rem)/.9 Fraunces,Georgia,serif; letter-spacing:-.07em; }.detached-shot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.detached-shot { margin:0; padding:.6rem; border:1px solid rgba(48,75,75,.5); border-radius:13px; background:#e4efe5; }.detached-shot img { display:block; width:100%; height:clamp(150px,14vw,210px); object-fit:contain; border-radius:8px; background:#b8cec5; }.detached-shot figcaption { display:flex; flex-direction:column; gap:.25rem; padding:.75rem .25rem .2rem; }.detached-shot strong { font-size:.84rem; }.detached-shot span { color:#4b6259; font-size:.73rem; line-height:1.35; }@keyframes detached-open { from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)} }

.contact-section { min-height:570px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:4rem 1.25rem; background:linear-gradient(rgba(10,39,33,.77),rgba(10,39,33,.82)),url('../images/grassery.jpg') center/cover; color:white; text-align:center; }.contact-section::before,.contact-section::after { content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(255,255,255,.28); border-radius:50%; }.contact-section::before { top:-220px; left:-90px; }.contact-section::after { bottom:-250px; right:-70px; }.contact-section .eyebrow { position:relative; z-index:1; color:#d9ed9e; }.contact-section h2 { position:relative; z-index:1; font-size:clamp(3.3rem,7vw,6.8rem); }.contact-links { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; max-width:700px; margin:2.4rem 0; gap:.55rem; }.contact-links a { border:1px solid rgba(255,255,255,.85); padding:.65rem .85rem; border-radius:99px; color:white; text-decoration:none; font:.72rem 'DM Mono',monospace; transition:background .2s,color .2s,transform .2s; }.contact-links a:hover { background:#e6d77d; border-color:#e6d77d; color:var(--ink); transform:rotate(-2deg) translateY(-3px); }.contact-links span { color:#d9ed9e; font-size:1.1rem; }.footer-signoff { position:relative; z-index:1; margin:0; color:#d7e2d7; font:.67rem 'DM Mono',monospace; }.footer-signoff span { color:#e6d77d; }
@keyframes rise { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
@media (max-width:1050px) { .projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.hero { grid-template-columns:1fr 300px; padding-left:6vw; padding-right:6vw; }.hero-squiggle { display:none; } }
@media (max-width:720px) { .site-header { padding:1.25rem; }.hero { min-height:850px; height:auto; padding:8.5rem 1.5rem 7rem; grid-template-columns:1fr; }.hero-copy { position:relative; z-index:2; }.hero h1 { font-size:clamp(4.3rem,19vw,6.5rem); }.hero-photo-wrap { top:-1.5rem; width:240px; min-width:0; margin:3.8rem auto 0; }.polaroid img { height:270px; }.orbit-b { display:none; }.hero::before { width:110vw; height:110vw; right:-55vw; bottom:2%; }.spark-one { top:54%; right:12%; }.spark-two { left:13%; bottom:22%; }.now-playing { bottom:1.3rem; }.projects-grid { grid-template-columns:1fr; max-width:430px; }.project-card { min-height:0; }.project-visual { height:170px; }.projects-section { padding-top:5rem; }.section-heading { margin-bottom:3rem; }.contact-section { min-height:520px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition:none!important; } }
@media (max-width:720px) { .detached-dialog { width:calc(100% - 1rem); max-height:calc(100dvh - 1rem); border-radius:18px; }.detached-detail { padding:1.25rem; }.detached-shot-grid { grid-template-columns:1fr; } }