:root{--ink:#f7f3e9;--muted:rgba(247,243,233,.68);--line:rgba(247,243,233,.2);--accent:#ff6b2c;--accent2:#a8e063;--bg:#0c0d0e;--ease:cubic-bezier(.77,0,.175,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}button,a{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none}.grain{position:fixed;inset:-50%;z-index:30;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain .25s steps(2) infinite}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b0b0c}.backdrop-image{position:absolute;inset:-4%;background:url("images/bg.jpg") center/cover;filter:saturate(.72) contrast(1.08);transform:scale(1.03);transition:background-image .7s ease,transform 1.4s var(--ease),filter .8s ease}.backdrop-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.62) 45%,rgba(5,6,7,.24) 100%),linear-gradient(0deg,rgba(5,6,7,.82),transparent 55%)}.site-header{position:fixed;z-index:40;top:0;left:0;right:0;height:96px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:normal;background:linear-gradient(100deg,rgba(5,6,7,.98) 0%,rgba(28,15,8,.96) 50%,rgba(5,6,7,.98) 100%);border-bottom:1px solid rgba(255,107,44,.22);box-shadow:0 10px 30px rgba(0,0,0,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.site-header::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,44,.55),transparent);opacity:.65;pointer-events:none}
.logo{font-size:14px;line-height:.9;text-align:left;font-weight:900;letter-spacing:.08em;transition:transform .25s var(--ease),color .25s ease}.logo span{font-weight:400;letter-spacing:.18em}.site-header nav{display:flex;gap:34px;align-items:center}.site-header nav button,.site-header nav a{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;opacity:.78;transition:transform .25s var(--ease),opacity .25s ease,color .25s ease,font-weight .2s ease}.header-socials{display:flex;align-items:center;gap:16px;margin-left:3px;padding-left:10px;border-left:1px solid var(--line)}.header-social{display:grid;place-items:center;width:21px;height:21px;color:var(--ink);opacity:.72!important;transition:transform .25s var(--ease),opacity .25s ease,color .25s ease!important}.header-social svg{width:16px;height:16px;display:block;fill:currentColor}.header-social:last-child svg{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.header-social:hover{opacity:1!important;color:var(--accent);transform:scale(1.16)}.site-header nav button:hover,.site-header nav a:hover{opacity:1;color:var(--accent);font-weight:700;transform:scale(1.08)}.logo:hover{color:var(--accent);transform:scale(1.06)}.header-status{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent2);margin-right:7px;box-shadow:0 0 10px var(--accent2)}main{position:relative;z-index:2}.view{height:100vh;min-height:0;padding:150px 7vw 70px;position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(20px);transition:opacity .55s ease,transform .75s var(--ease),visibility 0s linear .75s;overflow:hidden;box-sizing:border-box}.view.active{position:absolute;inset:0;height:100vh;min-height:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;transition:opacity .55s ease,transform .75s var(--ease),visibility 0s}.view.active.project-view{overflow-y:auto}.home-layout{min-height:calc(100vh - 220px);display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:end;gap:7vw}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);font-weight:800;margin:0 0 24px}.home-copy h1,.view h2{font-size:clamp(32px,5vw,100px);line-height:.95;letter-spacing:-.07em;margin:0;font-weight:800}.home-copy h1 em,.view h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.08em}.lede{font-size:17px;line-height:1.5;color:var(--muted);max-width:540px;margin:42px 0 30px}.explore{display:flex;align-items:center;gap:25px;text-transform:uppercase;letter-spacing:.15em;font-size:10px;border-bottom:1px solid var(--line);padding:0 0 12px}.explore b{font-size:18px;color:var(--accent);font-weight:400;transition:transform .3s}.explore:hover b{transform:translate(7px,7px)}.home-aside{border-left:1px solid var(--line);padding-left:24px;margin-bottom:5px;color:var(--muted);font-size:12px}.home-aside p{margin:7px 0 25px;line-height:1.45}.home-aside strong{color:var(--ink);font-weight:600}.home-aside em{color:var(--ink)}.aside-line{display:flex;justify-content:space-between;color:rgba(247,243,233,.38);font-size:9px;letter-spacing:.13em;text-transform:uppercase}.home-bottom{position:absolute;bottom:28px;left:7vw;right:7vw;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:rgba(247,243,233,.45)}.view-intro{max-width:900px}.view-intro h2{font-size:clamp(50px,7vw,100px);max-width:1000px}.view-intro>p:last-child{max-width:470px;color:var(--muted);font-size:14px;margin-top:32px}.work-preview{position:fixed;right:7vw;top:14vh;width:22vw;aspect-ratio:4/3;opacity:.75;pointer-events:none;background:url("images/projects/lotf2_top.jpg") center/cover;mix-blend-mode:screen;transition:background-image .35s ease,transform .5s var(--ease)}.preview-label{position:absolute;bottom:-25px;right:0;font-size:8px;letter-spacing:.15em;color:var(--muted)}
.work-list{margin-top:75px;max-width:1120px;border-top:1px solid var(--line)}.work-item{width:100%;display:grid;grid-template-columns:60px 1.2fr 1fr 35px;align-items:center;text-align:left;border-bottom:1px solid var(--line);padding:23px 0;position:relative;transition:padding .45s var(--ease),color .3s}.work-item:before{content:"";position:absolute;left:-7vw;right:-7vw;top:0;bottom:0;background:rgba(255,107,44,.09);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}.work-item:hover{padding-left:12px}.work-item:hover:before{transform:scaleY(1)}.work-number{font-size:10px;color:var(--accent)}.work-title{font-family:Georgia,serif;font-size:clamp(27px,3.2vw,48px)}.work-meta{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.arrow{font-size:20px;text-align:right;color:var(--accent)}.project-view{padding-top:125px}.back{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:55px}.back:hover{color:var(--accent)}.project-hero{display:flex;justify-content:space-between;gap:30px;align-items:end}.project-hero h2{font-size:clamp(58px,9vw,130px)}.project-role{font-size:13px;color:var(--muted);margin:22px 0 0}.project-year{font-family:Georgia,serif;font-size:20px;color:var(--accent);padding-bottom:12px}.project-image{margin:38px 0;position:relative;display:flex;justify-content:center;align-items:center;max-height:48vh;overflow:hidden}.project-image img{width:100%;height:auto;max-height:48vh;object-fit:contain;display:block}.project-image span{position:absolute;bottom:15px;left:15px;font-size:9px;text-transform:uppercase;letter-spacing:.14em;background:rgba(0,0,0,.65);padding:8px}.project-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:8vw;border-top:1px solid var(--line);padding-top:38px;align-items:center}.project-statement{font-family:Georgia,serif;font-size:clamp(25px,3vw,42px);line-height:1.1;max-width:520px}.project-body{color:var(--muted);font-size:14px;line-height:1.75;max-width:700px}.project-body p{margin:0 0 18px}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:60px}.project-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}
.project-media{margin-top:70px;display:flex;flex-direction:column;gap:55px}
.project-media-block{width:100%}
.media-label{font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:800;margin-bottom:16px;text-align:center}
.project-video{position:relative;width:92%;max-width:1180px;margin-left:auto;margin-right:auto;aspect-ratio:16/9;background:#050505;overflow:hidden}
.project-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.project-steam{width:100%;max-width:646px;min-height:190px;margin:0 auto;background:#101214;overflow:hidden}.steam-block .media-label{text-align:center}
.project-steam iframe{display:block;width:100%;height:190px;border:0}
.project-itch{width:100%;max-width:552px;height:167px;margin:0 auto;background:#101214;overflow:hidden}.project-itch iframe{display:block;width:100%;height:167px;border:0}
.about-layout{display:grid;grid-template-columns:minmax(280px,.75fr) 1.25fr;gap:8vw;max-width:1250px;margin:auto;align-items:center}.about-photo{position:relative}.about-photo img{width:100%;max-height:70vh;object-fit:cover;filter:saturate(.85)}.about-photo span{position:absolute;bottom:12px;left:12px;font-size:9px;letter-spacing:.14em;background:#0c0d0e;padding:8px}.about-copy h2{font-size:clamp(50px,7vw,96px)}.about-copy>.large{font-family:Georgia,serif;font-size:clamp(24px,3vw,39px);line-height:1.1;max-width:700px;margin:45px 0 25px}.about-copy>p:not(.eyebrow):not(.large){max-width:650px;color:var(--muted);font-size:14px;line-height:1.7}.career{border-top:1px solid var(--line);margin-top:35px}.career div{display:grid;grid-template-columns:110px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.career span{font-size:9px;color:var(--accent);letter-spacing:.12em}.career strong{font-size:12px}.career small{grid-column:2;color:var(--muted);font-size:11px}.contact-view{display:grid;place-items:center;text-align:center}.contact-inner{max-width:1000px}.contact-inner h2{font-size:clamp(62px,9vw,130px)}.contact-inner>p:not(.eyebrow){color:var(--muted);font-size:15px}.contact-links{display:flex;justify-content:center;gap:35px;margin-top:45px}.contact-links a{text-transform:uppercase;font-size:10px;letter-spacing:.14em;border-bottom:1px solid var(--line);padding-bottom:10px}.contact-links span{color:var(--accent);font-size:16px;margin-left:8px}.project-cursor{position:fixed;z-index:50;width:74px;height:74px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.55);opacity:0;transition:transform .35s var(--ease),opacity .2s ease;mix-blend-mode:normal;display:grid;place-items:center}
.project-cursor.visible{transform:translate(-50%,-50%) scale(1);opacity:1}
.cursor-core{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(255,107,44,.15),0 0 22px rgba(255,107,44,.45);animation:cursorPulse 1.2s ease-in-out infinite}
.cursor-ring{position:absolute;border:1px solid var(--accent);border-radius:50%;pointer-events:none}
.cursor-ring-a{inset:5px;opacity:.9;animation:cursorOrbit 2.4s linear infinite}
.cursor-ring-b{inset:16px;border-style:dashed;opacity:.65;animation:cursorOrbitReverse 1.6s linear infinite}
@keyframes cursorPulse{0%,100%{transform:scale(.75);box-shadow:0 0 0 1px rgba(255,107,44,.12),0 0 12px rgba(255,107,44,.25)}50%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(255,107,44,.05),0 0 28px rgba(255,107,44,.55)}}
@keyframes cursorOrbit{to{transform:rotate(360deg)}}
@keyframes cursorOrbitReverse{to{transform:rotate(-360deg)}}.transition{position:fixed;inset:0;z-index:60;background:var(--accent);transform:scaleY(0);transform-origin:bottom;pointer-events:none}.transition.run{animation:wipe .75s var(--ease)}@keyframes wipe{0%{transform:scaleY(0)}45%{transform:scaleY(1)}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}
@media(max-width:800px){.work-preview{display:none}.site-header{height:78px;padding:0 5vw}.header-status{display:none}.site-header nav{gap:18px}.view{padding:115px 5vw 55px}.home-layout,.about-layout{grid-template-columns:1fr}.home-layout{align-content:center;min-height:calc(100vh - 170px)}.home-aside{margin-top:55px;max-width:360px}.home-bottom{left:5vw;right:5vw}.work-preview{display:none}.work-item{grid-template-columns:35px 1fr 30px}.work-meta{display:none}.project-grid{grid-template-columns:1fr}.project-gallery{grid-template-columns:1fr}.about-photo img{max-height:55vh}.contact-links{flex-wrap:wrap;gap:20px}.career div{grid-template-columns:80px 1fr}.career small{grid-column:2}.project-hero{align-items:start;flex-direction:column}.project-year{padding:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Home experience panel: keeps the landing page information-rich without turning it into an image gallery. */
.home-layout{position:absolute;top:120px;left:7vw;right:7vw;min-height:calc(100vh - 360px);display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:7vw;}
.home-experience{position:absolute;top:auto;bottom:22px;left:50%;right:auto;width:min(72vw,1040px);transform:translateX(-50%);z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0 10px;}
.home-experience-heading{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:var(--accent);font-weight:800;margin-bottom:12px;}
.home-experience-heading span{color:rgba(247,243,233,.38);font-weight:500;}
.home-experience-list{display:grid;grid-template-columns:1fr 1fr;gap:0 42px;}
.home-experience-item{appearance:none;background:transparent;border:0;border-top:1px solid rgba(247,243,233,.12);padding:18px 0 16px;display:grid;grid-template-columns:28px 1fr 24px;gap:12px;text-align:left;color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),background .3s ease,padding .3s var(--ease);font:inherit;}
.home-experience-item:hover{transform:translateX(7px);}
.home-exp-number{font-size:9px;color:var(--accent);letter-spacing:.12em;padding-top:3px;}
.home-exp-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
.home-exp-logo{display:block;width:190px;height:72px;max-width:100%;object-fit:contain;object-position:center;margin:0 auto 8px;filter:drop-shadow(0 0 10px rgba(255,107,44,.08));transition:transform .3s var(--ease),filter .3s ease;}
.home-experience-item:hover .home-exp-logo{transform:translateX(3px);filter:drop-shadow(0 0 14px rgba(255,107,44,.18));}
.home-exp-main strong{font-family:Georgia,serif;font-size:clamp(26px,2.35vw,36px);font-weight:400;line-height:1.08;}
.home-exp-main small{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:rgba(247,243,233,.52);}
.home-exp-main em{font-size:13px;line-height:1.5;color:var(--muted);font-style:normal;max-width:500px;}
.home-exp-arrow{font-size:17px;color:var(--accent);padding-top:2px;transition:transform .3s var(--ease);}
.home-experience-item:hover .home-exp-arrow{transform:translate(4px,-4px);}
@media(max-width:1000px){.home-experience{left:50%;right:auto;width:84vw;transform:translateX(-50%)}.home-experience-list{grid-template-columns:1fr;gap:0}.home-experience-item:nth-child(2){display:none}}   
@media(max-width:800px){.home-exp-logo{width:160px;height:60px;max-width:100%}.home-experience{position:relative;top:auto;left:auto;right:auto;margin:0 0 55px;padding:16px 0 8px}.home-experience-list{grid-template-columns:1fr}.home-experience-item:nth-child(2){display:grid}.home-layout{min-height:auto}.home-copy{padding-top:20px}}

/*
  Content-view atmosphere control.
  IMPORTANT: .grain is the animated fuzzy layer and lives above the page.
  It is intentionally disabled on content views so project images remain clean.
*/
.grain {
  transition: opacity .6s ease;
}

body.content-active .grain {
  opacity: 0 !important;
  animation: none !important;
}

body.content-active .backdrop-image {
  animation: none !important;
}

body.content-active .backdrop {
  transition: opacity .6s ease;
}

body.content-active .backdrop-image {
  filter: saturate(.72) contrast(1.08);
}

/* Exact-content scrolling: only the active view contributes to document height. */
html, body { height:100%; min-height:100%; overflow:hidden; }
main { position:relative; height:100vh; min-height:0; overflow:hidden; }
@media(max-width:800px){
  .view { padding:115px 5vw 55px; }
}


/* About page: black textured background, with the existing grain retained. */
body.about-active .backdrop {
  background: #050505;
}

body.about-active .backdrop-image {
  opacity: 0 !important;
}

body.about-active .backdrop-wash {
  background: #050505 !important;
  opacity: 1 !important;
}

body.about-active .backdrop-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='aboutNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23aboutNoise)' opacity='.8'/%3E%3C/svg%3E");
}

/* Project gallery layout: one full-width image on top, two supporting images below. */
.project-gallery{grid-template-columns:1fr 1fr;grid-template-areas:"top top" "bottom-left bottom-right";align-items:stretch}
.project-gallery .gallery-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.project-gallery .gallery-image.top{grid-area:top}
.project-gallery .gallery-image.bottom-left{grid-area:bottom-left}
.project-gallery .gallery-image.bottom-right{grid-area:bottom-right}
@media(max-width:800px){.project-gallery{grid-template-columns:1fr;grid-template-areas:"top" "bottom-left" "bottom-right"}}

/* Home composition: hero above, experience below. */
@media(max-width:800px){
  .home-layout{position:relative;top:auto;left:auto;right:auto;min-height:auto;grid-template-columns:1fr;}
  .home-experience{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;width:100%;margin:45px 0 55px;}
}

/* About supporting details */
.about-details{border-top:1px solid var(--line);margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.about-details div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.about-details span{font-size:9px;color:var(--accent);letter-spacing:.12em}
.about-details strong{font-size:11px;font-weight:600}
.about-details small{grid-column:2;color:var(--muted);font-size:10px}
@media(max-width:800px){.about-details{grid-template-columns:1fr}.about-details div{grid-template-columns:80px 1fr}.about-details small{grid-column:2}}

/* Case-study highlight blocks */
.project-highlight{margin-top:42px;padding:0 0 0 18px;border-left:2px solid var(--accent);max-width:700px}
.project-highlight-kicker{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:10px}
.project-highlight h3{margin:0 0 18px;font-family:Georgia,serif;font-size:clamp(24px,2.5vw,36px);line-height:1.05;font-weight:400;color:var(--ink);letter-spacing:-.035em}
.project-highlight p{margin:0 0 16px}
.project-highlight p:last-child{margin-bottom:0}
@media(max-width:800px){.project-highlight{margin-top:34px;padding-left:14px}}

/* Experiments without a hero image */
.project-view .project-image[style*="display: none"] + .project-grid{margin-top:38px}


/* Mobile home layout fixes */
@media(max-width:800px){
  .home-copy h1{font-size:clamp(29px,8.2vw,34px);line-height:.98;letter-spacing:-.055em;max-width:100%;}
  .home-copy h1 em{letter-spacing:-.06em;}
  .home-copy .eyebrow{margin-top:20px;margin-bottom:18px;}
  .home-copy .lede{font-size:15px;line-height:1.5;margin:28px 0 24px;max-width:100%;}
  .home-layout{gap:34px;}
  .home-aside{margin-top:38px;max-width:none;padding-left:18px;}
  .home-experience{margin-top:42px;margin-bottom:24px;}
  .home-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:8px 0 12px;padding:14px 0 0;display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
}