@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#191a1e;font-synthesis:none;--blue:#183ef5;--line:#dcdde2;background:#fafafa;font-family:DM Sans,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline-offset:5px;outline:3px solid #f2a500}header{border-bottom:1px solid var(--line);background:#fafafa;justify-content:space-between;align-items:center;height:100px;padding:0 5.5%;display:flex}.brand{letter-spacing:-1px;font-size:24px;font-weight:700}.brand span{font-weight:400}nav{align-items:center;gap:34px;font-size:14px;display:flex}.nav-cta{border:1px solid #191a1e;border-radius:30px;gap:22px;padding:12px 18px;display:flex}.menu{display:none}.hero{padding:42px 5.5% 0}.eyebrow,.section-top{justify-content:space-between;gap:24px;display:flex}.eyebrow,.label{letter-spacing:1.5px;font-size:12px;font-weight:600}.hero h1{letter-spacing:-.065em;margin:62px 0 38px;font-family:Manrope,Arial,sans-serif;font-size:clamp(46px,6.9vw,106px);font-weight:500;line-height:1.12}em{color:var(--blue);font-style:normal}.hero-bottom{justify-content:space-between;align-items:center;padding-bottom:56px;display:flex}.intro{max-width:480px}.intro p{color:#55575f;margin:0 0 28px;font-size:18px;line-height:1.7}.button{background:var(--blue);color:#fff;border-radius:40px;gap:45px;padding:17px 23px;font-size:14px;display:inline-flex}.signature{align-items:center;gap:26px;font-size:14px;line-height:1.7;display:flex}.monogram{letter-spacing:-10px;color:var(--blue);margin-right:15px;font-family:Manrope,Arial,sans-serif;font-size:100px;font-weight:700;line-height:1}.hero-strip{border-top:1px solid var(--line);letter-spacing:1px;color:#62636b;justify-content:space-between;gap:20px;padding:24px 0;font-size:12px;display:flex}.section{padding:90px 5.5%}.work{background:#f0f1f4}.muted{color:#646770;font-size:14px}.section-title{justify-content:space-between;align-items:flex-end;gap:30px;margin:35px 0 40px;display:flex}h2{letter-spacing:-.05em;margin:0;font-family:Manrope,Arial,sans-serif;font-size:clamp(34px,3.8vw,58px);font-weight:500;line-height:1.15}h2>span{color:#777a84}.filters{flex-wrap:wrap;gap:6px;display:flex}.filters button{background:0 0;border:1px solid #cdced4;border-radius:30px;padding:10px 16px;font-size:14px}.filters button[aria-pressed=true]{color:#fff;background:#1a1b21;border-color:#1a1b21}.project-grid{grid-template-columns:1fr 1fr;gap:42px 28px;display:grid}.project-art{aspect-ratio:1.55;color:#fff;flex-direction:column;justify-content:space-between;padding:25px 28px;transition:transform .25s;display:flex}.project-art:hover{transform:translateY(-4px)}.olive{background:#3c502b}.green{background:#224c40}.candy{background:#943e52}.blue{background:#254c7b}.brown{background:#765143}.ink{background:#282d36}.art-top,.art-bottom{letter-spacing:.8px;justify-content:space-between;align-items:center;font-size:12px;display:flex}.project-wordmark{text-align:center;align-self:center;max-width:420px;font-family:Georgia,serif;font-size:clamp(24px,3.4vw,48px);line-height:1.1}.project-wordmark span{letter-spacing:4px;text-transform:uppercase;margin-top:18px;font-family:DM Sans,Arial,sans-serif;font-size:12px;display:block}.round-arrow{border:1px solid #fff6;border-radius:50%;place-items:center;width:40px;height:40px;font-size:23px;display:grid}.project-caption h3{margin:19px 0 8px;font-size:17px;font-weight:600}.project-caption h3 span{font-weight:400}.project-caption p{color:#646770;max-width:540px;margin:0;font-size:15px;line-height:1.6}.about-grid{grid-template-columns:1fr 1fr;gap:65px;margin-top:45px;display:grid}.about-grid p{color:#5c5e67;margin:0 0 22px;font-size:16px;line-height:1.8}.about-grid .large{color:#202127;font-size:23px;line-height:1.6}.skills{flex-wrap:wrap;gap:9px;margin-top:30px;display:flex}.skills span{border:1px solid var(--line);border-radius:30px;padding:10px 15px;font-size:14px}.experience{border-top:1px solid var(--line)}.experience h2{margin:36px 0 48px}.text-button{background:0 0;border:0;border-bottom:1px solid #222;padding:0 0 5px;font-size:14px}.job{border-top:1px solid var(--line);grid-template-columns:1fr 2fr;gap:35px;padding:35px 0;display:grid}.job-date{letter-spacing:1px;color:#646770;font-size:12px}.job h3{margin:0 0 10px;font-size:25px;font-weight:500}.job p,.job li{color:#5c5e67;max-width:670px;font-size:16px;line-height:1.8}.job .company{color:var(--blue);margin:0}.job ul{margin-bottom:0;padding-left:18px}.profile{background:var(--blue);color:#fff}.profile h2{max-width:1000px;margin:36px 0 50px;font-size:clamp(38px,5.6vw,80px)}.profile-bottom{border-top:1px solid #fff5;justify-content:space-between;align-items:center;gap:30px;padding-top:25px;display:flex}.profile-bottom p{margin:0;font-size:16px;line-height:1.8}.profile-bottom a{border-bottom:1px solid #fff;padding-bottom:8px;font-size:16px}footer{justify-content:space-between;align-items:center;gap:25px;padding:35px 5.5%;display:flex}footer>span,footer>a:last-child{color:#5c5e67;font-size:13px}.skip{z-index:10;background:#fff;padding:20px;position:absolute;top:-100px}.skip:focus{top:0}@media (width>=1600px){header,.hero,.section,footer{padding-left:max(5.5%,50vw - 720px);padding-right:max(5.5%,50vw - 720px)}}@media (width<=850px){.signature{display:none}.section-title{flex-direction:column;align-items:flex-start}.about-grid{gap:30px}.hero h1{margin-top:50px}nav{gap:20px}.hero-strip span:last-child{display:none}}@media (width<=600px){header{height:78px;position:relative}.brand{font-size:22px}.menu{background:0 0;border:0;padding:10px 0;font-size:14px;display:block}.menu span{margin-left:12px}nav{z-index:5;border-bottom:1px solid var(--line);background:#fafafa;padding:24px 5.5%;display:none;position:absolute;top:78px;left:0;right:0}nav.opened{flex-direction:column;align-items:stretch;gap:24px;display:flex}.nav-cta{justify-content:space-between}.hero{padding-top:25px}.eyebrow{letter-spacing:1px;flex-direction:column;gap:9px;font-size:10px}.hero h1{margin:35px 0 24px;font-size:48px}.intro p{font-size:16px}.hero-bottom{padding-bottom:35px}.hero-strip{letter-spacing:.2px;gap:10px;padding:20px 0;font-size:10px}.section{padding-top:56px;padding-bottom:56px}.section-top{flex-wrap:wrap;gap:12px}.muted{font-size:13px}.label{font-size:11px}.section-title{margin:26px 0}.filters{gap:5px}.filters button{padding:9px 12px;font-size:13px}.project-grid{grid-template-columns:1fr;gap:30px}.project-art{aspect-ratio:1.35;padding:22px}.project-wordmark{font-size:38px}.about-grid{grid-template-columns:1fr;gap:30px;margin-top:26px}.about-grid .large{font-size:21px}.job{grid-template-columns:1fr;gap:18px}.job h3{font-size:22px}.profile-bottom{flex-direction:column;align-items:flex-start}footer{flex-wrap:wrap}footer .brand{width:100%}.profile h2{font-size:40px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,footer,.hero,.work,.profile,.text-button,.skip{display:none!important}.section{padding:20px 0}.about-grid{grid-template-columns:1fr;gap:15px}.about-grid h2{display:none}.about-grid:before{content:"Said Ichsan Utama Putra — Web Developer & Digital Marketer";font-size:25px;font-weight:700}.experience h2{margin:20px 0;font-size:28px}.job{break-inside:avoid}.skills span{padding:5px 10px}body{background:#fff}.about-grid p,.job p,.job li{font-size:12px}.job{padding:20px 0}.label{font-size:10px}a{color:inherit}}