/* GIN PORTFOLIO 3.1 | Universal design system - 2026
   Shared across every HTML page; rendered immediately, without relying on JS.
   Preserves original art and SEO while aligning all pages to the same brand. */
:root{
 --mint:#ccff00!important;--gin-accent:#ccff00!important;--gf-accent:#ccff00!important;
 --gin-page-title-accent:#ccff00!important;--gin-story-green:#ccff00!important;
 --c2-mint:#ccff00;--gfv-green:#ccff00;
 --g31-black:#08090d;--g31-surface:#14151b;--g31-panel:#1d1e25;
 --g31-white:#f4f4f2;--g31-gray:#c3c4ce;--g31-paper:#f3f3ef;
 --g31-text:#16171e;--g31-margin:clamp(18px,4.6vw,78px);
 --g31-ease:cubic-bezier(.22,1,.36,1)
}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body.gin30-site{background:var(--g31-black);color:var(--g31-white);font:450 15px/1.72 Manrope,Arial,sans-serif;overflow-x:clip}
body.gin30-site p{line-height:1.75}
body.gin30-site a,body.gin30-site button{ -webkit-tap-highlight-color:transparent }
body.gin30-site img{max-width:100%}
body.gin30-site :is(a,button,input,select,textarea):focus-visible{outline:2px solid #ccff00!important;outline-offset:4px}
body.gin30-site .v18-shell{width:min(calc(100% - 2 * var(--g31-margin)),1500px);max-width:1500px}
body.gin30-site :is(.v18-micro,.v18-overline){font:650 10px/1.5 "IBM Plex Mono",monospace!important;letter-spacing:.09em;color:#c3c4d0}
body.gin30-site .mint,body.gin30-site .gin-title-accent{color:#ccff00!important;-webkit-text-fill-color:#ccff00!important}
body.gin30-site a:hover{transition-timing-function:var(--g31-ease)}
body.gin30-site .v18-head{position:sticky!important;top:12px!important;z-index:1005!important;width:calc(100% - clamp(24px,5vw,90px));max-width:1660px;min-height:68px;height:68px!important;margin:12px auto 0!important;padding:0 15px 0 22px!important;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #ffffff2b!important;border-radius:60px!important;background:rgba(19,20,24,.96)!important;color:#f4f4f2!important;box-shadow:0 15px 55px #0005;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body.gin30-site .v18-head>span{display:none!important}
body.gin30-site .v18-head .v18-brand img{height:40px!important;max-height:40px!important;max-width:124px!important;width:auto;filter:brightness(0) invert(1)}
body.gin30-site .ginx-header-actions{gap:9px;align-items:center}
body.gin30-site .ginx-header-links{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:2px;padding:5px;background:#27282e;border:1px solid #ffffff18;border-radius:45px;margin:0!important}
body.gin30-site .ginx-header-links a{padding:8px 16px;color:#c7c8d2!important;font:650 11px/1.3 Manrope,Arial,sans-serif!important;letter-spacing:0!important;border-radius:30px}
body.gin30-site .ginx-header-links a:hover,body.gin30-site .ginx-header-links a[aria-current=page]{background:#42434b;color:#fff!important}
body.gin30-site .ginx-commission{background:#fff!important;color:#121319!important;border-color:#fff!important;border-radius:35px!important;padding:12px 17px!important;font:750 11px/1.3 Manrope,Arial,sans-serif!important;letter-spacing:0!important}
body.gin30-site .ginx-commission:hover{background:#ccff00!important;border-color:#ccff00!important;color:#08090d!important}
body.gin30-site .v18-menu-button{color:#fff!important;background:transparent!important;border:0!important;min-height:39px!important;padding:4px 4px 4px 9px!important;font-family:Manrope,Arial,sans-serif!important;font-size:10px!important;letter-spacing:.06em!important}
body.gin30-site .v18-menu-button b{background:#ccff00!important;color:#08090d!important;min-width:30px!important;min-height:30px!important;border-radius:50%!important}
body.gin30-site .v18-nav{background:#202127!important;border-left:1px solid #ffffff30!important;color:#fff!important}
body.gin30-site .v18-nav .ginx-drawer-head span{font:650 10px "IBM Plex Mono",monospace;letter-spacing:.06em;color:#c6c6d2}
body.gin30-site .v18-nav .ginx-menu-pane>a:hover{color:#ccff00!important}
body.gin30-site .v18-nav .ginx-contact-pane :is(input,select,textarea){color:#fff!important}
body.gin30-site .v18-nav .ginx-contact-pane label{color:#e2e2e9!important}

/* Shared editorial title rhythm / dark inner-page hero */
body.gin30-site.gin-subpage .v18-intro{padding:clamp(86px,10vw,152px) 0 clamp(64px,7vw,112px)!important;background:#08090d!important;color:#f3f3f7!important}
body.gin30-site.gin-subpage .v18-intro h1.gin-page-title{font-family:"Space Grotesk",Manrope,sans-serif!important;font-size:clamp(52px,7.3vw,119px)!important;line-height:.99!important;font-weight:750!important;letter-spacing:-.082em!important;color:#f7f7fa!important;-webkit-text-fill-color:#f7f7fa!important;margin:27px 0 30px!important}
body.gin30-site.gin-subpage .v18-intro h1.gin-page-title .mint{color:#ccff00!important;-webkit-text-fill-color:#ccff00!important}
body.gin30-site.gin-subpage .v18-intro>p{max-width:760px;color:#c8c9d6!important;font-size:clamp(14px,1.27vw,18px)!important;line-height:1.76}
body.gin30-site.gin-subpage .v18-intro .v18-micro{border-color:#ffffff36!important}
body.gin30-site.gin-subpage .v18-archive,body.gin30-site.gin-subpage .v18-blog,body.gin30-site.gin-subpage .v18-career{background:#08090d!important;color:#f5f5f7!important}
body.gin30-site.gin-subpage :is(.v18-archive,.v18-blog,.v18-career) :is(.v18-micro,.v18-overline){color:#bfc0cb!important;border-color:#ffffff35!important}
body.gin30-site.gin-subpage .v18-archive-grid{gap:clamp(34px,5vw,78px) clamp(16px,2.8vw,40px)}
body.gin30-site.gin-subpage .v18-archive .v18-project-art{overflow:hidden;border-radius:16px!important;background:#171920!important}
body.gin30-site.gin-subpage .v18-archive .v18-project-art img{transition:transform .85s var(--g31-ease)}
body.gin30-site.gin-subpage .v18-archive .v18-project:hover img{transform:scale(1.055)}
body.gin30-site.gin-subpage .v18-project-meta{padding-top:14px}
body.gin30-site.gin-subpage .v18-project-meta strong{font:750 clamp(19px,2vw,33px)/1.16 "Space Grotesk",Manrope,sans-serif!important;letter-spacing:-.05em;color:#fff!important}
body.gin30-site.gin-subpage .v18-project-meta small{color:#c5c6d2!important}
body.gin30-site.gin-subpage .v18-archive #result-count{color:#fff!important}
body.gin30-site.gin-subpage .v18-archive .v18-filterbar{border-color:#ffffff35!important}
body.gin30-site.gin-subpage .v18-filters button{color:#e8e8ee!important;border-color:#555861!important;background:#202127!important;border-radius:24px}
body.gin30-site.gin-subpage .v18-filters button[aria-pressed=true],body.gin30-site.gin-subpage .v18-filters button:hover{color:#08090d!important;background:#ccff00!important;border-color:#ccff00!important}
body.gin30-site.gin-subpage .v18-archive input{background:#171920!important;color:#fff!important;border-color:#555861!important;border-radius:8px}
body.gin30-site.gin-subpage .v18-blog .v18-post{overflow:hidden;background:#14151b!important;color:#f5f5f8!important;border:1px solid #ffffff22;border-radius:12px!important;transition:transform .5s var(--g31-ease),border-color .3s}
body.gin30-site.gin-subpage .v18-blog .v18-post:hover{transform:translateY(-6px);border-color:#ffffff66}
body.gin30-site.gin-subpage .v18-blog .v18-post :is(h2,h3,strong){color:#fff!important}
body.gin30-site.gin-subpage .v18-blog .v18-post :is(p,small,b){color:#c5c7d2!important}
body.gin30-site.gin-subpage .v18-career{border-color:#ffffff33}

/* About: dark thematic world, neutral accents, preserved transparent personal mascot assets */
body.gin30-site .gin-story{--gin-story-green:#ccff00!important;--gin-story-line:#ffffff2c;background:#08090d!important;color:#f4f4f8!important}
body.gin30-site .gin-story :is(.gin-story-hero,.gin-story-chapter,.gin-story-cases){background:#08090d!important;color:#f4f4f8!important}
body.gin30-site .gin-story :is(.gin-story-facts,.gin-story-lab){background:#15161d!important;color:#f6f6f8!important}
body.gin30-site .gin-story .gin-story-h1,body.gin30-site .gin-story h1.gin-page-title.gin-story-h1{font-family:"Space Grotesk",Manrope,sans-serif!important;letter-spacing:-.08em!important;font-size:clamp(58px,8vw,128px)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
body.gin30-site .gin-story .gin-story-h1 .mint{color:#ccff00!important;-webkit-text-fill-color:#ccff00!important}
body.gin30-site .gin-story :is(h2,h3){color:#f7f7fa!important;font-family:"Space Grotesk",Manrope,sans-serif!important}
body.gin30-site .gin-story :is(.gin-story-prose,.gin-story-prose p,.gin-story-hero-body,.gin-story-hero-lede,.gin-story-quote,.gin-story-eyebrow){color:#cdd0d8!important}
body.gin30-site .gin-story .gin-story-quote{color:#eceef0!important;font-family:"Cormorant Garamond",Georgia,serif!important}
body.gin30-site .gin-story .gin-story-overline{border-color:#ffffff33!important;color:#c0c0ca!important}
body.gin30-site .gin-story .gin-story-case{border-color:#ffffff35!important;border-radius:12px!important;background:#16171e!important;color:#f6f6f9!important}
body.gin30-site .gin-story .gin-story-case strong{color:#fff!important}
body.gin30-site .gin-story .gin-story-case p{color:#c5c6d0!important}
body.gin30-site .gin-story .gin-story-link--solid{background:#ccff00!important;color:#08090d!important;border-color:#ccff00!important;border-radius:32px}
body.gin30-site .gin-story .gin-story-link:not(.gin-story-link--solid){border-color:#ffffff66!important;color:#f7f7f7!important;border-radius:32px}
body.gin30-site .gin-story .gin-story-link:hover{background:white!important;color:#08090d!important}
body.gin30-site .gin-story .gin-story-discipline a:not(:hover){color:#e8e8ee!important}
body.gin30-site .gin-story .gin-story-discipline a:hover{background:#ccff00!important;color:#08090d!important}

/* Contact becomes the same premium light chapter as homepage editorial */
body.gin30-site .gin-c2{--c2-black:#16171c;--c2-off:#f3f3ef;--c2-line:#dadbd7;--c2-mint:#ccff00;--c2-muted:#595c64;background:#f3f3ef!important;color:#17181e!important}
body.gin30-site .gin-c2 :is(.gin-c2-hero,.gin-c2-brief-section,.gin-c2-contact-row,.gin-c2-related){background:#f3f3ef!important;color:#17181e!important}
body.gin30-site .gin-c2 .gin-c2-hero h1.gin-page-title{font-family:"Space Grotesk",Manrope,sans-serif!important;font-size:clamp(55px,7.5vw,115px)!important;font-weight:750!important;line-height:1.02!important;letter-spacing:-.08em!important;color:#15161b!important;-webkit-text-fill-color:#15161b!important}
body.gin30-site .gin-c2 .gin-c2-hero h1 .gin-title-accent{color:#ccff00!important;-webkit-text-fill-color:#ccff00!important}
body.gin30-site .gin-c2 :is(.gin-c2-hero,.gin-c2-brief-section) :is(p,li,span){color:#52555e}
body.gin30-site .gin-c2 .gin-c2-hero :is(h1,h2),body.gin30-site .gin-c2 .gin-c2-brief-section :is(h2,h3){color:#17181e!important}
body.gin30-site .gin-c2 .gin-c2-hero .gin-c2-lead{color:#454852!important}
body.gin30-site .gin-c2 .gin-c2-form{background:#fff!important;border:1px solid #dedfda;border-radius:16px!important;box-shadow:0 24px 80px #15161a0b}
body.gin30-site .gin-c2 .gin-c2-form :is(input,textarea,select){background:#fafaf8!important;color:#17181e!important;border:1px solid #cacbc7!important;border-radius:8px!important}
body.gin30-site .gin-c2 :is(.gin-c2-main-cta,.gin-c2-send){background:#17181e!important;border-color:#17181e!important;color:#fff!important;border-radius:30px!important}
body.gin30-site .gin-c2 :is(.gin-c2-main-cta,.gin-c2-send):hover{background:#ccff00!important;border-color:#ccff00!important;color:#090a0b!important}
body.gin30-site .gin-c2 .gin-c2-copy{border-radius:30px!important}
body.gin30-site .gin-c2 .gin-c2-contact-email{color:#16171c!important;overflow-wrap:anywhere}
body.gin30-site .gin-c2 .gin-c2-contact-email:hover{color:#51545c!important}

/* Project and article pages intentionally keep their light reading surfaces */
body.gin30-site.case-page :is(.case-main,.case-intro,.case-reading,.blog-main,.blog-heading,.article-body){color:#17181e}
body.gin30-site.case-page .case-main{background:#f3f3ef!important;color:#17181e!important}
body.gin30-site.case-page .case-main .case-reading{background:#f3f3ef!important;color:#17181e!important}
body.gin30-site.case-page .case-main .case-intro{background:#f3f3ef!important;color:#17181e!important}
body.gin30-site.case-page .case-main .case-intro h1.gin-page-title,body.gin30-site.case-page .blog-heading h1.gin-page-title{color:#17181e!important;-webkit-text-fill-color:#17181e!important;font-family:"Space Grotesk",Manrope,sans-serif!important;letter-spacing:-.064em!important}
body.gin30-site.case-page .case-main .case-intro h1 .mint{color:#6b8c00!important;-webkit-text-fill-color:#6b8c00!important}
body.gin30-site.case-page .case-main .case-reading :is(p,li){color:#43454d}
body.gin30-site.case-page .case-main .case-reading :is(h2,h3,h4){color:#17181e!important;font-family:"Space Grotesk",Manrope,sans-serif!important}
body.gin30-site.case-page .case-main .case-reading img{border-radius:10px}
body.gin30-site.case-page .case-main a:focus-visible{outline-color:#556f00!important}
body.gin30-site.case-page .case-next{background:#14151b!important;color:#f6f6fa!important}

/* Footer: one canonical component and one color/motion system for 57 pages */
body.gin30-site footer.v18-foot.gin-footer-v26.gin-footer-v31{
 --gfv-green:#ccff00!important;--gfv-text:#f4f4f2;--gfv-muted:#bcbfc9;--gfv-rule:#34353f;
 background:#08090d!important;color:#f4f4f2!important;
 border-top:1px solid #ffffff28!important;padding-inline:var(--g31-margin)!important
}
body.gin30-site footer.gin-footer-v31 .ginf-wrap{max-width:1500px!important}
body.gin30-site footer.gin-footer-v31 .ginf-topline{border-color:#ffffff30!important;color:#bfc0ca!important;font-family:"IBM Plex Mono",monospace!important;letter-spacing:.055em!important}
body.gin30-site footer.gin-footer-v31 .ginf-status::before{background:#ccff00!important;box-shadow:0 0 0 3px #ccff0020}
body.gin30-site footer.gin-footer-v31 .ginf-stage{gap:clamp(32px,6vw,96px);padding-top:clamp(70px,8.5vw,125px)}
body.gin30-site footer.gin-footer-v31 .ginf-stage-title{font-family:"Space Grotesk",Manrope,sans-serif!important;font-weight:750!important;letter-spacing:-.09em!important;color:#fff!important}
body.gin30-site footer.gin-footer-v31 .ginf-stage-title .ginf-accent{color:#ccff00!important}
body.gin30-site footer.gin-footer-v31 .ginf-aside .ginf-eyebrow{color:#c4c5cf!important;font-family:"IBM Plex Mono",monospace}
body.gin30-site footer.gin-footer-v31 .ginf-aside p{color:#c8c9d2!important}
body.gin30-site footer.gin-footer-v31 .ginf-cta{border:1px solid #e6e6e8!important;color:#fff!important;border-radius:50px!important;padding:8px 9px 8px 21px!important}
body.gin30-site footer.gin-footer-v31 .ginf-cta .ginf-cta-icon{background:#ccff00!important;color:#08090d!important;border-radius:50%}
body.gin30-site footer.gin-footer-v31 .ginf-cta:hover{background:#ccff00!important;color:#09090d!important;border-color:#ccff00!important}
body.gin30-site footer.gin-footer-v31 .ginf-cta:hover .ginf-cta-icon{background:#08090d!important;color:#ccff00!important}
body.gin30-site footer.gin-footer-v31 .ginf-details{border-color:#ffffff2c!important}
body.gin30-site footer.gin-footer-v31 .ginf-brand p{color:#c1c2cb!important}
body.gin30-site footer.gin-footer-v31 .ginf-heading{color:#a6a8b4!important;font-family:"IBM Plex Mono",monospace!important;letter-spacing:.08em}
body.gin30-site footer.gin-footer-v31 .ginf-menu a{color:#f4f4f4!important;transition:color .25s,transform .3s}
body.gin30-site footer.gin-footer-v31 .ginf-menu a:hover{color:#ccff00!important}
body.gin30-site footer.gin-footer-v31 .ginf-email{color:#fff!important;border-color:#777985!important}
body.gin30-site footer.gin-footer-v31 .ginf-email:hover{color:#ccff00!important;border-color:#ccff00!important}
body.gin30-site footer.gin-footer-v31 .ginf-contact-col p{color:#c1c2cc!important}
body.gin30-site footer.gin-footer-v31 .ginf-signature .ginf-giant strong{color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.33);font-family:"Space Grotesk",Manrope,sans-serif!important;font-weight:750!important;letter-spacing:-.108em}
body.gin30-site footer.gin-footer-v31 .ginf-signature .ginf-giant strong .ginf-dot{color:#ccff00!important;-webkit-text-stroke:0}
body.gin30-site footer.gin-footer-v31 .ginf-giant em{color:#dedee6!important}
body.gin30-site footer.gin-footer-v31 .ginf-bottom{border-color:#ffffff30!important;color:#b8bac6!important}
body.gin30-site footer.gin-footer-v31 .ginf-bottom a{color:#f0f0f0!important}
body.gin30-site footer.gin-footer-v31 .ginf-bottom a:hover{color:#ccff00!important}

/* No JS dependence for layout, no hidden text from an old contrast script */
body.gin30-site .gm-runway,body.gin30-site .gm-runner{display:none!important}
@media(max-width:1199px){body.gin30-site .ginx-header-links a{padding:8px 12px!important}}
@media(max-width:1023px){body.gin30-site .ginx-header-links{display:none!important}}
@media(max-width:760px){
 body.gin30-site{font-size:14px}
 body.gin30-site .v18-head{height:62px!important;min-height:62px;top:8px!important;width:calc(100% - 24px)!important;margin:8px auto 0!important;padding:0 9px 0 14px!important}
 body.gin30-site .v18-head .v18-brand img{height:32px!important;max-height:32px!important;max-width:90px!important}
 body.gin30-site .ginx-header-actions{gap:4px!important}
 body.gin30-site .ginx-commission{padding:9px 12px!important;font-size:10px!important}
 body.gin30-site .v18-menu-button{min-height:35px!important;padding:3px 3px 3px 7px!important;font-size:9px!important}
 body.gin30-site .v18-menu-button b{min-height:29px!important;min-width:29px!important}
 body.gin30-site.gin-subpage .v18-intro{padding-top:85px!important;padding-bottom:60px!important}
 body.gin30-site.gin-subpage .v18-intro h1.gin-page-title{font-size:clamp(42px,9vw,73px)!important}
 body.gin30-site .gin-story h1.gin-page-title.gin-story-h1{font-size:clamp(47px,10vw,82px)!important}
 body.gin30-site .gin-c2 .gin-c2-hero h1.gin-page-title{font-size:clamp(48px,9.8vw,84px)!important}
 body.gin30-site footer.gin-footer-v31{padding-inline:20px!important}
 body.gin30-site footer.gin-footer-v31 .ginf-stage-title{font-size:clamp(48px,11vw,74px)!important}
 body.gin30-site footer.gin-footer-v31 .ginf-details{gap:35px 18px}
 body.gin30-site footer.gin-footer-v31 .ginf-email{font-size:12px!important}
}
@media(max-width:380px){
 body.gin30-site footer.gin-footer-v31 .ginf-details{grid-template-columns:1fr!important}
 body.gin30-site footer.gin-footer-v31 .ginf-brand{grid-column:auto!important}
 body.gin30-site footer.gin-footer-v31 .ginf-stage-title{font-size:clamp(39px,10vw,48px)!important}
}
@media(prefers-reduced-motion:reduce){body.gin30-site *{scroll-behavior:auto!important}body.gin30-site .ginx-header-links a,body.gin30-site .v18-project img{transition:none!important}}