/*
Theme Name: Folio Studio
Author: Portfolio Studio
Description: An editorial bilingual personal portfolio with native WordPress blocks.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: folio-studio
License: GPL-2.0-or-later
*/
:root{--paper:#faf9f6;--ink:#202820;--forest:#183e32;--lime:#d8f36a;--muted:#70756e;--line:#dedfd7;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #7ca436;outline-offset:5px}button:disabled{cursor:default}p,h1,h2,h3{margin:0}h1,h2,h3{line-height:1.12;font-weight:500;letter-spacing:-.045em}img{max-width:100%;display:block}svg{max-width:100%}.shell{max-width:1280px;width:calc(100% - 112px);margin:0 auto}.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--line)}.brand{font-size:35px;font-weight:750;letter-spacing:-2px;line-height:1}.brand span{font-size:12px;vertical-align:top;letter-spacing:0;margin-left:4px}.site-header nav{display:flex;gap:35px;font-size:14px;color:#555d54}.site-header nav a:hover,.site-footer a:hover{color:#52734c}.nav-end{display:flex;align-items:center;gap:28px}.language-switch{display:flex;gap:8px;align-items:center;font-size:12px}.language-switch button{background:none;border:0;padding:5px 2px;color:#8b8d86;font-size:12px}.language-switch button[aria-pressed=true]{color:var(--ink);font-weight:700}.language-switch>span{color:#c6c7c0}.nav-contact{background:var(--forest);color:white;padding:12px 21px;border-radius:28px;font-size:13px}.nav-contact span{margin-left:16px}.menu-toggle{display:none}.hero{padding-top:82px;padding-bottom:90px;display:grid;grid-template-columns:1.25fr 1fr;gap:58px;align-items:center}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.14em;line-height:1.6}.hero-copy>.eyebrow{margin-bottom:30px}.hero h1,.hero h2{font-size:clamp(46px,5.35vw,78px);line-height:1.06;letter-spacing:-.06em}.hero h2{font-family:Georgia,serif;font-style:italic;color:var(--forest);margin-top:5px;font-weight:400}.hero-description{max-width:445px;font-size:16px;color:#697064;line-height:1.8;margin-top:25px}.hero-actions{display:flex;gap:13px;margin-top:33px}.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}.wp-block-button__link{display:inline-block;background:var(--forest);color:white;border:1px solid var(--forest);font-size:13px;border-radius:50px;padding:14px 22px;line-height:1.5;transition:transform .2s,background .2s}.wp-block-button__link:hover{background:#2b5342;transform:translateY(-2px)}.is-style-outline .wp-block-button__link{background:transparent;border-color:#c9cec2;color:var(--ink)}.is-style-outline .wp-block-button__link:hover{background:#efefe8}.hero-note{display:flex;align-items:center;gap:9px;font-size:11px;color:#777d70;margin-top:30px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#658855}.hero-art{height:440px;position:relative;background:#ecefe4;border-radius:150px 150px 18px 18px;overflow:visible}.art-grid{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background-image:linear-gradient(#bbc3b129 1px,transparent 1px),linear-gradient(90deg,#bbc3b129 1px,transparent 1px);background-size:45px 45px}.art-label{position:absolute;top:53px;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:.2em;color:#6f7e60}.orbit{position:absolute;width:290px;height:290px;border:1px solid #c6cebb;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-52%)}.orbit-two{width:350px;height:350px}.monogram{position:absolute;inset:50px 0 65px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-size:245px;line-height:1;color:var(--forest);letter-spacing:-30px}.monogram span{font-size:112px;position:absolute;right:18%;top:16%;color:#9bab63;letter-spacing:0}.art-caption{position:absolute;bottom:48px;left:32px;display:flex;flex-direction:column;font-size:14px;line-height:1.5;color:var(--forest)}.floating-label{position:absolute;bottom:22px;right:-22px;background:white;box-shadow:0 12px 35px #183e3212;border:1px solid #e8ebde;padding:15px 20px;border-radius:12px;display:flex;align-items:center;gap:14px;transform:rotate(-4deg);max-width:290px}.floating-label>span{background:var(--lime);color:var(--forest);width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:22px}.floating-label strong{display:block;font-size:12px;font-weight:600}.floating-label small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.discipline-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f0f1e9}.strip-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:72px;font-size:10px;letter-spacing:.14em;font-weight:600;color:#506147}.strip-inner span:nth-child(2n){font-size:26px;color:#789253}.work-section{padding-top:92px;padding-bottom:85px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.heading-copy>.eyebrow{margin-bottom:17px}.section-heading h2{font-size:43px;max-width:640px}.section-description{color:var(--muted);max-width:220px;font-size:13px;line-height:1.8}.work-toolbar{display:flex;justify-content:space-between;align-items:center;margin:39px 0 27px}.filter-list{display:flex;gap:8px}.filter-list button{border:1px solid transparent;color:#70766c;background:transparent;border-radius:50px;padding:8px 17px;font-size:12px}.filter-list button.active{background:var(--forest);color:white}.filter-list button:not(.active):hover{border-color:#cbd2c0}.filter-list span{font-size:9px;opacity:.7;margin-left:9px}.demo-label{font-size:10px;color:#858a80;letter-spacing:.015em}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 28px}.project-atlas{grid-column:1/-1}.project-visual{display:block;background:#e4eadf;border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:1.55}.project-atlas .project-visual{aspect-ratio:2.7}.project-visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-visual:hover img{transform:scale(1.025)}.project-open{position:absolute;bottom:20px;right:20px;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:white;font-size:26px;transition:transform .2s}.project-visual:hover .project-open{transform:rotate(45deg)}.project-meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:11px}.project-meta .eyebrow{color:#76806c;font-size:9px}.project-number{font-size:10px;color:#92998b}.project-card h3{font-size:25px;font-weight:500}.project-description{font-size:13px;color:#73786d;line-height:1.7;margin-top:10px;max-width:560px}.project-tags{font-size:10px;color:#7d8772;margin-top:14px}.project-card[hidden]{display:none}.project-grid.filtered .project-atlas{grid-column:auto}.project-grid.filtered .project-atlas .project-visual{aspect-ratio:1.55}.about-section{display:grid;grid-template-columns:.85fr 1fr;gap:100px;border-top:1px solid var(--line);padding-top:85px;padding-bottom:85px;align-items:center}.about-visual{height:460px;border-radius:22px;background:var(--forest);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.about-visual:before,.about-visual:after{content:"";position:absolute;border:1px solid #ffffff17;border-radius:50%;width:450px;height:450px;top:40px;left:-100px}.about-visual:after{top:-100px;left:130px}.about-symbol{font-size:270px;line-height:1;color:var(--lime);position:relative;transition:transform 1s}.about-visual:hover .about-symbol{transform:rotate(35deg)}.about-visual-bottom{position:absolute;bottom:30px;left:30px;right:30px;display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.13em;color:#d8e4d0}.about-copy h2{font-size:43px;margin:18px 0 23px;max-width:470px}.about-copy>p:not(.eyebrow){color:#7b7e72;font-size:13px;line-height:1.85;margin-top:14px}.about-copy>.about-lead{font-size:16px!important;color:#555e50!important}.approach-list{margin:23px 0 30px;border-top:1px solid var(--line)}.approach-list p{font-size:12px;padding:12px 0;border-bottom:1px solid var(--line)}.experience-section{padding-top:75px;padding-bottom:90px;border-top:1px solid var(--line)}.experience-section h2{max-width:680px;font-size:40px}.experience-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:100px;margin-top:50px}.timeline>.eyebrow,.toolkit>.eyebrow{color:#7c856e;margin-bottom:20px}.timeline-row{display:grid;grid-template-columns:82px 1fr;gap:20px;border-top:1px solid var(--line);padding:26px 0}.timeline-date{font-size:9px;color:#92998a;letter-spacing:.08em;padding-top:6px}.timeline-content h3{font-size:21px}.timeline-place{font-size:11px;color:#5c6951;margin:7px 0 10px}.timeline-content>p:last-child{font-size:12px;color:#83877c;max-width:330px}.toolkit-note{font-size:11px;color:#89907f;margin-top:-4px;margin-bottom:22px}.skill-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.skill-row h3{font-size:18px;letter-spacing:-.025em}.skill-row p{font-size:11px;color:#7c8573;max-width:200px;text-align:right}.contact-section{padding-bottom:30px}.contact-panel{background:var(--forest);color:white;border-radius:26px;padding:60px;display:grid;grid-template-columns:1.6fr 1fr;gap:70px;align-items:center}.contact-copy>.eyebrow{color:#c5d5b6}.contact-copy h2{font-size:47px;line-height:1.12;margin:20px 0 24px;max-width:540px}.contact-copy>p:not(.eyebrow){font-size:13px;color:#b8ccb7;max-width:400px}.contact-actions{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-top:29px}.contact-email{font-size:21px;letter-spacing:-.03em;padding:8px 0;border-bottom:1px solid #77916e}.contact-email span{margin-left:20px}.copy-email{border:1px solid #6a8066;background:transparent;color:#c8dac0;border-radius:30px;font-size:10px;padding:8px 12px}.contact-copy>.contact-note{font-size:9px!important;margin-top:12px;color:#a2b79a!important}.cv-card{border:1px solid #68845c;border-radius:16px;padding:29px;background:#214a38;position:relative}.cv-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--lime);color:var(--forest);border-radius:50%;font-size:27px;margin-bottom:32px}.cv-card>.eyebrow{color:#b8cca6;font-size:9px}.cv-card h3{font-size:27px;margin:13px 0}.cv-card>p:not(.eyebrow){font-size:11px;color:#b9cdb2;line-height:1.8}.cv-link{display:flex;align-items:center;justify-content:space-between;background:var(--lime);color:var(--forest);padding:12px 17px;border-radius:25px;font-size:12px;margin-top:23px;font-weight:600}.cv-card>.cv-note{font-size:9px!important;margin-top:13px}.site-footer{padding:30px 0 38px;display:flex;align-items:center;justify-content:space-between;gap:25px}.site-footer .brand{font-size:26px}.site-footer p,.site-footer>a:last-child{font-size:10px;color:#7e8376}.anchor-target{height:0}.standard-page{padding-top:65px;padding-bottom:80px;min-height:60vh}.standard-page h1{font-size:48px;margin-bottom:30px}.standard-page p{margin-bottom:20px}.project-dialog{padding:0;border:0;border-radius:22px;background:var(--paper);color:var(--ink);max-width:850px;width:calc(100% - 40px);max-height:90vh;overflow:auto;box-shadow:0 30px 100px #0003}.project-dialog::backdrop{background:#17291acc;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:16px;top:16px;background:white;border:0;border-radius:50%;width:40px;height:40px;font-size:24px;z-index:1}.dialog-visual img{width:100%;aspect-ratio:2.1;object-fit:cover}.dialog-body{padding:32px}.dialog-body h2{font-size:34px;margin:15px 0}.dialog-detail{color:#727967;font-size:15px;margin-top:20px;line-height:1.8}.dialog-tags{font-size:11px;color:#71815f;margin:20px 0}.dialog-done{border:0;background:var(--forest);color:white;padding:12px 20px;border-radius:30px;margin-top:20px;font-size:13px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(100px);opacity:0;background:var(--forest);color:white;border:1px solid #c7d6af;padding:12px 22px;border-radius:30px;font-size:13px;z-index:100;transition:.25s;pointer-events:none}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.skip-link{position:absolute;top:-90px;left:16px;padding:10px;background:var(--forest);color:white;z-index:100}.skip-link:focus{top:15px}.wp-site-blocks{padding:0!important}.wp-site-blocks>*{margin-block-start:0!important}.portfolio-main>.wp-block-group,.section-anchor>.wp-block-group{margin-block-start:0}.wp-block-template-part{margin:0}.wp-block-button{margin:0}.site-header .wp-block-html{display:contents}html[lang=vi] .hero h1,html[lang=vi] .hero h2{font-size:clamp(44px,4.6vw,66px)}html[lang=vi] .section-heading h2{font-size:39px}
.project-atlas .project-visual img{object-fit:contain}.project-atlas .project-visual{background:#e1e8d9}
@media(min-width:1600px){.hero{padding-top:105px;padding-bottom:110px}.hero-art{height:470px}}
@media(max-width:1050px){.shell{width:calc(100% - 64px)}.hero{gap:32px;padding-top:60px;padding-bottom:70px}.hero-art{height:400px}.hero h1,.hero h2{font-size:58px}.site-header nav{gap:22px}.nav-end{gap:15px}.about-section{gap:55px}.experience-grid{gap:50px}.contact-panel{padding:40px;gap:40px}.contact-copy h2{font-size:39px}.section-heading h2{font-size:36px}.monogram span{right:12%}.floating-label{right:-10px}.orbit-two{width:300px;height:300px}.orbit-one{width:245px;height:245px}.strip-inner{font-size:8px;letter-spacing:.08em}.contact-email{font-size:18px}}
@media(max-width:760px){.shell{width:calc(100% - 40px)}.site-header{height:80px;gap:16px;position:relative}.brand{font-size:30px}.menu-toggle{display:flex;flex-direction:column;gap:6px;order:3;background:none;border:0;padding:8px}.menu-toggle span{width:22px;height:1px;background:var(--ink)}.site-header nav{display:none;position:absolute;left:-20px;right:-20px;top:79px;background:var(--paper);padding:23px 20px;z-index:10;border-bottom:1px solid var(--line);box-shadow:0 10px 15px #00000008}.site-header nav.open{display:flex;flex-direction:column;gap:18px}.nav-end{margin-left:auto;gap:12px}.nav-contact{display:none}.hero{grid-template-columns:1fr;padding-top:45px;padding-bottom:50px;gap:42px}.hero-copy>.eyebrow{margin-bottom:23px}.hero h1,.hero h2{font-size:clamp(43px,9vw,68px)}html[lang=vi] .hero h1,html[lang=vi] .hero h2{font-size:clamp(40px,8.5vw,60px)}.hero-description{font-size:14px;max-width:440px}.hero-art{height:360px;max-width:480px;width:100%;margin:auto;border-radius:110px 110px 18px 18px}.monogram{font-size:225px}.monogram span{right:22%;top:12%;font-size:95px}.floating-label{bottom:18px;right:9px;padding:12px 14px;max-width:250px}.art-caption{left:23px;bottom:75px}.art-label{top:40px}.strip-inner{overflow:hidden;min-height:62px;gap:23px;justify-content:flex-start;white-space:nowrap}.strip-inner span:nth-child(n+6){display:none}.section-heading{display:block}.section-heading h2,.about-copy h2,.experience-section h2,html[lang=vi] .section-heading h2{font-size:34px}.section-description{margin-top:15px;max-width:100%}.work-section{padding-top:55px;padding-bottom:55px}.work-toolbar{align-items:flex-start;gap:14px;flex-direction:column;margin-top:25px}.filter-list{gap:2px;max-width:100%;flex-wrap:wrap}.filter-list button{font-size:11px;padding:8px 12px}.project-grid{grid-template-columns:1fr;gap:32px}.project-atlas{grid-column:auto}.project-atlas .project-visual{aspect-ratio:1.55}.project-card h3{font-size:23px}.project-visual{border-radius:15px}.project-open{width:37px;height:37px;font-size:22px;bottom:14px;right:14px}.about-section{grid-template-columns:1fr;gap:34px;padding-top:55px;padding-bottom:55px}.about-visual{height:300px}.about-symbol{font-size:230px}.about-copy h2{max-width:100%}.experience-section{padding-top:55px;padding-bottom:55px}.experience-section .section-heading>.wp-block-buttons{margin-top:23px}.experience-grid{grid-template-columns:1fr;gap:26px;margin-top:32px}.skill-row p{max-width:220px}.contact-panel{grid-template-columns:1fr;padding:30px 24px;gap:30px;border-radius:18px}.contact-copy h2{font-size:35px}.contact-actions{gap:13px;margin-top:20px}.contact-email{font-size:20px}.cv-card{padding:23px}.cv-icon{margin-bottom:23px}.site-footer{flex-wrap:wrap;padding:20px 0 27px;gap:15px}.site-footer p{order:3;flex-basis:100%}.site-footer>a:last-child{margin-left:auto}.hero-note{font-size:10px}.dialog-body{padding:24px}.dialog-body h2{font-size:27px}.dialog-detail{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}