/* project.css —— 所有项目详情页共用的样式（由 sync-notion.js 生成的页面引用） */
/* 设计 token —— 纯中性灰 / 大留白 / 全 Geist sans */
:root {
  --bg:#fff; --ink:#171717; --muted:#737373; --faint:#a3a3a3; --line:#e5e5e5;
  --accent:#FF952B;                 /* 高亮色 */
  --measure: 960px;    /* 正文文字宽度 —— 与图片同宽（左右都对齐） */
  --wide: 960px;       /* 图片 / 视频宽度 —— 与正文同宽 */
  --font: 'Geist', -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(255,149,43,.22); }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
       -webkit-font-smoothing:antialiased; }
a { color: inherit; }
/* hover / click 文字 → accent 橙 */
a:hover, a:active { color: var(--accent); }

/* 选中高亮 = accent */
::selection { background: var(--accent); color:#fff; }

/* 自定义光标：默认空心橙圈；hover 可点击元素时变大 + 变实心 */
@media (hover:hover) and (pointer:fine) {
  * { cursor: none !important; }
  .cursor-dot { position: fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%;
                width:18px; height:18px; margin:-9px 0 0 -9px;
                border:2.5px solid var(--accent); background:transparent;
                transition: width .18s, height .18s, margin .18s, background .18s, opacity .2s; }
  body.cursor-hover .cursor-dot { width:25px; height:25px; margin:-12.5px 0 0 -12.5px;
                                  background: rgba(255,149,43,.5); border-color: transparent; }
}

/* ── 顶部 header（整宽 sticky） ── */
.site { position: sticky; top:0; z-index:10; background:rgba(255,255,255,.82);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-inner { max-width:1600px; margin:0 auto; padding:0 40px; height:60px;
              display:flex; align-items:center; justify-content:space-between;
              text-transform:uppercase; letter-spacing:.03em; }
.site .brand { font-size:15px; font-weight:600; text-decoration:none; letter-spacing:.03em; white-space:nowrap; }
.site .brand:hover { color:var(--accent); }
.site .links { display:flex; gap:24px; align-items:center; }
.site .links a { font-size:14px; color:var(--muted); text-decoration:none; }
.site .links a:hover { color:var(--accent); }
.site .links a.active { color:var(--accent); }
.site .links .ask-c.active { color:var(--accent); }

.nav-toggle { display:none; background:none; border:none; padding:4px; margin-right:2px;
              color:var(--ink); cursor:pointer; align-items:center; }
.nav-toggle svg { width:20px; height:20px; display:block; }
/* 桌面端：这层 wrapper 在视觉/布局上"消失"，里面的 <a> 直接参与 .links 的 flex 排布，跟没包过一样 */
.mobile-nav-menu { display:contents; }

/* ── Ask C（AI chatbot 入口）—— 默认与导航同款纯文字 + 彩虹光环；hover 词条滚动 C→Chloe→Claude ── */
.ask-c { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px;
         color:var(--muted); background:none; cursor:pointer;
         text-transform:uppercase; letter-spacing:.03em;
         margin-left:8px; padding:2px 0 2px 20px; border:none; border-left:1px solid var(--line); }
.ask-c:hover { color:var(--accent); }
.ask-c-orb { width:22px; height:22px; flex:none; color:var(--accent); display:inline-flex; }
.ask-c-orb svg { width:100%; height:100%; display:block; overflow:visible; }
.ask-c-orb g { transform-box:fill-box; transform-origin:center; animation: mb-rot 7s linear infinite; }
.ask-c-orb .mb { transform-box:fill-box; transform-origin:center; }
@keyframes mb-rot { to { transform: rotate(360deg); } }
.ask-c:hover .ask-c-orb g { animation-duration:2.4s; }
.ask-c:hover .ask-c-orb .mb1 { animation: mb-pulse 1.1s ease-in-out infinite; }
.ask-c:hover .ask-c-orb .mb2 { animation: mb-pulse 1.1s ease-in-out .18s infinite; }
.ask-c:hover .ask-c-orb .mb3 { animation: mb-pulse 1.1s ease-in-out .36s infinite; }
@keyframes mb-pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.35);} }
.ask-c-text { display:inline; white-space:nowrap; }
.ask-c .roll { display:inline-block; height:1.15em; line-height:1.15em; overflow:hidden; vertical-align:bottom;
               width:1.1ch; transition: width .35s cubic-bezier(.6,0,.2,1); }
.ask-c:hover .roll { width:6.4ch; }
.ask-c .roll-inner { display:flex; flex-direction:column; transition: transform .3s; }
.ask-c .roll-inner > span { height:1.15em; white-space:nowrap; }
/* 抽屉打开后：header 的 Ask C 只留 symbol（保留分隔线 |），左右空白对称 */
body.askc-open .ask-c .ask-c-text { display:none; }
body.askc-open .site-inner { padding-right: 20px; }   /* = .ask-c 左内边距，symbol 两侧空白相等 */

/* ── 手机端导航（JS 注入 .nav-toggle + .mobile-nav-menu，见 site.js）：
   Work/Fun/About 收进汉堡菜单，Ask C 只留 icon ── */
@media (max-width:640px) {
  .ask-c-text { display:none; }
  .ask-c { padding-left:10px; gap:0; }
  .nav-toggle { display:inline-flex; }
  .mobile-nav-menu { display:flex; position:fixed; top:60px; left:0; right:0; z-index:9;
                      flex-direction:column; background:#fff; border-bottom:1px solid var(--line);
                      transform:translateY(-6px); opacity:0; pointer-events:none;
                      transition:opacity .18s ease, transform .18s ease; }
  .site.nav-open .mobile-nav-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
  .mobile-nav-menu a { padding:14px 24px; border-top:1px solid var(--line); text-decoration:none;
                        text-align:center; font-size:14px; color:var(--muted);
                        text-transform:uppercase; letter-spacing:.03em; }
  .mobile-nav-menu a.active { color:var(--accent); }
}

.ask-c:hover .roll-inner { animation: askc-roll 2.6s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes askc-roll {                          /* hover 持续向上滚动：Chloe(久) → Claude → Chloe… */
  0%, 42%  { transform: translateY(-1.15em); }  /* Chloe（停留更久） */
  52%, 74% { transform: translateY(-2.3em); }   /* Claude */
  84%,100% { transform: translateY(-3.45em); }  /* Chloe（第二个，无缝接回顶部） */
}

/* Ask C 聊天面板（前端外壳；真实 AI 待接） */
/* 右侧抽屉：打开时页面内容整体左移，抽屉滑入右侧（不遮挡） */
body { transition: margin .32s cubic-bezier(.2,.7,.2,1); }
body.askc-open { margin-right: 360px; margin-left: 36px; }
.askc-panel { position:fixed; top:0; right:0; z-index:1000; height:100vh; width:360px;
              display:flex; flex-direction:column; background:#fff; border-left:1px solid var(--line);
              transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
body.askc-open .askc-panel { transform: translateX(0); }
/* 推开 vs 覆盖的分界 = 1128px。
   推开的底线是"侧栏还在 + 正文还能排 2 栏"，反推：
     420(2 栏最小: 2×200+20) + 232(侧栏+gap) + 80(shell padding) + 396(面板) = 1128px
   ≥1128 推开（保留那段左移动画），面板不遮任何内容，TOC 始终在；正文 420→960px
   随视口增长，cols 档位由下面 body.askc-open 那两条跟着降级。
   <1128 改成覆盖：再推就连 2 栏都排不下了，不如让版面不动、面板盖住右侧一条。
   （首页是例外：卡片能干净重排成单栏，所以 index.html 里把推开补到了这条以下。） */
@media (max-width:1127px){
  body.askc-open { margin-right:0; margin-left:0; }
}
@media (max-width:768px){
  .askc-panel { width:min(360px, 88vw); }
}
.askc-head { display:flex; align-items:center; gap:8px; height:60px; padding:0 20px; border-bottom:1px solid var(--line); }
.askc-head strong { font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:.03em; }
.askc-head .sub { font-size:12px; color:var(--faint); }
.askc-head .askc-close { margin-left:auto; background:none; border:none; font-size:20px; line-height:1;
                         color:var(--muted); cursor:pointer; }
.askc-log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.askc-msg { font-size:14px; line-height:1.5; max-width:85%; width:fit-content; padding:9px 12px; border-radius:12px; }
.askc-msg.bot { background:#f5f5f5; color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.askc-msg.user { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.askc-msg { white-space:pre-wrap; overflow-wrap:anywhere; }   /* 模型回答里的换行照原样显示 */
.askc-msg.bot a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* 可点击的示例问题 */
.askc-suggest { display:flex; flex-direction:column; gap:8px; align-items:flex-end; align-self:flex-end; margin-top:auto; }
.askc-chip { font:inherit; font-size:13px; line-height:1.4; text-align:left; color:var(--ink);
             background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px 13px;
             cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.askc-chip:hover { border-color:var(--accent); color:var(--accent); background:#fff7f0; }
.askc-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.askc-form input { flex:1; font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line);
                   border-radius:999px; outline:none; }
.askc-form input:focus { border-color:var(--accent); }
.askc-form button { border:none; background:var(--accent); color:#fff; width:38px; border-radius:50%;
                    cursor:pointer; font-size:16px; }

/* ── 两栏布局 ── */
/* Rachel 式：宽容器 + 1fr auto 1fr —— 内容居中，侧栏浮在左侧空档、与 header 名字对齐 */
/* 布局对齐 rachelchen.tech：≥768 是「窄侧栏 + 内容列」两栏，侧栏占固定左条、内容在其右侧随宽度增长（上限 --wide）；
   <768 收起侧栏、内容单列铺满。侧栏只吃固定一条，不会像等分 gutter 那样把窄屏内容挤小 */
.shell { max-width: 1360px; margin:0 auto; padding: 0 40px;
         display:grid; grid-template-columns: 176px minmax(0, 1fr);
         gap: 56px; }

/* 宽布局：正文文字限阅读宽度（760，靠左），图/视频出血撑满宽列（1360） */
main > header.hero,
main > section > p,
main > section > .kicker,
main > section > h2,
main > section > h3,
main > section > h4,
main > section > ul,
main > section > ol,
main > section > blockquote,
main > section > .callout,
main > .to-top-row { max-width: var(--measure); }
main > figure,
main > section > figure,
main > section > .cols,
main > section > .carousel,
main > section > .embed { width: 100%; max-width: none; }

/* ── 左侧章节导航（sticky、纯文字），靠左对齐 ── */
aside { grid-column: 1; position: sticky; top:60px; align-self:start; padding-top:56px; }
aside .back { display:inline-flex; align-items:center; gap:8px; margin-bottom:44px;
              font-size:13px; letter-spacing:.08em; text-transform:uppercase;
              color:var(--faint); text-decoration:none; }
aside .back:hover { color:var(--accent); }
.toc { display:flex; flex-direction:column; gap:2px; }
.toc a { font-size:13px; line-height:1.5; text-decoration:none; color:var(--faint);
         padding:5px 0; transition: color .15s; }
.toc a:hover { color:var(--accent); }
.toc a.active { color:var(--ink); }
.toc a.sub { padding-left:14px; font-size:12px; }
/* 可折叠子导航（Solution 下的 Product/Retail…） */
.toc-parent { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.toc-parent a { flex:1; }
.toc-toggle { background:none; border:none; padding:4px 2px; color:var(--faint); font-size:9px; line-height:1;
  cursor:pointer; transition:transform .2s, color .15s; }
.toc-toggle:hover { color:var(--accent); }
.toc-toggle.open { transform:rotate(90deg); }
.toc-sub-group { display:flex; flex-direction:column; gap:2px; overflow:hidden; max-height:0;
  opacity:0; transition:max-height .3s ease, opacity .2s ease; }
.toc-sub-group.open { max-height:320px; opacity:1; }

/* ── 内容 —— 固定间距/字号 ── */
/* 限定在 .shell 内：这是项目详情页的内容列。首页 / Fun 页也用 <main>，不该被这个宽度上限套住 */
.shell main { grid-column: 2; max-width: var(--wide); padding: 0 0 120px; }   /* 上限 --wide，随宽度增长；始终占第 2 列 */
section { padding: 48px 0; scroll-margin-top: 76px; }
/* 章节最后一个元素不留下边距，否则会和 section 自己的 48px padding 叠加。
   原来只列了媒体类元素，文字类漏了 —— 于是「以段落结尾的章节」比「以图结尾的章节」
   底部多出 20px（p 的 margin-bottom），章节间距参差不齐。 */
main section > figure:last-child, main section > .cols:last-child,
main section > .carousel:last-child, main section > .embed:last-child,
main section > p:last-child, main section > ul:last-child,
main section > ol:last-child, main section > blockquote:last-child { margin-bottom: 0; }
section:not(:last-child) { border-bottom:1px solid var(--line); }
/* 只有 kicker、没有正文的章节（如 codon 的 Prototype —— 它只是 Interaction Design /
   Visual System / Tech Stack 的分组头）：正文里塌成零高度，不显示标题也不画分隔线。
   但元素仍留在 DOM 且仍占据文档流位置，所以左侧 TOC 里那一项照常可以跳转 ——
   用 display:none 的话锚点就没有落点了。 */
main > section:not(:has(> :not(.kicker))) { padding: 0; border-bottom: 0; }
main > section:not(:has(> :not(.kicker))) > .kicker { display: none; }
section:last-of-type { border-bottom:none; }   /* footer 上方不留分割线 */
/* Solution 概述与其首个子章节 Product Design 视作一体：去掉中间分割线并收紧间距（仅此处） */
#solution:has(+ #product-design) { border-bottom:none; padding-bottom:0; }
#solution + #product-design { padding-top:8px; }

header.hero { padding: 56px 0 12px; scroll-margin-top: 76px; }
.hero + figure { margin-top: 14px; }   /* hero 媒体紧跟 year/role/team 信息 */
.eyebrow { font-size:14px; color:var(--muted); margin:0 0 16px; letter-spacing:.01em; }
h1 { font-size: 60px; line-height:1.03; letter-spacing:-.025em; margin:0 0 20px; }
.tagline { font-size: 20px; line-height:1.45; color:var(--muted); margin:0 0 40px; }
.meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:20px 28px; }
.meta dt { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.meta dd { margin:0; font-size:14px; line-height:1.4; }

/* Recognition —— 小标题（Tools 字体）+ 一段黑色文字 */
.rec-label { max-width:var(--measure); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:2px 0 10px; }
.recognition { max-width:var(--measure); margin:0; font-size:14px; line-height:1.7; color:var(--ink); }
.recognition a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.recognition a:hover { color:var(--accent); }
/* Pull quote —— 居中、全宽、serif italic */
.pull-quote { margin:40px 0 8px; padding:0; border:none; text-align:center;
  font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-weight:400;
  font-size:20px; line-height:1.5; color:var(--ink); }
.pull-quote cite { display:block; margin-top:16px; font-family:var(--font); font-style:normal;
  font-size:13px; color:var(--muted); letter-spacing:.01em; }

.kicker { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 20px; }
.kicker .sol-sep { margin:0 5px; color:var(--faint); }
h2 { font-size: 30px; line-height:1.14; letter-spacing:-.015em; margin:0 0 24px; }
h3 { font-size:17px; font-weight:600; margin:40px 0 12px; }
h4 { font-size:14px; font-weight:600; margin:28px 0 4px; color:var(--muted); letter-spacing:.01em; }
p { font-size:16px; line-height:1.65; color:#262626; margin:0 0 20px; }
p.lead { font-size:16px; line-height:1.65; color:var(--ink); }
strong { font-weight:600; }
/* 只给正文里的链接下划线，别波及 TOC / 导航 / 页脚 */
main p a[href], main li a[href], main blockquote a[href] { text-decoration: underline; text-underline-offset:2px; }

/* 列表 / 引用 / 代码 / callout */
ul, ol { font-size:17px; line-height:1.6; color:#262626; margin:0 0 20px; padding-left:22px; }
li { margin:6px 0; }
blockquote { margin:32px 0; padding-left:20px; border-left:2px solid var(--ink);
             font-size:20px; line-height:1.5; color:var(--ink); }
pre { background:#f5f5f5; border:1px solid var(--line); border-radius:6px;
      padding:16px; overflow-x:auto; margin:24px 0; }
code { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-size:14px; }
pre code { font-size:13px; }
.callout { padding:16px 18px; background:#f5f5f5; border:1px solid var(--line);
           border-radius:6px; font-size:15px; color:#262626; }

/* 图片 / 占位块 */
figure { margin: 36px 0; }
figure img { display:block; width:100%; height:auto; border-radius:4px;
  cursor:zoom-in; transition:filter .2s, transform .2s; }
figure img:hover { filter:brightness(.93); }
/* 不设黑底：video 用 height:auto 本就填满盒子，黑底只会因亚像素取整在上下露出一条细线 */
figure video { display:block; width:100%; height:auto; border-radius:4px; }

/* Lightbox：点图看大图 */
.lightbox { position:fixed; inset:0; z-index:2000;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out;
  opacity:0; visibility:hidden; perspective:1800px;
  transition:opacity .3s ease, visibility .3s ease; }
.lightbox.open { opacity:1; visibility:visible; }
/* 参考 fun 页 card：图片 3D 翻转 + 缩放出现，在网页上放大（浅色模糊背景，不再黑底） */
.lightbox img { max-width:92vw; max-height:92vh; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.28);
  transform:rotateY(90deg) scale(.9); transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.lightbox.open img { transform:rotateY(0deg) scale(1); }
.lightbox .lb-close { position:fixed; top:20px; right:24px; width:40px; height:40px; border:none;
  border-radius:50%; background:rgba(0,0,0,.08); color:var(--ink); font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.lightbox .lb-close:hover { background:rgba(0,0,0,.16); }

/* 视频 / 嵌入（16:9 自适应） */
.embed { margin: 36px 0; }
.embed-16x9 { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background:#000; }
.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 图注 —— 图片下方的小字说明 */
.cap { font-size:13px; line-height:1.6; color:var(--muted); margin:8px 0 20px; }
/* 图注要贴着它上方的图：figure 的 36px 下边距会和 .cap 的上边距合并，把图注推远，
   看起来像另起一段正文。紧跟图注时去掉这个下边距。 */
figure:has(+ .cap) { margin-bottom: 0; }

/* 翻转卡 —— hover（触屏则点击）绕 Y 轴 3D 翻面；卡片尺寸恒定 = 正面图尺寸 */
.flip { margin:0; }
.flip-inner { display:block; position:relative; width:100%; padding:0; border:0; background:none;
              font:inherit; color:inherit; text-align:left; cursor:pointer;
              border-radius:6px; perspective:1200px; }
.flip-inner > figure { margin:0; }
.flip-inner img { display:block; width:100%; }
/* 两个面绕同一中心旋转，背面始终比正面多转 180° —— 等效于整体翻面 */
.flip-inner > figure, .flip-back {
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.4,0,.2,1); border-radius:6px; overflow:hidden; }
.flip-inner > figure { transform:rotateY(0deg); }
.flip-back { position:absolute; inset:0; transform:rotateY(180deg);
             display:flex; flex-direction:column; justify-content:center; gap:6px;
             padding:24px; background:#fff; }
.flip-inner:hover > figure,
.flip-inner[aria-expanded="true"] > figure { transform:rotateY(180deg); }
.flip-inner:hover .flip-back,
.flip-inner[aria-expanded="true"] .flip-back { transform:rotateY(360deg); }
.flip-back p { font-size:13px; line-height:1.75; color:var(--ink); margin:0; white-space:pre-line; }
/* 背面是图：缩放到正面图的尺寸内完整显示（不裁切、不变形） */
.flip-back:has(figure) { padding:0; }
.flip-back figure { margin:0; width:100%; height:100%; }
.flip-back img { width:100%; height:100%; object-fit:contain; }

/* 外链应用 embed 上方的「新标签打开」行 */
.embed-open { margin: 0 0 10px; }

/* 外链应用预览：iframe 只作展示（不接收指针事件），整块点击 = 新标签打开；hover 浮出提示 */
.embed-app-link { display: block; position: relative; text-decoration: none; color: inherit; }
.embed-app-link iframe { pointer-events: none; }
.embed-app-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                  background: rgba(255,255,255,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
                  opacity: 0; transition: opacity .25s ease; border-radius: 6px; }
.embed-app-hint { font-size: 14px; letter-spacing: .01em; color: var(--ink); }
.embed-app-link:hover .embed-app-hint { opacity: 1; color: var(--accent); }

/* 自托管的交互 demo —— 比 16:9 更高、浅底，内容自己滚动 */
.embed-app { width: 100%; height: 730px; border-radius: 6px; overflow: hidden;
             border: 1px solid var(--line); background: #fafafa; }
.embed-app iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) { .embed-app { height: 680px; } }
/* 触屏没有 hover，那条「在新标签打开」的提示永远不会出现 —— 用户看到一块不能操作的
   预览却不知道能点开。这里把它从「整块白蒙层」改成底部一条常驻的说明条，
   既不遮住预览，也把出口说清楚。 */
@media (hover: none) {
  .embed-app-hint {
    opacity: 1; inset: auto 0 0 0; padding: 10px 12px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--line); border-radius: 0 0 6px 6px;
    font-size: 13px; color: var(--muted);
  }
}
/* aspect-ratio 里的 auto 是关键：视频元数据到位后用它自己的真实比例，
   没到位时才退到 16/9。否则 height:auto 的 <video> 在加载完成前只有 150px 高，
   页面会先塌一块再撑开（每个正文视频都会抖一次）。 */
.embed video { display:block; width:100%; height:auto; aspect-ratio: auto 16 / 9; border-radius:6px; }
/* 二合一展示视频（loop）：放大 2% 裁掉录屏边缘的细黑线 */
.embed:has(> video[src*="loop"]) { overflow:hidden; border-radius:6px; }
.embed > video[src*="loop"] { transform:scale(1.02); }

/* 分栏（Notion 的 column 布局） */
.cols { display: grid; gap: 20px; margin: 24px 0; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── 变窄时的降级：只走能整除的档位，不留落单的那一个 ──
   4 个图块排成 3 栏 = 3 + 1，上下不对称；所以 cols-4 只走 4 → 2 → 1，跳过 3。
   同理 cols-3 只走 3 → 1（2 栏会剩一个）。cols-2 走 2 → 1。

   门槛按"每格至少 200px"反推正文列宽（gap 20）：
     4 栏需要 4×200+60 = 860px   3 栏需要 3×200+40 = 640px   2 栏需要 2×200+20 = 420px

   正文列宽 = min(可用宽 − 侧栏 232px（收起时为 0）, 960)，可用宽在面板打开时再减 396px。
   下面的视口数字就是把这条式子解出来的结果（侧栏收起点见文件末尾）：
                          不开面板        开面板
     cols-4 掉到 2 栏      ≤ 939px        ≤ 1335px
     cols-4 掉到 1 栏      ≤ 640px        ≤  895px
     cols-3 掉到 1 栏      ≤ 719px        ≤ 1115px
     cols-2 掉到 1 栏      ≤ 640px        ≤  895px
   （≤640 的那档由本节末尾原有的手机断点统一处理） */
/* .meta（hero 的 Role/Team/Timeline/Tools 四项）和 .cols-4 挂同一组断点：
   正文变两栏时 overview 也变两栏，两者永远同步。它原本是 auto-fit，会经过 3 栏 = 3+1 落单。 */
@media (max-width: 1171px) { .cols-4, .meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 951px)  { .cols-3 { grid-template-columns: 1fr; } }
/* 推开区间（≥1128）专用：此时正文 = 视口−708，比不开面板时窄 396px。
   4 栏需要 860px → 视口 ≥1568；3 栏需要 640px → 视口 ≥1348。低于这两个数就降级。
   （<1128 是覆盖模式，版面和不开面板时一样，用上面两条即可。） */
@media (min-width: 1128px) and (max-width: 1567px) { body.askc-open .cols-4,
                                                     body.askc-open .meta { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1128px) and (max-width: 1347px) { body.askc-open .cols-3 { grid-template-columns: 1fr; } }
.cols figure, .cols .embed { margin: 0; }
.cols figure img, .cols .embed video { border-radius: 6px; }
.cols p:first-child { margin-top: 0; }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4, .meta { grid-template-columns: 1fr; } }
/* 等高并排（+ 号）：各块拉伸到同高，图/视频裁剪填满 */
/* 等高并排（+）：宽图完整、按比例；竖屏视频固定 9:16 手机框、object-fit:cover 裁掉上下黑条 */
.cols.equal { display: flex; align-items: center; justify-content: flex-start;
  gap: 24px; flex-wrap: wrap; grid-template-columns: none; }
.cols.equal > figure { margin: 0; }
.cols.equal > figure:not(.embed) img { display: block; width: auto; height: auto;
  max-width: 100%; max-height: 460px; border-radius: 6px; }
.cols.equal > figure.embed { height: 460px; width: 259px; flex: none;
  overflow: hidden; border-radius: 10px; background: #000; }
.cols.equal > figure.embed video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
@media (max-width: 640px) { .cols.equal > figure.embed { height: 380px; width: 214px; } }

/* 轮播（slide show）：一次一张，箭头 / 圆点翻页 */
.carousel { position: relative; margin: 36px 0; overflow: hidden; border-radius: 6px; transition: height .35s ease; }
.cx-track { display: flex; align-items: flex-start; }   /* 不拉伸，高度由 JS 随当前图设置；transition 由 JS 控制 */
.cx-track > figure, .cx-track > .embed { margin: 0; min-width: 100%; }
.cx-track > figure img { border-radius: 0; }
.cx-prev, .cx-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.cx-prev:hover, .cx-next:hover { background: rgba(0,0,0,.7); }
.cx-prev { left: 12px; } .cx-next { right: 12px; }
.cx-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.cx-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.cx-dot.active { background: #fff; }
.ph { display:flex; align-items:center; justify-content:center;
      background:#f5f5f5; border:1px solid var(--line); border-radius:4px;
      color:var(--faint); font-size:13px; letter-spacing:.03em; }
.ph.wide { aspect-ratio: 16/9; }
figcaption { font-size:13px; color:var(--faint); margin-top:10px; }

/* ── Back to top —— 内容末尾右对齐 ── */
.to-top-row { display:flex; justify-content:flex-end; margin-top:40px; }
.to-top { font-size:13px; color:var(--muted); text-decoration:none; letter-spacing:.02em; }
.to-top:hover { color:var(--accent); }

/* ── 页脚（左：位置 + 小时钟，右：社媒图标） ── */
.site-footer { }
.footer-inner { max-width:1600px; margin:0 auto; padding:24px 40px;
                display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-left { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.footer-left .clock { color:var(--muted); flex:none; }
.site-footer .icons { display:flex; gap:22px; align-items:center; }
.site-footer .icons a { color:var(--faint); display:inline-flex; transition:color .2s; }
.site-footer .icons a:hover { color:var(--accent); }
.site-footer .icons svg { width:18px; height:18px; display:block; }
@media (max-width:640px){
  .footer-inner { flex-direction:column; gap:16px; align-items:flex-start; padding:24px; }
}
/* ── 响应式：按 Rachel 的断点（640 / 768 / 1280 / 1536） ── */

/* md 及以下（<768，平板竖屏起，对齐 Rachel 的 md 断点）：收起 sidebar，正文单列铺满 */
@media (max-width: 768px) {
  /* minmax(0, 1fr) 而不是 1fr：1fr 等同 minmax(auto, 1fr)，最小值是 min-content ——
     正文里有 18180px 宽的 IA 图和 3700px 的规格长图（它们各自在 overflow 容器里滚动），
     min-content 会把这一列撑到几千像素，于是所有 width:100% 的图和视频跟着变成几千像素宽，
     整页被迫缩到最小才装得下。桌面端本来就是 minmax(0,1fr) + main 有 960 上限，所以没暴露。
     min-width:0 是同一件事的第二道保险（网格项默认 min-width:auto）。 */
  .shell { grid-template-columns: minmax(0, 1fr); gap:0; padding:0 24px; }
  aside { display:none; }
  .shell main { max-width: none; min-width: 0; }
  .site-inner { padding:0 24px; }
  .footer-inner { padding:26px 24px; }
  header.hero { padding:48px 0 64px; }
  h1 { font-size: 48px; }
  h2 { font-size: 28px; }
  section { padding: 40px 0; }
}

/* sm 及以下（<640，手机）：再收一档字号/间距 */
@media (max-width: 640px) {
  header.hero { padding:36px 0 48px; }
  h1 { font-size: 38px; }
  h2 { font-size: 24px; }
  section { padding: 32px 0; }
  .site .links { gap:18px; }
  p, ul, ol { font-size:16px; }
}

/* 2xl（≥1536，大屏）：容器再放宽一点，逼近满屏 */
@media (min-width: 1536px) {
  .site-inner, .shell { max-width: 1800px; }
}

/* ── 作品卡片网格（首页 + Fun 页共用，照 georgialyu.com 的标题+tags+描述） ── */
.work { max-width: 1600px; margin: 0 auto; padding: 64px 40px 120px; }
.grid { list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.card a { display: block; text-decoration: none; color: inherit; }
.thumb { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden;
         background: #f5f5f5; border: 1px solid var(--line); margin-bottom: 10px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
             transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card a:hover .thumb img { transform: scale(1.03); }
.thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
             color: var(--faint); font-size: 13px; letter-spacing: .03em; }
.project-info { display: flex; flex-direction: column; gap: 4px; }
.project-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-name { font-size: 20px; font-weight: 450; letter-spacing: -.01em; }
.project-tags { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; justify-content: flex-end; }
.tag { font-size: 12px; color: var(--muted); background: #f5f5f5; border-radius: 6px;
       padding: 4px 9px; white-space: nowrap; }
.project-desc { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 40px; } .work { padding: 48px 24px 100px; } }
@media (min-width: 1536px) { .work { max-width: 1800px; } }