/* ==========================================================================
   M3 · 标题卡 / 左侧章节栏 / 达芬奇辅助线
   原版：aside w-1/5 fixed，卡片 340×464 居中（left:50cqw），标题 w-55%，
   列表 headline-6 + 罗马数字（HWCigars 11px #fff9），虚线引导线 hover/active 从左展开。
   ========================================================================== */
.side{position:absolute;top:0;left:0;height:100svh;width:100%;z-index:100;pointer-events:none}
.side a,.side button{pointer-events:auto}
@media (min-width:940px){
  .side{position:fixed;left:calc((100vw - min(100vw,var(--container))) / 2);width:calc(min(100vw,var(--container)) * .2);max-width:calc(var(--container) * .2);padding-block:12px}
  .side{padding-inline:var(--gs-md)}
}
.card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 24px));aspect-ratio:340/464;padding:20px;display:flex;flex-direction:column;justify-content:space-between;z-index:10}
@media (min-width:940px){.card{left:calc(50vw - (100vw - min(100vw,var(--container))) / 2)}}
.card-frame{position:absolute;inset:0;border:1px solid currentColor;opacity:0;pointer-events:none}
/* Title lettering "The / A-wake-ning / Edition": grotesk bold with one italic serif segment
   (the original draws "The Ren-ai-ssance Edition" as SVG). JS sets font-size so the widest
   line fills 55% of the card, the width of the original SVG. */
.title-link{width:55%}
.title{position:relative;transform-origin:0 0;will-change:transform;color:var(--light);transition:color .3s;text-decoration:none;display:block;font-size:40px;width:max-content}
.title .ln{display:block;width:max-content;font:700 1em/.84 var(--f-sans);letter-spacing:-.045em;white-space:nowrap;transition:color .3s}
.title .ln.lt{color:var(--dark)}
.title .w{display:inline-block}
.title .it{font-family:var(--f-ital);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.7;margin:0 .01em 0 .015em}
.subtitle{margin-top:10px;max-width:300px;font-size:17px;color:var(--light);transition:opacity .3s}
.clist{width:100%;margin-top:20px;counter-reset:nav-item;transform-origin:0 100%;will-change:transform}
.clist li{position:relative;display:flex;align-items:center;width:100%}
.clist a{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:.125rem;width:100%;padding:2px 0;text-decoration:none!important;color:var(--white)}
.clist a>span>span{display:block;text-decoration-line:none;text-decoration-thickness:.08em;text-underline-position:from-font;text-decoration-skip-ink:none;transition:color .3s}
.clist a::after{counter-increment:nav-item;content:counters(nav-item,".",upper-roman);font:500 .75rem/1 var(--f-serif);color:#fff9;transition:color .3s .3s;flex:none}
.clist a>span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform:translateY(3px);background:linear-gradient(270deg,#fff 1px,#fff0 1px) 0 0/3px 100%;clip-path:inset(0 100% 0 0);transition:clip-path .3s ease-in-out .15s}
@media (hover:hover){
  .clist a:hover>span>span{text-decoration-line:underline;color:var(--white)}
  .clist a:hover>span::after{clip-path:inset(0)}
  .clist a:hover::after{color:var(--white)}
}
@media (min-width:940px){
  .clist li.on a>span>span{color:var(--white)}
  .clist li.on a>span::after{clip-path:inset(0)}
  .clist li.on a::after{color:var(--white)}
  .side.done .clist li:not(.on) a span,.side.done .clist li:not(.on) a::after{color:#f7f7ee99}
}
/* 逐项判断底下是纸还是画（纸张边缘正好扫过列表时，上下两半各自变色） */
.clist li.lt a,.clist li.lt.on a>span>span,.terms.lt,.terms.lt a{color:var(--dark)}
.clist li.lt a::after,.side.done .clist li.lt:not(.on) a span,.side.done .clist li.lt:not(.on) a::after{color:#29291999}
.clist li.lt.on a::after{color:var(--dark)}
.clist li.lt a>span::after{background-image:linear-gradient(270deg,#000 1px,#0000 1px)}
@media (hover:hover){.clist li.lt a:hover>span>span,.clist li.lt a:hover::after{color:var(--dark)}}
/* 列表逐项入场 */
@media (prefers-reduced-motion:no-preference){
  .intro .clist li{opacity:0;transform:translateY(8px)}
  .intro.play .clist li{opacity:1;transform:none;transition:opacity .6s var(--ease-out-cubic) calc(1.6s + var(--i) * 60ms),transform .6s var(--ease-out-cubic) calc(1.6s + var(--i) * 60ms)}
  .intro .title .w{opacity:0;transform:translateY(.25em);filter:blur(6px)}
  .intro.play .title .w{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-out-cubic) calc(1s + var(--i) * 120ms),transform .9s var(--ease-out-cubic) calc(1s + var(--i) * 120ms),filter .9s calc(1s + var(--i) * 120ms)}
  .intro .subtitle{opacity:0}
  .intro.play .subtitle{opacity:1;transition:opacity .9s 1.5s}
}
/* 侧栏锚点列（仅桌面） */
.side-col{display:none}
@media (min-width:940px){.side-col{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:4px;width:100%;padding-top:60px}}
#h2-anchor{width:min(187px,100%)}
.terms{position:relative;margin-top:25px;color:var(--light);transition:color .3s;pointer-events:auto}
.terms p{font:700 11px/1.3 var(--f-sans)}
.terms a{display:inline-block;margin-top:4px;margin-right:10px;font:500 11px/1 var(--f-serif);text-decoration:none}
.terms a:hover{text-decoration:underline}

/* ---------- 达芬奇辅助线（黄金分割构图线） ---------- */
.dv{position:fixed;z-index:3;overflow:visible;pointer-events:none;color:var(--light);transition:opacity .6s,color .3s}
.dv path,.dv circle,.dv rect{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.2;transition:stroke-dashoffset 1.6s var(--ease-io),opacity .8s}
.dv [data-dash]{stroke-dasharray:1 4;stroke-dashoffset:0;opacity:0}
.dv .show{stroke-dashoffset:0}
.dv [data-dash].show{opacity:.34}
.dv .loader{opacity:.9;transition:stroke-dashoffset .4s linear}
.dv .frame{opacity:0;stroke-dashoffset:0;transition:opacity .8s}
.dv.framed .frame{opacity:.55}
.dv.hide{opacity:0}
@media (max-width:939px){.dv{display:none}}