/*
Theme Name: Mike Lou — Studio
Theme URI: https://mikelou.com/
Author: Mike Lou Studio
Description: A lean, cinematic portfolio and personal-projects theme with cursor-reactive ambigram particles, dark/light modes and accessible micro-interactions. Pair with the Mike Lou Core plugin for project and social management.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mikelou-studio
Tags: custom-logo, custom-menu, featured-images, portfolio, one-column, accessibility-ready, translation-ready
*/
:root{color-scheme:dark;--ink:#eef4fc;--muted:#a4afbe;--faint:#718094;--bg:#060910;--panel:#0c111a;--panel2:#101825;--border:rgba(210,229,250,.15);--line:rgba(225,239,255,.09);--accent:#89bfff;--accent-rgb:137,191,255;--shadow:0 18px 65px rgba(0,0,0,.26);--width:1280px;--gutter:clamp(22px,5vw,78px);--nav-height:94px;--ease:cubic-bezier(.2,.8,.2,1)}
:root[data-theme="light"]{color-scheme:light;--ink:#111d2b;--muted:#425469;--faint:#748499;--bg:#f7f9fc;--panel:#ffffff;--panel2:#eff3f9;--border:rgba(20,45,70,.14);--line:rgba(35,60,90,.10);--accent:#215db7;--accent-rgb:33,93,183;--shadow:0 24px 70px rgba(23,47,84,.08)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .34s,color .34s;overflow-x:hidden}body.admin-bar .site-header{top:32px}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}::selection{background:var(--accent);color:var(--bg)}.screen-reader-text,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}.skip-link:focus{position:fixed;top:16px;left:16px;z-index:99999;background:var(--ink);color:var(--bg);padding:.8rem 1rem}.shell{width:min(100%,calc(var(--width) + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter)}.overline{display:block;font-size:.69rem;font-weight:650;letter-spacing:.25em;text-transform:uppercase;color:var(--faint)}.muted{color:var(--muted)}.section-heading{font-size:clamp(2.5rem,6vw,5.5rem);font-weight:350;line-height:1.07;letter-spacing:-.065em;margin:.65rem 0 1.25rem}.section-heading em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.075em}.site-header{position:absolute;z-index:50;inset:0 0 auto;height:var(--nav-height);transition:background .3s;display:flex;align-items:center}.site-header.is-scrolled{position:fixed;background:color-mix(in srgb,var(--bg),transparent 13%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.header-content{display:flex;align-items:center;justify-content:space-between;gap:2rem}.wordmark{display:inline-flex;align-items:center;gap:12px;font-size:.85rem;letter-spacing:.42em;font-weight:600;white-space:nowrap}.wordmark-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 20px rgba(var(--accent-rgb),.85)}.nav-right{display:flex;align-items:center;gap:clamp(20px,3.2vw,55px)}.primary-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px)}.primary-nav a{font-size:.69rem;font-weight:620;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);transition:color .22s}.primary-nav a:hover{color:var(--ink)}.theme-toggle,.mobile-toggle{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;display:inline-grid;place-items:center;background:rgba(126,159,196,.055);transition:border-color .22s,transform .25s,background .2s}.theme-toggle:hover,.mobile-toggle:hover{border-color:var(--accent);transform:translateY(-2px)}.theme-toggle svg,.mobile-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.theme-icon-sun{display:none}:root[data-theme="light"] .theme-icon-sun{display:block}:root[data-theme="light"] .theme-icon-moon{display:none}.mobile-toggle{display:none}.hero{position:relative;isolation:isolate;min-height: min(900px,100svh);min-height:max(730px,100svh);display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse 65% 90% at 77% 42%,rgba(34,68,104,.15),transparent 66%),var(--bg)}:root[data-theme="light"] .hero{background:radial-gradient(ellipse 70% 95% at 76% 40%,rgba(84,133,209,.12),transparent 68%),var(--bg)}.hero::after{position:absolute;content:"";z-index:-1;inset:0;background:linear-gradient(90deg,var(--bg) 7%,transparent 63%),linear-gradient(0deg,var(--bg),transparent 23%);pointer-events:none}.hero-canvas{position:absolute;z-index:-2;inset:0;width:100%;height:100%;touch-action:pan-y}.hero-ambigram{position:absolute;z-index:-3;top:49%;left:72%;transform:translate(-50%,-50%);height:min(78%,700px);width:auto;aspect-ratio:541/671;background:url(assets/img/ambigram.webp) center/contain no-repeat;opacity:.1;pointer-events:none;filter:drop-shadow(0 0 90px rgba(var(--accent-rgb),.15))}:root[data-theme="light"] .hero-ambigram{filter:brightness(0);opacity:.065}.hero-inner{padding-top:calc(var(--nav-height) + 8rem);padding-bottom:10.5rem;position:relative;z-index:1}.hero-copy{max-width:650px}.hero .overline{margin-bottom:2rem}.hero-title{font-size:clamp(4.4rem,9.2vw,9.5rem);font-weight:340;line-height:.99;letter-spacing:-.083em;margin:0 0 2.1rem}.hero-title span{display:block}.hero-title em{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.086em}.hero-intro{max-width:480px;font-size:clamp(.97rem,1.25vw,1.13rem);line-height:1.82;color:var(--muted);margin:0 0 2.3rem}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:49px;padding:0 1.5rem;border:1px solid var(--border);border-radius:50px;font-size:.7rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;background:rgba(140,165,200,.04);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}.btn:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}.btn-primary{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.12),0 0 25px rgba(var(--accent-rgb),.13)}.btn-primary:hover{box-shadow:0 0 32px rgba(var(--accent-rgb),.2)}.btn-arrow{font-size:1.2rem;line-height:0;letter-spacing:0}.hero-bottom{position:absolute;left:0;right:0;bottom:56px;z-index:2}.hero-bottom-content{display:flex;align-items:end;justify-content:space-between}.socials{display:flex;gap:10px;align-items:center}.social-link{width:43px;height:43px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:rgba(170,195,215,.04);color:var(--muted);transition:transform .25s,border-color .25s,color .25s,background .25s}.social-link:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--ink);background:rgba(var(--accent-rgb),.12)}.social-link svg{width:17px;height:17px;fill:currentColor}.hero-micro{font-size:.61rem;text-transform:uppercase;letter-spacing:.23em;color:var(--faint);display:flex;gap:16px;align-items:center}.hero-micro::before{content:"";height:1px;width:42px;background:var(--accent)}.section{padding:clamp(95px,11vw,170px) 0;position:relative}.section::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,10vw,145px);align-items:start}.section-description{color:var(--muted);line-height:1.95;max-width:530px;font-size:clamp(1rem,1.3vw,1.16rem);padding-top:3rem}.projects-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:48px}.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card{min-height:380px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--border);background:var(--panel);border-radius:14px;isolation:isolate;transition:transform .45s var(--ease),border-color .3s,box-shadow .3s}.project-card:hover{transform:translateY(-8px);border-color:rgba(var(--accent-rgb),.42);box-shadow:var(--shadow)}.project-art{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 90% 1%,rgba(var(--accent-rgb),.12),transparent 52%),linear-gradient(135deg,transparent,rgba(var(--accent-rgb),.08));overflow:hidden}.project-art::after{content:"";position:absolute;right:-14%;bottom:-48%;width:91%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.24);box-shadow:0 0 80px rgba(var(--accent-rgb),.07),inset 0 0 120px rgba(var(--accent-rgb),.07)}.project-card:nth-child(3n+2) .project-art::after{right:20%;bottom:-60%;border-radius:4%;transform:rotate(44deg)}.project-card:nth-child(3n) .project-art::after{bottom:-70%;right:-35%;width:110%;border-width:2px}.project-art img{width:100%;height:100%;object-fit:cover;opacity:.52;transition:transform .8s var(--ease)}.project-card:hover .project-art img{transform:scale(1.06)}.project-content{margin-top:auto;padding:26px;position:relative;z-index:2;background:linear-gradient(0deg,var(--panel) 0,transparent 100%)}.project-num{position:absolute;top:25px;left:25px;color:var(--muted);font-size:.73rem;letter-spacing:.18em}.project-type{font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}.project-title{margin:12px 0 4px;letter-spacing:-.04em;line-height:1.2;font-size:clamp(1.45rem,2.1vw,2.2rem);font-weight:450}.project-subtitle{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0;max-width:250px}.project-link{position:absolute;top:22px;right:24px;border-radius:50%;border:1px solid var(--border);width:34px;height:34px;display:grid;place-items:center;font-size:1.1rem}.project-empty{border:1px dashed var(--border);border-radius:16px;padding:clamp(30px,5vw,65px);grid-column:1/-1;background:radial-gradient(ellipse at right,rgba(var(--accent-rgb),.06),transparent 60%);display:flex;align-items:center;justify-content:space-between;gap:30px}.project-empty h3{margin:.8rem 0;font-size:clamp(1.5rem,2.5vw,2.3rem);font-weight:400;letter-spacing:-.04em}.project-empty p{margin:.3rem 0 0;color:var(--muted)}.project-glyph{font-family:Georgia,serif;font-size:8rem;line-height:1;letter-spacing:-.12em;color:rgba(var(--accent-rgb),.27);flex-shrink:0}.about-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:3rem}.stat-chip{border:1px solid var(--border);border-radius:50px;padding:10px 16px;color:var(--faint);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}.contact-section{padding-bottom:clamp(110px,15vw,185px)}.contact-big{display:inline-block;font-weight:360;font-size:clamp(2rem,7vw,7.5rem);letter-spacing:-.075em;line-height:1.1;border-bottom:1px solid var(--accent);padding-bottom:12px;transition:letter-spacing .3s}.contact-big:hover{letter-spacing:-.065em}.contact-text{color:var(--muted);font-size:1.06rem;max-width:500px;margin:0 0 2.4rem}.footer{border-top:1px solid var(--line);padding:30px 0 40px}.footer-content{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.footer small,.footer a{font-size:.69rem;color:var(--faint);letter-spacing:.1em}.footer a:hover{color:var(--accent)}.footer-links{display:flex;gap:25px}.inside-main{padding-top:calc(var(--nav-height) + 75px);min-height:75vh}.inside-main article{max-width:790px;margin:0 auto}.inside-main .entry-title{font-size:clamp(3rem,7vw,6rem);font-weight:350;letter-spacing:-.06em;line-height:1.06}.prose{font-size:1.04rem;line-height:1.9;color:var(--muted)}.prose h2,.prose h3{color:var(--ink);letter-spacing:-.045em}.prose a{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}.prose img{border-radius:10px}.post-list{display:grid;gap:12px}.post-list-item{display:block;border:1px solid var(--border);padding:25px;border-radius:8px}.post-list-item:hover{border-color:var(--accent)}.wp-block-image{margin:1.5rem 0}.js-motion .is-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}.js-motion .is-reveal.is-visible{opacity:1;transform:none}
@media(min-width:1500px){.hero-title{font-size:clamp(7rem,8vw,10rem)}}
@media(max-width:900px){:root{--nav-height:78px}.hero{min-height:780px}.hero-inner{padding-top:155px;padding-bottom:145px}.hero-title{font-size:clamp(4.4rem,12vw,7rem)}.hero-ambigram{left:76%;opacity:.065}.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-grid{grid-template-columns:1fr;gap:10px}.section-description{padding-top:0}.primary-nav{gap:18px}}
@media(max-width:640px){body.admin-bar .site-header{top:46px}.site-header{height:73px}.wordmark{font-size:.73rem;letter-spacing:.27em}.nav-right{gap:10px}.mobile-toggle{display:grid}.primary-nav{display:none;position:absolute;top:72px;left:var(--gutter);right:var(--gutter);padding:23px;flex-direction:column;align-items:stretch;gap:20px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}.primary-nav.is-open{display:flex}.primary-nav a{display:block;padding:8px}.hero{min-height:min(890px,100svh);min-height:max(680px,100svh)}.hero-inner{padding-top:160px;padding-bottom:180px}.hero-title{font-size:clamp(3.8rem,15.4vw,6.4rem);margin-bottom:26px}.hero .overline{font-size:.6rem;letter-spacing:.2em}.hero-intro{font-size:1rem}.hero::after{background:linear-gradient(90deg,var(--bg),transparent 120%),linear-gradient(0deg,var(--bg),transparent 45%)}.hero-ambigram{left:71%;top:40%;height:58%;opacity:.08}.hero-bottom{bottom:28px}.hero-micro{display:none}.projects-grid{grid-template-columns:1fr}.project-card{min-height:315px}.projects-head{display:block}.section{padding:90px 0}.section-heading{font-size:clamp(2.8rem,11vw,4.2rem)}.project-empty{padding:30px}.project-glyph{display:none}.footer-content{display:block}.footer-links{margin-top:12px}.contact-big{font-size:clamp(2rem,9vw,4rem)}}
@media(max-width:360px){.hero-title{font-size:3.3rem}.actions{gap:8px}.btn{padding:0 1rem;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js-motion .is-reveal{opacity:1;transform:none}}
/* Navigation list support when a custom menu is assigned in WordPress. */
.primary-nav .menu{display:flex;gap:clamp(18px,2.6vw,36px);align-items:center;padding:0;margin:0;list-style:none}.primary-nav li{list-style:none}@media(max-width:640px){.primary-nav .menu{flex-direction:column;align-items:stretch;gap:16px}}