/* ============================================================
   jennyfriend.site 首页
   纸、墨、两道荧光笔。字体在 assets/fonts/ 里自托管，页面不发外部请求。
   ============================================================ */

:root{
  --paper:#FBF7EC;
  --ink:#141210;
  --ink-2:#575147;
  --ink-3:#6F695E;
  --mag:#E0197A;
  --mag-ink:#AE1660;
  --hl:rgba(255,61,154,.34);
  --hl-2:#FFE24D;
  --rule:rgba(20,18,16,.22);
  --rule-2:rgba(20,18,16,.12);
  --pad:clamp(20px,5.2vw,84px);
  --col:262px;
  --gap:78px;

  --hand:"ZCOOL KuaiLe Sub","ZCOOL KuaiLe","Gaegu Sub",var(--body-f);
  --hand-num:"Gaegu Sub","Gaegu",var(--body-f);
  --body-f:"Noto Sans SC Sub","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{
  background:var(--paper);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body-f);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
h1,.brand,.quote{text-wrap:balance}
p,.lede,.sec-lede,.ep,.aside,.foot-l p{text-wrap:pretty}
a{color:inherit}
::selection{background:rgba(255,61,154,.26);color:var(--ink)}
:focus-visible{outline:2px solid var(--mag-ink);outline-offset:3px;border-radius:2px}

/* 跳到正文 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:9;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:14px;text-decoration:none;
}
.skip:focus{left:16px;top:16px}

/* ---------- 报头 ---------- */
.mast{
  max-width:1440px;margin:0 auto;
  padding:clamp(28px,4vw,52px) var(--pad) 0;
  display:flex;justify-content:flex-end;align-items:flex-start;gap:24px;
}
.mast p{margin:0}
.mast-r{text-align:right}
.en{font-family:var(--hand-num);font-size:19px;line-height:1.1;letter-spacing:.01em}
.dt{margin-top:8px;font-family:var(--hand-num);font-size:15px;line-height:1;letter-spacing:.12em;color:var(--ink-2)}

/* ---------- 两栏 ---------- */
.wrap{
  max-width:1440px;margin:0 auto;
  padding:clamp(30px,4vw,44px) var(--pad) 0;
  display:grid;grid-template-columns:var(--col) minmax(0,1fr);
  column-gap:var(--gap);align-items:start;
}
.toc{
  grid-column:1;position:sticky;top:clamp(18px,3vw,44px);
  align-self:start;
}
.toc-lab{margin:0;font-family:var(--hand);font-size:14px;letter-spacing:.44em;color:var(--ink-2)}
.toc ol{margin:16px 0 0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{
  display:flex;align-items:baseline;gap:15px;
  padding:16px 0 15px;text-decoration:none;position:relative;
}
.toc .no{
  flex:none;font-family:var(--hand-num);font-size:24px;line-height:1;
  transform:rotate(-4deg);color:var(--ink);
}
.toc .tx{
  font-size:16px;line-height:1.35;letter-spacing:.02em;
  position:relative;z-index:0;
}
.toc .tx::before{
  content:"";position:absolute;z-index:-1;
  left:-4px;right:-4px;top:.42em;height:.56em;
  background:var(--hl);transform:rotate(-.9deg) scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease);
}
.toc a:hover .tx::before,
.toc a[aria-current] .tx::before{transform:rotate(-.9deg) scaleX(1)}
.toc a[aria-current] .no{color:var(--mag-ink)}
.toc-foot{
  margin:22px 0 0;font-family:var(--hand-num);font-size:14px;
  line-height:1.7;letter-spacing:.08em;color:var(--ink-3);
}
.sign{
  margin:34px 0 0;font-family:var(--hand);font-size:19px;
  line-height:1.55;letter-spacing:.02em;
}

main{grid-column:2;min-width:0}

/* ---------- 荧光笔 ---------- */
.mark,.hl{position:relative;z-index:0;display:inline-block}
.mark::before,.hl::before{
  content:"";position:absolute;z-index:-1;
  background:var(--hl);transform:rotate(-1.2deg);
  transition:transform .62s var(--ease);
}
.mark::before{left:-14px;right:-12px;top:.34em;height:.5em}
.hl{padding:0 2px}
.hl::before{left:-3px;right:-3px;top:.44em;height:.56em;transform:rotate(-.8deg)}
.hl-2{position:relative;z-index:0;display:inline-block;padding:0 5px}
.hl-2::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;top:.42em;height:.46em;
  background:var(--hl-2);transform:rotate(-1.1deg);
  transition:transform .62s var(--ease);
}

/* JS 有、动效没关时：笔迹从左边划进来 */
.js .mark::before,.js .hl::before,.js .hl-2::before{transform:rotate(-1.2deg) scaleX(0);transform-origin:left center}
.js .mark.in::before,.js .hl.in::before{transform:rotate(-1.2deg) scaleX(1)}
.js .hl-2.in::before{transform:rotate(-1.1deg) scaleX(1)}

/* ---------- 开篇 ---------- */
.intro{padding-top:2px}
h1{
  margin:0;
  font-family:var(--hand);font-weight:400;
  font-size:clamp(38px,5.4vw,78px);
  line-height:1.26;letter-spacing:.01em;
}
.lede{
  margin:34px 0 0;max-width:618px;
  font-size:16px;line-height:1.9;color:#221E19;
}

.figs{
  margin-top:clamp(36px,3.6vw,46px);padding-top:14px;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;
}
.fig{position:relative}
.fig p{margin:0}
.line{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.n{
  font-family:var(--hand-num);font-weight:400;
  font-size:clamp(46px,5.6vw,74px);line-height:.92;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.u{font-size:14.5px;letter-spacing:.05em;color:#3B362F;white-space:nowrap}
.cap{max-width:244px;margin-top:11px!important;font-size:13px;line-height:1.7;color:var(--ink-2)}
.arrow{
  position:absolute;width:158px;height:auto;
  left:-104px;top:-96px;pointer-events:none;
}
.arrow path{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;fill:none}
.js .arrow path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease) .35s;
}
.js .arrow.in path{stroke-dashoffset:0}

/* ---------- 章节 ---------- */
.sec{margin-top:clamp(74px,9vw,132px);scroll-margin-top:28px}
.intro + .sec{margin-top:clamp(34px,3.2vw,46px)}
.sec-h{margin-bottom:clamp(16px,1.8vw,20px)}
.sec-no{
  margin:0 0 6px;font-family:var(--hand-num);font-size:20px;
  letter-spacing:.14em;color:var(--ink-2);
}
h2{
  margin:0;font-family:var(--hand);font-weight:400;
  font-size:clamp(30px,3.6vw,46px);line-height:1.25;letter-spacing:.01em;
}
.sec-lede{
  margin:12px 0 0;max-width:620px;
  font-size:16px;line-height:1.9;color:#2B2620;
}

/* 01 五年 */
.episodes{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.episodes li{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:24px;
  padding:14px 0;border-bottom:1px solid var(--rule-2);align-items:baseline;
}
.episodes p{margin:0}
.yr{
  font-family:var(--hand-num);font-size:22px;line-height:1.2;
  letter-spacing:.04em;color:var(--ink);
}
.ep{font-size:16.5px;line-height:1.85;max-width:36em}

/* 照片 */
.shot{
  margin:clamp(44px,5vw,64px) 0 0;
  padding:10px 10px 0;background:#fff;
  box-shadow:0 18px 44px -26px rgba(20,18,16,.5),0 2px 0 rgba(20,18,16,.08);
  transform:rotate(-.7deg);
  width:max-content;max-width:100%;
}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{
  padding:12px 2px 14px;font-size:13px;line-height:1.7;
  color:var(--ink-2);max-width:52em;
}
.shot-people{width:min(380px,100%);margin-left:auto;transform:rotate(.8deg)}
.shot-wide{width:100%;transform:rotate(-.35deg)}
.shot-shapes{width:min(300px,58%);margin-left:auto;transform:rotate(1.1deg)}
.shot-strip{width:100%;transform:rotate(-.4deg)}

/* 02 数字 */
.ledger{
  width:100%;max-width:700px;margin-top:8px;border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.ledger caption{
  text-align:left;font-size:13px;letter-spacing:.04em;
  color:var(--ink-3);padding-bottom:14px;
}
.ledger th,.ledger td{padding:15px 0;border-bottom:1px solid var(--rule-2);text-align:left}
.ledger thead th{
  font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--ink-2);
  border-bottom:1px solid var(--ink);padding-bottom:12px;
}
.ledger tbody th{font-weight:400}
.ledger tbody td{font-size:17px;letter-spacing:.02em}
.ledger th:nth-child(2),.ledger td:nth-child(2),
.ledger th:nth-child(3),.ledger td:nth-child(3){text-align:right}
.ledger .y{font-family:var(--hand-num);font-size:23px;letter-spacing:.04em}
.ledger .m{margin-left:8px;font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.ledger .now .y,.ledger .now td:last-child{color:var(--mag-ink)}
.ledger tfoot th,.ledger tfoot td{
  border-bottom:0;border-top:2px solid var(--ink);
  padding-top:14px;font-size:17px;
}
.ledger tfoot th{font-family:var(--hand);font-size:17px}
.ledger tfoot td:last-child{font-size:20px;font-weight:500}
.ledger .dash{color:var(--ink-3)}
.stamp{
  display:inline-block;margin:22px 0 0;font-family:var(--hand-num);
  font-size:15px;letter-spacing:.12em;color:var(--ink-2);
  transform:rotate(-1.4deg);
}
.aside{
  margin:26px 0 0;max-width:34em;font-size:15px;line-height:2.05;color:var(--ink-2);
}
.aside b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

/* 03 四季 */
.seasons{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.seasons li{
  display:grid;grid-template-columns:56px 76px minmax(0,1fr);gap:18px;
  padding:22px 0 20px;border-bottom:1px solid var(--rule-2);align-items:baseline;
}
.seasons .s-head{padding:0 0 12px;border-bottom:1px solid var(--ink);align-items:baseline}
.seasons .s-head p{font-family:var(--body-f);font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.seasons p{margin:0}
.s-name{font-family:var(--hand);font-size:30px;line-height:1.2}
.s-pct{font-family:var(--hand-num);font-size:26px;line-height:1.2;letter-spacing:.02em}
.s-what{font-size:16.5px;line-height:1.7}
.s-track{
  grid-column:1/-1;height:9px;margin-top:2px;
  border-right:1px dashed rgba(20,18,16,.45);
}
.s-bar{
  display:block;height:100%;width:var(--w);
  background:var(--hl);
  transform:rotate(-.5deg);transform-origin:left center;
  transition:transform .8s var(--ease);
}
.js .s-bar{transform:rotate(-.5deg) scaleX(0)}
.seasons.in .s-bar{transform:rotate(-.5deg) scaleX(1)}
.quote{
  margin:clamp(44px,5vw,64px) 0 0;max-width:22em;
  font-family:var(--hand);font-size:clamp(22px,2.6vw,30px);
  line-height:1.55;
}

/* 04 我 */
.me{max-width:640px;display:grid;gap:22px;font-size:16.5px;line-height:1.95}
.me p{margin:0}
.brand{
  margin:clamp(40px,4.5vw,56px) 0 0;
  font-family:var(--hand);font-size:clamp(21px,2.6vw,32px);
  line-height:1.62;
}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1440px;margin:clamp(64px,8vw,112px) auto 0;
  padding:26px var(--pad) clamp(40px,5vw,64px);
  border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
  font-size:13.5px;line-height:2;color:var(--ink-2);
}
.foot p{margin:0}
.foot-l{max-width:44em}
.foot-r{text-align:right}
.foot-r p:last-child{margin-top:6px}

/* ---------- 中屏 ---------- */
@media (max-width:1080px){
  .wrap{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .toc{position:static;grid-column:1}
  .toc ol{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1.5px solid var(--ink)}
  .toc li:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .toc-foot,.sign{display:none}
  main{grid-column:1}
  .arrow{left:-70px;top:-84px;width:120px}
  .shot-shapes{width:min(260px,70%)}
}

/* ---------- 小屏 ---------- */
@media (max-width:720px){
  body{font-size:15.5px}
  .mast{padding-top:26px;gap:14px}
  .en{font-size:15px;line-height:1.3;letter-spacing:0}
  .mast-r .dt{letter-spacing:.06em;font-size:13px}
  h1{font-size:clamp(29px,8.4vw,36px);line-height:1.32}
  .wrap{padding-top:26px;row-gap:26px}
  .toc-lab{display:none}
  .toc ol{grid-template-columns:1fr 1fr;column-gap:18px;border-top:1.5px solid var(--ink);margin-top:0}
  .toc a{padding:14px 0 13px;gap:10px}
  .toc .no{font-size:20px}
  .toc .tx{font-size:14px}
  h1{line-height:1.3}
  .lede{margin-top:24px}
  .figs{
    grid-template-columns:minmax(0,1fr);row-gap:0;
    margin-top:34px;
  }
  .fig{padding:18px 0;border-bottom:1px solid var(--rule-2)}
  .fig:first-child{padding-top:0}
  .cap{max-width:26em;margin-top:8px!important}
  .n{font-size:clamp(44px,13vw,60px)}
  .arrow{display:none}
  .episodes li{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
  .ep{font-size:15.5px}
  .shot{padding:7px 7px 0;width:100%;transform:none!important}
  .shot-wide,.shot-strip{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));padding:0}
  .shot-wide figcaption,.shot-strip figcaption{padding:10px var(--pad)}
  .shot-people{width:100%}
  .shot-shapes{width:74%}
  .ledger thead th{font-size:11px;letter-spacing:.08em}
  .ledger th,.ledger td{padding:12px 0}
  .ledger tbody td{font-size:16px}
  .ledger .y{font-size:20px}
  .ledger .m{display:block;margin:2px 0 0}
  .seasons li{grid-template-columns:44px 62px minmax(0,1fr);gap:12px;padding:18px 0 16px}
  .s-name{font-size:26px}
  .s-pct{font-size:22px}
  .s-what{font-size:15.5px}
  .foot{flex-direction:column;gap:18px}
  .foot-r{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .mark::before{transform:rotate(-1.2deg) scaleX(1)!important}
  .js .hl::before{transform:rotate(-.8deg) scaleX(1)!important}
  .js .hl-2::before{transform:rotate(-1.1deg) scaleX(1)!important}
  .js .arrow path{stroke-dashoffset:0!important;transition:none}
  .js .s-bar{transform:rotate(-.5deg) scaleX(1)!important;transition:none}
  .toc .tx::before{transition:none}
}

@media print{
  .toc,.skip{display:none}
  .wrap{display:block}
  .shot{box-shadow:none;transform:none}
}