/* 2026 portfolio refresh — personal zine / scrapbook direction. */
:root{
  --z-paper:#fbfaf7;
  --z-paper-warm:#f4eee5;
  --z-ink:#22201f;
  --z-muted:#77716c;
  --z-red:#a64036;
  --z-pink:#efb5c0;
  --z-yellow:#f2d982;
  --z-blue:#bddde6;
  --z-green:#b9d5be;
  --z-line:rgba(34,32,31,.18);
  --z-shadow:0 14px 34px rgba(59,45,35,.09);
}

body.portfolio-home,body.lgc-page,body.maple-page,body.kt-page,body.wozhi-page{
  color:var(--z-ink);
  background:
    radial-gradient(circle at 10% 18%,rgba(166,64,54,.035),transparent 18%),
    radial-gradient(circle at 90% 42%,rgba(189,221,230,.16),transparent 17%),
    var(--z-paper);
}

body.portfolio-home:before,body.lgc-page:before,body.maple-page:before,body.kt-page:before,body.wozhi-page:before,
body.portfolio-home:after,body.lgc-page:after,body.maple-page:after,body.kt-page:after,body.wozhi-page:after{
  position:fixed;z-index:20;top:28%;pointer-events:none;color:#2d2927;opacity:.48;
  font:700 18px/2.65 "Comic Sans MS","Kaiti SC",cursive;white-space:pre;text-align:center;
}
body.portfolio-home:before,body.lgc-page:before,body.maple-page:before,body.kt-page:before,body.wozhi-page:before{content:"✦\A ◡\A ✎\A ♡";left:15px;transform:rotate(-5deg)}
body.portfolio-home:after,body.lgc-page:after,body.maple-page:after,body.kt-page:after,body.wozhi-page:after{content:"☕\A ↗\A ✺\A ☺";right:16px;transform:rotate(5deg)}

body.portfolio-home .site-header,body.lgc-page .site-header,body.maple-page .site-header,body.kt-page .site-header,body.wozhi-page .site-header{
  inset:16px 50% auto auto;transform:translateX(50%);width:min(760px,calc(100% - 34px));
  padding:9px 12px;border:1px solid var(--z-line);border-radius:999px;color:var(--z-ink);
  background:rgba(251,250,247,.9);box-shadow:0 5px 22px rgba(45,35,29,.06);backdrop-filter:blur(16px);
}
body.portfolio-home .brand-mark,body.lgc-page .brand-mark,body.maple-page .brand-mark,body.kt-page .brand-mark,body.wozhi-page .brand-mark{
  color:#fff;background:var(--z-red);border-radius:50%;transform:rotate(-7deg)
}
body.portfolio-home .site-header nav a,body.lgc-page .site-header nav a,body.maple-page .site-header nav a,body.kt-page .site-header nav a,body.wozhi-page .site-header nav a{color:var(--z-ink);opacity:.68}
body.portfolio-home .site-header nav a:hover,body.lgc-page .site-header nav a:hover,body.maple-page .site-header nav a:hover,body.kt-page .site-header nav a:hover,body.wozhi-page .site-header nav a:hover{opacity:1}
body.portfolio-home .site-header .nav-cta,body.lgc-page .site-header .nav-cta,body.maple-page .site-header .nav-cta,body.kt-page .site-header .nav-cta,body.wozhi-page .site-header .nav-cta{
  padding:8px 15px;color:#fff;background:var(--z-red);border-radius:999px;opacity:1
}

/* Homepage: the former identity block becomes a real project scrapbook. */
.portfolio-home .home-hero{
  min-height:760px;padding:150px max(8vw,42px) 92px;grid-template-columns:minmax(0,1fr) minmax(390px,.84fr);
  gap:clamp(50px,7vw,110px);color:var(--z-ink);background:transparent;border-bottom:1px dashed var(--z-line)
}
.portfolio-home .home-hero:before{content:"YJP · PORTFOLIO 2026";top:116px;color:var(--z-muted);letter-spacing:.16em}
.portfolio-home .home-hero-copy:before{content:"Hi，欢迎来到我的作品手账 ✦";display:block;margin:0 0 20px;color:var(--z-red);font:700 16px/1.4 "Kaiti SC",cursive;transform:rotate(-1deg);transform-origin:left}
.portfolio-home .home-hero h1{font-size:clamp(66px,8.4vw,126px);line-height:.9;letter-spacing:-.075em;color:var(--z-ink)}
.portfolio-home .home-hero h1 span{display:inline-block;color:var(--z-red);text-decoration:underline;text-decoration-thickness:7px;text-decoration-color:var(--z-pink);text-underline-offset:9px}
.portfolio-home .home-intro{max-width:670px;margin-top:38px;color:#55504c;font-size:clamp(17px,1.45vw,21px);line-height:1.9}
.portfolio-home .home-actions .button{padding:13px 23px;border-radius:999px;color:#fff;background:var(--z-red);box-shadow:none}
.portfolio-home .home-actions>span{position:relative;color:var(--z-muted)}
.portfolio-home .home-actions>span:after{content:"⌁⌁⌁";position:absolute;left:0;top:18px;color:var(--z-pink);font-size:25px;letter-spacing:-8px}

.portfolio-home .home-orbit{
  position:relative;width:min(42vw,560px);height:500px;aspect-ratio:auto;align-self:center;justify-self:end;
  border:0;background:transparent;overflow:visible
}
.portfolio-home .home-orbit .orbit-core{
  position:absolute;inset:52px 58px 36px 42px;padding:0;border:9px solid #fff;border-radius:32% 18% 29% 15%;
  background:url("./assets/lgc-ui-overview.jpg") center/cover no-repeat;box-shadow:var(--z-shadow);transform:rotate(-3deg);overflow:hidden
}
.portfolio-home .home-orbit .orbit-core b,.portfolio-home .home-orbit .orbit-core small{display:none}
.portfolio-home .home-orbit .orbit-core:before{content:"LGC · learning from life";left:18px;top:auto;bottom:17px;padding:7px 11px;color:var(--z-ink);background:rgba(255,255,255,.9);font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.04em;border-radius:999px}
.portfolio-home .home-orbit .orbit{display:block;position:absolute;border:7px solid #fff;background-position:center;background-size:cover;box-shadow:var(--z-shadow)}
.portfolio-home .home-orbit .orbit-a{width:165px;height:138px;right:-10px;top:7px;border-radius:45% 24% 38% 28%;background-image:url("./assets/wozhi-prototype.jpg");transform:rotate(7deg)}
.portfolio-home .home-orbit .orbit-b{width:150px;height:150px;left:-8px;bottom:0;border-radius:50%;background-image:url("./assets/maple-ui-overview.webp");transform:rotate(-8deg)}
.portfolio-home .home-orbit:before{content:"✦";position:absolute;right:18px;bottom:86px;color:var(--z-red);font-size:64px;transform:rotate(12deg)}
.portfolio-home .home-orbit:after{content:"做出来，才算数!";position:absolute;left:20px;top:11px;padding:7px 12px;background:var(--z-yellow);font:700 15px/1.2 "Kaiti SC",cursive;transform:rotate(-6deg);box-shadow:2px 4px 0 rgba(34,32,31,.12)}
.portfolio-home .orbit-tag{z-index:4;padding:8px 12px;border:1px solid var(--z-ink);border-radius:999px;color:var(--z-ink);background:var(--z-paper);box-shadow:3px 4px 0 var(--z-ink);font-size:10px}
.portfolio-home .tag-a{right:20px;top:29%}.portfolio-home .tag-b{left:22px;bottom:20%}.portfolio-home .tag-c{right:8px;bottom:4%;color:var(--z-ink);background:var(--z-pink)}

.portfolio-home .home-facts{max-width:1120px;margin:0 auto;padding:24px 0;gap:11px;border:0;background:transparent;justify-content:center}
.portfolio-home .home-facts span{flex:0 0 auto;padding:9px 16px;border:1px solid var(--z-line)!important;border-radius:999px;background:#fff;font:700 12px/1 ui-monospace,monospace;box-shadow:2px 3px 0 rgba(34,32,31,.08)}
.portfolio-home .home-facts span:nth-of-type(2){background:#eef6f2}.portfolio-home .home-facts span:nth-of-type(3){background:#f7e8eb}.portfolio-home .home-facts span:nth-of-type(4){background:#f8efcc}

.portfolio-home .work-section{padding:120px max(8vw,42px);background:var(--z-paper-warm)}
.portfolio-home .work-heading{grid-template-columns:1fr .6fr;max-width:1260px;margin:0 auto 80px;padding-bottom:34px;border-bottom:1px dashed var(--z-line)}
.portfolio-home .work-heading h2{font-family:inherit;font-size:clamp(48px,5.5vw,76px);letter-spacing:-.055em}
.portfolio-home .work-heading h2:after{content:" selected works ↘";display:block;margin-top:12px;color:var(--z-red);font:700 16px/1 "Kaiti SC",cursive;letter-spacing:0;transform:rotate(-1deg)}
.portfolio-home .project-card,.portfolio-home .project-card:nth-of-type(even){
  position:relative;grid-template-columns:minmax(0,1fr) minmax(330px,.68fr);max-width:1180px;min-height:460px;margin:0 auto 70px;
  border:1px solid var(--z-line);border-radius:22px 8px 26px 10px;background:#fff;box-shadow:var(--z-shadow);overflow:visible
}
.portfolio-home .project-card:nth-of-type(even){transform:rotate(.5deg)}.portfolio-home .project-card:nth-of-type(odd){transform:rotate(-.35deg)}
.portfolio-home .project-card:before{content:"";position:absolute;z-index:4;left:45%;top:-18px;width:86px;height:32px;background:rgba(242,217,130,.78);transform:rotate(-2deg);box-shadow:inset 0 0 0 1px rgba(130,101,35,.08)}
.portfolio-home .project-media{min-height:460px;margin:16px;border-radius:17px 6px 19px 8px;overflow:hidden;background:#ece8e1}
.portfolio-home .project-media:after{content:"CASE / 0" attr(data-case);display:none}
.portfolio-home .project-media img{filter:saturate(.92);transition:none}
.portfolio-home .project-media:hover img{transform:none;filter:saturate(.92)}
.portfolio-home .project-index{left:12px;top:12px;width:44px;border-radius:50%;color:#fff;background:var(--z-red);transform:rotate(-8deg)}
.portfolio-home .project-copy{padding:52px 48px 46px}
.portfolio-home .project-tags span,.portfolio-home .lgc-card .project-tags span,.portfolio-home .maple-card .project-tags span,.portfolio-home .wozhi-card .project-tags span{border:1px solid var(--z-line);border-radius:999px;background:var(--z-paper);color:#625c58}
.portfolio-home .project-copy h3{margin:30px 0 14px;font-family:inherit;font-size:clamp(48px,5vw,72px);letter-spacing:-.065em}
.portfolio-home .project-slogan{color:var(--z-red);font-weight:700}
.portfolio-home .text-link{border:0}.portfolio-home .text-link:after{content:"";display:block;height:5px;margin-top:5px;background:var(--z-pink);border-radius:50%;transform:rotate(-1deg)}

.portfolio-home .about-strip{position:relative;padding:120px max(8vw,42px);color:var(--z-ink);background:var(--z-blue);overflow:hidden}
.portfolio-home .about-strip:after{content:"IDEA  →  PROTOTYPE  →  TEST  →  ITERATE";position:absolute;right:-40px;bottom:24px;color:rgba(34,32,31,.12);font:900 clamp(22px,4vw,60px)/1 ui-monospace,monospace;transform:rotate(-3deg)}
.portfolio-home .about-strip h2{font-family:inherit;letter-spacing:-.05em}
.portfolio-home .about-list p{border-bottom:1px dashed rgba(34,32,31,.2)}
.portfolio-home .about-list b{color:var(--z-red)}
.portfolio-home .coming-strip{color:var(--z-ink);background:var(--z-yellow)}

/* Shared treatment for all case studies: paper, tape, soft irregular framing. */
.lgc-page main,.maple-page main,.kt-page main,.wozhi-page main{overflow:hidden}
.lgc-page h1,.maple-page h1,.kt-page h1,.wozhi-page h1{letter-spacing:-.065em}
.lgc-page h2,.maple-page h2,.kt-page h2,.wozhi-page h2{letter-spacing:-.045em}
.lgc-page figure,.maple-page figure,.kt-page figure,.wozhi-page figure{position:relative}
.lgc-page figure:before,.maple-page figure:before,.kt-page figure:before,.wozhi-page figure:before{content:"";position:absolute;z-index:3;left:50%;top:-12px;width:74px;height:25px;background:rgba(242,217,130,.72);transform:translateX(-50%) rotate(-2deg);pointer-events:none}
.lgc-page img,.maple-page img,.kt-page img,.wozhi-page img{filter:saturate(.93)}
.lgc-page footer,.maple-page footer,.kt-page footer,.wozhi-page footer{color:#fff;background:var(--z-ink)}

body.lgc-page .lgc-hero,body.maple-page .maple-hero,body.kt-page .kt-hero,body.wozhi-page .hero{background-color:var(--z-paper)!important}
body.lgc-page .lgc-hero:after,body.maple-page .maple-hero:after,body.kt-page .kt-hero:after,body.wozhi-page .hero:after{content:"case study · 杨金萍";position:absolute;right:6vw;bottom:26px;color:var(--z-red);font:700 14px/1 "Kaiti SC",cursive;transform:rotate(-2deg)}

body.lgc-page article,body.kt-page article,body.wozhi-page article{border-radius:16px}
body.lgc-page .lgc-section,body.kt-page .kt-section,body.wozhi-page .section{position:relative}
body.lgc-page .lgc-section:nth-of-type(even),body.kt-page .kt-section:nth-of-type(even),body.wozhi-page .section:nth-of-type(even){background-color:var(--z-paper-warm)}

/* Contrast-only corrections: keep the light paper backgrounds and change text only. */
.lgc-page .lgc-section.role{color:#242120!important}
.lgc-page .lgc-section.role .lgc-heading h2,
.lgc-page .lgc-section.role .role-grid-lgc h3{color:#242120!important}
.lgc-page .lgc-section.role .role-grid-lgc p{color:#3f3a36!important;opacity:1!important}
.lgc-page .lgc-section.role .role-grid-lgc em{color:#176b86!important}
.lgc-page .lgc-section.role .lgc-section-number.light{color:#536065!important}

.wozhi-page .section.role{color:#242120!important}
.wozhi-page .section.role .light-heading h2{color:#242120!important}
.wozhi-page .section.role .role-scope{color:#3f3a36!important;opacity:1!important}
.wozhi-page .section.role .role-grid h3{color:#fff!important}
.wozhi-page .section.role .role-grid p{color:rgba(255,255,255,.82)!important;opacity:1!important}
.wozhi-page .section.role .role-grid span{color:#f0c45a!important}

.wozhi-page .hero{color:#242120!important}
.wozhi-page .hero h1,
.wozhi-page .hero .eyebrow,
.wozhi-page .hero .hero-meta dd{color:#242120!important}
.wozhi-page .hero .hero-intro{color:#3f3a36!important;opacity:1!important}
.wozhi-page .hero .hero-kicker{color:#895319!important}
.wozhi-page .hero .hero-meta dt{color:#5a534e!important;opacity:1!important}
.wozhi-page .hero .button.secondary{color:#242120!important}

@media(max-width:980px){
  body.portfolio-home:before,body.lgc-page:before,body.maple-page:before,body.kt-page:before,body.wozhi-page:before,
  body.portfolio-home:after,body.lgc-page:after,body.maple-page:after,body.kt-page:after,body.wozhi-page:after{display:none}
  .portfolio-home .home-hero{grid-template-columns:1fr;gap:62px}.portfolio-home .home-orbit{justify-self:center;width:min(90vw,570px)}
  .portfolio-home .project-card,.portfolio-home .project-card:nth-of-type(even){grid-template-columns:1fr;transform:none}.portfolio-home .project-card:before{left:calc(50% - 43px)}
}
@media(max-width:700px){
  body.portfolio-home .site-header,body.lgc-page .site-header,body.maple-page .site-header,body.kt-page .site-header,body.wozhi-page .site-header{inset:10px 50% auto auto;width:calc(100% - 20px)}
  body.portfolio-home .site-header .brand>span:last-child,body.lgc-page .site-header .brand>span:last-child,body.maple-page .site-header .brand>span:last-child,body.kt-page .site-header .brand>span:last-child,body.wozhi-page .site-header .brand>span:last-child{display:none}
  .portfolio-home .home-hero{padding:120px 22px 70px}.portfolio-home .home-hero h1{font-size:59px}.portfolio-home .home-hero h1 span{text-decoration-thickness:4px}
  .portfolio-home .home-orbit{width:100%;height:390px}.portfolio-home .home-orbit .orbit-core{inset:44px 24px 42px}.portfolio-home .home-orbit .orbit-a{width:124px;height:108px;right:-3px}.portfolio-home .home-orbit .orbit-b{width:118px;height:118px;left:-3px}
  .portfolio-home .home-facts{padding:22px;display:flex;flex-wrap:wrap}.portfolio-home .work-section{padding:88px 16px}.portfolio-home .work-heading{grid-template-columns:1fr;margin-bottom:56px}.portfolio-home .project-card{margin-bottom:54px;border-radius:16px}.portfolio-home .project-media{min-height:260px;margin:10px}.portfolio-home .project-copy{padding:32px 24px 34px}.portfolio-home .project-copy h3{font-size:47px}.portfolio-home .about-strip{padding:88px 24px}
}

/* Second refinement: quieter, more human, less template-like. */
body.portfolio-home:before,body.lgc-page:before,body.maple-page:before,body.kt-page:before,body.wozhi-page:before,
body.portfolio-home:after,body.lgc-page:after,body.maple-page:after,body.kt-page:after,body.wozhi-page:after{display:none}

.portfolio-home .home-hero{min-height:720px;grid-template-columns:minmax(0,.95fr) minmax(390px,.8fr);padding-top:142px}
.portfolio-home .home-hero:before{content:"作品集 · 2026";font-family:inherit;letter-spacing:.08em}
.portfolio-home .home-hero-copy:before{content:"你好，欢迎来到我的作品集";font-family:"Kaiti SC",cursive;font-size:15px}
.portfolio-home .home-hero h1{max-width:760px;font-size:clamp(60px,7.1vw,104px);line-height:.94}
.portfolio-home .home-hero h1 span{text-decoration-thickness:4px;text-underline-offset:7px}
.portfolio-home .home-intro{font-size:clamp(16px,1.25vw,19px);line-height:1.85}
.portfolio-home .home-actions>span:after{display:none}

.portfolio-home .home-orbit:after{content:"从问题出发";font-size:14px;background:#efe1b2;box-shadow:none}
.portfolio-home .home-orbit:before{font-size:48px;opacity:.82}
.portfolio-home .orbit-tag{box-shadow:none;background:#fff;border-color:rgba(34,32,31,.3)}

.portfolio-home .work-section{background:#f5f1ea}
.portfolio-home .work-heading h2{font-size:clamp(43px,4.8vw,68px);line-height:1.04}
.portfolio-home .work-heading h2:after{display:none}
.portfolio-home .project-card,.portfolio-home .project-card:nth-of-type(even),.portfolio-home .project-card:nth-of-type(odd){
  border-radius:12px;box-shadow:0 10px 28px rgba(59,45,35,.065);transform:none
}
.portfolio-home .project-card:before{height:24px;top:-12px;background:rgba(226,209,154,.55)}
.portfolio-home .project-media{border-radius:8px}
.portfolio-home .project-copy h3{font-size:clamp(43px,4.5vw,62px)}
.portfolio-home .project-slogan{color:#74342f}

.portfolio-home .about-strip{
  padding:110px max(8vw,42px);color:#242120;background:#eee8de
}
.portfolio-home .about-strip:after{display:none}
.portfolio-home .about-strip .eyebrow{color:#615a55}
.portfolio-home .about-strip .eyebrow span{background:#a64036}
.portfolio-home .about-strip h2{max-width:720px;color:#242120;font-size:clamp(46px,5.2vw,72px);line-height:1.08}
.portfolio-home .about-strip .about-list p{border-bottom:1px solid rgba(34,32,31,.16)}
.portfolio-home .about-strip .about-list b{color:#983b32}
.portfolio-home .about-strip .about-list span{color:#3f3a36!important;opacity:1!important;font-weight:500}

.portfolio-home .coming-strip{background:#d9cfba}

@media(max-width:700px){
  .portfolio-home .home-hero h1{font-size:54px}
  .portfolio-home .work-heading h2{font-size:43px}
  .portfolio-home .about-strip h2{font-size:42px}
}

/* Mobile layout fix: this block stays last so desktop refinements cannot override it. */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  body.portfolio-home .site-header,body.lgc-page .site-header,body.maple-page .site-header,body.kt-page .site-header,body.wozhi-page .site-header{
    width:calc(100% - 20px);max-width:none;padding:8px 10px
  }
  body.portfolio-home .site-header nav>a:not(.nav-cta),body.lgc-page .site-header nav>a:not(.nav-cta),body.maple-page .site-header nav>a:not(.nav-cta),body.kt-page .site-header nav>a:not(.nav-cta),body.wozhi-page .site-header nav>a:not(.nav-cta){display:none}
  body.portfolio-home .site-header nav,body.lgc-page .site-header nav,body.maple-page .site-header nav,body.kt-page .site-header nav,body.wozhi-page .site-header nav{margin-left:auto}

  .portfolio-home .home-hero{
    width:100%;min-width:0;min-height:auto;padding:118px 20px 64px;
    grid-template-columns:minmax(0,1fr)!important;gap:44px
  }
  .portfolio-home .home-hero:before{display:none}
  .portfolio-home .home-hero-copy{width:100%;max-width:none;min-width:0}
  .portfolio-home .home-hero-copy:before{white-space:normal;font-size:14px}
  .portfolio-home .home-hero .eyebrow{max-width:100%;white-space:normal;letter-spacing:.1em;font-size:10px}
  .portfolio-home .home-hero h1{max-width:100%;font-size:clamp(50px,15vw,62px);line-height:.96;word-break:keep-all;overflow-wrap:normal}
  .portfolio-home .home-intro{max-width:100%;font-size:16px;line-height:1.78}
  .portfolio-home .home-actions{align-items:flex-start;gap:16px}
  .portfolio-home .home-orbit{width:100%;max-width:100%;height:330px;justify-self:stretch}
  .portfolio-home .home-orbit .orbit-core{inset:38px 16px 38px}
  .portfolio-home .home-orbit .orbit-a{width:110px;height:92px;right:0}
  .portfolio-home .home-orbit .orbit-b{width:104px;height:104px;left:0}
  .portfolio-home .orbit-tag{font-size:8px;padding:7px 9px}
  .portfolio-home .home-facts{width:100%;gap:8px}
  .portfolio-home .work-section{width:100%;padding-left:16px;padding-right:16px}
  .portfolio-home .work-heading,.portfolio-home .project-card{width:100%;min-width:0}
  .portfolio-home .project-card,.portfolio-home .project-card:nth-of-type(even),.portfolio-home .project-card:nth-of-type(odd){grid-template-columns:minmax(0,1fr)!important}
  .portfolio-home .project-media{width:auto;min-width:0}
  .portfolio-home .about-strip{grid-template-columns:minmax(0,1fr)!important;gap:46px}

  .lgc-page .lgc-hero,.maple-page .maple-hero,.kt-page .kt-hero,.wozhi-page .hero{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)!important}
  .lgc-page .lgc-hero h1{font-size:clamp(76px,28vw,108px)}
  .maple-page .maple-hero h1{font-size:clamp(68px,24vw,92px)}
  .kt-page .kt-hero h1{font-size:clamp(74px,27vw,98px)}
  .wozhi-page .hero h1{font-size:clamp(76px,28vw,104px)}
  .lgc-page .lgc-section,.maple-page .maple-section,.kt-page .section,.wozhi-page .section{max-width:100%;overflow:hidden}
}