/* ============================================================
   First Person Facts — Cubist / Modern-Art design system
   Shared stylesheet for all pages
   ============================================================ */
:root{
  --ink:#181613;
  --cream:#f3ead6;
  --paper:#faf4e6;
  --blue:#254a9c;      /* 群青 / blue period */
  --ochre:#d9822b;     /* 赭石橙 */
  --yellow:#eec03b;    /* 铬黄 */
  --red:#c33127;       /* 朱红 */
  --teal:#2c8b83;      /* 呼应插画的青 */
  --violet:#7b4fb0;    /* 脑洞单本 */
  --disp:"Fraunces",serif;
  --cn:"Noto Serif SC","Fraunces",serif;
  --cnbody:"Noto Sans SC",sans-serif;
  --mono:"Space Grotesk",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--cnbody);line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(var(--ink) 0.6px, transparent 0.6px);
  background-size:22px 22px;background-position:0 0;
}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:3px solid var(--ink)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-0.5px;display:flex;align-items:center;gap:12px}
.brand .fp{background:var(--blue);color:var(--paper);padding:2px 8px;transform:rotate(-3deg);display:inline-block}
.navlinks{display:flex;gap:34px;font-family:var(--mono);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px}
.navlinks a{position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:3px;background:var(--red);transition:width .25s}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.navlinks a.active{color:var(--red)}

/* ---------- decorative shapes ---------- */
.shape{position:absolute;z-index:0;pointer-events:none}
.dot{border-radius:50%}
.tri{width:0;height:0}
.line-art{position:absolute;z-index:1;opacity:.9}

/* ---------- HERO (home) ---------- */
header{position:relative;padding:70px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:30px;align-items:center;position:relative;z-index:2}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--blue);font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:44px;height:3px;background:var(--red);display:inline-block}
h1.title{font-family:var(--cn);font-weight:900;font-size:clamp(46px,7vw,104px);line-height:0.95;letter-spacing:-1px}
h1.title .en{font-family:var(--disp);display:block;font-size:clamp(30px,4vw,58px);font-style:italic;font-weight:600;color:var(--ochre);margin-bottom:6px}
h1.title em{font-style:normal;background:var(--yellow);padding:0 10px;transform:rotate(-2deg);display:inline-block;box-shadow:6px 6px 0 var(--ink)}
h1.title .red{color:var(--red)}
.lead{font-family:var(--cnbody);font-size:19px;max-width:440px;margin:30px 0 34px;color:#3a352d}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;padding:16px 28px;transition:transform .2s, box-shadow .2s;box-shadow:6px 6px 0 var(--red)}
.cta:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--red)}
.cta.blue{box-shadow:6px 6px 0 var(--blue)}
.cta.blue:hover{box-shadow:9px 9px 0 var(--blue)}

.hero-art{position:relative}
.hero-art .frame{position:relative;aspect-ratio:4/3;border:4px solid var(--ink);background:var(--blue);clip-path:polygon(0 8%,92% 0,100% 88%,10% 100%)}
.hero-art .frame img{width:100%;height:100%;object-fit:cover}
.hero-art .blk{position:absolute;z-index:-1}
.badge{position:absolute;right:-16px;top:-30px;width:134px;height:134px;z-index:5;transform:rotate(8deg);filter:drop-shadow(3px 3px 0 rgba(24,22,19,.4))}
.badge svg{width:100%;height:100%;display:block}

/* ---------- page hero (sub pages) ---------- */
.page-hero{position:relative;padding:66px 0 50px;overflow:hidden;border-bottom:3px solid var(--ink)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-family:var(--cn);font-weight:900;font-size:clamp(40px,6vw,86px);line-height:0.96;letter-spacing:-1px}
.page-hero h1 .en{font-family:var(--disp);font-style:italic;font-weight:600;color:var(--ochre);font-size:0.5em;display:block;margin-bottom:4px}
.page-hero p{max-width:520px;margin-top:22px;font-size:18px;color:#3a352d}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--ink);color:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:14px 0;margin:30px 0}
.marquee .track{display:flex;gap:40px;white-space:nowrap;font-family:var(--disp);font-style:italic;font-size:26px;font-weight:600;animation:scroll 24s linear infinite;will-change:transform}
.marquee .track span{display:flex;align-items:center;gap:40px}
.marquee .track b{color:var(--yellow);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTION heading ---------- */
section{position:relative;padding:80px 0;z-index:2}
.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:3px;font-size:13px;font-weight:700;color:var(--red);margin-bottom:14px}
h2{font-family:var(--cn);font-weight:900;font-size:clamp(34px,4.5vw,60px);line-height:1;letter-spacing:-0.5px;margin-bottom:8px}
h2 .num{font-family:var(--disp);font-style:italic;color:var(--ochre);font-weight:600}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:40px}
.pull{font-family:var(--cn);font-weight:700;font-size:clamp(24px,3vw,38px);line-height:1.35}
.pull mark{background:transparent;color:var(--blue);position:relative}
.pull mark::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:10px;background:var(--yellow);z-index:-1;transform:skewX(-12deg)}
.about-body p{font-size:17px;margin-bottom:18px;color:#3a352d}
.vals{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chip{font-family:var(--mono);font-size:13px;font-weight:500;padding:8px 16px;border:2px solid var(--ink);border-radius:40px}
.chip:nth-child(3n){background:var(--blue);color:var(--paper);border-color:var(--blue)}
.chip:nth-child(3n+1){background:var(--ochre);color:var(--paper);border-color:var(--ochre)}

/* BOOKS (home 3-up) */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:50px}
.book{position:relative}
.book .cov{border:4px solid var(--ink);aspect-ratio:2/3;overflow:hidden;background:var(--cream);transition:transform .3s}
.book .cov img{width:100%;height:100%;object-fit:cover}
.book:nth-child(1){transform:rotate(-2.5deg)}
.book:nth-child(2){transform:translateY(-24px) rotate(1.5deg)}
.book:nth-child(3){transform:rotate(2deg)}
.book:hover .cov{transform:scale(1.02) rotate(0deg)}
.book .plate{position:absolute;left:14px;top:-16px;background:var(--red);color:var(--paper);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;padding:5px 12px;transform:rotate(-3deg);z-index:3}
.book h3{font-family:var(--cn);font-weight:700;font-size:22px;margin-top:18px}
.book p{font-size:14px;color:#5b554a;font-family:var(--mono)}
.book:nth-child(2) .plate{background:var(--blue)}
.book:nth-child(3) .plate{background:var(--teal)}

/* GALLERY (works page) */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:50px;margin-top:50px}
.gcard{display:grid;grid-template-columns:0.8fr 1.2fr;gap:26px;align-items:center;border:3px solid var(--ink);background:var(--paper);padding:24px;position:relative}
.gcard:nth-child(even){grid-template-columns:1.2fr 0.8fr}
.gcard:nth-child(even) .gcov{order:2}
.gcov{border:4px solid var(--ink);aspect-ratio:2/3;overflow:hidden;background:var(--cream)}
.gcov img{width:100%;height:100%;object-fit:cover}
.gcard .tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--paper);background:var(--blue);display:inline-block;padding:4px 10px;margin-bottom:10px}
.gcard:nth-child(3n) .tag{background:var(--red)}
.gcard:nth-child(3n+1) .tag{background:var(--teal)}
.gcard h3{font-family:var(--cn);font-weight:900;font-size:26px;line-height:1.1}
.gcard .sub{font-family:var(--disp);font-style:italic;color:var(--ochre);font-size:16px;margin:2px 0 12px}
.gcard .desc{font-size:15px;color:#4a453b}

/* MISSION band */
.band{background:var(--blue);color:var(--paper);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);position:relative;overflow:hidden}
.band .wrap{padding:80px 32px;position:relative;z-index:2}
.band h2{color:var(--paper)}
.band h2 .num{color:var(--yellow)}
.band .big{font-family:var(--cn);font-weight:900;font-size:clamp(30px,4.6vw,64px);line-height:1.05;max-width:900px;margin-top:20px}
.band .big span{color:var(--yellow)}
.band .sun{position:absolute;right:-60px;top:-60px;width:280px;height:280px;background:var(--yellow);border-radius:50%;opacity:.9;z-index:1}
.band .sun2{position:absolute;right:60px;bottom:-80px;width:160px;height:160px;background:var(--red);border-radius:50%;z-index:1}

/* TEAM */
.team-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:center;margin-top:40px}
.team-art{position:relative;border:4px solid var(--ink);background:var(--ochre);clip-path:polygon(6% 0,100% 6%,94% 100%,0 92%)}
.team-art img{width:100%}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.role{border:2px solid var(--ink);padding:18px;background:var(--paper)}
.role .r{font-family:var(--disp);font-style:italic;font-weight:600;font-size:26px;color:var(--blue)}
.role .n{font-family:var(--cn);font-weight:700;font-size:18px;margin-top:4px}
.role .d{font-size:13px;color:#5b554a}
.role:nth-child(even){background:var(--ink);color:var(--paper)}
.role:nth-child(even) .r{color:var(--yellow)}
.role:nth-child(even) .d{color:#c9c2b4}

/* MEMBER cards (team page) */
.members{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:36px}
.member{border:3px solid var(--ink);background:var(--paper);padding:20px;text-align:center;position:relative}
.member .av{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);margin:0 auto 14px;display:grid;place-items:center;font-family:var(--disp);font-style:italic;font-weight:600;font-size:38px;color:var(--paper)}
.member:nth-child(5n+1) .av{background:var(--blue)}
.member:nth-child(5n+2) .av{background:var(--ochre)}
.member:nth-child(5n+3) .av{background:var(--red)}
.member:nth-child(5n+4) .av{background:var(--teal)}
.member:nth-child(5n+5) .av{background:var(--yellow);color:var(--ink)}
.member h3{font-family:var(--cn);font-weight:700;font-size:19px}
.member .role-t{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--red);margin:4px 0 10px}
.member p{font-size:13px;color:#5b554a}

/* steps (process) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.step{border:3px solid var(--ink);padding:26px;background:var(--paper);position:relative}
.step .no{font-family:var(--disp);font-style:italic;font-weight:900;font-size:56px;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink)}
.step h3{font-family:var(--cn);font-weight:700;font-size:21px;margin:8px 0 8px}
.step p{font-size:15px;color:#4a453b}

/* CONTACT / footer */
footer{background:var(--ink);color:var(--paper);border-top:4px solid var(--ink);padding:70px 0 40px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;position:relative;z-index:2}
footer h3{font-family:var(--cn);font-weight:900;font-size:40px;line-height:1}
footer .en{font-family:var(--disp);font-style:italic;color:var(--ochre);font-size:22px}
footer .col h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--yellow);margin-bottom:14px}
footer .col a,footer .col p{display:block;font-size:15px;color:#d8d1c3;margin-bottom:8px}
footer .col a:hover{color:var(--paper)}
.foot-rule{border:0;border-top:2px solid #3a352d;margin:40px 0 20px}
.copy{font-family:var(--mono);font-size:12px;color:#8f887a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* simple content page (cookie/legal) */
.doc{max-width:820px;margin:0 auto;padding:70px 32px 90px}
.doc h1{font-family:var(--cn);font-weight:900;font-size:clamp(34px,5vw,58px);margin-bottom:8px;line-height:1}
.doc .en{font-family:var(--disp);font-style:italic;color:var(--ochre);font-size:20px;margin-bottom:30px}
.doc h2{font-size:24px;margin:34px 0 10px}
.doc p{font-size:16px;color:#3a352d;margin-bottom:14px}

.placeholder-note{position:fixed;left:16px;bottom:16px;z-index:99;background:var(--red);color:var(--paper);font-family:var(--mono);font-size:12px;padding:10px 14px;border:2px solid var(--paper);max-width:260px;line-height:1.4;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.placeholder-note b{color:var(--yellow)}
.placeholder-note button{background:none;border:0;color:var(--yellow);cursor:pointer;font-family:var(--mono);font-size:12px;margin-left:6px;text-decoration:underline}

/* FOUNDER spotlight */
.founder{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;border:4px solid var(--ink);background:var(--paper);padding:40px;margin-top:44px;position:relative}
.founder::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--yellow);z-index:-1;border:4px solid var(--ink)}
.founder .photo{aspect-ratio:1;border:4px solid var(--ink);background:var(--blue);display:grid;place-items:center;color:var(--paper);font-family:var(--disp);font-style:italic;font-weight:900;font-size:96px;clip-path:polygon(0 6%,94% 0,100% 94%,6% 100%)}
.founder .tag{display:inline-block;background:var(--red);color:var(--paper);font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px;padding:5px 14px;margin-bottom:12px}
.founder h3{font-family:var(--cn);font-weight:900;font-size:clamp(28px,3.4vw,42px);line-height:1.05}
.founder h3 .en{font-family:var(--disp);font-style:italic;font-weight:600;color:var(--ochre);font-size:0.6em;margin-left:10px}
.founder .bio{font-size:16px;color:#3a352d;margin:16px 0 18px;line-height:1.7}
.founder .flink{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:2px}
.founder .flink:hover{color:var(--red);border-color:var(--red)}

/* SERIES bands (series page) */
.series{border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:64px 0;position:relative;overflow:hidden;margin-top:-4px}
.series .wrap{position:relative;z-index:2}
.series .kicker{color:var(--ink)}
.series h2{color:var(--ink)}
.series .lead2{font-size:17px;max-width:640px;margin-top:12px;color:rgba(24,22,19,.82)}
.series .count{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:1px;margin-top:8px;opacity:.7}
.strip{display:flex;gap:24px;flex-wrap:wrap;margin-top:36px}
.bookcov{width:186px}
.bookcov .img{border:3px solid var(--ink);aspect-ratio:792/1000;overflow:hidden;background:var(--paper);box-shadow:6px 6px 0 rgba(24,22,19,.35);transition:transform .25s}
.bookcov .img img{width:100%;height:100%;object-fit:cover;display:block}
.bookcov:hover .img{transform:translateY(-4px)}
.bookcov .t{font-family:var(--cn);font-weight:700;font-size:14px;margin-top:12px;line-height:1.3}
/* per-series color themes via modifier classes */
.series.s-teal{background:var(--teal)} .series.s-teal .lead2,.series.s-teal h2,.series.s-teal .kicker{color:var(--paper)} .series.s-teal .bookcov .t{color:var(--paper)}
.series.s-blue{background:var(--blue)} .series.s-blue .lead2,.series.s-blue h2,.series.s-blue .kicker{color:var(--paper)} .series.s-blue .bookcov .t{color:var(--paper)}
.series.s-ochre{background:var(--ochre)} .series.s-ochre h2,.series.s-ochre .kicker{color:var(--ink)} .series.s-ochre .bookcov .t{color:var(--ink)}
.series.s-red{background:var(--red)} .series.s-red .lead2,.series.s-red h2,.series.s-red .kicker{color:var(--paper)} .series.s-red .bookcov .t{color:var(--paper)}
.series.s-yellow{background:var(--yellow)} .series.s-yellow h2,.series.s-yellow .kicker{color:var(--ink)} .series.s-yellow .bookcov .t{color:var(--ink)}
.series.s-cream{background:var(--cream)}
.series.s-ink{background:var(--ink)} .series.s-ink .lead2,.series.s-ink h2,.series.s-ink .kicker{color:var(--paper)} .series.s-ink .bookcov .t{color:var(--paper)} .series.s-ink .count{color:var(--paper)}
.series.s-violet{background:var(--violet)} .series.s-violet .lead2,.series.s-violet h2,.series.s-violet .kicker{color:var(--paper)} .series.s-violet .bookcov .t{color:var(--paper)}
/* placeholder cover tile (cover not ready) */
.bookcov .ph{border:3px solid var(--ink);aspect-ratio:792/1000;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px;background:var(--cream);box-shadow:6px 6px 0 rgba(24,22,19,.35)}
.bookcov .ph .pt{font-family:var(--cn);font-weight:900;font-size:17px;line-height:1.25;color:var(--ink)}
.bookcov .ph .pe{font-family:var(--disp);font-style:italic;font-size:13px;color:var(--ochre);margin-top:6px}
.bookcov .ph .pn{font-family:var(--mono);font-size:9px;margin-top:12px;letter-spacing:1px;color:var(--ink);opacity:.55;border:1px solid var(--ink);padding:2px 7px;border-radius:20px}
.series .stag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:5px 14px;border:2px solid currentColor;border-radius:40px;margin-bottom:14px}

/* CAPABILITY cards (partners page) */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.cap{border:3px solid var(--ink);background:var(--paper);padding:26px;position:relative}
.cap .ic{font-family:var(--disp);font-style:italic;font-weight:900;font-size:34px;color:var(--paper);width:56px;height:56px;display:grid;place-items:center;border:3px solid var(--ink);margin-bottom:16px}
.cap:nth-child(6n+1) .ic{background:var(--blue)} .cap:nth-child(6n+2) .ic{background:var(--ochre)} .cap:nth-child(6n+3) .ic{background:var(--red)}
.cap:nth-child(6n+4) .ic{background:var(--teal)} .cap:nth-child(6n+5) .ic{background:var(--yellow);color:var(--ink)} .cap:nth-child(6n+6) .ic{background:var(--ink)}
.cap h3{font-family:var(--cn);font-weight:700;font-size:20px;margin-bottom:8px}
.cap p{font-size:14px;color:#4a453b;line-height:1.6}

/* STAT row */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px}
.stat{border:3px solid var(--paper);padding:22px}
.stat .n{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(36px,5vw,60px);line-height:1;color:var(--yellow)}
.stat .l{font-family:var(--cnbody);font-size:14px;color:var(--paper);margin-top:8px}

/* MODEL list */
.models{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
.model{border:2px solid var(--ink);background:var(--paper);padding:22px 24px;display:flex;gap:18px;align-items:flex-start}
.model .no{font-family:var(--disp);font-style:italic;font-weight:900;font-size:34px;color:var(--red);line-height:1;min-width:44px}
.model h3{font-family:var(--cn);font-weight:700;font-size:19px;margin-bottom:4px}
.model p{font-size:14px;color:#4a453b}

/* TRAILERS */
.trailers{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.trailer{border:4px solid var(--ink);background:var(--ink);box-shadow:8px 8px 0 rgba(24,22,19,.28)}
.trailer video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.trailer .cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;background:var(--paper);border-top:3px solid var(--ink)}
.trailer .cap .s{font-family:var(--cn);font-weight:700;font-size:16px}
.trailer .cap .tag{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--paper);background:var(--blue);padding:3px 10px;white-space:nowrap}
.trailer:nth-child(1) .cap .tag{background:var(--teal)}
.trailer:nth-child(2) .cap .tag{background:var(--blue)}
.trailer:nth-child(3) .cap .tag{background:var(--red)}
.trailer:nth-child(4) .cap .tag{background:var(--ochre)}

@media(max-width:900px){
  .founder{grid-template-columns:1fr;gap:24px;padding:24px}
  .founder .photo{max-width:220px;margin:0 auto}
  .bookcov{width:44%}
}

@media(max-width:900px){
  .hero-grid,.about-grid,.team-grid,.foot-grid,.gallery{grid-template-columns:1fr}
  .gcard,.gcard:nth-child(even){grid-template-columns:1fr}
  .gcard:nth-child(even) .gcov{order:0}
  .books{grid-template-columns:1fr;gap:44px}
  .book,.book:nth-child(2){transform:none}
  .navlinks{display:none}
  .roles{grid-template-columns:1fr 1fr}
  .members{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .models{grid-template-columns:1fr}
}