/*
Theme Name: Natsuki Matsuura Portfolio
Theme URI: https://natsukimatsuura.com
Author: Natsuki Matsuura
Author URI: https://natsukimatsuura.com
Description: Minimal portfolio theme for Natsuki Matsuura - Creative Director / Experience Designer
Version: 1.5.0
Requires at least: 5.0
Tested up to: 6.7
License: All Rights Reserved
Text Domain: natsuki
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f8f8f8;--text:#1a1a1a;--gray:#888;--lg:#e0e0e0;--fn:'Inter',sans-serif;--jp:'Noto Sans JP',sans-serif;--eo:cubic-bezier(.16,1,.3,1);--ease:cubic-bezier(.25,.46,.45,.94);--cw:720px;--px:40px}
html{scroll-behavior:smooth;color-scheme:light;background:#f8f8f8 !important}
body{font-family:var(--fn);background:#f8f8f8 !important;color:#1a1a1a !important;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* SPLASH (front page only) */
.splash{position:fixed;inset:0;z-index:9999;background:#f0ebe4;display:flex;align-items:center;justify-content:center;transition:opacity .8s var(--ease),visibility .8s}
.splash.hide{opacity:0;visibility:hidden}
.splash-name{font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(12px);animation:fi .8s var(--eo) .2s forwards}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 var(--px);height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,248,248,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.05);opacity:1;transform:translateY(0);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease)}
header.hidden{opacity:0;transform:translateY(-100%);pointer-events:none}
header.no-border{border-bottom-color:transparent}
header .logo{transition:opacity .4s var(--ease)}
header.logo-hidden .logo{opacity:0;pointer-events:none}
header.logo-visible .logo{opacity:1}
.logo a{color:var(--text);text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;height:64px}
.nav-d{display:flex;gap:2.5rem}
.nav-d a{color:var(--gray);text-decoration:none;font-size:.74rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;position:relative;transition:color .3s}
.nav-d a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--text);transition:width .4s var(--eo)}
.nav-d a:hover{color:var(--text)}.nav-d a:hover::after{width:100%}
.mbtn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;height:64px;z-index:200}
.mbtn span{display:block;width:24px;height:1.5px;background:var(--text);transition:all .5s var(--eo);transform-origin:center}
.mbtn.active span:first-child{transform:translateY(3.25px) rotate(45deg)}
.mbtn.active span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mov{position:fixed;inset:0;z-index:150;background:var(--text);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.mov.active{opacity:1;visibility:visible}
.mov nav a{display:block;color:var(--bg);text-decoration:none;font-size:2rem;font-weight:300;letter-spacing:.05em;padding:.4em 0;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .5s var(--eo),transform .5s var(--eo),color .3s}
.mov.active nav a{opacity:1;transform:translateY(0)}
.mov nav a:nth-child(1){transition-delay:.08s}.mov nav a:nth-child(2){transition-delay:.16s}.mov nav a:nth-child(3){transition-delay:.24s}.mov nav a:nth-child(4){transition-delay:.32s}
.mov nav a:hover{color:var(--gray)}
.mov-close{position:absolute;top:20px;right:var(--px);background:none;border:none;cursor:pointer;padding:8px;z-index:200}
.mov-close svg{width:28px;height:28px;color:var(--bg);transition:opacity .3s}
.mov-close:hover svg{opacity:.6}

/* INTRO */
.intro{padding:160px var(--px) 80px}
.intro-name{font-size:clamp(2rem,5.5vw,4.5rem);font-weight:300;line-height:1.1;letter-spacing:-.02em;opacity:0;transform:translateY(40px);animation:fi 1s var(--eo) .3s forwards}
.intro-role{margin-top:1rem;font-size:clamp(.78rem,1vw,.9rem);font-weight:300;color:var(--gray);letter-spacing:.06em;opacity:0;transform:translateY(24px);animation:fi 1s var(--eo) .6s forwards}
@keyframes fi{to{opacity:1;transform:translateY(0)}}

/* FILTER (works page only) */
.fbar{padding:60px var(--px) 32px;display:flex;gap:2rem;opacity:0;transform:translateY(20px);transition:opacity .8s var(--eo),transform .8s var(--eo)}
.fbar.visible{opacity:1;transform:translateY(0)}
.fbtn{background:none;border:none;cursor:pointer;font-family:var(--fn);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);padding:6px 0;position:relative;transition:color .3s}
.fbtn::after{content:'';position:absolute;bottom:2px;left:0;width:0;height:1px;background:var(--text);transition:width .4s var(--eo)}
.fbtn.active{color:var(--text)}.fbtn.active::after,.fbtn:hover::after{width:100%}.fbtn:hover{color:var(--text)}

/* GRID */
.wsec{padding:40px var(--px) 80px}
.wsec.has-filter{padding-top:0}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:20px;row-gap:48px}
.wi{opacity:0;transform:translateY(60px);transition:opacity .9s var(--eo),transform .9s var(--eo)}
.wi.visible{opacity:1;transform:translateY(0)}
.wi.featured{grid-column:1/-1}
.wi.featured .wlink{display:flex;gap:28px;align-items:flex-start}
.wi.featured .wthumb-wrap{width:75%;flex-shrink:0}
.wi.featured .winfo{padding:20px 0 0;flex:1}
.wi.featured .wtitle{font-size:1.05rem;margin-bottom:6px}
.wi.featured .wdesc{-webkit-line-clamp:4}
.wlink{display:block;text-decoration:none;color:inherit}
.wthumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:#e8e8e8}
.wi.featured .wthumb{aspect-ratio:16/9}
.wthumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--eo);display:block}
.wi:hover .wthumb img{transform:scale(1.04)}
.wthumb img.err{display:none}
.wfb{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:.85rem;font-weight:500;color:#fff;text-align:center;padding:20px}
.wfb.show{display:flex}
.wlock{position:absolute;top:12px;right:12px;width:28px;height:28px;background:rgba(0,0,0,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.wlock svg{width:14px;height:14px;color:#fff}
.winfo{padding:14px 0 8px}
.wtitle{font-size:.88rem;font-weight:500;line-height:1.4;margin-bottom:3px;transition:transform .4s var(--eo)}
.wi:hover .wtitle{transform:translateY(-2px)}
.wdesc{font-size:.7rem;color:var(--gray);font-weight:300;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wyear{font-size:.66rem;color:var(--gray);font-weight:300;letter-spacing:.05em;margin-top:4px}

/* WORKS PAGE TITLE */
.works-title{padding:120px var(--px) 0;font-size:clamp(1.6rem,3vw,2.8rem);font-weight:300;line-height:1.2;letter-spacing:-.01em}

/* SINGLE POST HEADER (back + logo) */
.single-hdr{position:sticky;top:0;z-index:10;padding:0 var(--px);height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,248,248,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.05)}
.single-back{background:none;border:none;cursor:pointer;font-family:var(--fn);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:8px;height:64px;transition:color .3s;text-decoration:none}
.single-back:hover{color:var(--text)}
.single-back svg{width:18px;height:18px;transition:transform .3s var(--eo)}
.single-back:hover svg{transform:translateX(-3px)}

/* SINGLE POST */
.single-hero{width:100%;overflow:hidden;background:#e8e8e8;aspect-ratio:16/9;position:relative}
.single-hero img{width:100%;height:100%;object-fit:cover;display:block}
.single-content-wrap{display:flex;justify-content:center;padding:0 var(--px)}
.single-content-inner{width:100%;max-width:var(--cw);padding:56px 0 0}
.single-cat{font-size:.66rem;color:var(--gray);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.single-title{font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:400;line-height:1.3;margin-bottom:6px;font-family:var(--jp)}
.single-year{font-size:.78rem;color:var(--gray);font-weight:300;margin-bottom:28px}
.single-body{font-size:.88rem;line-height:2;color:#444;font-weight:300;font-family:var(--jp)}
.single-body p{margin-bottom:1.5em}
.single-body img{max-width:100%;height:auto;display:block;margin:1.5em 0}
.single-body video{max-width:100%;height:auto;display:block;margin:1.5em 0}
.single-body .wp-block-embed,.single-body .wp-video{max-width:100%;margin:1.5em 0}
.video-responsive{position:relative;width:100%;height:0;overflow:hidden;margin:1.5em 0}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.single-nav-wrap{display:flex;justify-content:center;padding:0 var(--px)}
.single-nav-inner{width:100%;max-width:var(--cw);display:flex;justify-content:space-between;padding:40px 0 60px;border-top:1px solid var(--lg);margin-top:50px}
.single-nav-inner a{font-family:var(--fn);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);transition:color .3s;text-decoration:none;display:flex;align-items:center;gap:6px}
.single-nav-inner a:hover{color:var(--text)}
.nav-label{display:none}

/* PASSWORD FORM */
.pw-wrap{display:flex;justify-content:center;padding:60px var(--px)}
.pw-inner{width:100%;max-width:var(--cw);text-align:center}
.pw-inner p{font-size:.88rem;color:var(--gray);font-weight:300;margin-bottom:20px;font-family:var(--jp)}
.pw-inner input[type="password"]{background:transparent;border:1px solid var(--lg);color:var(--text);padding:10px 16px;font-size:.82rem;font-family:var(--fn);border-radius:4px;outline:none;width:220px;transition:border-color .3s}
.pw-inner input[type="password"]:focus{border-color:var(--gray)}
.pw-inner input[type="submit"]{background:var(--text);color:var(--bg);border:none;padding:10px 24px;font-size:.74rem;font-family:var(--fn);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:4px;margin-left:8px;transition:opacity .3s}
.pw-inner input[type="submit"]:hover{opacity:.7}

/* PAGE TEMPLATE */
.page-wrap{margin-top:64px;display:flex;justify-content:center;padding:80px var(--px) 60px}
.page-inner{width:100%;max-width:var(--cw)}
.page-inner h1{font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:400;line-height:1.3;margin-bottom:32px;font-family:var(--jp)}
.page-body{font-size:.88rem;line-height:2;color:#444;font-weight:300;font-family:var(--jp)}
.page-body p{margin-bottom:1.2em}
.page-body strong{font-weight:500;color:var(--text)}
.page-body img{max-width:100%;height:auto;display:block;margin:1.5em 0}
.page-body a{color:var(--text);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.page-body a:hover{color:var(--gray)}

/* FOOTER */
footer{padding:20px var(--px);display:flex;justify-content:space-between;align-items:center}
.fsoc{display:flex;gap:1.5rem}
.fsoc a{color:var(--gray);text-decoration:none;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.fsoc a:hover{color:var(--text)}
.fcopy{font-size:.66rem;color:var(--gray);letter-spacing:.05em}

/* RESPONSIVE */
@media(max-width:1024px){
  :root{--px:24px}
  .wgrid{grid-template-columns:repeat(2,1fr);column-gap:16px;row-gap:40px}
  .wi.featured{grid-column:1/-1}
  .wi.featured .wlink{flex-direction:column;gap:0}
  .wi.featured .wthumb-wrap{width:100%}
  .wi.featured .winfo{padding:14px 0 8px}
}
@media(max-width:600px){
  :root{--px:20px}
  header,.single-hdr{padding:0 20px;height:56px}
  .nav-d{display:none}.mbtn{display:flex;height:56px}
  .logo a{height:56px}
  .single-back{height:56px}
  .intro{padding:90px 20px 40px}
  .fbar{padding:30px 20px 20px;gap:1rem;flex-wrap:wrap}
  .wsec{padding:20px 20px 40px}
  .wsec.has-filter{padding-top:0}
  .works-title{padding:80px 20px 0}
  .wgrid{grid-template-columns:1fr;row-gap:36px}
  .wi.featured .wlink{flex-direction:column;gap:0}
  .wi.featured .wthumb-wrap{width:100%}
  .wi.featured .winfo{padding:14px 0 8px}
  .single-content-inner{padding-top:36px}
  .nav-label{display:inline}
  .nav-title{display:none}
  footer{padding:14px 20px}
}