@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-italic-400-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/league-spartan-100-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-baskerville-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:300;font-display:swap;src:url(/assets/fonts/nunito-sans-italic-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-sans-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- tokens ---------- */
:root{
  --bg:#f6f6f6; --dark:#302e32; --green:#bada55; --ink:#302e32; --navy:#324158; --gray:#626063; --card:#ededed;
  --z:1;
  --u:calc(min(100vw,560px)/320);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'League Spartan','Josefin Sans',Futura,sans-serif;font-weight:350;letter-spacing:.008em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}
strong,b{font-weight:700;letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.it{font-family:'Libre Baskerville','Bodoni Moda',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--green)}

/* ---------- header ---------- */
.hdr{position:relative;height:103px;background:var(--bg);z-index:60}
.hdr .logo{position:absolute;left:30px;top:14px;width:81px;height:81px;display:block}
.hdr .logo img{width:100%;height:100%;object-fit:cover}
.nav{position:absolute;right:3px;top:31px}
.nav>ul{display:flex;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav .top{display:block;font:inherit;font-size:23px;letter-spacing:1.15px;line-height:21px;padding:10px 13px;color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none;font-weight:350}
.nav .top:hover,.nav .top[aria-current]{text-decoration:underline;text-underline-offset:3px}
.nav .sub{display:none;position:absolute;left:0;top:41px;min-width:159px;margin:0;padding:0;list-style:none;background:var(--bg)}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}
.nav .sub a{display:block;padding:15px 11px;font-size:27px;line-height:29px;letter-spacing:1.35px;text-decoration:none;white-space:nowrap}
.nav .sub a:hover{text-decoration:underline}
.burger{display:none}
.mnav{display:none}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--dark);height:272px;color:#fff;text-align:center;margin-top:0}
.ftr::before,.torn{content:"";position:absolute;left:0;right:0;top:0;height:50px;background:url(/assets/img/torn.svg) center/100% 100% no-repeat;transform:scaleY(-1);pointer-events:none}
.ftr .name{position:absolute;left:0;right:0;top:101px;font-size:34px;line-height:47.6px;font-weight:700;letter-spacing:6.8px;color:var(--bg);text-decoration:none;display:block;height:31px;margin-top:-8px}
.ftr .links{position:absolute;left:0;right:0;top:160px;display:flex;justify-content:center}
.ftr .links a{display:block;width:142px;font-size:26px;line-height:26px;text-decoration:none;color:#fff}
.ftr .links a:hover{text-decoration:underline}
.ftr .ww{position:absolute;left:0;right:0;top:222px;font-size:15px;line-height:21px;color:#fff}
.ftr .ww a{text-decoration:underline}
.ftr .copy{position:absolute;left:0;right:0;top:247px;font-size:14px;line-height:19.6px;letter-spacing:.42px;color:var(--bg)}

/* ---------- generic buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--navy);text-decoration:none;font-size:30px;line-height:42px;text-align:center}
.btn:hover{filter:brightness(.96)}

/* ---------- stage (desktop canvas 1440 wide, scaled down when viewport is narrower) ---------- */
.sec{position:relative;overflow:hidden}
.stage{position:relative;width:1440px;margin:0 auto;zoom:var(--z)}
.abs{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h,auto)*1px)}
.abs.nh{height:auto}
.c{text-align:center}

/* ---------- home ---------- */
.home-hero h1{position:absolute;left:0;width:1440px;text-align:center;font-size:95px;line-height:133px;font-weight:350;white-space:nowrap}
.home-hero .cta{position:absolute;left:608px;top:405px;width:224px;height:64px}
.home-intro h2{font-size:95px;line-height:87px;font-weight:350}
.home-intro p{font-size:31px;line-height:58px}
.portrait{position:absolute;border-radius:30px;box-shadow:0 1px 3px rgba(0,0,0,.5);overflow:hidden;transform:rotate(3.09deg)}
.portrait img{width:100%;height:100%;object-fit:cover}
.tape{position:absolute}
.tape img{width:100%;height:100%}
.card{position:absolute;top:0;height:655px;text-align:center}
.card svg{display:block;width:100%;height:100%;fill:currentColor}
.card h3{position:absolute;left:0;right:0;top:192px;font-size:40px;line-height:40px;font-weight:700;letter-spacing:2px}
.card .tx{position:absolute;left:-10px;right:-10px;white-space:nowrap}
.card .tx.s31{top:254px;font-size:31px;line-height:43.4px}
.card .tx.s38{top:249px;font-size:38px;line-height:53.2px}
.c1{left:124px;width:273px;background:var(--dark);color:var(--bg)}
.c1 .tx{color:var(--green)}
.c2{left:442px;width:261px;background:var(--card);color:#323232}
.c2 .tx{color:#000}
.c3{left:748px;width:261px;background:var(--green);color:#000}
.c3 .tx{color:#000}
.c4{left:1055px;width:261px;background:var(--gray);color:#fff}
.c4 .tx{color:#fff;left:-2px;right:-2px}
.recent h2{position:absolute;left:0;width:1440px;top:0;text-align:center;font-size:53px;line-height:74.2px}
.recent .sub{position:absolute;left:0;width:1440px;top:75px;text-align:center;font-size:26px;line-height:36.4px}
.tile{position:absolute;display:block;overflow:hidden;background:#555}
.tile img,.tile video{width:100%;height:100%;object-fit:cover}
.gray img,.gray video{filter:grayscale(1);transition:filter .3s}
.gray:hover img,.gray:hover video{filter:none}
.tile .ov{position:absolute;inset:0;background:rgba(118,118,118,.55);opacity:0;transition:opacity .25s;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:24px;line-height:34px;padding:20px}
.gray .ov{display:none}
.tile:hover .ov,.tile:focus-visible .ov{opacity:1}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hdr{height:calc(104*var(--u))}
  .hdr .logo{left:50%;top:calc(17*var(--u));width:calc(70*var(--u));height:calc(70*var(--u));margin-left:calc(-35*var(--u))}
  .nav{display:none}
  .burger{display:flex;position:absolute;right:calc(14*var(--u));top:calc(24*var(--u));width:calc(50*var(--u));height:calc(50*var(--u));align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
  .burger span,.burger span::before,.burger span::after{display:block;width:calc(26*var(--u));height:2px;background:var(--ink);position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:calc(-8*var(--u))}.burger span::after{top:calc(8*var(--u))}
  .mnav{position:fixed;inset:0;background:var(--bg);z-index:100;padding:calc(104*var(--u)) 0 0;text-align:center;overflow:auto}
  .mnav.open{display:block}
  .mnav a,.mnav .grp{display:block;font-size:calc(30*var(--u));line-height:1.3;letter-spacing:.05em;text-decoration:none;padding:calc(10*var(--u)) 0}
  .mnav .grp{font-size:calc(22*var(--u));opacity:.6;padding-bottom:0}
  .mnav .x{position:absolute;right:calc(14*var(--u));top:calc(24*var(--u));width:calc(50*var(--u));height:calc(50*var(--u));font-size:calc(34*var(--u));background:none;border:0;cursor:pointer}
  .ftr{height:calc(417*var(--u))}
  .ftr::before{height:calc(50*var(--u))}
  .ftr .name{top:calc(88*var(--u));font-size:calc(28*var(--u));letter-spacing:calc(5.6*var(--u));line-height:calc(26*var(--u));height:auto;margin:0}
  .ftr .links{top:calc(131*var(--u));flex-direction:column;align-items:center}
  .ftr .links a{width:calc(160*var(--u));font-size:calc(26*var(--u));line-height:calc(42*var(--u));height:calc(42*var(--u))}
  .ftr .ww{top:calc(322*var(--u));font-size:calc(15*var(--u))}
  .ftr .copy{top:calc(348*var(--u));font-size:calc(14*var(--u))}
  .stage{width:auto;zoom:1}
}
.home-top{background:var(--bg)}
.hl{position:absolute;left:0;width:1440px;margin:0;text-align:center;font-size:95px;line-height:133px;font-weight:350;white-space:nowrap}
.hl .it{font-size:1em}.hl .ap{margin-left:.07em}
.cta{position:absolute;left:608px;top:405px;width:224px;height:64px}
.intro-p p{font-size:31px;line-height:58px}
.cards{background:var(--bg)}
.recent .stage{}
/* ---------- wave dividers ---------- */
.wvg{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.wv{position:absolute;left:0;right:0;background-size:100% 100%;background-repeat:no-repeat}

/* ---------- portfolio index ---------- */
.pf{padding:22px 40px 59px}
.pf h1{font-size:103px;line-height:120px;text-align:center;font-weight:350}
.pf-intro{max-width:693px;margin:17px auto 0;font-size:20px;line-height:23px;text-align:center}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:86px}
.pf-grid .tile,.mp-grid .tile{position:relative;aspect-ratio:1;background:#222}
.mp{padding:40px 40px 80px}
.mp-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:131px;height:40px;font-size:16px;text-decoration:none}
.mp-back:hover{text-decoration:underline}
.mp-back span{font-size:26px;line-height:1;font-family:Arial,sans-serif}
.mp h1{font-size:110px;line-height:120px;text-align:center;margin-top:30px;font-weight:350}
.mp-intro{max-width:690px;margin:22px auto 0;font-size:32px;line-height:39.7px;text-align:center}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:88px}
.mp-grid .ov{font-size:30px;line-height:40px}
.play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(8,8,8,.55);pointer-events:none}
.play::after{content:"";position:absolute;left:23px;top:18px;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}

/* ---------- projects (template list) ---------- */
.pl{padding:59px 0 0}
.pl h1{font-size:56px;line-height:56px;text-align:center;font-weight:350}
.pl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,509px));justify-content:center;column-gap:165px;row-gap:88px;margin:79px auto 0;max-width:100%}
.pl-item{position:relative;height:403px}
.pl-img img{width:100%;height:403px;object-fit:cover}
.pl-card{position:absolute;left:244px;top:56px;width:350px;height:290px;background:var(--bg);padding:37px 44px}
.pl-card h2{font-size:26px;line-height:30px;font-weight:350}
.pl-card p{position:absolute;left:44px;top:124px;font-size:14px;line-height:19.5px;width:272px}
.pl-btn{position:absolute;left:44px;top:218px;width:116px;height:39px;border:1px solid var(--ink);font-size:14px;line-height:37px;text-align:center}

/* ---------- blog ---------- */
body.dark{background:var(--dark)}
.bhero{position:relative;height:355px;background:var(--dark);color:var(--bg);text-align:center}
.bhero h1{position:absolute;left:0;right:0;top:67px;font-size:111px;line-height:120px;font-weight:700;color:var(--green);letter-spacing:0}
.bhero p{position:absolute;left:0;right:0;top:215px;font-size:35px;line-height:40px}
.bwrap{background:var(--dark);width:980px;margin:0 auto;color:var(--bg)}
.postwrap{padding-top:84px}
.catnav{display:flex;gap:40px;padding:29px 20px 0;height:80px;font-size:16px}
.catnav a{text-decoration:none;color:var(--bg);line-height:22px}
.catnav a.on{color:var(--green)}
.catnav a:hover{text-decoration:underline}
.bgrid{display:grid;grid-template-columns:454px 454px;gap:32px;padding:20px 20px 22px}
.bcard{position:relative;height:255px;overflow:hidden;background:#222}
.bimg,.bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bshade{position:absolute;inset:0;background:rgba(48,46,50,.78)}
.bmeta{display:flex;justify-content:center;gap:9px;font-size:12px;line-height:14px;color:#fff;align-items:center}
.bmeta i{font-style:normal}
.bcard .bmeta{position:absolute;left:0;right:0;top:27px}
.bpill{display:inline-block;height:29px;line-height:29px;padding:0 14px;background:var(--green);color:var(--ink);font-size:14px;text-decoration:none}
.bcard .bpill{position:absolute;top:91px;left:50%;transform:translateX(-50%);white-space:nowrap}
.bcard h2{position:absolute;left:30px;right:30px;top:132px;font-size:26px;line-height:24px;text-align:center;font-weight:350}
.bcard h2 a{text-decoration:none;color:#fff}
.bcard h2 a::after{content:"";position:absolute;inset:-132px -30px -123px}
.bcard hr{position:absolute;left:30px;right:30px;top:194px;margin:0;border:0;border-top:1px solid #fff}
.clist{background:var(--bg);padding:20px;color:var(--ink)}
.crow{display:flex;height:341px;border:1px solid rgba(255,255,255,.75);margin-bottom:31px;background:var(--bg)}
.crow:last-child{margin-bottom:0}
.cimg{display:block;width:454px;height:341px;margin:-1px 0 0 -1px;position:relative;flex:none}
.cimg img{width:100%;height:100%;object-fit:cover}
.ctext{position:relative;flex:1;padding:100px 36px 0;text-align:center}
.ctext .bmeta{color:var(--ink);position:absolute;left:0;right:0;top:25px}
.ctext .bpill{position:absolute;left:50%;transform:translateX(-50%);top:59px;white-space:nowrap}
.ctext h2{font-size:28px;line-height:26px;font-weight:350}
.ctext h2 a{text-decoration:none}
.ctext p{margin-top:13px;font-size:16px;line-height:24px}
.ctext hr{position:absolute;left:36px;right:36px;top:281px;margin:0;border:0;border-top:1px solid rgba(48,46,50,.2)}

/* ---------- blog post ---------- */
.post{padding:0 100px 60px}
.pm{justify-content:flex-start;font-size:14px;line-height:13px;padding-top:66px;gap:10px}
.post h1{margin-top:23px;font-size:56px;line-height:70px;font-weight:350}
.pc{margin-top:23px;font-size:22px;line-height:32px}
.pc h2,.pc h3{font-size:22px;line-height:28px;margin:0 0 12px;font-weight:350}
.pc>h3:first-child{font-size:22px;line-height:32px;font-weight:350}
.pc p{font-size:18px;line-height:32.4px;margin:0 0 30px}
.pc a{color:var(--green)}
.pc strong{color:var(--bg)}
.pc figure{margin:0 0 35px}
.pc figure img{width:100%;height:auto}
.pc hr{border:0;border-top:1px solid rgba(246,246,246,.35);margin:0 0 24px}
.pc .pbtn{text-align:center;margin:0}
.btn2{display:inline-block;background:var(--green);color:var(--ink)!important;font-size:14px;line-height:45px;padding:0 18px;text-decoration:none}
.ptag{margin-top:60px;font-size:14px;line-height:21px}
.rposts{padding:0 0 30px}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 100px;padding:30px 0 0;border-top:1px solid rgba(246,246,246,.35)}
.rp-head h2{font-size:36px;line-height:44px;font-weight:350;color:var(--bg)}
.rp-all{font-size:16px;line-height:22px;color:var(--green);text-decoration:none}
.rp-all:hover{text-decoration:underline}
.rposts .bgrid{padding-top:24px}
.ptag a{text-decoration:none;color:var(--bg);border-bottom:1px solid transparent}

/* ---------- resume ---------- */
.rs-top{position:relative;height:341px;background:var(--bg);overflow:hidden}
.rs-top h1{position:absolute;left:89px;top:41px;font-size:93px;line-height:100px;font-weight:700;letter-spacing:0;z-index:2}
.rs-cards{padding:0 40px}
.rcard{background:rgba(255,255,255,.8);padding:80px 0 0 218px;margin-bottom:36px}
.rcard+.rcard{margin-bottom:41px}.rcard:first-child{margin-bottom:36px}
.rcard h2{font-size:38px;line-height:47px;font-weight:700}
.rrow{display:grid;grid-template-columns:233px 499px;column-gap:50px;margin-top:67px}
.rcard h2+.rrow{margin-top:46px}
.rd p{font-size:16px;line-height:19px}
.ro p{font-size:18px;line-height:28px;font-weight:700;margin-top:14px}
.ro p+p{font-size:16px;font-weight:350;line-height:19px;margin-top:11px}
.rl a{text-decoration:none}
.rr p{font-size:16px;line-height:22.5px;margin:0}
.rr:not(.job) p:first-child{font-size:20px;line-height:24px}
.rr:not(.job) p{font-size:18px;line-height:22px}
.rr:not(.job) p:nth-child(2){font-family:'Nunito Sans',sans-serif;font-style:italic;font-weight:300}
.rr.job p:first-child{font-size:18px;font-weight:700;line-height:22px}
.rr a{text-decoration:none}
.rlist{margin-top:35px}
.rlist ul{margin:0;padding:0 0 0 36px;list-style:disc;font-size:20px}
.rlist li{padding:0;height:44px}
.rlist li p{font-size:20px;line-height:24px;margin:0}
.rlist a{text-decoration:none}
.rlist a:hover,.rr a:hover,.rl a:hover{text-decoration:underline}
.rs-cta{position:relative;height:641px;background:var(--dark);margin-top:41px;overflow:hidden;text-align:center}
.rs-cta h2{position:absolute;left:0;right:0;top:246px;font-size:65px;line-height:59px;font-weight:700;color:#fffffe;letter-spacing:0;z-index:2}
.btn3{position:absolute;left:50%;margin-left:-142px;top:344px;width:285px;height:76px;line-height:76px;background:var(--green);color:var(--ink);font-family:'Nunito Sans',sans-serif;font-size:26px;text-decoration:none;z-index:2}

/* ---------- contact ---------- */
.ct{background:var(--dark);color:#fff}
.ct .stage{color:#fff}
.cform{position:absolute;padding-top:26px}
.cform .two{display:flex;gap:28px;margin-bottom:45px}
.cform .two .fld{flex:1;margin:0}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:44px;line-height:44px;height:44px;color:var(--green);margin-bottom:9px}
.fld input,.fld textarea{display:block;width:100%;background:transparent;border:0;border-bottom:3px solid var(--green);color:#fff;font:inherit;font-size:20px;outline:0;border-radius:0;padding:0 4px}
.fld input{height:43px}
.fld textarea{height:121px;resize:none;padding:8px 4px;font-size:18px}
.fld textarea::placeholder{color:#fff;opacity:1}
.say{display:block;width:100%;height:58px;margin-top:21px;background:var(--green);border:0;color:var(--navy);font:inherit;font-size:30px;cursor:pointer}
.say:hover{filter:brightness(.96)}
.cnote{margin-top:14px;font-size:14px;color:#ccc}
.cnote a{color:var(--green)}
.big{margin:0;font-weight:350}
.big span{position:absolute;left:796px;font-size:166px;white-space:nowrap}
.big span:nth-child(1){top:122px;line-height:153px}
.big span:nth-child(2){top:262px;line-height:206px;font-size:166px}
.big span:nth-child(3){top:473px;line-height:153px}
.getin{position:absolute;left:796px;top:647px;margin:0;font-size:33px;line-height:30px}
.socs{position:absolute;left:796px;top:696px;display:flex;gap:10px}
.socs img{width:49px;height:49px}

/* ---------- about ---------- */
.stage.wide{width:1462px;zoom:var(--z15)}
.ab-top{background:var(--bg)}
.abs-t{position:absolute;margin:0;font-size:95px;line-height:133px;text-align:center;font-weight:350}
.abs-s{position:absolute;margin:0;font-size:44px;line-height:61.6px;text-align:center;font-weight:350}
.stage .ph{overflow:hidden}
.stage .ph img,.stage .ph iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.vlab{writing-mode:vertical-rl;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;color:var(--green);line-height:20px;white-space:nowrap;letter-spacing:0}
.ab-p p{font-size:41px;line-height:54px}
.ab-q h3{font-size:44px;line-height:55px;text-align:center;color:var(--green);font-weight:350}
.ab-music{background:var(--dark)}
.ab-music .stage{color:var(--green)}
.ab-h2{position:absolute;top:119px;left:0;right:0;text-align:center;font-size:56px;line-height:51px;color:var(--green);margin:0;font-weight:350}
.sps{position:absolute;left:230px;top:212px;width:980px}
.sps iframe{display:block;width:100%;border:0;border-radius:12px;margin-bottom:19px}
.ab-cap{position:absolute;left:0;right:0;top:1371px;text-align:center;font-size:26px;line-height:24px;margin:0;color:var(--green)}

/* ---------- music ---------- */
.musicpg{background:#302e32;color:#fff}
.music{background:#302e32}
.mhero{position:relative;height:881px;background:#302e32 url(/assets/img/8b378c_1effb458137e41e59f146454db90d61d-mv2.jpg) center/cover no-repeat}
.rh,.rh2{display:block;background:var(--green);color:var(--navy);text-align:center;text-decoration:none}
.rh{position:absolute;top:37px;left:50%;margin-left:-78px;width:157px;height:40px;line-height:40px;font-size:20px}
.rh2{width:205px;height:53px;line-height:53px;font-size:30px;margin:0 auto}
.mlogo{position:absolute;left:50%;margin-left:-323px;top:239px;width:646px;height:252px;object-fit:cover}
.explore{position:absolute;top:670px;left:0;right:0;text-align:center;font-size:44px;line-height:62px;color:#fff}
.explore i{display:block;width:30px;height:30px;border-right:9px solid #fff;border-bottom:9px solid #fff;transform:rotate(45deg);margin:-8px auto 0}
.mbrick{background:#302e32 url(/assets/img/8b378c_e008b3e5b45645c38e892d3b4d93c336-mv2.jpg) center/cover no-repeat}
.pol{position:absolute;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pol img{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 42px);object-fit:cover}
.mcard{position:absolute;background:var(--bg)}
.mh{position:absolute;margin:0;text-align:center;font-size:56px;line-height:51px;color:var(--ink);font-weight:350}
.mtx{position:absolute;font-size:18px;line-height:32.4px;color:var(--ink)}
.mtx p{margin:0}
.mtx .cc{text-align:center}
.mev{position:relative;height:877px;background:#302e32 url(/assets/img/8b378c_897872de01e242c7935d6481c8e4921d-mv2.jpg) center/cover no-repeat}
.evpanel{position:absolute;left:50%;margin-left:-490px;top:76px;width:980px;height:725px;background:rgba(36,35,35,.63);color:#fff}
.evpanel h2{position:absolute;left:0;right:0;top:48px;margin:0;text-align:center;font-size:56px;line-height:51px;font-weight:350}
.evpanel h2.fmj{top:519px}
.evl2{position:absolute;left:30px;top:144px;width:920px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--green)}
.ev{position:relative;height:162px;border-top:1px solid var(--green)}
.ev+.ev{height:161px}
.evi{position:absolute;left:0;top:41px;width:80px;height:80px;overflow:hidden;background:#302e32}
.evi img{width:100%;height:100%;object-fit:cover}
.evt{position:absolute;left:105px;top:47px;font-family:'Nunito Sans',sans-serif}
.evd{display:block;font-size:16px;line-height:24px;font-weight:700}
.evn{white-space:nowrap;line-height:42px}
.evn b{font-size:30px;font-weight:700}
.evs{font-size:30px;margin:0 8px 0 7px}
.evl{font-size:20px;font-weight:400}
.evb{position:absolute;right:3px;top:59px;width:100px;height:42px;line-height:42px;text-align:center;background:var(--green);color:var(--ink);font-family:'Nunito Sans',sans-serif;font-size:18px;text-decoration:none}
.msoc{position:absolute;left:0;right:0;top:578px;display:flex;justify-content:center;gap:41px}
.msoc img{width:77px;height:77px}
.mstrip{margin-top:10px;background:#302e32}
.mimg img{width:100%;height:100%;object-fit:cover}
.pov{position:absolute;left:0;right:0;top:30px;margin:0;text-align:center;font-size:124px;line-height:223px;font-weight:700;letter-spacing:0;white-space:nowrap;color:#fff}
.book{position:absolute;left:570px;top:224px;width:313px;height:71px;line-height:71px;border-radius:20px;background:var(--bg);color:var(--navy);text-align:center;font-size:30px;text-decoration:none}
.cr{position:absolute;left:0;right:0;top:738px;margin:0;text-align:center;font-size:15px;line-height:21px}
.cr a{color:#fff;text-decoration:none}
.mend{height:102px;padding-top:23px}
.modal{position:fixed;inset:0;z-index:200;background:#302e32;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.mbox{position:relative;display:flex;width:812px;height:558px;max-width:100%}
.mleft{width:397px;background:var(--green);padding:49px 56px 0;color:#000;text-align:center}
.mleft h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:40px;line-height:44px;letter-spacing:-2px;text-align:left;margin-bottom:25px}
.mleft p{font-size:22px;line-height:39.6px}
.mlisten{display:block;width:180px;height:51px;line-height:51px;margin:38px auto 0;background:var(--bg);color:var(--ink);font-size:30px;text-decoration:none}
.mright{flex:1}
.mright img{width:100%;height:100%;object-fit:cover}
.mx{position:absolute;right:-40px;top:-40px;width:34px;height:34px;font-size:34px;line-height:1;color:#fff;background:none;border:0;cursor:pointer}

/* ---------- 404 ---------- */
.nf{min-height:520px;text-align:center;padding:120px 20px}
.nf h1{font-size:140px;line-height:1.1;font-weight:350}
.nf p{font-size:32px;margin:10px 0 40px}
.nf .btn{width:224px;height:64px}

.psec{position:relative;background:var(--dark)}
/* ---------- project pages ---------- */
.phero{position:relative;height:900px;overflow:hidden}
.pmedia{position:absolute;inset:0}
.pmedia .hv{width:100%;height:100%;object-fit:cover}
.pfade{position:absolute;left:0;right:0;bottom:0;height:560px;background:linear-gradient(to bottom,rgba(246,246,246,0),var(--bg) 78%)}
.phero h1{position:absolute;left:80px;right:80px;bottom:198px;font-size:96px;line-height:88px;font-weight:350;letter-spacing:.008em}
.pbody{padding:105px 80px 0;max-width:1440px;margin:0 auto}
.mrow{display:flex;margin-bottom:0}
.mrow+.mrow{margin-top:53px}
.mc{padding-right:20px}
.ml{display:block;font-size:20px;line-height:18px;margin-bottom:13px}
.mc p{font-size:16px;line-height:22px}
.mc a{text-decoration:underline}
.pdesc{margin-top:53px;max-width:600px;font-size:19px;line-height:23px}
.pdesc p{margin-bottom:23px}
.gallery{margin-top:106px}
.grow{display:flex;gap:17px;margin-bottom:17px}
.gi{position:relative;overflow:hidden;min-width:0}
.gi img,.gi video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pnav{display:flex;justify-content:space-between;margin-top:23px;font-size:20px}
.pn{display:inline-flex;align-items:center;gap:14px;height:44px;text-decoration:none;font-size:20px}
.pn:hover{text-decoration:underline}
.pn .ar{font-size:34px;line-height:1;font-family:Arial,sans-serif}
.back{text-align:center;margin-top:62px;padding-bottom:38px}
.back a{display:inline-block;width:301px;max-width:100%;font-size:44px;line-height:41px;text-decoration:none;padding:15px 7px 16px;border-bottom:1px solid var(--ink)}
.back a:hover{text-decoration:underline}
@media (max-width:900px){
 .phero{height:calc(400*var(--u))}
 .pfade{height:calc(240*var(--u))}
 .phero h1{left:calc(20*var(--u));right:calc(20*var(--u));bottom:calc(14*var(--u));font-size:calc(36*var(--u));line-height:calc(40*var(--u))}
 .pbody{padding:calc(40*var(--u)) calc(20*var(--u)) 0}
 .mrow{display:block}
 .mrow+.mrow{margin-top:calc(20*var(--u))}
 .mc{width:100%!important;padding:0 0 calc(18*var(--u)) 0}
 .ml{font-size:calc(18*var(--u));margin-bottom:calc(6*var(--u))}
 .mc p{font-size:calc(15*var(--u));line-height:1.35}
 .pdesc{min-height:0!important;margin-top:calc(14*var(--u));font-size:calc(16*var(--u));line-height:1.4}
 .pdesc p{margin-bottom:calc(14*var(--u))}
 .gallery{margin-top:calc(30*var(--u))}
 .grow{gap:calc(5*var(--u));margin-bottom:calc(5*var(--u))}
 .pnav{margin-top:calc(20*var(--u))}
 .pn{font-size:calc(16*var(--u))}
 .back a{font-size:calc(28*var(--u));line-height:1.2;width:calc(200*var(--u))}
 .back{margin-top:calc(30*var(--u));padding-bottom:calc(50*var(--u))}
}
/* ===================== mobile (<= 900px): 320-unit layout, scaled with --u ===================== */
.afig,.ab-w,.aq,.pgroup,.mcw{display:contents}
.mb{display:none}
.bex{display:none}
@media (max-width:900px){
  .dk{display:none}.mb{display:inline}
  .sec{overflow:hidden}
  .stage,.stage.wide{width:auto!important;zoom:1!important;max-width:100%;height:auto!important}
  /* ---- home ---- */
  .home-top .stage{display:flex;flex-direction:column;align-items:center;padding-top:calc(151*var(--u))}
  .home-top .stage>*:not(.pgroup){position:static!important;left:auto!important;top:auto!important;transform:none!important}
  .hl{width:100%!important;font-size:calc(39*var(--u));line-height:calc(41*var(--u));white-space:normal}
  .hl+.hl{}
  .cta{width:calc(160*var(--u))!important;height:calc(42*var(--u))!important;font-size:calc(25.2*var(--u));line-height:calc(42*var(--u));margin-top:calc(35*var(--u))}
  .home-top h2.ih{width:100%!important;text-align:center;font-size:calc(36*var(--u))!important;line-height:calc(33*var(--u))!important;margin-top:calc(51*var(--u))!important}
  .intro-p{width:100%!important;padding:0 calc(32*var(--u));margin-top:calc(33*var(--u))!important;text-align:center}
  .intro-p p{font-size:calc(20*var(--u));line-height:calc(18*var(--u));margin-bottom:calc(18*var(--u))}
  .pgroup{display:block;position:relative;width:calc(320*var(--u));height:calc(249*var(--u));margin:calc(72*var(--u)) 0 calc(186*var(--u))}
  .pgroup .portrait{position:absolute!important;left:calc(39*var(--u))!important;top:0!important;width:calc(227*var(--u))!important;height:calc(249*var(--u))!important;border-radius:calc(20*var(--u));transform:rotate(3.09deg)!important}
  .pgroup .t1{position:absolute!important;left:calc(8*var(--u))!important;top:calc(-42*var(--u))!important;width:calc(105*var(--u))!important;height:calc(105*var(--u))!important;transform:rotate(-13.33deg)!important}
  .pgroup .t2{position:absolute!important;left:calc(157*var(--u))!important;top:calc(157*var(--u))!important;width:calc(157*var(--u))!important;height:calc(157*var(--u))!important;transform:rotate(-19.2deg)!important}
  .cards .stage{display:block}
  .card{position:relative!important;left:auto!important;top:auto!important;width:auto!important;display:block}
  .c1{height:calc(373*var(--u))}.c2{height:calc(355*var(--u))}.c3{height:calc(318*var(--u))}.c4{height:calc(318*var(--u))}
  .card .ic{left:50%!important;margin-left:calc(-26*var(--u));width:calc(52*var(--u))!important;height:calc(60*var(--u))!important;top:calc(38*var(--u))!important}
  .card h3{font-size:calc(30*var(--u));letter-spacing:calc(1.5*var(--u));line-height:calc(30*var(--u))}
  .c1 h3{top:calc(130*var(--u))}.c2 h3{top:calc(125*var(--u))}.c3 h3,.c4 h3{top:calc(112*var(--u))}
  .card .tx{left:0!important;right:0!important}
  .c1 .tx.s31{top:calc(172*var(--u));font-size:calc(27*var(--u));line-height:calc(31.5*var(--u))}
  .c2 .tx.s38{top:calc(171*var(--u));font-size:calc(30*var(--u));line-height:calc(37.5*var(--u))}
  .c3 .tx.s31{top:calc(155*var(--u));font-size:calc(21*var(--u));line-height:calc(29.5*var(--u))}
  .c4 .tx.s31{top:calc(156*var(--u));font-size:calc(21*var(--u));line-height:calc(29.5*var(--u));white-space:normal;padding:0 calc(28*var(--u))}
  .cards .stage{height:auto!important}
  .recent .stage{display:block;padding-bottom:calc(28*var(--u))}
  .recent h2{position:static;width:auto;font-size:calc(27*var(--u));line-height:calc(30*var(--u));padding-top:calc(24*var(--u))}
  .recent .sub{position:static;width:auto;font-size:calc(19*var(--u));line-height:calc(24*var(--u));margin-top:calc(8*var(--u))}
  .tiles{position:static!important;width:100%!important;height:auto!important;display:grid;grid-template-columns:1fr 1fr;margin-top:calc(26*var(--u))}
  .tiles .tile{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;aspect-ratio:380/251}
  .tiles .tile:nth-child(1),.tiles .tile:nth-child(4),.tiles .tile:nth-child(5),.tiles .tile:nth-child(6){grid-column:span 2}
  .tiles .tile:nth-child(2),.tiles .tile:nth-child(3){aspect-ratio:1}
  .tiles .tile:nth-child(6){aspect-ratio:380/260}

  /* ---- portfolio index / collection ---- */
  .pf{padding:calc(24*var(--u)) calc(20*var(--u)) calc(62*var(--u))}
  .pf h1{font-size:calc(32*var(--u));line-height:calc(40*var(--u))}
  .pf-intro{max-width:none;margin:calc(14*var(--u)) auto 0;font-size:calc(16*var(--u));line-height:calc(19*var(--u))}
  .pf-grid{grid-template-columns:1fr;gap:calc(20*var(--u));margin-top:calc(38*var(--u))}
  .mp{padding:calc(25*var(--u)) calc(20*var(--u)) calc(50*var(--u))}
  .mp-back{width:calc(131*var(--u));height:calc(40*var(--u));font-size:calc(16*var(--u))}
  .mp h1{font-size:calc(50*var(--u));line-height:calc(56*var(--u));margin-top:calc(22*var(--u))}
  .mp-intro{font-size:calc(17*var(--u));line-height:calc(22*var(--u));margin-top:calc(16*var(--u))}
  .mp-grid{margin-top:calc(36*var(--u))}
  .ov{font-size:calc(16*var(--u))!important;line-height:1.3!important}
  .play{width:calc(40*var(--u));height:calc(40*var(--u));margin:calc(-20*var(--u)) 0 0 calc(-20*var(--u))}
  .play::after{left:calc(15*var(--u));top:calc(12*var(--u));border-left-width:calc(13*var(--u));border-top-width:calc(8*var(--u));border-bottom-width:calc(8*var(--u))}
  /* projects list (template) */
  .pl{padding-top:calc(30*var(--u))}
  .pl h1{font-size:calc(36*var(--u));line-height:calc(40*var(--u))}
  .pl-grid{grid-template-columns:1fr;width:auto;row-gap:calc(30*var(--u));margin-top:calc(30*var(--u));padding:0 calc(20*var(--u))}
  .pl-item{height:auto}
  .pl-img img{width:100%;height:auto;aspect-ratio:509/403}
  .pl-card{position:relative;left:auto;top:auto;width:auto;height:auto;margin:calc(-40*var(--u)) calc(14*var(--u)) 0 calc(40*var(--u));padding:calc(20*var(--u)) calc(20*var(--u)) calc(70*var(--u))}
  .pl-card h2{font-size:calc(22*var(--u))}
  .pl-card p{position:static;width:auto;margin-top:calc(14*var(--u));font-size:calc(14*var(--u))}
  .pl-btn{left:calc(20*var(--u));top:auto;bottom:calc(20*var(--u))}

  /* ---- blog ---- */
  .bhero{height:calc(186*var(--u))}
  .bhero h1{top:calc(30*var(--u));font-size:calc(38*var(--u));line-height:calc(44*var(--u))}
  .bhero p{top:calc(80*var(--u));font-size:calc(22*var(--u));line-height:calc(26*var(--u));padding:0 calc(20*var(--u))}
  .bwrap{width:auto}
  .catnav{flex-wrap:wrap;gap:calc(8*var(--u)) calc(22*var(--u));padding:calc(12*var(--u)) calc(20*var(--u)) calc(14*var(--u));height:auto;font-size:calc(15*var(--u))}
  .bgrid{display:block;padding:0 0 calc(20*var(--u))}
  .bcard{height:auto;background:var(--bg);color:var(--ink);margin-bottom:0;overflow:visible;padding-bottom:calc(20*var(--u))}
  .bimg{position:relative;display:block;height:calc(172*var(--u))}
  .bimg img{position:static;height:100%}
  .bshade{display:none}
  .bcard .bmeta{position:static;justify-content:flex-start;padding:calc(20*var(--u)) calc(18*var(--u)) 0;color:var(--ink);font-size:calc(12*var(--u))}
  .bcard .bpill{position:static;transform:none;display:inline-block;margin:calc(14*var(--u)) calc(18*var(--u)) 0;font-size:calc(14*var(--u))}
  .bcard h2{position:static;text-align:left;margin:calc(14*var(--u)) calc(18*var(--u)) 0;font-size:calc(22*var(--u));line-height:calc(26*var(--u))}
  .bcard h2 a{color:var(--ink)}
  .bcard h2 a::after{inset:calc(-340*var(--u)) 0 calc(-120*var(--u)) 0}
  .bex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:calc(12*var(--u)) calc(18*var(--u)) 0;font-size:calc(14*var(--u));line-height:calc(21*var(--u))}
  .bcard hr{position:static;margin:calc(18*var(--u)) calc(18*var(--u)) 0;border-top-color:rgba(48,46,50,.2)}
  .bcard{margin-bottom:calc(1*var(--u))}
  .clist{padding:0;background:transparent}
  .crow{display:block;height:auto;border:0;margin-bottom:calc(1*var(--u));padding-bottom:calc(20*var(--u))}
  .cimg{width:100%;height:calc(172*var(--u));margin:0}
  .ctext{padding:0 calc(18*var(--u));text-align:left}
  .ctext .bmeta{position:static;justify-content:flex-start;padding-top:calc(20*var(--u));color:var(--ink)}
  .ctext .bpill{position:static;transform:none;margin-top:calc(14*var(--u))}
  .ctext h2{margin-top:calc(14*var(--u));font-size:calc(22*var(--u));line-height:calc(26*var(--u))}
  .ctext p{font-size:calc(14*var(--u));line-height:calc(21*var(--u));margin-top:calc(12*var(--u))}
  .ctext hr{position:static;margin-top:calc(18*var(--u))}
  .postwrap{padding-top:calc(60*var(--u))}
  .post{padding:0 calc(18*var(--u)) calc(30*var(--u))}
  .pm{padding-top:calc(24*var(--u));font-size:calc(12*var(--u))}
  .post h1{font-size:calc(25*var(--u));line-height:calc(32*var(--u));margin-top:calc(14*var(--u))}
  .pc{margin-top:calc(16*var(--u))}
  .pc h2,.pc h3{font-size:calc(20*var(--u));line-height:calc(28*var(--u))}.pc>h3:first-child{font-size:calc(20*var(--u));line-height:calc(29*var(--u))}
  .pc p{font-size:calc(18*var(--u));line-height:calc(26*var(--u));margin-bottom:calc(20*var(--u))}
  .pc figure{margin-bottom:calc(22*var(--u))}
  .btn2{font-size:calc(12*var(--u));line-height:calc(38*var(--u));padding:0 calc(14*var(--u))}
  .ptag{font-size:calc(13*var(--u))}
  .rposts{padding:0 0 calc(20*var(--u))}
  .rp-head{margin:0 calc(18*var(--u));padding-top:calc(24*var(--u))}
  .rp-head h2{font-size:calc(26*var(--u));line-height:calc(32*var(--u))}
  .rp-all{font-size:calc(14*var(--u))}
  .rposts .bgrid{padding-top:calc(16*var(--u))}

  /* ---- resume ---- */
  .rs-top{height:calc(262*var(--u))}
  .rs-top h1{left:calc(20*var(--u));top:calc(20*var(--u));font-size:calc(40*var(--u));line-height:calc(48*var(--u))}
  .wvg{transform:scaleY(.6)}
  .wvg-t{transform-origin:top}.wvg-b{transform-origin:bottom}
  .rs-top .wvg-b{bottom:calc(60*var(--u))!important}
  .rs-top .wvg-t{top:calc(190*var(--u))!important}
  .rs-cards{padding:0 calc(8*var(--u))}
  .rcard{height:auto!important;padding:calc(36*var(--u)) calc(14*var(--u)) calc(30*var(--u))!important;margin-bottom:calc(14*var(--u))!important}
  .rcard h2{font-size:calc(26*var(--u));line-height:calc(32*var(--u))}
  .rrow{grid-template-columns:1fr;row-gap:calc(14*var(--u));min-height:0!important;margin-top:calc(26*var(--u))!important}
  .rd p{font-size:calc(16*var(--u));line-height:calc(20*var(--u))}
  .ro p{font-size:calc(18*var(--u));line-height:calc(24*var(--u));margin-top:calc(4*var(--u))}
  .ro p+p{font-size:calc(16*var(--u))}
  .rr p{font-size:calc(16*var(--u));line-height:calc(22*var(--u))}
  .rr:not(.job) p:first-child{font-size:calc(20*var(--u));line-height:calc(26*var(--u))}
  .rr:not(.job) p{font-size:calc(18*var(--u));line-height:calc(24*var(--u))}
  .rr.job p:first-child{font-size:calc(18*var(--u))}
  .rlist{margin-top:calc(18*var(--u))}
  .rlist ul{padding-left:calc(18*var(--u))}
  .rlist li{height:auto;margin-bottom:calc(14*var(--u))}
  .rlist li p{font-size:calc(20*var(--u));line-height:calc(28*var(--u))}
  .rs-cta{height:calc(380*var(--u));margin-top:calc(14*var(--u))}
  .rs-cta h2{top:calc(130*var(--u));font-size:calc(30*var(--u));line-height:calc(36*var(--u));padding:0 calc(20*var(--u))}
  .btn3{top:calc(230*var(--u));width:calc(220*var(--u));height:calc(56*var(--u));line-height:calc(56*var(--u));margin-left:calc(-110*var(--u));font-size:calc(20*var(--u))}

  /* ---- contact ---- */
  .ct .stage{display:flex;flex-direction:column;align-items:center;padding:calc(60*var(--u)) calc(15*var(--u)) calc(40*var(--u))}
  .ct .stage>*{position:static!important;left:auto!important;top:auto!important;width:auto!important}
  .mo1{order:1;text-align:center}
  .big span{position:static;display:block;left:auto;text-align:center}
  .big span:nth-child(1),.big span:nth-child(3){font-size:calc(63*var(--u));line-height:calc(66*var(--u))}
  .big span:nth-child(2){font-size:calc(63*var(--u));line-height:calc(78*var(--u))}
  .mo2{order:2;width:100%!important;padding-top:calc(34*var(--u))!important;max-width:calc(290*var(--u))}
  .cform .two{display:block;margin-bottom:0}
  .fld span{font-size:calc(32*var(--u));height:calc(32*var(--u));line-height:calc(32*var(--u));margin-bottom:calc(8*var(--u))}
  .fld{margin-bottom:calc(14*var(--u))!important}
  .fld input{height:calc(43*var(--u));font-size:calc(18*var(--u))}
  .fld textarea{height:calc(85*var(--u));font-size:calc(16*var(--u))}
  .say{height:calc(42*var(--u));font-size:calc(25*var(--u));margin-top:calc(12*var(--u))}
  .cnote{font-size:calc(12*var(--u))}
  .mo3{order:3;margin-top:calc(34*var(--u))!important;font-size:calc(21*var(--u))!important;line-height:calc(26*var(--u))!important;text-align:center}
  .mo4{order:4;margin-top:calc(14*var(--u))!important}
  .socs img{width:calc(49*var(--u));height:calc(49*var(--u))}

  /* ---- about ---- */
  .ab-top .stage{display:flex;flex-direction:column;align-items:flex-start;padding:calc(20*var(--u)) calc(20*var(--u)) calc(50*var(--u))}
  .ab-top .stage .abs-t,.ab-top .stage .abs-s{position:static!important;left:auto!important;top:auto!important;width:100%!important}
  .abs-t{font-size:calc(35*var(--u));line-height:calc(49*var(--u))}
  .abs-s{font-size:calc(25*var(--u));line-height:calc(35*var(--u));margin-top:calc(10*var(--u))!important;margin-bottom:calc(36*var(--u))}
  .afig{display:flex;align-items:flex-start;gap:calc(6*var(--u));margin-bottom:calc(28*var(--u))}
  .ab-top .stage [style*="position:absolute"]{position:static!important;left:auto!important;top:auto!important;height:auto!important}
  .afig:nth-of-type(1){}
  .ph{flex:none}
  .afig .ph{width:calc(200*var(--u))!important}
  .ab-top .stage .afig:nth-child(3) .ph{width:calc(161*var(--u))!important;margin-left:calc(60*var(--u))}
  .ab-top .stage .afig:nth-child(4) .ph{width:calc(161*var(--u))!important;margin-left:calc(80*var(--u))}
  .ab-top .stage .afig:nth-child(7) .ph{width:calc(190*var(--u))!important}
  .ab-top .stage .afig:nth-child(8) .ph{width:calc(147*var(--u))!important;margin-left:calc(100*var(--u))}
  .ab-top .stage .afig:nth-child(9) .ph{width:calc(240*var(--u))!important;aspect-ratio:380/680}
  .ab-top .stage .afig:nth-child(10) .ph{width:calc(125*var(--u))!important;margin-left:calc(90*var(--u))}
  .afig .ph img{height:auto;aspect-ratio:auto}
  .afig .ph iframe{height:100%}
  .ab-top .stage .ab-p{width:100%!important}
  .ab-top .stage .ab-q{width:100%!important}
  .ab-top .stage .afig:nth-child(3) .ph img{aspect-ratio:161/214}
  .ab-top .stage .afig:nth-child(4) .ph img{aspect-ratio:161/156}
  .ab-top .stage .afig:nth-child(7) .ph img{aspect-ratio:200/267}
  .ab-top .stage .afig:nth-child(8) .ph img{aspect-ratio:147/195}
  .ab-top .stage .afig:nth-child(10) .ph img{aspect-ratio:125/168}
  .vlab{font-size:calc(14*var(--u));width:auto!important}
  .ab-w{display:block;width:100%}
  .ab-p p{font-size:calc(23*var(--u));line-height:calc(28*var(--u));margin-bottom:calc(36*var(--u))}
  .aq{display:block;width:100%;background:#282626;border-radius:calc(10*var(--u));padding:calc(28*var(--u)) calc(14*var(--u));margin-top:calc(10*var(--u))}
  .aq>div{background:none!important;padding:0!important;border-radius:0!important}
  .ab-q h3{font-size:calc(25*var(--u));line-height:calc(30*var(--u))}
  .ab-music .stage{height:auto!important;padding:calc(120*var(--u)) calc(20*var(--u)) calc(110*var(--u));position:relative}
  .ab-h2{position:static;font-size:calc(30*var(--u));line-height:calc(42*var(--u));padding:0 calc(20*var(--u))}
  .sps{position:static;width:100%;margin-top:calc(22*var(--u))}
  .sps iframe{height:calc(152*var(--u))!important;margin-bottom:calc(14*var(--u))}
  .ab-cap{position:static;font-size:calc(24*var(--u));line-height:calc(30*var(--u));margin-top:calc(20*var(--u))}

  /* ---- music ---- */
  .mhero{height:calc(793*var(--u))}
  .rh{top:calc(20*var(--u));width:calc(160*var(--u));height:calc(42*var(--u));line-height:calc(42*var(--u));margin-left:calc(-80*var(--u));font-size:calc(18.7*var(--u))}
  .mlogo{width:calc(235*var(--u));height:calc(92*var(--u));margin-left:calc(-117*var(--u));top:calc(308*var(--u))}
  .explore{top:calc(417*var(--u));font-size:calc(32*var(--u));line-height:calc(37*var(--u))}
  .explore span{display:block;width:calc(100*var(--u));margin:0 auto}
  .explore i{width:calc(26*var(--u));height:calc(26*var(--u));border-width:calc(7*var(--u))}
  .mbrick .stage{display:flex;flex-direction:column;align-items:center;padding:calc(12*var(--u)) 0 calc(60*var(--u));background:transparent}
  .mbrick .stage>*{position:static!important;left:auto!important;top:auto!important;transform:none!important}
  .pol{position:relative!important;background:#fff;width:calc(250*var(--u))!important;height:auto!important;margin:calc(28*var(--u)) 0;padding:calc(6*var(--u)) calc(6*var(--u)) calc(30*var(--u))}
  .pol.pa{display:none}
  .pol img{position:static;width:100%;height:auto;aspect-ratio:1/1.1}
  .mcw{display:block;width:calc(300*var(--u));background:var(--bg);padding:calc(24*var(--u)) calc(22*var(--u)) calc(28*var(--u));margin:calc(24*var(--u)) 0}
  .mcw .mcard{display:none}
  .mcw .mh,.mcw .mtx{position:static!important;width:auto!important}
  .mh{font-size:calc(28*var(--u));line-height:calc(34*var(--u))}
  .mtx{font-size:calc(17*var(--u));line-height:calc(30*var(--u));margin-top:calc(14*var(--u))}
  .mtx p+p{margin-top:calc(22*var(--u))!important}
  .mev{height:auto;padding:calc(40*var(--u)) calc(12*var(--u))}
  .evpanel{position:static;margin:0 auto;width:100%;height:auto;padding:calc(24*var(--u)) calc(14*var(--u)) calc(34*var(--u))}
  .evpanel h2,.evpanel h2.fmj{position:static;font-size:calc(30*var(--u));line-height:calc(38*var(--u))}
  .evpanel h2.fmj{margin-top:calc(34*var(--u))}
  .evl2{position:static;width:100%;margin-top:calc(20*var(--u))}
  .ev,.ev+.ev{height:auto;min-height:calc(130*var(--u));padding:calc(18*var(--u)) 0 calc(18*var(--u)) calc(76*var(--u))}
  .evi{left:0;top:calc(18*var(--u));width:calc(62*var(--u));height:calc(62*var(--u))}
  .evt{position:static}
  .evd{font-size:calc(13*var(--u));line-height:calc(18*var(--u))}
  .evn{white-space:normal;line-height:calc(24*var(--u))}
  .evn b{font-size:calc(18*var(--u))}.evs{font-size:calc(18*var(--u))}.evl{font-size:calc(14*var(--u))}
  .evb{position:static;display:inline-block;margin-top:calc(10*var(--u));width:calc(80*var(--u));height:calc(34*var(--u));line-height:calc(34*var(--u));font-size:calc(15*var(--u))}
  .msoc{position:static;margin-top:calc(20*var(--u));gap:calc(24*var(--u))}
  .msoc img{width:calc(56*var(--u));height:calc(56*var(--u))}
  .mstrip{margin-top:0}
  .mstrip .stage{display:flex;flex-direction:column;align-items:center;padding-bottom:calc(30*var(--u));position:relative}
  .mstrip .stage>*{position:static!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important}
  .mimg{height:calc(220*var(--u))!important}
  .mimg img{height:calc(220*var(--u))}
  .pov{position:absolute!important;top:calc(86*var(--u))!important;left:0!important;font-size:calc(48*var(--u));line-height:calc(54*var(--u));white-space:normal;padding:0 calc(36*var(--u))}
  .mstrip .stage .book{position:absolute!important;top:calc(290*var(--u))!important;left:50%!important;margin:0 0 0 calc(-100*var(--u))!important;width:calc(200*var(--u))!important;height:calc(60*var(--u))!important;line-height:calc(60*var(--u));font-size:calc(25*var(--u));z-index:2}
  .mstrip .stage .cr{font-size:calc(15*var(--u));margin-top:calc(20*var(--u))!important}
  .mend{height:calc(100*var(--u));padding-top:calc(20*var(--u))}
  .rh2{width:calc(160*var(--u));height:calc(42*var(--u));line-height:calc(42*var(--u));font-size:calc(25*var(--u))}
  .mbox{flex-direction:column;width:calc(300*var(--u));height:auto;max-height:100%}
  .mleft{width:100%;padding:calc(30*var(--u)) calc(24*var(--u))}
  .mleft h2{font-size:calc(30*var(--u));line-height:calc(34*var(--u))}
  .mleft p{font-size:calc(17*var(--u));line-height:calc(28*var(--u))}
  .mlisten{width:calc(160*var(--u));height:calc(44*var(--u));line-height:calc(44*var(--u));font-size:calc(22*var(--u));margin-top:calc(20*var(--u))}
  .mright{display:none}
  .mx{right:calc(8*var(--u));top:calc(8*var(--u));color:#000}
  .nf h1{font-size:calc(90*var(--u))}.nf p{font-size:calc(22*var(--u))}
}