/* =========================================================
   more.css — sections 07 (AI cartoon) and 08 (Websites)
   plus the "taking website projects" bar in the hero.
   Loaded after styles.css; uses the same tokens.
   ========================================================= */

/* ---- hero: website projects bar ---- */
.hirebar{
  margin-top:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  border:1px solid var(--rule);border-left:2px solid var(--accent);
  background:var(--surface);
  padding:12px 16px;
  font-size:14.5px;line-height:1.5;color:var(--ink-2);
  text-decoration:none;
  transition:background .15s ease;
}
.hirebar:hover{background:var(--accent-soft)}
.hirebar .dot{
  flex:0 0 8px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
.hirebar .go{
  margin-left:auto;white-space:nowrap;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--accent);
}
.hirebar .go .th{font-family:var(--f-th);letter-spacing:0;font-size:12.5px}
.hirebar .go .zh{font-family:var(--f-zh);letter-spacing:0;font-size:12.5px}

/* ---- 07 AI cartoon: series header ---- */
.series{
  display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 28px;align-items:start;
}
.poster{display:block;border:1px solid var(--rule);background:#111;line-height:0;overflow:hidden}
.poster img{display:block;width:100%;height:auto;transition:transform .25s ease}
.poster:hover img{transform:scale(1.02)}
.series-meta{display:flex;flex-direction:column;gap:14px;min-width:0}
.series-name{
  font-family:var(--f-display);font-weight:600;font-size:23px;line-height:1.25;margin:0;color:var(--ink);
}
.series-name .th{font-family:var(--f-th)}
.series-name .zh{font-family:var(--f-zh);font-weight:700}
.series-name .alt{font-family:var(--f-th);font-weight:500;font-size:.72em;color:var(--muted);margin-left:6px}
.series .prose{font-size:15.5px}

.ministats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rule);background:var(--surface);
}
.ms{padding:13px 15px;border-right:1px solid var(--rule)}
.ms:last-child{border-right:0}
.ms .v{
  font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.ms .k{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;line-height:1.45;
}
.ms .k.th{font-family:var(--f-th);text-transform:none;letter-spacing:0;font-size:12px}
.ms .k.zh{font-family:var(--f-zh);text-transform:none;letter-spacing:0;font-size:12px}

/* ---- 07 AI cartoon: episode strip (drawn in CSS, styled after the show's covers) ---- */
.eplabel,.worklabel{margin-top:34px}
.eps{
  display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:10px;
  overflow-x:auto;padding:2px 2px 12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.ep{
  --ep-bg:#222;
  position:relative;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;
  height:212px;padding:16px 9px 9px;overflow:hidden;
  background:var(--ep-bg);border:1px solid rgba(0,0,0,.35);
  color:#fff;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.ep:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.ep-k{
  font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1;letter-spacing:.06em;
  color:#fff;text-shadow:0 2px 0 #1A1A1A;
}
.ep-n{
  font-family:var(--f-display);font-weight:700;font-size:60px;line-height:1;margin-top:2px;
  color:#F6C434;-webkit-text-stroke:2px #1A1A1A;paint-order:stroke fill;text-shadow:0 3px 0 #1A1A1A;
}
.ep-t{
  margin-top:auto;width:100%;min-height:58px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:#D63A3C;border:1.5px solid #1A1A1A;border-radius:6px;
  padding:7px 8px;font-size:12px;line-height:1.38;font-weight:600;color:#fff;
}
.ep-t .th{font-family:var(--f-th);font-size:12.5px;line-height:1.45}
.ep-t .zh{font-family:var(--f-zh)}
.ep-badge{
  position:absolute;top:8px;right:8px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;
  background:#F6C434;color:#1A1A1A;border:1px solid #1A1A1A;padding:1px 6px;
}
.t-spot{--ep-bg:radial-gradient(70% 80% at 50% 0%,#4A4530 0%,#1A1A17 55%,#0E0E0D 100%)}
.t-sun{--ep-bg:linear-gradient(180deg,#FBCB6F 0%,#F3AA5C 100%)}
.t-night{--ep-bg:linear-gradient(180deg,#232846 0%,#12162B 100%)}
.t-sunset{--ep-bg:linear-gradient(180deg,#E9876D 0%,#E7A56E 100%)}
.t-orange{--ep-bg:linear-gradient(180deg,#EE9A62 0%,#E28A57 100%)}
.t-dusk{--ep-bg:linear-gradient(180deg,#5E5389 0%,#3C3462 100%)}
.t-next{
  --ep-bg:var(--surface);
  border:1.5px dashed var(--accent);color:var(--ink);
}
.t-next .ep-k{color:var(--muted);text-shadow:none}
.t-next .ep-n{color:var(--accent);-webkit-text-stroke:0;text-shadow:none}
.t-next .ep-t{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);font-weight:500}

/* ---- 08 Websites ---- */
.srow .rv .tools{display:flex;flex-wrap:wrap;gap:6px}
.srow .rv a.live{margin-left:4px}

.steps4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--rule);background:var(--surface);
}
.steps4 .s{padding:16px 18px 18px;border-right:1px solid var(--rule);min-width:0}
.steps4 .s:last-child{border-right:0}
.steps4 .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--brass)}
.steps4 h4{
  font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.25;margin:6px 0 4px;color:var(--ink);
}
.steps4 h4 .th{font-family:var(--f-th)}
.steps4 h4 .zh{font-family:var(--f-zh);font-weight:700}
.steps4 p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.steps4 p .th,.steps4 p .zh{line-height:1.75}

.hirebox{
  margin-top:30px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
  border:1px solid var(--accent);background:var(--accent-soft);
  padding:20px 22px;
}
.hirebox p{
  margin:0;max-width:36ch;
  font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.35;color:var(--ink);
}
.hirebox p .th{font-family:var(--f-th);font-size:.92em;line-height:1.55}
.hirebox p .zh{font-family:var(--f-zh);font-weight:700;line-height:1.5}

/* ---- responsive ---- */
@media (max-width:900px){
  .series{grid-template-columns:1fr;gap:18px}
  .poster{max-width:220px}
  .ms{padding:11px 12px}
  .ms .v{font-size:19px}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps4 .s:nth-child(2){border-right:0}
  .steps4 .s:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .hirebar .go{margin-left:20px}
}
@media (max-width:420px){
  .ms{padding:10px 10px}
  .ms .v{font-size:18px}
  .ms .k{font-size:9.5px}
}