/* =========================================================
   Lesscasso — 毕减索
   Aesthetic: refined editorial gallery. Museum-wall calm,
   oxblood (human blood / cinnabar) accents, dark immersion.
   Let the paintings speak.
   ========================================================= */

:root{
  --paper:#ECE6DA;          /* warm museum wall          */
  --paper-deep:#E3DBCB;     /* recessed panels           */
  --ink:#1A1611;            /* near-black warm charcoal   */
  --ink-soft:#4C463A;       /* secondary text            */
  --stone:#928A78;          /* tertiary / captions        */
  --ox:#7E2C20;             /* oxblood — the human mark   */
  --ox-deep:#561B12;
  --void:#16120C;           /* dark immersive blocks      */
  --paper-on-void:#E9E3D6;
  --line:rgba(26,22,17,.16);
  --line-soft:rgba(26,22,17,.09);
  --shadow:38px 46px 90px -46px rgba(20,16,11,.62);
  --shadow-sm:18px 24px 50px -28px rgba(20,16,11,.5);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --cn:'Noto Serif SC','Songti SC',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;

  --pad:clamp(1.35rem,5vw,6rem);
  --maxw:1400px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--cn);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

::selection{ background:var(--ox); color:var(--paper); }

/* film grain ------------------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ox{ color:var(--ox); }
.u{ box-shadow:inset 0 -.42em 0 rgba(126,44,32,.16); }

/* =================== NAV =================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .5s var(--ease), border-color .5s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(1.1rem,2.4vw,1.8rem) var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav--scrolled{
  background:rgba(236,230,218,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line-soft);
}
.nav__logo{ display:flex; align-items:baseline; gap:.6rem; }
.nav__logo-mark{
  font-family:var(--serif); font-weight:600; font-size:1.4rem;
  letter-spacing:-.01em; line-height:1;
}
.nav__logo-cn{ font-family:var(--cn); font-weight:500; font-size:.82rem; letter-spacing:.32em; color:var(--ink-soft); }
.nav__links{ display:flex; gap:clamp(1.1rem,2.4vw,2.6rem); }
.nav__links a{
  font-family:var(--cn); font-weight:400; font-size:.9rem; letter-spacing:.14em;
  color:var(--ink-soft); position:relative; padding-bottom:.25rem;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ox); transition:width .42s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

/* =================== HERO =================== */
.hero{
  position:relative; min-height:100svh;
  padding:clamp(7rem,13vh,11rem) var(--pad) clamp(3rem,8vh,5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.hero__grid{
  max-width:var(--maxw); width:100%; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(2rem,5vw,5rem);
}
.hero__kicker{
  font-family:var(--sans); font-weight:500; font-size:.78rem;
  letter-spacing:.42em; color:var(--ox); margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
.hero__title{
  font-family:var(--cn); font-weight:900; line-height:1.04;
  font-size:clamp(2.9rem,7.4vw,6.3rem); letter-spacing:-.01em;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.hero__title span{ display:block; }
.hero__title em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--ox);
}
.hero__sub{
  font-weight:300; font-size:clamp(1.02rem,1.5vw,1.22rem);
  line-height:1.85; color:var(--ink-soft); max-width:30ch;
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.hero__cta{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--sans); font-weight:500; letter-spacing:.22em;
  font-size:.82rem; text-transform:uppercase;
}
.hero__cta-line{ width:3.4rem; height:1px; background:var(--ink); transition:width .45s var(--ease); }
.hero__cta:hover .hero__cta-line{ width:5.2rem; background:var(--ox); }

.hero__art{ position:relative; justify-self:end; width:100%; max-width:440px; }
.hero__art-frame{
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:1/1.46;
}
.hero__art-frame img{ width:100%; height:100%; object-fit:cover; }
.hero__art-cap{
  margin-top:1.1rem; font-family:var(--cn); font-weight:300;
  font-size:.84rem; letter-spacing:.06em; color:var(--stone); text-align:right;
}
/* lamp: painting "lights up" */
.lamp img{ animation:lamp 1.9s var(--ease) .5s both; }
@keyframes lamp{
  0%{ opacity:0; filter:brightness(.25) contrast(1.1); transform:scale(1.06); }
  100%{ opacity:1; filter:brightness(1) contrast(1); transform:scale(1); }
}

.hero__scroll{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); }
.hero__scroll span{ display:block; width:1px; height:54px; background:linear-gradient(var(--ink),transparent); animation:scrolln 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes scrolln{ 0%{ transform:scaleY(0); } 35%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* hero load stagger */
.load{ opacity:0; transform:translateY(26px); animation:load 1s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes load{ to{ opacity:1; transform:none; } }

/* =================== MANIFESTO (dark) =================== */
.manifesto{
  background:var(--void); color:var(--paper-on-void);
  padding:clamp(6rem,16vh,11rem) var(--pad);
  text-align:center; position:relative;
}
.manifesto__eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.76rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--stone);
  margin-bottom:clamp(2.2rem,5vw,3.4rem);
}
.manifesto__text{
  font-family:var(--cn); font-weight:300;
  font-size:clamp(1.45rem,3.6vw,2.7rem); line-height:1.75;
  max-width:20ch; margin:0 auto; letter-spacing:.01em;
}
.manifesto__text .ox{ color:#C8553D; }
.manifesto__text em{ font-family:var(--serif); font-style:italic; color:#D9B8A0; }
.manifesto__text .u{ box-shadow:inset 0 -.4em 0 rgba(200,85,61,.22); }

/* =================== SECTION HEAD =================== */
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(3rem,6vw,5rem); }
.sec-head--center{ text-align:center; }
.sec-head__title{
  font-family:var(--cn); font-weight:600; font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:.02em; line-height:1.1;
}
.sec-head__note{ margin-top:1rem; color:var(--ink-soft); font-weight:300; font-size:1.05rem; }

/* =================== WORKS =================== */
.works{ padding:clamp(5rem,12vh,9rem) var(--pad); }
.works__list{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(2.4rem,5vw,5rem) clamp(1.5rem,4vw,4rem);
}
.work{ display:block; }
.work--lg{ grid-column:1 / 8; }
.work--sm{ grid-column:8 / 13; align-self:center; }
.work--sm.work--offset{ grid-column:8 / 13; }
.work--lg + .work--sm{ }
.work--offset{ margin-top:0; }

.work__img-wrap{ position:relative; overflow:hidden; background:var(--paper-deep); }
.work__img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1/1.28;
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:saturate(.96);
}
.work--lg .work__img{ aspect-ratio:1/1.18; }
.work:hover .work__img{ transform:scale(1.035); filter:saturate(1.05); }

.work__status{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--sans); font-weight:500; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.42rem .8rem; background:rgba(236,230,218,.92);
  backdrop-filter:blur(6px); color:var(--ink);
}
.work__status--avail{ color:var(--ox); }
.work__status--sold{ color:var(--stone); }
.work__status--commission{ color:var(--ink); }

.work__meta{ padding-top:1.5rem; }
.work__no{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--stone); }
.work__title{
  font-family:var(--cn); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.3; margin:.4rem 0 .7rem; transition:color .35s;
}
.work:hover .work__title{ color:var(--ox); }
.work__spec{ font-size:.86rem; color:var(--stone); letter-spacing:.04em; font-weight:300; }
.work__hook{
  margin-top:1rem; font-family:var(--serif); font-style:italic;
  font-size:1.06rem; color:var(--ink-soft); line-height:1.6;
}

/* =================== ABOUT =================== */
.about{
  background:var(--paper-deep);
  padding:clamp(5rem,12vh,9rem) var(--pad);
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.about__portrait{ position:relative; max-width:420px; box-shadow:var(--shadow-sm); }
.about__portrait img{ width:100%; aspect-ratio:1/1.3; object-fit:cover; }
.about__sig{
  position:absolute; bottom:-.7em; right:1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem); color:var(--ox);
}
.about__eyebrow{ font-family:var(--sans); font-weight:500; font-size:.76rem; letter-spacing:.4em; text-transform:uppercase; color:var(--stone); margin-bottom:1.4rem; }
.about__name{ font-family:var(--cn); font-weight:600; font-size:clamp(2rem,4vw,2.9rem); display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.about__name-en{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:.5em; color:var(--stone); }
.about__prose p{ font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.95; color:var(--ink-soft); margin-bottom:1.1rem; max-width:46ch; }
.about__quote{
  font-family:var(--serif)!important; font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2vw,1.6rem)!important; color:var(--ink)!important;
  line-height:1.5!important; margin-top:2rem!important; padding-left:1.4rem;
  border-left:2px solid var(--ox);
}

/* =================== COLLECT =================== */
.collect{ padding:clamp(5rem,12vh,9rem) var(--pad); }
.collect__cols{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.6rem);
}
.collect__card{
  border:1px solid var(--line); padding:clamp(2rem,4vw,3.4rem);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.collect__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent; }
.collect__card--accent{ background:var(--void); color:var(--paper-on-void); border-color:transparent; }
.collect__num{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--stone); margin-bottom:1.4rem; }
.collect__card--accent .collect__num{ color:#C8553D; }
.collect__title{ font-family:var(--cn); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:1.1rem; }
.collect__desc{ font-weight:300; font-size:1rem; line-height:1.85; color:var(--ink-soft); margin-bottom:2rem; }
.collect__card--accent .collect__desc{ color:#BDB4A4; }

.btn{
  font-family:var(--sans); font-weight:500; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 1.8rem; border:1px solid var(--ink);
  transition:background .4s var(--ease), color .4s, border-color .4s; margin-top:auto;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--solid{ background:#C8553D; border-color:#C8553D; color:var(--void); }
.btn--solid:hover{ background:var(--paper-on-void); border-color:var(--paper-on-void); color:var(--void); }

/* =================== FOOTER =================== */
.site-footer{ background:var(--void); color:var(--paper-on-void); padding:clamp(3.5rem,8vw,5.5rem) var(--pad) 2.2rem; }
.site-footer__top{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; padding-bottom:clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid rgba(233,227,214,.12); }
.site-footer__logo{ font-family:var(--serif); font-weight:600; font-size:2rem; }
.site-footer__cn{ display:block; margin-top:.6rem; font-weight:300; font-size:.9rem; letter-spacing:.2em; color:var(--stone); }
.site-footer__links{ display:flex; gap:clamp(1.2rem,2.5vw,2.2rem); flex-wrap:wrap; }
.site-footer__links a{ font-size:.88rem; letter-spacing:.1em; color:var(--paper-on-void); opacity:.72; transition:opacity .3s,color .3s; }
.site-footer__links a:hover{ opacity:1; color:#C8553D; }
.site-footer__bar{ max-width:var(--maxw); margin:2.2rem auto 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-footer__claim,.site-footer__copy{ font-size:.8rem; letter-spacing:.08em; color:var(--stone); }

/* =================== STORY PAGE =================== */
.story{ padding:clamp(7rem,12vh,10rem) var(--pad) 0; }
.story__back{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.story__back:hover{ color:var(--ox); }
.story__back span:first-child{ transition:transform .4s var(--ease); }
.story__back:hover span:first-child{ transform:translateX(-6px); }

.story__stage{ max-width:1180px; margin:0 auto; }
.story__hero{ position:relative; box-shadow:var(--shadow); }
.story__hero img{ width:100%; max-height:84svh; object-fit:contain; background:var(--void); }

.story__head{ max-width:760px; margin:clamp(3rem,6vw,5rem) auto clamp(2rem,4vw,3rem); text-align:center; }
.story__no{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ox); }
.story__title{ font-family:var(--cn); font-weight:600; font-size:clamp(2rem,5vw,3.6rem); line-height:1.18; margin:.8rem 0 1.4rem; }
.story__spec{ font-size:.92rem; letter-spacing:.06em; color:var(--stone); }
.story__spec span{ margin:0 .55rem; opacity:.5; }

.story__body{ max-width:620px; margin:0 auto; }
.story__lead{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.6; color:var(--ink); text-align:center; padding:clamp(2rem,4vw,3rem) 0; }
.story__body p{ font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:2; color:var(--ink-soft); margin-bottom:1.5rem; font-weight:300; }
.story__pull{ font-family:var(--cn); font-weight:500; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.55; color:var(--ink); text-align:center; margin:clamp(2.5rem,5vw,3.5rem) 0; padding:0 1rem; }
.story__pull .ox{ font-style:normal; }

.story__noai{ max-width:620px; margin:clamp(3rem,6vw,4.5rem) auto 0; padding:1.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.story__noai p{ font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }
.story__noai .ox{ font-weight:600; }

.story__cta{ max-width:620px; margin:clamp(3rem,6vw,4rem) auto clamp(5rem,10vh,7rem); text-align:center; }
.story__cta-price{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink); margin-bottom:1.6rem; }
.story__cta .btn{ display:inline-block; }

.story__next{ background:var(--paper-deep); padding:clamp(3rem,6vw,4.5rem) var(--pad); text-align:center; }
.story__next-label{ font-family:var(--sans); font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--stone); }
.story__next-title{ font-family:var(--cn); font-weight:500; font-size:clamp(1.5rem,3vw,2.3rem); margin-top:.9rem; transition:color .35s; }
.story__next:hover .story__next-title{ color:var(--ox); }

/* =================== REVEAL =================== */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .load,.reveal{ opacity:1!important; transform:none!important; }
}

/* =================== BILINGUAL =================== */
.nav__lang{
  font-family:var(--sans); font-weight:500; font-size:.8rem;
  letter-spacing:.16em; color:var(--ink-soft);
  border:1px solid var(--line); padding:.4rem .8rem; line-height:1;
  transition:border-color .35s var(--ease), color .35s, background .35s;
}
.nav__lang:hover{ border-color:var(--ink); color:var(--paper); background:var(--ink); }
.nav__lang::after{ display:none!important; }

/* English: let the Latin serif carry the visual weight */
.lang-en .hero__title{ font-family:var(--serif); font-weight:900; font-style:normal; letter-spacing:-.025em; line-height:1.02; font-size:clamp(2.7rem,6.8vw,5.9rem); }
.lang-en .hero__title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ox); }
.lang-en .hero__sub{ font-family:var(--serif); font-weight:300; max-width:34ch; }
.lang-en .manifesto__text{ font-family:var(--serif); font-weight:300; max-width:26ch; }
.lang-en .work__hook,
.lang-en .about__prose p,
.lang-en .collect__desc,
.lang-en .story__body p,
.lang-en .story__lead{ font-family:var(--serif); }
.lang-en .sec-head__title,
.lang-en .about__name,
.lang-en .collect__title,
.lang-en .work__title,
.lang-en .story__title{ font-family:var(--serif); font-weight:600; letter-spacing:-.012em; }
.lang-en .about__name-en{ font-family:var(--cn); font-style:normal; }
.hero__zh-sub{ font-family:var(--cn); font-weight:300; font-size:.92rem; letter-spacing:.16em; color:var(--stone); margin-top:1rem; }

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  .about__portrait{ margin:0 auto; }
}
@media (max-width:860px){
  .nav__links{ gap:1.1rem; }
  .nav__links a{ font-size:.8rem; }
  .nav__logo-cn{ display:none; }
  .hero{ min-height:auto; padding-top:8rem; }
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__art{ justify-self:center; max-width:340px; order:-1; }
  .hero__sub{ max-width:none; }
  .hero__scroll{ display:none; }
  .works__list{ grid-template-columns:1fr; gap:3.5rem; }
  .work--lg,.work--sm,.work--sm.work--offset{ grid-column:1 / -1; }
  .collect__cols{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .nav__links{ display:none; }
  .hero__title{ font-size:clamp(2.6rem,12vw,3.4rem); }
  .site-footer__top{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
}