/* NanoCamp base.css — 站点框架（header 导航、页脚、回到顶部浮窗）的共用样式。
   与 public/base.js 成对：base.js 负责这些区域的渲染，base.css 负责它们的版式。
   只放全站共用的骨架规则；页面级外观仍由 collage.css / community.css / recap.css 等覆盖，
   base.css 在它们之前加载，所以后续文件里的覆盖依然生效。 */

/* --- 顶部栏与品牌 --------------------------------------------------------- */
.skip-link{position:fixed;left:20px;top:-100px;padding:12px 18px;z-index:100;background:var(--blue);color:white;border-radius:8px}
.skip-link:focus{top:10px}
.site-header{height:90px;position:sticky;top:0;z-index:20;background:rgba(250,250,246,.96);border-bottom:1px solid rgba(23,43,54,.07);backdrop-filter:blur(18px)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:36px;position:relative}
.brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.wordmark,.brand-fallback{font-size:29px;font-weight:850;letter-spacing:-1.6px}
.brand-plus{color:var(--blue);font-size:25px;margin-left:4px;font-weight:500;vertical-align:top}
.brand-image{width:auto;max-width:200px;height:36px;object-fit:contain}
.brand-asset{display:inline-block;position:relative;vertical-align:middle;mix-blend-mode:multiply;width:188px;line-height:1}
.brand-asset.brand-cropped{aspect-ratio:var(--crop-ratio);overflow:hidden}
.brand-asset .brand-image{display:block;width:100%;height:auto;max-width:none}
.brand-asset.brand-cropped .brand-image{position:absolute;max-width:none;width:var(--image-width);height:auto;left:var(--image-left);top:var(--image-top)}
.brand-asset .brand-fallback{font-size:26px;display:grid;place-items:center;min-height:40px;color:#356acb;letter-spacing:-1px}
.brand-asset.brand-cropped .brand-fallback{position:absolute;inset:0}
.brand-asset.brand-symbol{aspect-ratio:428/430}
.brand-symbol .brand-fallback{position:absolute;inset:0;font-size:clamp(48px,9vw,110px)}
.brand-asset .brand-fallback[hidden],.brand-asset .brand-image[hidden]{display:none}
.site-header .brand-asset{transition:transform .3s ease}
.site-header .brand:hover .brand-asset{transform:translateY(-2px)}

/* --- 主导航 --------------------------------------------------------------- */
.desktop-nav{display:flex;align-items:center;gap:40px;margin-left:auto;margin-right:10px}
.desktop-nav a{font-size:15px;font-weight:600;padding:10px 0;position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;transform-origin:left;background:var(--blue);transform:scaleX(0);transition:transform .35s var(--detail-ease)}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:var(--blue)}
/* 下划线是导航唯一的强调信号：当前页常驻，悬停/键盘聚焦时抹开（见文件末尾的细节层）。 */
.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.nav-search-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
.desktop-nav .nav-search{display:inline-flex;align-items:center;gap:6px}
.desktop-nav .nav-search .nav-search-label{font-size:13px}
.site-header .desktop-nav{gap:clamp(16px,2vw,30px);white-space:nowrap}
.site-header .desktop-nav .nav-search-label{display:inline;font-size:14px}
.header-actions{display:flex;align-items:center;gap:20px}
.menu-toggle{display:none;border:0;background:none;padding:10px;width:44px;height:44px;position:relative}
.menu-toggle span{display:block;height:2px;width:22px;background:var(--ink);margin:5px 0;transition:transform .2s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* --- 手机导航 ------------------------------------------------------------- */
.mobile-nav{position:absolute;top:78px;left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 18px 40px #172b3612}
.mobile-nav a{display:block;padding:12px 18px;border-radius:8px}
.mobile-nav a[aria-current]{color:var(--blue);background:var(--pale-blue)}
.mobile-nav .nav-search{display:flex;align-items:center;gap:9px}

/* --- 页脚 ----------------------------------------------------------------- */
.site-footer{padding-top:54px;padding-bottom:27px;background:var(--paper)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:70px;align-items:start;padding-bottom:45px}
.footer-brand{display:grid;gap:18px;min-width:0}
.footer-slogan{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,50px);line-height:1.45;letter-spacing:-.02em}
.footer-slogan>span{display:block}
.footer-top nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding-top:0}
.footer-top nav h2{margin:0 0 22px;font-family:var(--display);font-weight:700;font-size:16px;color:#7389a3}
.footer-top nav a{display:block;width:fit-content;min-height:44px;padding-block:14px;font-size:19px;line-height:1.5;color:#405f82}
.footer-top nav a:hover{color:#355ba2}
.footer-wordmark{display:block;width:100%;margin-top:45px}
.footer-wordmark img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* 署名块已整块移除，这里只剩一个空容器（base.js 的挂载点契约）。 */
.footer-bottom{display:block}

/* --- 收尾区：加入区 + 页脚 -------------------------------------------------
   全站一套。首页与其余 33 个页面共用同一份规则：同一片薄荷底、同一层斜纹、
   同一个右下角 KEEP BUILDING，并且这片薄荷一路铺进页脚，两块连成一个收尾。
   加入区有两版结构（首页是 .join-section，其余页面是 .join-section.join-shared），
   这里一律按 .join-section 选中，两版因此长得一模一样，文案仍各页各写。
   选择器统一带 body 前缀：collage.css / details.css / styles.css 里各有一套更早的
   加入区写法（蓝底、圆点柔光、📌 别针、缓慢搏动），它们先加载，特异性只有 (0,1,0)
   或 (0,2,0)，这里从 (0,1,1) 起步逐条压过，那三个共享文件一个字都不用动。 */

body .join-section{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#e9f7f000 0,#dcefe4d9 26%,#cfe9dd 100%);color:#204f48}
/* 斜纹层：原先只在首页铺开，现在全站同款。两处不能省——
   display:block，collage.css 有一条同特异性的 display:none，靠"先加载"本会把这层整条藏掉；
   width/height:auto，collage.css 的 400×400 会压过 inset:0（四个方向都定位时宽高优先），
   不写这一句斜纹就只铺在左上角一小块里。
   opacity:1 同理，details.css 给这两层留了 .45。 */
body .join-section::before{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;z-index:-1;opacity:1;background:linear-gradient(90deg,transparent 0 18%,#ffffff75 18% 18.2%,transparent 18.2% 100%),linear-gradient(28deg,transparent 0 52%,#ffffff72 52% 52.3%,transparent 52.3% 100%),repeating-linear-gradient(90deg,transparent 0 92px,#5da1a933 92px 93px);transform:skewX(-12deg) scale(1.2);animation:nc-join-lines 12s linear infinite}
body .join-section::after{content:"KEEP BUILDING";display:block;position:absolute;right:7%;bottom:16px;width:auto;height:auto;background:none;color:#27655a;font:700 11px/1 var(--mono);letter-spacing:.18em;opacity:.68}
@keyframes nc-join-lines{from{transform:skewX(-12deg) translateX(-4%)}to{transform:skewX(-12deg) translateX(4%)}}

/* 版式：左文案、右纸卡。字号与两列比例全站一致。 */
body .join-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:center;gap:64px;padding-block:76px;position:relative;z-index:1}
body .join-section h2{font-size:clamp(38px,4vw,58px);line-height:1.22;letter-spacing:-.02em;color:#204f48}
body .join-section p{max-width:430px;margin-top:18px;font-size:18px;line-height:1.8;color:#2d6558}
/* 文案块上方补一枚英文小签，与首页 WHO WE ARE 那枚同一套语言：22px 短线 + mono 字母。
   纯 CSS 生成，两版结构一行都不用改；短线用背景渐变画，省下一个伪元素。 */
body .join-copy::before{content:"JOIN US";display:inline-block;margin-bottom:16px;padding-left:33px;background:linear-gradient(#5da98a,#5da98a) 0 50%/22px 2px no-repeat;font:600 11px/1.6 var(--mono);letter-spacing:.16em;color:#2f7d5d}

/* 黄纸卡片：全站同一张纸——满栏宽、方角、硬阴影，左上角一枚 mono 编号。
   animation:none 关掉 collage.css 的 paper-pulse（它让纸卡常年 ±2° 摇摆）。 */
body .join-section .join-paper{position:relative;justify-self:end;width:100%;max-width:none;min-height:245px;display:flex;flex-direction:column;justify-content:space-between;padding:34px;transform:none;border:1px solid #b2913f;background:#ffdc82;color:#302c35;box-shadow:12px 12px 0 #b7d8c4;animation:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
/* transition:none 不能省：collage.css 给这个伪元素留了 transition:all .4s，它会把
   "📌 别针"那套绝对定位 + rotate(25deg) 的旧值一直挂在元素上（位置改过来了，旋转没有），
   编号因此斜在卡片外。关掉过渡，静止态才真的是静止态。 */
body .join-section .join-paper::before{content:"NANOCAMP / 01";display:block;position:static;top:auto;right:auto;transform:none;transition:none;opacity:1;font:700 11px/1 var(--mono);letter-spacing:.12em;color:#6f5a24}
body .join-section .join-paper:hover::before{transform:none}
/* 标题字号跟着视口走：定点 46px 在 900~1000px 这个区间会把 "at NanoCamp." 挤成第三行，
   卡片跟着长高一截。clamp 到 1440px 仍是 46px，窄一点就自己收，行数始终是两行。 */
body .join-section .join-paper>strong{display:block;margin-block:20px auto;font-weight:700;font-family:var(--latin);line-height:1.05;letter-spacing:-.025em;font-size:clamp(32px,3.3vw,46px)}
body .join-section .join-paper>span{margin-top:16px;font-size:14px;line-height:1.7;color:#5c5227}
body .join-section .join-paper .button{align-self:flex-start;margin-top:22px;background:transparent;border:1px solid #544d39;color:#302c35;font-size:14px}
body .join-section .join-paper .button-plus{display:none}
/* 纸卡上的描边按钮：悬停填充那一步必须写在这里——上面的静止态 (0,3,1) 已经压过
   collage.css 的 .join-paper .button:hover (0,3,0)，不补一条就永远不变色。 */
@media(hover:hover) and (pointer:fine){
  body .join-section .join-paper:hover{transform:rotate(-1.2deg) translateY(-5px);box-shadow:16px 16px 0 #a9cdb9}
  body .join-section .join-paper .button:hover{background:#544d39;color:#ffdc78;transform:translateY(-3px)}
}
body .join-section .join-paper .button:focus-visible{background:#544d39;color:#ffdc78}
/* 上面那条悬停是靠 body 前缀升到 (0,4,1) 才压过 collage.css 的；但 interactions.css 里
   「圆角按钮」那套（斜扫高光 ::after + 悬停的柔光蓝环）也是 (0,4,1)，同特异性下后加载的
   它还是赢，于是这枚方角黄纸按钮悬停时会顶着一圈蓝光、并被扫光糊过一遍边缘。
   interactions.css 整套都只在首页生效（body[data-page="home"]），所以这里多带一个同名属性，
   特异性升到 (0,5,1)/(0,4,2)，稳稳压住它——继续靠特异性取胜，不去动加载顺序。
   两条伪元素都关掉：黄纸上这枚是硬边描边按钮，斜扫和内描边都是圆角按钮的路数。 */
body[data-page="home"] .join-section .join-paper .button::before,
body[data-page="home"] .join-section .join-paper .button::after{display:none}
body[data-page="home"] .join-section .join-paper .button:is(:hover,:focus-visible){box-shadow:none;transform:translateY(-3px)}

/* 页脚：与加入区同一片薄荷，两块连成一条收尾带。原来是"首页透明、其余页面纸白"，
   同一个页脚两种底色；这里统一。白色 border-top 会在这条色带中间画出一道亮缝，去掉。 */
body .site-footer{background:#cfe9dd;border-top:0}
@media(min-width:861px) and (max-width:1100px){
  .site-header .desktop-nav{gap:16px}
  .site-header .header-inner{gap:18px}
  .site-header .brand-asset{width:160px}
}
@media(max-width:900px){
  .footer-top{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media(max-width:860px){
  body .join-inner{gap:35px}
}
@media(max-width:640px){
  body .join-inner{grid-template-columns:minmax(0,1fr);padding-block:56px;gap:32px}
  body .join-section h2{font-size:34px}
  body .join-section p{font-size:16px}
  /* 纸卡的硬阴影在窄屏收小一点：12px 的偏移配 26px 内边距会把纸卡顶出容器右缘 */
  body .join-section .join-paper{min-height:215px;padding:26px;box-shadow:7px 7px 0 #b7d8c4}
  body .join-section .join-paper>strong{font-size:37px}
  /* 右下角那行小签在窄屏上往角里再收一点，免得压到纸卡的硬阴影 */
  body .join-section::after{right:5%;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  body .join-section::before{animation:none}
  body .join-section .join-paper:is(:hover,:focus-visible){transform:none}
}
@media(max-width:600px){
  .footer-top nav{gap:12px}
  .footer-top nav a{font-size:14px;padding-block:12px}
}

/* --- 回到顶部浮窗：下滑一定距离后常驻右下角，圆形底、中间向上箭头 --------- */
/* 显隐一律用 visibility + opacity，不用 display：display:none 会让元素失去盒子，
   尺寸变 0×0，淡入淡出也会被打断。base.js 的 hidden 属性因此只作为语义与
   可访问性状态，不参与布局——见下方 [hidden] 规则里的说明。 */
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid #d4dfe5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fafaf6;
  color: #42607a;
  cursor: pointer;
  /* 缓出：隐藏时先淡出并回落到下方，过渡结束再移出可访问性树。
     visibility 的延迟必须 ≥ opacity 时长，否则元素会先消失、看不到淡出。 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  box-shadow: 0 12px 28px -16px #24496040;
  transition:
    opacity .4s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear .4s,
    background .25s,
    border-color .25s,
    color .25s;
}
/* 保留 display（不设 none），否则上面 width/height 失效、按钮以 0×0 出现。 */
.back-to-top[hidden] { display: grid; opacity: 0; visibility: hidden; }
/* 缓入：立刻可见，再用较长、明显减速的曲线从下方浮起。
   位移 16px、起始 scale .9 让"上浮"更可见；曲线末端很慢，落定更有停顿感。 */
.back-to-top[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .54s cubic-bezier(.16, .9, .24, 1),
    transform .54s cubic-bezier(.16, .9, .24, 1),
    visibility 0s,
    background .25s,
    border-color .25s,
    color .25s;
}
.back-top-arrow { font-size: 17px; line-height: 1; }
.back-to-top:is(:hover,:focus-visible) { background: #e6eef8; border-color: #b6cadd; color: #356acb; }
.back-to-top:focus-visible { outline: 2px solid #467cce; outline-offset: 3px; }

/* --- 细节层：悬停与入场反馈（原先在 details.css） ------------------------- */
.site-header { transition: background .3s, box-shadow .3s, border-color .3s; }
.site-header.is-scrolled { background: #fafaf6f5; box-shadow: 0 5px 24px #24496009; border-bottom-color: #dce5e8; }
/* 桌面导航链接：原来悬停或停在当前页时，文字后面会浮出一片薄荷色小纸片——
   色块的面积比字本身还大，整条导航一动就花。现在换成安静的写法：
   文字转品牌蓝（见上面的 .desktop-nav a:hover / [aria-current]），
   下面一条 2px 细线从左往右抹开。细线就是 .desktop-nav a::after（定义在上面），
   这里只补一个触发态，几何值一个字都没改，因此首页与其余页面的线仍然对齐。
   全部是伪元素与颜色，不占布局，导航宽度、间距以及 scripts/check.mjs
   的锚点与尺寸校验都不受影响。 */
.desktop-nav a { transition: color .22s var(--ease); }
.desktop-nav a::before { content: none; }
.desktop-nav a:focus-visible::after { transform: scaleX(1); }
/* 悬停单独放进 (hover:hover)：触摸设备上 :hover 会粘住，点过的词条会一直留着下划线 */
@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover::after { transform: scaleX(1); }
}
.mobile-nav { border-color: #e0e8ec; box-shadow: 0 15px 45px #2a496715; padding: 10px; }
.mobile-nav:not([hidden]) { animation: menu-unfold .3s var(--detail-ease) both; transform-origin: top right; }
.mobile-nav a { position: relative; transition: color .2s, background .2s, padding-left .25s var(--detail-ease); }
.mobile-nav a::after { content: ""; position: absolute; right: 19px; top: calc(50% - 3px); width: 6px; height: 6px; border-right: 1px solid #8399a7; border-top: 1px solid #8399a7; transform: rotate(45deg); }
.mobile-nav a:is(:hover,:focus-visible) { background: #eef4fb; color: #356acb; padding-left: 23px; }
.menu-toggle { border-radius: 10px; transition: background .2s; }
.menu-toggle:is(:hover,:focus-visible), .menu-toggle[aria-expanded="true"] { background: #e9f0f6; }
.site-footer { position: relative; border-top: 1px solid #fff5; }
.footer-top nav a { position: relative; }
.footer-top nav a::after { content: ""; position: absolute; bottom: 6px; left: 0; right: 0; height: 1px; background: #77bca1; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--detail-ease); }
.footer-top nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); }

/* --- 响应式（由宽到窄） --------------------------------------------------- */
@media(min-width:901px) and (max-width:1100px){
  .footer-top{gap:52px}
  .footer-top nav{gap:24px}
}
@media(min-width:861px) and (max-width:1100px){
  .desktop-nav{gap:15px}
  .desktop-nav .nav-search-label{display:none}
  .header-inner{gap:17px}
}
@media(max-width:860px){
  .footer-top{gap:38px;padding-bottom:36px}
}
@media(max-width:640px){
  .site-header{height:76px}
  .header-inner{gap:12px}
  .wordmark,.brand-fallback{font-size:25px;letter-spacing:-1.4px}
  .brand-plus{font-size:21px;margin-left:2px}
  .brand-image{max-width:min(36vw,155px)}
  .desktop-nav{display:none}
  .header-actions{gap:4px}
  .header-actions .button{padding:8px 12px;min-height:38px;gap:12px;font-size:12px}
  .header-actions .button-plus{font-size:19px}
  .menu-toggle{display:block}
  .mobile-nav{top:68px}
  .site-header .brand-asset{width:min(36vw,155px)}
  .site-footer .brand-asset{width:180px}
  .back-to-top { right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
}
@media(max-width:360px){
  .header-actions .button-plus{display:none}
  .wordmark{font-size:23px}
}