/* 00 — The First Builders : Selfmade wordmark typeset from the first buyers' names */
.first{position:relative;background:var(--ink);min-height:100svh;padding:96px 6vw 150px;overflow:hidden;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.first .cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px}
.first .cue .bar{width:1px;height:34px;background:rgba(242,240,235,.3);position:relative;overflow:hidden}
.first .cue .bar::after{content:"";position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--red);animation:drop 2.4s cubic-bezier(.5,0,.5,1) infinite}
.first .bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.34);pointer-events:none}
.first::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(5,5,5,.05) 0%,rgba(5,5,5,.72) 78%),linear-gradient(180deg,rgba(5,5,5,.45) 0%,transparent 22%,transparent 72%,var(--ink) 100%);pointer-events:none}
.first-head,.first-mark{position:relative;z-index:3}
.first .cue{z-index:4}
.first-head{max-width:820px;margin:0 auto 64px;text-align:center}
.first-head .idx{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
.first-head .idx .mono.red{color:#f4483c}
.first-head .idx .ln{width:26px;height:1px;background:#f4483c}
.first-head h2{font-size:clamp(28px,3.2vw,54px);line-height:1.08;margin-bottom:22px}
.first-head .zh{font-size:clamp(15px,1.15vw,18px);color:var(--fg-soft)}
.first-mark{position:relative;width:100%;max-width:1400px;margin:0 auto}
.fm-cv{display:block;width:100%}
@media (max-width:820px){
  .first{padding:80px 20px 120px;min-height:100svh}
  .first .cue{bottom:26px}
  .first-head{margin-bottom:44px}
  .first-head .idx{margin-bottom:20px;gap:10px}
  .first-head .idx .ln{width:22px}
  .first-head .idx .ln:last-child{display:none}
  .first-head h2{font-size:clamp(24px,7vw,40px);line-height:1.12;margin-bottom:16px}
  .first-head .zh{font-size:14px}
}
@media(max-height:520px) and (orientation:landscape){.first{min-height:auto;padding:96px 6vw 88px}}
@media(prefers-reduced-motion:reduce){.first .cue .bar::after{animation:none}}

/* ===== SHOP CTA ===== */
.shop{position:fixed;z-index:205;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);background:rgba(5,5,5,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(242,240,235,.14);transition:opacity .5s,transform .6s cubic-bezier(.16,.8,.24,1),border-color .3s,background .3s;opacity:0;pointer-events:none}
.shop .mono{color:var(--red)}
.shop-t{font-family:"Archivo",sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.01em}
.shop-arr{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--fg-soft);transition:transform .3s,color .3s}
.shop:hover{border-color:rgba(242,240,235,.4);background:rgba(10,10,10,.92)}
.shop:hover .shop-arr{transform:translateX(4px);color:var(--fg)}
.shop.on{opacity:1;pointer-events:auto}
@media (min-width:821px){
  .shop{top:22px;right:26px;padding:12px 18px 12px 16px;transform:translateY(-10px)}
  .shop.on{transform:none}
}
@media (max-width:820px){
  .shop{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));justify-content:center;min-height:54px;padding:0 18px;transform:translateY(16px)}
  .shop.on{transform:none}
  .shop-t{font-size:15px}
}
.sitelink{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;margin:64px auto 0;text-decoration:none;color:#fff;background:var(--red);border:1px solid var(--red);transition:background .3s,border-color .3s}
.sitelink-t{font-family:"Archivo",sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.01em}
.sitelink-arr{font-family:"JetBrains Mono",monospace;font-size:14px;transition:transform .3s}
.sitelink:hover{background:#b91d15;border-color:#b91d15}
.sitelink:hover .sitelink-arr{transform:translateX(4px)}
@media (max-width:820px){.sitelink{width:100%;max-width:360px;justify-content:center}}
.ctdsec .iglink{margin-top:18px}
@media (max-width:820px){.ctdsec .iglink{margin-top:14px}.sitelink{margin-top:52px}}
.ctdsec .sitelink,.ctdsec .iglink{display:flex;width:max-content;max-width:100%}
.ctdsec .iglink{margin-left:auto;margin-right:auto}
@media (max-width:820px){.ctdsec .sitelink{width:100%;max-width:360px}}