/* for-characters.html: "Kinematic for character and creature artists". Written by tools/gen_for_characters.py; edit it there. */
.ch-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 52px) 60px;overflow:hidden}
.ch-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.ch-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.ch-hero h1{font-size:clamp(44px,5.3vw,86px);line-height:.95;letter-spacing:-.05em}
.ch-hero h1 i{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-hero .sub{margin-top:24px;font-size:clamp(18px,1.4vw,20.5px);line-height:1.5;max-width:540px}
.ch-who{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.ch-who li{font-size:14px;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;color:var(--mute);background:rgba(11,15,19,.6)}
.ch-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--mute)}
.ch-meta span{display:flex;align-items:center;gap:8px}
.ch-meta i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ch-hv{min-width:0;display:flex;flex-direction:column;gap:10px}
.ch-fig{position:relative;margin:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#000;min-width:0}
.ch-fig img,.ch-fig video{width:100%;height:100%;object-fit:cover;display:block}
.ch-fig figcaption{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10.5px;line-height:1.35;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 20px)}
.ch-fig.hv{aspect-ratio:16/10;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.ch-road{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ch-road a{display:flex;flex-direction:column;gap:6px;min-width:0}
.ch-road .pic{display:block;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;background:#000;transition:border-color .2s}
.ch-road img{width:100%;height:100%;object-fit:cover}
.ch-road .l{font-family:var(--mono);font-size:11.5px;color:var(--mute);display:flex;align-items:center;gap:6px}
.ch-road .l::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ch-road a:hover .pic{border-color:var(--accent)}
.ch-road a:hover .l{color:var(--fg)}

/* the work */
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ch-w{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;scroll-margin-top:calc(var(--barh) + var(--navh) + 80px);transition:border-color .2s}
.ch-w:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.ch-w .ch-fig.wmed{aspect-ratio:16/10;border:0;border-bottom:1px solid var(--line-2);border-radius:0}
.ch-w .bd{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.ch-st{display:flex;align-items:center;gap:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.ch-st b{color:var(--accent);font-weight:500}
.ch-w h3{font-size:clamp(22px,1.75vw,27px);letter-spacing:-.035em;line-height:1.08}
.ch-w p{color:var(--mute);font-size:15px;line-height:1.5}
.ch-w p.ch-hand{color:var(--fg);font-size:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border-left:2px solid var(--accent);padding-left:10px}
.ch-hand span{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.ch-w .pills{margin-top:auto;padding-top:4px}
.ch-go{align-self:flex-start;font-size:14.5px;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:3px;margin-top:4px;transition:border-color .2s}
.ch-go span{color:var(--accent);font-family:var(--mono)}
.ch-go:hover{border-color:var(--accent)}

/* showcase bands */
.ch-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(52px,5.5vw,92px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--barh) + var(--navh) + 70px)}
.ch-band.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ch-band.flip > .ch-txt{order:-1}
.ch-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.ch-txt .eyebrow{margin:0;color:var(--accent)}
.ch-txt h2{font-size:clamp(34px,3.7vw,58px);line-height:1;letter-spacing:-.045em}
.ch-txt p{color:var(--mute);font-size:clamp(16.5px,1.2vw,18px);line-height:1.55;max-width:540px}
.ch-txt p.ch-note{font-size:15.5px;color:var(--fg);border-left:2px solid var(--accent);padding-left:14px}
.ch-txt .code pre{font-size:12.5px;padding:14px 18px}
.ch-sculptm{position:relative;min-width:0;padding-bottom:6%}
.ch-sculptm .big{aspect-ratio:16/10}
.ch-inset{position:absolute;right:-1%;bottom:0;width:27%;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#f4f4f2;box-shadow:0 20px 50px rgba(0,0,0,.65)}
.ch-inset img{width:100%;display:block}
.ch-duo{display:grid;grid-template-columns:minmax(0,1.69fr) minmax(0,1fr);gap:10px;min-width:0}
.ch-duo .f1{aspect-ratio:899/640}
.ch-duo .f2{aspect-ratio:569/684}
.ch-scanm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:10px;min-width:0}
.ch-scanm .s1{aspect-ratio:1/1}
.ch-scanm .s2{aspect-ratio:4/5}
.ch-simm{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:10px;min-width:0}
.ch-simm .big{grid-row:1/3;grid-column:1;height:100%}
.ch-simm .sm{aspect-ratio:16/9}

/* how it fits */
.ch-fit{border-top:1px solid var(--line)}
.ch-fitg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ch-fitg .ch-files{grid-column:1/-1}
.ch-io{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.ch-io > div{display:flex;flex-direction:column;gap:10px;min-width:0}
.ch-io .mono{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.ch-panel{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:var(--ink-2);display:flex;flex-direction:column;gap:12px;min-width:0}
.ch-panel h3{font-size:21px;letter-spacing:-.02em}
.ch-panel > .mono{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:11px;margin-top:4px}
.ch-panel dl{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.ch-panel dl div{padding:11px 0;border-bottom:1px solid var(--line)}
.ch-panel dt{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.ch-panel dd{color:var(--mute);font-size:14.5px;line-height:1.45;margin-top:2px}
.ch-cmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 22px;margin-top:22px;border-top:1px solid var(--line-2)}
.ch-cmp a{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:15.5px}
.ch-cmp a span{color:var(--accent);font-family:var(--mono)}
.ch-cmp a:hover{color:var(--accent)}

/* where to start */
.ch-start{border-top:1px solid var(--line)}
.ch-sub{font-size:22px;letter-spacing:-.025em;margin:6px 0 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ch-sub a{font-family:var(--body);font-weight:400;font-size:15px;color:var(--mute);border-bottom:1px solid var(--line-2)}
.ch-sub a:hover{color:var(--fg)}
.ch-tuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:44px}
.ch-t,.ch-d{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s,transform .2s}
.ch-t:hover{border-color:var(--accent);transform:translateY(-2px)}
.ch-t .pic,.ch-d .pic{display:block;aspect-ratio:16/10;background:#000;overflow:hidden}
.ch-t .pic img,.ch-d .pic img{width:100%;height:100%;object-fit:cover}
.ch-t .t,.ch-d .t{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.ch-t .lv{color:var(--accent);font-size:11px}
.ch-t b,.ch-d b{font-family:var(--display);font-size:18px;letter-spacing:-.02em;line-height:1.2}
.ch-t em,.ch-d em{font-style:normal;color:var(--mute);font-size:14px;line-height:1.4}
.ch-t .go{margin-top:auto;padding-top:8px;font-size:14px;color:var(--fg)}
.ch-demos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ch-d .go{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--fg)}
.ch-d .go i{width:0;height:0;border-left:7px solid var(--accent);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* what it does not yet do */
.ch-gaps{border-top:1px solid var(--line)}
.ch-gapg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.ch-gapg .lede{margin-top:18px}
.ch-gapg .lede a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.ch-gapg .lede a:hover{border-color:var(--accent)}
.ch-gapg ul{list-style:none;border-top:1px solid var(--line-2)}
.ch-gapg li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6px 22px;padding:16px 0;border-bottom:1px solid var(--line)}
.ch-gapg li b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px}
.ch-gapg li b::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent);transform:translateY(-1px)}
.ch-gapg li span{color:var(--mute);font-size:15.5px;line-height:1.5}
.ch-end{padding-top:0}
.ch-end .band{margin-top:0}
.ch-end .band p a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.ch-end .band p a:hover{border-color:var(--accent)}

@media (min-width:1081px){
  .ch-band .ch-sculptm,.ch-band .ch-duo,.ch-band .ch-scanm,.ch-band .ch-simm{align-self:center}
}
@media (max-width:1180px){
  .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-tuts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-demos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .ch-hero .wrap,.ch-band,.ch-gapg{grid-template-columns:1fr}
  .ch-band.flip > .ch-txt{order:0}
  .ch-band.flip{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ch-grid,.ch-tuts,.ch-demos,.ch-fitg,.ch-cmp,.ch-io{grid-template-columns:1fr}
  .ch-road{gap:6px}
  .ch-road .l{font-size:10px}
  .ch-road .l::before{display:none}
  .ch-fig figcaption{font-size:9.5px;left:6px;top:6px;max-width:calc(100% - 12px)}
  .ch-inset{width:34%}
  .ch-duo{grid-template-columns:minmax(0,1.69fr) minmax(0,1fr)}
  .ch-scanm{grid-template-columns:1fr}
  .ch-simm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-simm .big{grid-row:auto;grid-column:1/-1;height:auto;aspect-ratio:16/10}
  .ch-scanm .s2{aspect-ratio:4/3}
  .ch-gapg li{grid-template-columns:1fr}
  .ch-t,.ch-d{flex-direction:row}
  .ch-t .pic,.ch-d .pic{flex:0 0 38%;aspect-ratio:auto;min-height:124px}
  .ch-t .t,.ch-d .t{padding:12px 14px 13px;gap:4px}
  .ch-t b,.ch-d b{font-size:16.5px}
  .ch-t em,.ch-d em{font-size:13px}
}