/* =========================================================
   LILA — Personal Portfolio
   Moodboard B · Kraft & Ink
   Palette: paper #F4EFE6 · ink #1C1A17 · kraft #B98A5E
   Fonts:   Fraunces (display) + Inter (body)
   ========================================================= */

:root{
  --paper:#F4EFE6;
  --paper-2:#ECE3D3;
  --paper-3:#E3D8C4;
  --ink:#1C1A17;
  --ink-soft:#4A463F;
  --ink-faint:#8A8275;
  --kraft:#B98A5E;
  --kraft-deep:#9A6F44;
  --kraft-tint:rgba(185,138,94,.16);
  --line:rgba(28,26,23,.14);
  --line-strong:rgba(28,26,23,.28);
  --white:#FBF8F2;
  --shadow:0 18px 40px -22px rgba(28,26,23,.45);
  --serif:'Fraunces','Georgia','Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --max:1180px;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* subtle paper grain overlay */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .4em;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--kraft-deep);
  margin-bottom:.9rem;
}
.muted{color:var(--ink-soft)}
.kraft{color:var(--kraft-deep)}
.serif{font-family:var(--serif)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  padding:.78em 1.5em;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;
  transition:transform .25s,background .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* =========================================================
   NAV (English-only, sticky, scroll-spy)
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(to bottom,rgba(244,239,230,.92),rgba(244,239,230,.55));
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,padding .3s;
}
.nav.solid{
  background:rgba(244,239,230,.96);
  border-bottom:1px solid var(--line);
  padding:12px 28px;
}
.nav .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:.02em}
.nav .brand img{height:30px;width:auto;mix-blend-mode:multiply}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{
  font-size:.92rem;font-weight:500;color:var(--ink-soft);position:relative;padding:.3em 0;
  transition:color .2s;
}
.nav ul a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--kraft);transition:width .25s;
}
.nav ul a:hover,.nav ul a.active{color:var(--ink)}
.nav ul a.active::after,.nav ul a:hover::after{width:100%}
.nav .resume-link{border:1.5px solid var(--ink);border-radius:999px;padding:.4em 1em!important;color:var(--ink)!important}
.nav .resume-link::after{display:none}
.nav .resume-link:hover{background:var(--ink);color:var(--paper)!important}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}
/* language switcher (nav stays English; only active state changes) */
.nav .lang{display:flex;align-items:center;gap:.3rem;margin-left:.35rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.08em}
.nav .lang button{background:none;border:0;cursor:pointer;padding:.2em .2em;color:rgba(28,26,23,.4);font:inherit;transition:color .25s}
.nav .lang button:hover{color:var(--ink)}
.nav .lang button.active{color:var(--ink);font-weight:600}
.nav .lang .lang-sep{color:rgba(28,26,23,.3);font-style:normal}

/* =========================================================
   HERO / generic section spacing
   ========================================================= */
.section{padding:96px 0;position:relative;z-index:1}
.section.tight{padding:64px 0}
.section.alt{background:var(--paper-2)}
.section h2.title{font-size:clamp(2rem,4.4vw,3.2rem);max-width:18ch}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}

/* =========================================================
   HOME — opening torn-paper intro
   ========================================================= */
#intro{
  position:fixed;inset:0;z-index:200;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
#intro .leaf{position:absolute;top:-4%;height:108%;width:53%;background:var(--paper);
  box-shadow:var(--shadow);z-index:1;will-change:transform}
#intro .leaf-l{left:0;transform-origin:left center;border-right:2px solid var(--line);
  background-image:repeating-linear-gradient(90deg,rgba(28,26,23,.10) 0 2px,transparent 2px 7px)}
#intro .leaf-r{right:0;transform-origin:right center;border-left:2px solid var(--line);
  background-image:repeating-linear-gradient(90deg,transparent 0 5px,rgba(28,26,23,.10) 5px 7px)}
#intro .intro-text{position:relative;z-index:2;text-align:center;padding:0 1rem;pointer-events:none}
#intro .intro-text .small{font-family:var(--sans);font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--kraft-deep);margin-bottom:1rem}
#intro .intro-text h1{font-size:clamp(2.6rem,8vw,5rem);text-align:center;margin:0}
#intro .intro-text .crack{width:min(360px,70%);height:1px;margin:1.4rem auto;background:var(--line-strong);position:relative}
#intro .intro-text .crack::before{content:"";position:absolute;inset:-3px 0;background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px,transparent 7px 13px)}
#intro .intro-text .openit{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.6rem;color:var(--ink-soft);transform:rotate(-5deg);display:inline-block}
#intro .hint{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);animation:pulse 2s infinite;z-index:3}
#intro .skip{position:absolute;top:24px;right:24px;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);cursor:pointer;z-index:3;pointer-events:auto}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* HOME hero — styles live in the HOME HERO block further below */

/* EXPLORE — "目录 / 从哪儿看起" collage board (ROUND 1, section-scoped) */
/* WIDTH FIX (ROUND 2J): the board was double-inset — the 1180px centred .wrap
   AND the ornate-frame padding — so at 1920 the cards spanned only 879px while
   #approach's spanned 1474px (~300px dead space per side). Release the wrapper
   for THIS SECTION ONLY and give the board the same full-bleed recipe already
   used by #approach .method-board: width:100% + max-width:2240px + centred. */
#explore .wrap{max-width:none;padding:0}
/* VERTICAL FIT (ROUND 2K → 2L) — two different causes, two scoped fixes.
   (a) <=1099px: the framed plate already carries its own generous cream
       margin, so the global .section padding (96px 0) stacked a SECOND empty
       band around it. Halve that gutter (#approach removes it entirely).
   (b) >=1100px: see the desktop block further down — the plate's height is
       driven by its WIDTH (the frame's 2.846 aspect ratio yields 498px at
       1440 and 637px at 1920), so it can never fill a viewport by itself. */
#explore.section{padding:48px 0}
#explore .toc-board{
  position:relative;
  width:100%;max-width:2240px;margin:0 auto;
  background:url("../assets/toc-frame.jpg") center/100% 100% no-repeat;
  padding:5.7% 10.2% 6.2% 11.6%;
  overflow:hidden;   /* stickers may overhang cards but never the board */
}
#explore .toc-head{margin-bottom:2.9%}
#explore .toc-head .eyebrow{margin-bottom:.55rem}
#explore .toc-head h2.title{font-size:clamp(1.9rem,4vw,2.85rem);margin:0;max-width:16ch}

#explore .toc-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:2.1%;align-items:stretch;
}
#explore .toc-card{
  position:relative;display:flex;flex-direction:column;min-width:0;width:100%;
  aspect-ratio:546/566;
  background:url("../assets/toc-lace.png") center/100% 100% no-repeat;
  padding:21% 15% 11% 13.5%;
  transition:transform .32s ease;
  transform-origin:50% 60%;
}
#explore .toc-card:hover{transform:translateY(-6px) rotate(-.7deg)}
#explore .toc-card .num{
  display:block;font-family:var(--serif);font-size:clamp(.78rem,.92vw,.92rem);
  color:#94955A;letter-spacing:.05em;line-height:1.28;
}
#explore .toc-card h3{
  font-size:clamp(.96rem,1.06vw,1.18rem);
  color:#33321F;margin:4% 0 0;line-height:1.2;
}
#explore .toc-card p{
  font-size:clamp(.66rem,.76vw,.74rem);
  color:#4E4C3A;line-height:1.46;margin:5% 0 0;
  overflow-wrap:break-word;word-break:break-word;
}
#explore .toc-card .go{
  display:inline-block;margin-top:auto;padding-top:6%;
  font-size:clamp(.66rem,.76vw,.74rem);font-weight:600;
  color:#6E7F3C;letter-spacing:.02em;
}
/* EN copy runs longer than the ZH reference: keep it inside the lace panel */
html[lang="en"] #explore .toc-card p{font-size:clamp(.64rem,.73vw,.72rem);line-height:1.42}

/* collage stickers (positions taken from the approved reference) */
#explore .deco{position:absolute;pointer-events:none;width:auto}
#explore .deco-cat{right:-3%;bottom:-3%;width:26%}
#explore .deco-doodle{right:-2%;bottom:-2%;width:24.5%}
#explore .deco-mint{left:-19%;top:7%;width:17.2%}
#explore .deco-green{right:1%;bottom:-2%;width:21.4%}
#explore .deco-postcard{right:-8%;bottom:-10%;width:32.4%}

/* ---------- TOC board responsive ---------- */
/* below the desktop full-bleed range, fall back to the standard 1180 container
   (the same 1099px cut-off #approach uses) */
@media(max-width:1099px){
  #explore .wrap{max-width:var(--max);padding:0 28px}
}

/* DESKTOP VERTICAL FIT (ROUND 2L) — make this section occupy one full
   viewport and SPREAD its content over that height instead of letting the
   leftover pool below the plate.
   Why this is not just "a taller section": the plate's height is a pure
   function of its width (frame aspect 2.846), so at 1440 it is 498px inside
   a 900px viewport. The two levers used here are (1) distribute the leftover
   height evenly around the plate and (2) grow the plate's OWN vertical
   rhythm so the framed content itself covers more of the viewport.            */
@media(min-width:1100px){
  #explore.section{
    padding:0;
    min-height:100vh;   /* fallback */
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;   /* leftover height splits evenly above/below */
  }
  #explore .wrap{width:100%}
  /* plate gets a taller body: more air inside the frame above the title and
     under the card row (the vine border stretches ~10%, imperceptible) */
  #explore .toc-board{padding:8.5% 10.2% 9.5% 11.6%}
}
@media(max-width:980px){
  #explore .toc-board{padding:7% 10.8% 6.4% 12%}
  #explore .toc-grid{grid-template-columns:repeat(3,1fr);gap:7% 3.6%}
}
@media(max-width:720px){
  /* the ornate frame cannot stretch over a tall stack: plain cream panel.
     Keep the site's mobile gutter (the global .wrap rule uses 18px). */
  #explore .wrap{padding:0 18px}
  #explore .toc-board{
    background:none;background-color:#FDFDF1;
    border:1px solid #D8DEB8;border-radius:12px;
    padding:8% 6.5% 8%;
  }
  #explore .toc-head{margin-bottom:6%}
  /* a percentage ROW gap cannot resolve inside an auto-height grid: Chromium
     sized the container without the gaps, so the 3rd row (card 05) spilled past
     the board's overflow:hidden and its "Open →" got clipped. 8vw is the
     definite equivalent of the old 10%-of-grid-width row gap and fixes it. */
  #explore .toc-grid{grid-template-columns:repeat(2,1fr);gap:8vw 6%}
  #explore .toc-card .num{font-size:.8rem}
  #explore .toc-card h3{font-size:1.02rem}
  #explore .toc-card p{font-size:.72rem}
  #explore .toc-card .go{font-size:.72rem}
  #explore .deco-cat{width:28%}
  #explore .deco-doodle{width:27%}
  #explore .deco-postcard{width:34%;right:-6%}
  #explore .deco-mint{left:-8%;width:19%}
}

/* =========================================================
   MY APPROACH — "我的方法 / 六个步骤，一以贯之"
   Botanical framed panel + six torn ruled-note cards.
   Section-scoped (#approach) — ROUND 2 redesign.
   Desktop geometry is expressed in cqw so the whole composition
   scales proportionally with the framed panel (reference 3712×1216).
   ========================================================= */
#approach.section.alt{background:#F7F0DC;padding:0}
#approach .method-board{
  position:relative;
  width:100%;max-width:2240px;margin:0 auto;
  aspect-ratio:3712/1216;
  background:url("../assets/approach-frame.jpg") center/100% 100% no-repeat;
  container-type:inline-size;
}
#approach .method-head{position:absolute;left:11.85%;top:19.3%;width:66%}
#approach .method-head .eyebrow{
  font-family:var(--sans);font-size:.92cqw;font-weight:600;
  letter-spacing:.02em;text-transform:none;color:#8A6636;
  line-height:1;margin:0;
}
#approach .method-head h2.title{
  font-family:'Noto Serif SC','Songti SC','SimSun','Source Han Serif SC',var(--serif);
  font-size:3.6cqw;line-height:1.04;font-weight:600;
  color:#131211;letter-spacing:0;margin:.72cqw 0 0;max-width:none;
}
#approach .approach{
  position:absolute;left:11.853%;right:11.37%;top:45.72%;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  margin:0;border:0;
}
#approach .step{
  position:relative;display:flex;flex-direction:column;min-width:0;
  aspect-ratio:475/460;
  background-position:50% 50%;background-repeat:no-repeat;background-size:100% 100%;
  padding:2.69cqw 1.5cqw 0 1.27cqw;
  border:0;
}
#approach .step:nth-child(1){background-image:url("../assets/approach-note-1.jpg")}
#approach .step:nth-child(2){background-image:url("../assets/approach-note-2.jpg")}
#approach .step:nth-child(3){background-image:url("../assets/approach-note-3.jpg")}
#approach .step:nth-child(4){background-image:url("../assets/approach-note-4.jpg")}
#approach .step:nth-child(5){background-image:url("../assets/approach-note-5.jpg")}
#approach .step:nth-child(6){background-image:url("../assets/approach-note-6.jpg")}
#approach .step .n{
  font-family:var(--serif);font-size:1.48cqw;line-height:1;font-weight:600;
  color:#8A5A2B;letter-spacing:.01em;margin:0 0 .67cqw;
}
#approach .step h4{
  font-family:var(--sans);font-size:1.19cqw;line-height:1.12;font-weight:700;
  letter-spacing:.015em;color:#16140F;margin:0;
}
#approach .step p{
  font-family:var(--sans);font-size:.889cqw;line-height:1.42;font-weight:400;
  color:#33302A;margin:.4cqw 0 0;overflow-wrap:break-word;
}
/* EN copy runs longer than the Chinese reference: keep it inside the note */
html[lang="en"] #approach .step p{font-size:.845cqw}

/* ---------- MY APPROACH responsive ---------- */
/* the fixed-ratio framed panel cannot hold this much type below ~1100px:
   drop the frame and let the notes reflow as ordinary paper cards */
@media(max-width:1099px){
  #approach.section.alt{padding:56px 0;background:var(--paper-2)}
  #approach .method-board{
    aspect-ratio:auto;max-width:var(--max);container-type:normal;
    background:none;padding:0 28px;
  }
  #approach .method-head{position:static;width:auto;margin-bottom:26px}
  #approach .method-head .eyebrow{
    font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kraft-deep);
  }
  #approach .method-head h2.title{font-size:clamp(1.9rem,4.6vw,2.6rem);margin:.5rem 0 0}
  #approach .approach{
    position:static;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  #approach .step{
    padding:26px 22px 30px;border-radius:10px;
    box-shadow:0 14px 30px -24px rgba(28,26,23,.55);
  }
  #approach .step .n{font-size:1.05rem;margin-bottom:.55rem}
  #approach .step h4{font-size:1.02rem;line-height:1.2}
  #approach .step p,html[lang="en"] #approach .step p{font-size:.82rem;line-height:1.55;margin-top:.45rem}
}
@media(max-width:680px){
  #approach .approach{grid-template-columns:1fr;gap:16px}
  #approach .step{min-height:0}
}

/* FEATURED WORK */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:2.4rem}
.feat-card{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .35s,box-shadow .35s;
}
.feat-card .img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9;transition:transform .6s,opacity .4s}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat-card:hover .img{transform:scale(1.05)}
.feat-card .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,26,23,.78),rgba(28,26,23,.05) 55%)}
.feat-card .body{position:relative;padding:30px;color:var(--paper)}
.feat-card .body .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--kraft)}
.feat-card .body h3{color:var(--paper);font-size:1.7rem}
.feat-card .body p{color:rgba(251,248,242,.82);font-size:.92rem}

/* CONTACT */
.contact{background:var(--ink);color:var(--paper);border-radius:0}
.contact .wrap{padding-top:90px;padding-bottom:90px}
.contact h2{color:var(--paper);font-size:clamp(2rem,5vw,3.4rem)}
.contact .lead{color:rgba(251,248,242,.75)}
.contact a.mail{color:var(--kraft);font-family:var(--serif);font-size:1.5rem;border-bottom:1px solid var(--kraft)}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{
  background:var(--ink);color:var(--paper);padding:54px 0 36px;position:relative;z-index:1;
}
footer.site .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
footer.site .f-brand{font-family:var(--serif);font-size:1.5rem}
footer.site a{color:rgba(251,248,242,.78);transition:color .2s}
footer.site a:hover{color:var(--kraft)}
footer.site .links{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.9rem}
footer.site .copy{margin-top:34px;font-size:.78rem;color:rgba(251,248,242,.5);border-top:1px solid rgba(251,248,242,.14);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer.site .social{display:flex;gap:1rem;font-size:.9rem}

/* =========================================================
   TORN PAPER DIVIDER
   ========================================================= */
.torn{position:relative;height:46px;background:var(--paper);z-index:1}
.torn svg{position:absolute;left:0;right:0;width:100%;height:46px;display:block}
.torn.flip{transform:scaleY(-1)}

/* =========================================================
   PAGE HEADER (sub pages)
   ========================================================= */
.page-head{padding:150px 0 40px;position:relative;z-index:1}
.page-head .eyebrow{margin-bottom:.6rem}
.page-head h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch}
.page-head .lead{margin-top:1rem}
.breadcrumb{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.4rem}
.breadcrumb a:hover{color:var(--kraft-deep)}

/* =========================================================
   CARDS / GRID helpers
   ========================================================= */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stack{display:flex;flex-direction:column;gap:22px}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2rem 0}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:left}
.stat .big{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--kraft-deep);line-height:1}
.stat .lbl{font-size:.86rem;color:var(--ink-soft);margin-top:.5rem}

/* evidence chip */
.chip{display:inline-flex;align-items:center;gap:.45em;font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;background:var(--kraft-tint);color:var(--kraft-deep);border:1px solid rgba(185,138,94,.4);border-radius:999px;padding:.3em .8em;margin:.18em .18em 0 0}
.chip b{font-weight:600}

/* quote / review card */
.quote{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--kraft);border-radius:10px;padding:20px 22px;font-size:.95rem}
.quote .meta{margin-top:.8rem;font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em}
.quote.neg{border-left-color:#c0694a}

/* process row (experience end-to-end) */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.proc .p{padding:22px 18px;border-right:1px solid var(--line);background:var(--paper-2)}
.proc .p:last-child{border-right:0}
.proc .p .n{font-family:var(--serif);color:var(--kraft-deep)}
.proc .p h4{font-size:1rem;margin:.3em 0}
.proc .p p{font-size:.8rem;color:var(--ink-soft);margin:0}

/* =========================================================
   CASE STUDY layout (side nav + content)
   ========================================================= */
.case-hero{padding:150px 0 30px;position:relative;z-index:1}
.case-hero .brand-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.case-hero .brand-row img{height:54px;mix-blend-mode:multiply}
.case-hero h1{font-size:clamp(2.6rem,7vw,5rem)}
.case-hero .lead{margin-top:1rem}
.case-layout{display:grid;grid-template-columns:230px 1fr;gap:54px;align-items:start;padding:40px 0 90px}
.side-nav{position:sticky;top:96px;align-self:start;border-left:1.5px solid var(--line);padding-left:18px}
.side-nav a{display:block;font-size:.86rem;color:var(--ink-soft);padding:.42em 0;border-bottom:1px solid transparent;transition:color .2s}
.side-nav a:hover,.side-nav a.active{color:var(--ink)}
.side-nav a.active{color:var(--kraft-deep);font-weight:600}
.side-nav .sn-num{font-family:var(--serif);color:var(--kraft-deep);margin-right:.5em}
.case-block{padding:30px 0;border-bottom:1px solid var(--line)}
.case-block:last-child{border-bottom:0}
.case-block h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.case-block .sub{color:var(--ink-faint);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8rem}
.case-block p{max-width:64ch}
.case-block img.inline{margin:1.4rem 0;border-radius:12px;border:1px solid var(--line)}

/* region matrix */
.matrix{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:1.4rem 0}
.matrix .cell{padding:16px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.84rem;background:var(--paper-2)}
.matrix .cell.h{background:var(--ink);color:var(--paper);font-weight:600;font-family:var(--sans)}
.matrix .cell.rh{background:var(--kraft-tint);font-weight:600}
.matrix .cell p{margin:.3em 0;font-size:.8rem;color:var(--ink-soft)}

/* value x trust */
.vt{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:1.4rem 0}
.vt .col{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--paper-2)}
.vt .col h4{font-size:1.1rem;color:var(--kraft-deep)}
.vt .col ul{margin:.6em 0 0;padding-left:1.1em}
.vt .col li{margin:.35em 0;font-size:.88rem;color:var(--ink-soft)}

/* creator roles grid */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.4rem 0}
.role{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--white)}
.role .tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kraft-deep)}
.role h4{font-size:1rem;margin:.2em 0}
.role p{font-size:.83rem;color:var(--ink-soft);margin:0}

/* chart bars */
.bars{display:flex;flex-direction:column;gap:14px;margin:1.4rem 0}
.bar-row{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:center}
.bar-row .name{font-size:.84rem;color:var(--ink-soft)}
.bar-track{height:14px;background:var(--paper-3);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--kraft),var(--kraft-deep));border-radius:999px;width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

/* =========================================================
   CASE STUDY — ROUND 1 fixes (pagination + evidence ratios)
   ========================================================= */
.case-pager{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:2.4rem 0 0;margin-top:2rem;border-top:1px solid var(--line)
}
.case-pager .btn.ghost{font-size:.92rem}
.case-pager .prev{margin-right:auto}
.case-pager .next{margin-left:auto}

/* Evidence layouts that preserve original screenshot proportions */
.evidence-wide{width:100%;margin:1.2rem 0}
.evidence-wide img.inline,
.evidence-pair img.inline{width:100%;margin:0}
.evidence-wide img.inline{max-height:min(72vh,900px);object-fit:contain}
.evidence-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:1.2rem}
.evidence-pair img.inline{height:100%;max-height:380px;object-fit:contain}
.img-link{display:block}
.caption{font-size:.75rem;color:var(--ink-faint);margin-top:.45rem;font-style:italic}
.img-link .caption::before{content:"↗ "}

/* Product images inside case cards */
.card-img{width:100%;max-height:200px;object-fit:contain;margin-top:.8rem;border-radius:8px;background:transparent}

/* Readable wide screenshots on smaller desktop */
@media(max-width:1080px){
  .evidence-pair{grid-template-columns:1fr}
  .evidence-pair img.inline{max-height:none}
}

/* =========================================================
   CONTENT PRACTICE
   ========================================================= */
.proj-card{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:28px 0;background:var(--paper-2)}
.proj-card .media{background:var(--paper-3);min-height:280px;background-size:cover;background-position:center}
.proj-card .body{padding:34px}
.proj-card.flip{grid-template-columns:1.1fr 1fr}
.proj-card.flip .media{order:2}
.proj-card .body h3{font-size:1.7rem}
.proj-card .tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft-deep);border:1px solid var(--kraft);border-radius:999px;padding:.3em .8em;margin-bottom:1rem}
.proj-card .kv{margin-top:1rem;font-size:.9rem}
.proj-card .kv b{color:var(--ink)}

/* Content Practice — media integrity & evidence figures.
   Scoped to body[data-page="content"] so other pages using .proj-card
   (background-image cover style) are unaffected. */
body[data-page="content"] .proj-card .media{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;min-height:300px}
body[data-page="content"] .proj-card .media.media-contain > img{max-width:100%;max-height:460px;width:auto;height:auto;border-radius:8px;box-shadow:var(--shadow)}
body[data-page="content"] .proj-card .media.media-duo{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px}
body[data-page="content"] .media-fig{margin:0;min-width:0}
body[data-page="content"] .media-fig img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line);background:var(--white)}
body[data-page="content"] .media-fig figcaption{font-size:.74rem;color:var(--ink-faint);font-style:italic;letter-spacing:.02em;line-height:1.45;margin-top:.45rem}
body[data-page="content"] .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start;margin-top:1.5rem}
@media(max-width:520px){
  body[data-page="content"] .proj-card .media.media-duo{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  body[data-page="content"] .shots{gap:12px}
}

/* =========================================================
   CREATIVE ARCHIVE (masonry + tape cursor)
   ========================================================= */
.archive-intro{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:2.4rem}
.archive-intro .c{padding:26px 18px;border-right:1px solid var(--line)}
.archive-intro .c:last-child{border-right:0}
.archive-intro .c h3{font-size:1.2rem}
.archive-intro .c p{font-size:.84rem;color:var(--ink-soft);margin:.4em 0 0}
.masonry{column-count:3;column-gap:18px;margin-top:2.4rem}
.m-item{break-inside:avoid;margin:0 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);position:relative;cursor:pointer}
.m-item img{width:100%;display:block;transition:transform .5s}
.m-item:hover img{transform:scale(1.04)}
.m-item .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,rgba(28,26,23,.72),transparent);color:var(--paper);font-size:.82rem;opacity:0;transition:opacity .3s}
.m-item:hover .cap{opacity:1}

/* Archive reconstruction — classified visual archive.
   Scoped to body[data-page="archive"] so other pages are unaffected.
   (.masonry/.m-item above remain for compatibility but are no longer used.) */
.arc-cat{display:flex;gap:24px;align-items:baseline;border-top:2px solid var(--ink);padding-top:20px;margin:70px 0 8px}
.arc-cat:first-of-type{margin-top:34px}
.arc-cat .n{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--kraft-deep)}
.arc-cat h2{font-size:clamp(1.55rem,3vw,2.2rem);margin:0}
.arc-cat .purpose{font-size:.85rem;color:var(--ink-soft);margin:.45em 0 0;max-width:56ch}
.arc-label{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kraft-deep);margin:30px 0 14px}
.arc-label::after{content:"";flex:1;height:1px;background:var(--line)}
.arc-grid{display:grid;gap:18px;align-items:start}
.collage-feature{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:30px;align-items:end;margin-bottom:4px}
.collage-grid{grid-template-columns:repeat(3,1fr)}
.single-feature{max-width:460px}
.wechat-grid{grid-template-columns:repeat(4,1fr)}
.zine-grid{grid-template-columns:1.15fr 1fr 1fr}
.moving-grid{grid-template-columns:3fr 2fr}
.ph-grid{grid-template-columns:repeat(6,1fr);gap:16px}
.ph-grid .L{grid-column:span 3}
.ph-grid .P,.ph-grid .T{grid-column:span 2}
.travel-feature{max-width:680px}
.arc-item{display:block;text-decoration:none;color:inherit;min-width:0}
.arc-item img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:var(--paper-2)}
.arc-item .cap2{display:block;font-size:.72rem;color:var(--ink-faint);font-style:italic;letter-spacing:.03em;margin-top:.5rem;line-height:1.4}
.arc-item:hover img{border-color:var(--kraft)}
.arc-item:focus-visible{outline:2px solid var(--kraft-deep);outline-offset:3px}
.collage-feature .feat img{max-height:560px;width:auto;max-width:100%}
@media(max-width:1080px){
  .wechat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .collage-feature{grid-template-columns:1fr;align-items:start}
  .collage-feature .feat{max-width:420px}
  .collage-grid,.zine-grid{grid-template-columns:1fr 1fr}
  .zine-grid .feat{grid-column:1/-1;max-width:420px}
  .moving-grid{grid-template-columns:1fr}
  .ph-grid{grid-template-columns:1fr 1fr}
  .ph-grid .L{grid-column:span 2}
  .ph-grid .P,.ph-grid .T{grid-column:span 1}
  .arc-cat{gap:16px;margin-top:52px}
}

/* tape cursor */
#tape{position:fixed;top:0;left:0;width:120px;height:54px;z-index:120;pointer-events:none;
  background:linear-gradient(135deg,rgba(185,138,94,.5),rgba(154,111,68,.62));
  border-left:2px dashed rgba(255,255,255,.5);border-right:2px dashed rgba(255,255,255,.5);
  transform:translate(-50%,-50%) rotate(-8deg);opacity:0;transition:opacity .3s;
  box-shadow:0 6px 18px -8px rgba(28,26,23,.5);display:flex;align-items:center;justify-content:center;overflow:hidden}
#tape .tp-img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
#tape .tp-txt{font-family:var(--serif);font-style:italic;color:var(--paper);font-size:.9rem}
body.tape-on #tape{opacity:1}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.about-photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.skills{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.4rem}
.skill{border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--paper-2)}
.skill .t{font-family:var(--serif);color:var(--kraft-deep);font-size:1.05rem}
.skill p{font-size:.84rem;color:var(--ink-soft);margin:.4em 0 0}

/* RESUME page */
.resume-frame{border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);overflow:hidden;margin-top:2rem}
.resume-frame iframe{width:100%;height:82vh;border:0}

/* =========================================================
   REVEAL animation
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  #intro{display:none!important}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .feat-grid,.grid-2,.grid-3,.vt,.proj-card,.proj-card.flip,.about-grid,.roles{grid-template-columns:1fr}
  .proj-card.flip .media{order:0}
  .stats,.grid-4{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:1fr 1fr}
  .matrix{grid-template-columns:1fr 1fr}
  .archive-intro{grid-template-columns:1fr 1fr}
  .masonry{column-count:2}
  .case-layout{grid-template-columns:1fr;gap:24px}
  .side-nav{position:relative;top:0;border-left:0;border-top:1px solid var(--line);padding-left:0;display:flex;flex-wrap:wrap;gap:8px}
  .side-nav a{border-bottom:0}
}
@media(max-width:620px){
  body{font-size:16px}
  .nav ul{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 28px;gap:.3rem;transform:translateY(-130%);transition:transform .35s;box-shadow:var(--shadow)}
  .nav ul.open{transform:none}
  .burger{display:flex}
  .stats,.grid-4,.proc{grid-template-columns:1fr}
  .masonry{column-count:1}
  .archive-intro{grid-template-columns:1fr}
  .matrix{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}

/* =========================================================
   EXPERIENCE PAGE — Editorial portfolio redesign
   ========================================================= */
.experience-page{padding-top:92px}
.experience-page section{padding:4.5rem 0}
.experience-page .exp-hero{padding-top:5rem;padding-bottom:4rem}

.exp-label{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--kraft-deep);margin-bottom:1rem
}
.exp-hero h1{
  font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:.6rem;max-width:16ch
}
.exp-meta{
  font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);margin-bottom:1.4rem;letter-spacing:.02em
}
.exp-lead{
  font-size:1.05rem;line-height:1.65;color:var(--ink);max-width:62ch;margin-bottom:2rem
}
.exp-hero-media{
  position:relative;max-width:76%;margin-bottom:1rem;cursor:zoom-in
}
.exp-hero-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--paper-2)
}
.exp-caption{
  font-size:.78rem;color:var(--ink-faint);margin:.55rem 0 0;font-style:italic
}
.exp-tags{
  display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem
}
.exp-tags span{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);padding:.35em .85em;border-radius:999px
}

.exp-sec-label{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--kraft-deep);margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)
}
.exp-section h3{font-family:var(--serif);font-size:1.35rem;margin:2rem 0 1rem}
.exp-section h3:first-child{margin-top:0}
.exp-sec-lead{
  font-size:1.02rem;line-height:1.6;color:var(--ink-soft);max-width:70ch;margin:-.6rem 0 2.2rem
}

/* Project overview grid */
.exp-grid{
  display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:3rem
}
.exp-col-side h2{font-size:1.6rem;margin-bottom:.5rem;line-height:1.15}
.exp-role{font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.25rem}
.exp-date{font-size:.9rem;color:var(--kraft-deep);margin-bottom:1.1rem}
.exp-position{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

.exp-duties{
  list-style:none;padding:0;margin:0 0 2.2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem 1.5rem
}
.exp-duties li{
  position:relative;padding-left:1.2rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)
}
.exp-duties li::before{
  content:"—";position:absolute;left:0;color:var(--kraft)
}

.exp-key-projects{
  display:grid;gap:1rem;margin-bottom:2.2rem
}
.exp-kp-item{
  display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--white)
}
.exp-kp-num{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--kraft-deep);line-height:1;min-width:2.2rem
}
.exp-kp-item b{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.2rem;color:var(--ink)}
.exp-kp-item p{font-size:.85rem;color:var(--ink-soft);margin:0}

/* Content portfolio */
.exp-main-case{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:2rem;align-items:start;margin-bottom:3rem
}
.exp-case-media{position:relative;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.exp-case-media video,.exp-subcase-media video{width:100%;display:block;aspect-ratio:9/16;object-fit:contain;background:#000}
.exp-badge{
  position:absolute;top:.8rem;left:.8rem;background:var(--ink);color:var(--paper);font-size:.65rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.35em .75em;border-radius:999px
}
.exp-case-info h3{font-size:1.8rem;margin-bottom:.7rem}
.exp-case-info p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-bottom:1.4rem}
.exp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.exp-metrics div b{display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.15rem}
.exp-metrics div span{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.exp-metrics.small{grid-template-columns:repeat(3,1fr);gap:.6rem}
.exp-metrics.small span{font-size:1.05rem}

.exp-secondary-cases{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:3rem
}
.exp-subcase{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.exp-subcase-media{position:relative}
.exp-subcase-info{padding:1.2rem}
.exp-subcase-info h4{font-size:1.15rem;margin-bottom:.5rem}
.exp-subcase-info p{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem}

.exp-aux-title{font-family:var(--serif);font-size:1.2rem;margin:0 0 1rem}
.exp-aux-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem
}
.exp-aux-card{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;transition:transform .25s
}
.exp-aux-card:hover{transform:translateY(-3px)}
.exp-aux-card img{width:100%;aspect-ratio:9/10;object-fit:cover}
.exp-aux-body{padding:.9rem}
.exp-aux-body h5{font-size:.9rem;margin-bottom:.35rem}
.exp-aux-body p{font-size:.72rem;color:var(--ink-faint);margin:0}

/* Official publication */
.exp-pub-main{
  margin-bottom:2rem;cursor:zoom-in
}
.exp-pub-main img{
  width:100%;border-radius:var(--r);background:var(--white);box-shadow:var(--shadow)
}
.exp-pub-caption{
  display:flex;align-items:baseline;gap:1rem;margin-top:.7rem;flex-wrap:wrap
}
.exp-pub-caption span{font-weight:600;font-size:.85rem}
.exp-pub-caption p{font-size:.78rem;color:var(--ink-faint);margin:0}
.exp-pub-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem
}
.exp-pub-card{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in
}
.exp-pub-num{
  font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--kraft-deep);padding:.8rem .8rem 0
}
.exp-pub-card img{width:100%;padding:.8rem;background:var(--white);object-fit:contain;max-height:260px}
.exp-pub-body{padding:0 1rem 1rem}
.exp-pub-body h5{font-size:.95rem;margin-bottom:.3rem}
.exp-pub-body p{font-size:.78rem;color:var(--ink-soft);margin:0}

/* Performance review */
.exp-review-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,340px);gap:2.5rem
}
.exp-chart{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2.5rem}
.exp-bar-row{
  display:grid;grid-template-columns:minmax(90px,160px) 1fr auto;align-items:center;gap:.8rem;font-size:.85rem
}
.exp-bar-label{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-bar-track{height:10px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.exp-bar{height:100%;background:var(--kraft);border-radius:999px}
.exp-bar-value{font-family:var(--serif);font-weight:600;color:var(--ink);min-width:3.2rem;text-align:right}
.exp-mini-charts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem
}
.exp-mini-chart{background:var(--white);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow)}
.exp-mini-chart h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--kraft-deep);margin-bottom:.8rem}

.exp-observations{background:var(--white);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow)}
.exp-observations h4{font-size:1rem;margin-bottom:.8rem}
.exp-observations ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.exp-observations li{position:relative;padding-left:1.1rem;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}
.exp-observations li::before{content:"→";position:absolute;left:0;color:var(--kraft)}

.exp-evidence-card{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;position:sticky;top:100px
}
.exp-evidence-card img{width:100%;display:block}
.exp-evidence-card div{padding:1rem}
.exp-evidence-card h5{font-size:.9rem;margin-bottom:.4rem}
.exp-evidence-card p{font-size:.78rem;color:var(--ink-soft);margin:0}

/* Content production */
.exp-process-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem
}
.exp-process-step{
  background:var(--white);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.8rem
}
.exp-step-num{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--kraft-deep)
}
.exp-process-step h4{font-size:1.05rem;margin-bottom:.3rem}
.exp-process-step p{font-size:.85rem;color:var(--ink-soft);margin:0}
.exp-step-media{margin-top:auto;padding-top:1rem}
.exp-step-media img{width:100%;border-radius:calc(var(--r) - 4px);aspect-ratio:16/10;object-fit:cover;background:var(--paper-2);cursor:zoom-in}

.exp-step-featured{grid-column:span 2}
.exp-step-photos{
  display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-top:1rem
}
.exp-step-figure{margin:0}
.exp-step-figure img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 4px);cursor:zoom-in}
.exp-step-figure-large{grid-row:span 2}
.exp-step-figure figcaption{font-size:.72rem;color:var(--ink-faint);margin-top:.4rem;font-style:italic}

/* Beyond short-form */
.exp-beyond-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem
}
.exp-beyond-item{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.exp-beyond-tag{
  display:block;font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kraft-deep);padding:.8rem 1rem;border-bottom:1px solid var(--line)
}
.exp-beyond-media{cursor:zoom-in}
.exp-beyond-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.exp-beyond-item h4{font-size:.95rem;padding:1rem;margin:0;line-height:1.4}

/* Reflection */
.exp-reflection-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:2rem
}
.exp-reflection-grid article h3{font-size:1.15rem;margin-bottom:.7rem}
.exp-reflection-grid article p{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.exp-reflection-foot{
  border-top:1px solid var(--line);padding-top:1.8rem
}
.exp-reflection-foot p{
  font-size:1.05rem;line-height:1.65;max-width:72ch;color:var(--ink)
}

/* Lightbox */
.exp-lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(28,26,23,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s
}
.exp-lightbox.active{opacity:1;pointer-events:auto}
.exp-lightbox-content{
  max-width:92vw;max-height:88vh;padding:24px
}
.exp-lightbox-content img{
  max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.35)
}
.exp-lightbox-close{
  position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--paper);
  font-size:2rem;line-height:1;cursor:pointer;padding:.2rem .5rem
}

/* Experience responsive */
@media(max-width:980px){
  .exp-grid{grid-template-columns:1fr;gap:2rem}
  .exp-hero-media{max-width:100%}
  .exp-main-case{grid-template-columns:1fr}
  .exp-secondary-cases{grid-template-columns:1fr}
  .exp-aux-grid{grid-template-columns:repeat(2,1fr)}
  .exp-review-grid{grid-template-columns:1fr}
  .exp-evidence-card{position:static}
  .exp-process-grid{grid-template-columns:1fr}
  .exp-step-featured{grid-column:span 1}
  .exp-step-photos{grid-template-columns:1fr 1fr}
  .exp-step-figure-large{grid-row:span 1}
  .exp-beyond-grid{grid-template-columns:1fr}
  .exp-reflection-grid{grid-template-columns:1fr}
  .exp-mini-charts{grid-template-columns:1fr}
  .exp-duties{grid-template-columns:1fr}
}
@media(max-width:620px){
  .experience-page{padding-top:70px}
  .experience-page section{padding:2.8rem 0}
  .exp-hero{padding-top:3.5rem;padding-bottom:3rem}
  .exp-hero h1{font-size:2.1rem}
  .exp-lead{font-size:1rem}
  .exp-aux-grid{grid-template-columns:1fr}
  .exp-pub-grid{grid-template-columns:1fr}
  .exp-metrics{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .exp-metrics div span{font-size:1.1rem}
  .exp-bar-row{grid-template-columns:minmax(70px,110px) 1fr auto;gap:.5rem;font-size:.75rem}
  .exp-step-photos{grid-template-columns:1fr}
}


/* =========================================================
   HOME HERO — Ticket Collage (target-en / target-ch)
   Kraft backdrop · green perforated ticket · swirl art panel
   + cream text panel (headline / tagline / mushroom CTA).
   Scoped to .home-hero only.
   ========================================================= */
.home-hero{
  position:relative;z-index:1;
  min-height:100svh;
  padding:132px 28px 72px;
  display:flex;align-items:center;justify-content:center;
  background:#F5E7CA;
}
.ticket{
  --tk-green:#4E7242;
  --tk-cream:#F7E2C3;
  --tk-ink:#502D26;
  --tk-notch:6px;                 /* edge scallop radius */
  --tk-punch:21px;                /* side punch-hole radius */
  width:min(1120px,100%);
  aspect-ratio:1.9/1;
  max-height:calc(100svh - 214px);
  background:var(--tk-green);
  border-radius:12px;
  padding:5.4% 7.2%;
  display:grid;grid-template-columns:57.5fr 42.5fr;
  box-shadow:0 34px 60px -38px rgba(74,52,24,.55), 0 12px 26px -20px rgba(74,52,24,.45);
  /* perforated ticket edges: scallops along the border + punch holes */
  -webkit-mask:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--tk-notch) at 50% 0,    #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 0 / calc(var(--tk-notch)*3.6) 100% repeat-x,
    radial-gradient(circle var(--tk-notch) at 50% 100%, #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 100% / calc(var(--tk-notch)*3.6) 100% repeat-x,
    radial-gradient(circle var(--tk-notch) at 0 50%,    #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 0 / 100% calc(var(--tk-notch)*3.6) repeat-y,
    radial-gradient(circle var(--tk-notch) at 100% 50%, #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 100% 0 / 100% calc(var(--tk-notch)*3.6) repeat-y,
    radial-gradient(circle var(--tk-punch) at 0 50%,    #0000 calc(var(--tk-punch) - .5px), #000 var(--tk-punch)) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle var(--tk-punch) at 100% 50%, #0000 calc(var(--tk-punch) - .5px), #000 var(--tk-punch)) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--tk-notch) at 50% 0,    #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 0 / calc(var(--tk-notch)*3.6) 100% repeat-x,
    radial-gradient(circle var(--tk-notch) at 50% 100%, #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 100% / calc(var(--tk-notch)*3.6) 100% repeat-x,
    radial-gradient(circle var(--tk-notch) at 0 50%,    #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 0 0 / 100% calc(var(--tk-notch)*3.6) repeat-y,
    radial-gradient(circle var(--tk-notch) at 100% 50%, #0000 calc(var(--tk-notch) - .5px), #000 var(--tk-notch)) 100% 0 / 100% calc(var(--tk-notch)*3.6) repeat-y,
    radial-gradient(circle var(--tk-punch) at 0 50%,    #0000 calc(var(--tk-punch) - .5px), #000 var(--tk-punch)) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle var(--tk-punch) at 100% 50%, #0000 calc(var(--tk-punch) - .5px), #000 var(--tk-punch)) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect;
}
.ticket-art{overflow:hidden;border-radius:3px}
.ticket-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.ticket-panel{
  background:var(--tk-cream);
  border-radius:3px;
  padding:clamp(20px,8.5%,44px) clamp(20px,9%,46px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.ticket-panel h1{
  font-size:clamp(1.85rem,3.05vw,3rem);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--tk-ink);
  margin:0;
}
.ticket-tagline{
  margin:1.5em 0 0;
  font-size:clamp(.92rem,1.1vw,1.06rem);
  line-height:1.6;color:#43291D;
}
html[lang="zh-CN"] .ticket-tagline{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.35vw,1.28rem);
  line-height:1.75;
}
.ticket-mushroom{
  margin-top:auto;align-self:center;
  width:clamp(112px,44%,172px);
  transition:transform .3s ease;
}
.ticket-mushroom img{width:100%}
.ticket-mushroom:hover{transform:rotate(-4deg) scale(1.05)}

/* ---------- HERO responsive ---------- */
@media(max-width:980px){
  .home-hero{padding:118px 22px 60px}
  .ticket{
    width:min(600px,100%);
    aspect-ratio:auto;max-height:none;
    grid-template-columns:1fr;
    padding:5.5%;
  }
  .ticket-art{height:clamp(200px,44vw,320px)}
  .ticket-panel{padding:26px 26px 22px}
  .ticket-panel h1{font-size:clamp(2rem,6.4vw,2.7rem)}
  .ticket-tagline{font-size:.95rem;max-width:30ch}
  html[lang="zh-CN"] .ticket-tagline{font-size:1.08rem}
  .ticket-mushroom{width:132px;margin-top:20px}
}
@media(max-width:620px){
  .home-hero{padding:104px 14px 48px}
  .ticket{--tk-notch:4.5px;--tk-punch:15px;padding:4.5%;border-radius:10px}
  .ticket-art{height:clamp(170px,42vw,240px)}
  .ticket-panel{padding:22px 20px 18px}
  .ticket-panel h1{font-size:clamp(1.75rem,8.4vw,2.2rem)}
  .ticket-mushroom{width:118px}
}

/* =========================================================
   BRUSH-TRAIL CURSOR (home hero, canvas)
   Fixed overlay · never intercepts clicks · fades in <1.2s
   ========================================================= */
#trail{position:fixed;inset:0;z-index:55;pointer-events:none}