:root{
  --comic-ink:#17191d;
  --comic-paper:#fffefd;
  --comic-red:#df3c2f;
  --comic-blue:#245bc1;
  --comic-yellow:#f2c94c;
  --comic-grid:rgba(36,91,193,.065);
}

[data-theme="dark"]{
  --comic-ink:#15171a;
  --comic-paper:#f7f5f0;
  --comic-grid:rgba(242,201,76,.045);
}

.home #comics{order:1}
.home #essays{order:2}
.home #projects{order:3}
.home #contact{order:4}
.home .footer{order:5}

.btn--comic{
  background:var(--comic-blue);
  border-color:rgba(36,91,193,.2);
  color:#fff;
}

.btn--comic:hover{background:#194ca8}

.comics-home{
  padding:42px 0 58px;
}

.comics-home__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.comics-home__head h2{
  margin:0 0 4px;
  font-size:30px;
  line-height:1.2;
}

.comics-home__head p{margin:0}

.comics-home__panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(210px,280px) minmax(0,1fr);
  min-height:460px;
  overflow:hidden;
  border:1px solid rgba(23,25,29,.72);
  border-radius:28px;
  background:
    linear-gradient(var(--comic-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--comic-grid) 1px,transparent 1px),
    var(--surface-strong);
  background-size:24px 24px;
  box-shadow:0 22px 52px rgba(23,25,29,.09);
}

.comics-home__panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(180deg,var(--comic-red) 0 38%,var(--comic-blue) 38% 76%,var(--comic-yellow) 76% 100%);
  z-index:2;
}

.comics-home__art{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:28px 22px 28px 30px;
  background:rgba(225,229,234,.54);
  border-right:1px solid rgba(23,25,29,.2);
}

[data-theme="dark"] .comics-home__art{background:rgba(14,16,18,.42)}

.comics-home__art a{
  display:block;
  width:min(100%,220px);
  transform:rotate(-.55deg);
  transition:transform .2s ease;
}

.comics-home__art a:hover{
  transform:rotate(0deg) translateY(-4px);
  text-decoration:none;
}

.comics-home__art picture,
.comics-home__art img{display:block;width:100%}

.comics-home__art img{
  height:auto;
  border:1px solid rgba(23,25,29,.68);
  border-radius:3px;
  background:#fff;
  box-shadow:10px 12px 0 rgba(23,25,29,.1);
}

.comics-home__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  padding:42px clamp(28px,5vw,64px);
}

.comics-home__copy .kicker{
  color:var(--comic-blue);
  font-weight:750;
}

.comics-home__copy h3{
  max-width:680px;
  margin:4px 0 16px;
  font-size:clamp(28px,4vw,46px);
  line-height:1.12;
  letter-spacing:-.02em;
}

.comics-home__thought{
  max-width:640px;
  margin:0 0 24px;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}

.comics-home__count{
  margin:18px 0 0;
  color:var(--muted);
  font-size:13px;
}

.comics-page{
  background:
    radial-gradient(circle at 14% 10%,rgba(36,91,193,.06),transparent 26rem),
    radial-gradient(circle at 86% 28%,rgba(223,60,47,.05),transparent 24rem),
    var(--bg);
}

.comics-archive{max-width:1180px}

.comic-archive-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,360px);
  gap:36px;
  align-items:end;
  padding:54px 0 34px;
}

.comic-archive-hero h1{
  margin:0 0 12px;
  font-size:clamp(42px,7vw,76px);
  line-height:1;
  letter-spacing:-.045em;
}

.comic-archive-hero .lede{
  max-width:650px;
  margin-bottom:0;
  font-size:18px;
}

.comic-ink-rule{
  display:grid;
  grid-template-columns:1.5fr 1fr .55fr;
  gap:7px;
  align-items:center;
  padding-bottom:12px;
}

.comic-ink-rule span{
  display:block;
  height:9px;
  border-radius:999px;
  transform:rotate(-1.2deg);
}

.comic-ink-rule span:nth-child(1){background:var(--comic-ink)}
.comic-ink-rule span:nth-child(2){background:var(--comic-red);transform:rotate(1deg)}
.comic-ink-rule span:nth-child(3){background:var(--comic-blue);transform:rotate(-2deg)}

.comic-viewer{padding:8px 0 42px}

.comic-stage{
  display:grid;
  grid-template-columns:minmax(0,720px) minmax(280px,1fr);
  gap:clamp(26px,4vw,54px);
  align-items:start;
  scroll-margin-top:88px;
}

.comic-paper{
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  padding:10px;
  border:1px solid rgba(23,25,29,.78);
  border-radius:6px;
  background:var(--comic-paper);
  box-shadow:14px 18px 0 rgba(23,25,29,.09),0 26px 60px rgba(23,25,29,.13);
  transform:rotate(-.22deg);
  transform-origin:50% 10%;
}

.comic-paper::after{
  content:"";
  position:absolute;
  top:-6px;
  right:10%;
  width:74px;
  height:18px;
  background:rgba(242,201,76,.64);
  transform:rotate(2deg);
  pointer-events:none;
}

.comic-frame{
  position:relative;
  width:100%;
  aspect-ratio:864/1821;
  overflow:hidden;
  background:#fff;
}

.comic-picture{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  background:#fff;
}

.comic-picture.is-pending{
  z-index:0;
  opacity:0;
  pointer-events:none;
}

.comic-picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  background:#fff;
}

.comic-picture.is-revealing{
  animation:comic-image-reveal .2s ease-out both;
}

.comic-loading{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  padding:1px 28px 28px;
  color:var(--comic-ink);
  text-align:center;
  background:rgba(255,254,253,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility 0s linear .16s;
}

.comic-paper.is-loading .comic-loading,
.comic-paper.is-error .comic-loading{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.comic-loading__content{
  position:sticky;
  top:112px;
  display:grid;
  justify-items:center;
  gap:14px;
  width:min(100%,280px);
  margin:clamp(96px,16vw,210px) auto 0;
}

.comic-loading__spinner{
  width:42px;
  height:42px;
  border:3px solid rgba(23,25,29,.18);
  border-top-color:var(--comic-red);
  border-right-color:var(--comic-blue);
  border-radius:50%;
  animation:comic-spinner .72s linear infinite;
}

.comic-loading__message{
  max-width:240px;
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:.02em;
}

.comic-loading__retry{
  min-height:42px;
  padding:9px 18px;
  border:1px solid var(--comic-ink);
  border-radius:999px;
  color:var(--comic-paper);
  font:inherit;
  font-size:14px;
  font-weight:800;
  background:var(--comic-ink);
  cursor:pointer;
}

.comic-loading__retry[hidden]{display:none}
.comic-paper.is-error .comic-loading__spinner{display:none}

@keyframes comic-spinner{to{transform:rotate(360deg)}}

@keyframes comic-image-reveal{
  from{opacity:.28}
  to{opacity:1}
}

.comic-reader-meta{
  position:sticky;
  top:96px;
  min-width:0;
  padding:28px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(180deg,var(--surface-strong),var(--surface-soft));
  box-shadow:var(--shadow);
}

.comic-reader-meta::before{
  content:"";
  display:block;
  width:88px;
  height:5px;
  margin:0 0 24px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--comic-red) 0 48%,var(--comic-blue) 48% 100%);
}

.comic-reader-meta__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:13px;
}

.comic-reader-meta__topline .kicker{margin:0}

.comic-reader-meta > time{
  display:block;
  margin:18px 0 8px;
  color:var(--comic-blue);
  font-size:13px;
  font-weight:750;
}

.comic-reader-meta h2{
  margin:0 0 18px;
  font-size:clamp(28px,3.5vw,44px);
  line-height:1.12;
  letter-spacing:-.03em;
}

.comic-reader-meta__thought{
  margin:0 0 28px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.comic-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.comic-controls button,
.comic-open{
  appearance:none;
  min-height:46px;
  border:1px solid rgba(23,25,29,.8);
  border-radius:999px;
  background:var(--comic-ink);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}

.comic-controls button:last-child{background:var(--comic-blue);border-color:var(--comic-blue)}

.comic-controls button:hover:not(:disabled),
.comic-open:hover{transform:translateY(-2px)}

.comic-controls button:disabled{
  cursor:not-allowed;
  opacity:.32;
}

.comic-open{
  width:100%;
  margin-top:10px;
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}

.comic-reader-meta__hint{
  margin:14px 0 0;
  color:var(--muted);
  font-size:12px;
}

.comic-controls--bottom{
  display:none;
  align-items:center;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  margin-top:28px;
}

.comic-controls--bottom span{
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

.comic-timeline{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--border);
}

.comic-timeline::before{
  content:"全部观点";
  display:block;
  margin-bottom:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}

.comic-timeline__track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  padding:4px 2px 16px;
  scrollbar-width:thin;
}

.comic-timeline__item{
  position:relative;
  flex:0 0 220px;
  min-height:112px;
  scroll-snap-align:start;
  appearance:none;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-soft);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.comic-timeline__item::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:11px;
  height:3px;
  border-radius:999px;
  background:transparent;
}

.comic-timeline__item time{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
}

.comic-timeline__item span{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

.comic-timeline__item:hover,
.comic-timeline__item.is-active{
  border-color:rgba(36,91,193,.42);
  background:var(--surface-strong);
}

.comic-timeline__item.is-active::after{
  background:linear-gradient(90deg,var(--comic-red),var(--comic-blue));
}

.comic-noscript{
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--muted);
}

.comic-dialog{
  width:min(96vw,1100px);
  max-width:none;
  max-height:96vh;
  margin:auto;
  padding:48px 18px 18px;
  overflow:auto;
  border:0;
  border-radius:16px;
  background:rgba(17,18,20,.96);
  color:#fff;
}

.comic-dialog::backdrop{
  background:rgba(7,8,10,.82);
  backdrop-filter:blur(5px);
}

.comic-dialog form{
  position:absolute;
  top:10px;
  right:12px;
  margin:0;
}

.comic-dialog__close{
  min-height:34px;
  padding:6px 13px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:inherit;
  cursor:pointer;
}

.comic-dialog picture,
.comic-dialog img{display:block;margin:auto}

.comic-dialog img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:none;
  background:#fff;
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.comic-controls button:focus-visible,
.comic-open:focus-visible,
.comic-timeline__item:focus-visible,
.comic-loading__retry:focus-visible,
.comic-dialog__close:focus-visible{
  outline:3px solid var(--comic-yellow);
  outline-offset:3px;
}

@media (max-width:900px){
  .comics-home__panel{grid-template-columns:220px minmax(0,1fr)}
  .comics-home__art{padding:24px 18px 24px 26px}
  .comics-home__copy{padding:34px 28px}
  .comic-archive-hero{grid-template-columns:1fr;gap:20px}
  .comic-ink-rule{max-width:420px;padding-bottom:0}
  .comic-stage{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
  .comic-reader-meta{padding:22px}
}

@media (max-width:720px){
  .comics-home{padding:30px 0 42px}
  .comics-home__head{align-items:flex-start;flex-direction:column;gap:10px}
  .comics-home__head h2{font-size:26px}
  .comics-home__panel{grid-template-columns:132px minmax(0,1fr);min-height:0;border-radius:22px}
  .comics-home__art{padding:18px 12px 18px 20px}
  .comics-home__art a{width:104px}
  .comics-home__art img{box-shadow:6px 7px 0 rgba(23,25,29,.1)}
  .comics-home__copy{padding:24px 18px}
  .comics-home__copy h3{margin-bottom:10px;font-size:23px}
  .comics-home__thought{margin-bottom:16px;font-size:14px;line-height:1.6}
  .comics-home__count{display:none}
  .comics-home__copy .btn{padding:8px 12px;font-size:13px}

  .comic-archive-hero{padding:38px 0 24px}
  .comic-archive-hero h1{font-size:48px}
  .comic-archive-hero .lede{font-size:16px}
  .comic-stage{display:flex;flex-direction:column}
  .comic-reader-meta{position:static;order:-1;width:100%}
  .comic-paper{padding:6px;box-shadow:8px 11px 0 rgba(23,25,29,.09),0 18px 42px rgba(23,25,29,.12)}
  .comic-reader-meta h2{font-size:31px}
  .comic-reader-meta__thought{font-size:16px}
  .comic-reader-meta .comic-controls{display:none}
  .comic-reader-meta__hint{display:none}
  .comic-controls--bottom{display:grid}
  .comic-timeline{margin-top:38px}
  .comic-timeline__item{flex-basis:190px;min-height:104px;padding:14px}
  .comic-dialog{width:100vw;max-height:100vh;min-height:100vh;border-radius:0;padding:48px 8px 12px}
}

@media (max-width:430px){
  .comics-home__panel{grid-template-columns:110px minmax(0,1fr)}
  .comics-home__art a{width:86px}
  .comics-home__copy{padding:20px 14px}
  .comics-home__copy h3{font-size:20px;line-height:1.18}
  .comics-home__thought{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .comic-reader-meta{padding:20px;border-radius:20px}
  .comic-reader-meta h2{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .comic-picture.is-revealing,
  .comic-loading__spinner{animation:none}
  .comic-loading{transition:none}
  .comics-home__art a,
  .comic-controls button,
  .comic-open{transition:none}
}

@media print{
  .comic-reader-meta,
  .comic-controls--bottom,
  .comic-timeline,
  .comic-dialog{display:none!important}
  .comic-stage{display:block}
  .comic-paper{max-width:720px;margin:auto;box-shadow:none;transform:none}
}