/* ==========================================================================
   TECXIA · SITE（版面與內容）
   手機優先：沒有媒體查詢的部分就是手機（<=859px）的版面；桌機只在
   @media (min-width:860px) 裡加東西。寬欄（頂列內嵌導覽）在 >=1024px。
   欄位線只有一條（--line-w）。區塊只負責垂直留白。
   玻璃浮層的材質與定位在 glass.css；捲動進場在 motion.css。
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;                    /* 意外的橫向溢出不產生捲軸 */
  scroll-padding-top:calc(var(--bar-h) + var(--sat) + 12px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-b);
  line-height:var(--lh-b);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,dl,dd,dt,figure,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font-family:var(--font);font-size:var(--fs-b);color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

/* ── 焦點：全站唯一，顏色＝強調色。任何可聚焦的東西都有。────────────── */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* ── 跳到內容：第一個可聚焦的東西 ─────────────────────────────────── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:90;
  background:var(--ink);color:var(--paper);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);
  font-size:var(--fs-m);
}
.skip:focus-visible{left:var(--pad);top:calc(var(--sat) + var(--sp-2))}

/* ── 欄位線與區塊 ─────────────────────────────────────────────────── */
.wrap{width:var(--line-w);margin-inline:auto}
.sec{padding-block:var(--sec)}
section[id],main[id]{scroll-margin-top:calc(var(--bar-h) + var(--sat) + 12px)}
.band{background:var(--band)}                 /* 區塊帶：實色面，不是漸層 */

/* ── 標題層：區塊標題 + 引導句（兩者都不是 eyebrow，句在標題之下）──── */
.sec-h{display:grid;gap:var(--sp-2);max-width:56ch}
.h2{
  font-family:var(--font-d);font-size:var(--fs-h);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.lead{font-size:var(--fs-l);line-height:var(--lh-b);color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}

/* ── 文字型動作（連結）：底線是常駐的，所以觸控裝置也看得到它是連結 ─── */
.tx{
  text-decoration:underline;text-underline-offset:.24em;
  text-decoration-thickness:1px;text-decoration-color:var(--ink-3);
  transition:text-decoration-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.tx:hover{text-decoration-color:currentColor}

/* ── 主要按鈕：全站唯一填色的東西（強調色）─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:var(--tap);min-width:var(--tap);padding:0 clamp(18px,2.2vw,26px);
  background:var(--accent);color:var(--on-accent);
  border-radius:var(--r-1);font-size:var(--fs-b);font-weight:500;line-height:1;
  transition:background var(--dur-1) var(--ease-out),translate var(--dur-1) var(--ease-out);
}
.btn:hover{background:color-mix(in oklab,var(--accent) 86%,#000)}
.btn:active{translate:0 1px}
/* 次要動作：同一套框，不填色。這是按鈕不是裝飾框，所以自己有框線。 */
.btn-2{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:var(--tap);min-width:var(--tap);padding:0 clamp(16px,2vw,22px);
  color:var(--ink);border-radius:var(--r-1);
  font-size:var(--fs-b);font-weight:500;line-height:1;
  background:var(--field);
  transition:background var(--dur-1) var(--ease-out);
}
.btn-2:hover{background:color-mix(in oklab,var(--ink) 12%,transparent)}
.arw{font-size:.9em;translate:0 0;transition:translate var(--dur-2) var(--ease-out)}
.btn:hover .arw,.btn-2:hover .arw{translate:.18em 0}

/* ── 品牌鎖定：幾何逐字沿用（兩道 45° 斜筆 + 四端垂直橫槓），只有字級
      與間距隨場合調整。記號本身不重畫。─────────────────────────────── */
.lockup{display:inline-flex;align-items:center;white-space:nowrap}
.lk-mark{width:1.2em;height:1.2em;flex:none;margin-right:.62em;shape-rendering:geometricPrecision}
/* 字標全站只有一個字面（幾何無襯線，與記號同一個性格）：
   頂列、頁尾、主標是同一組鎖定，逐字一致。Fraunces 只負責內容層的標題。 */
.lk-name{font-family:var(--font);font-weight:600;letter-spacing:inherit}
.lk-sep{width:1px;height:1.05em;flex:none;background:currentColor;opacity:.4;margin:0 .42em}
.lk-sub{color:var(--ink-3)}

/* ══ 01 HERO ═════════════════════════════════════════════════════════
   hero 同時是粒子場景的容器：.hero-stage 以 inset:0 貼滿整個區塊（含上下留白），
   canvas 由 js/hero-attractor.js 注入：只有像素，pointer-events:none，永遠不吃
   點擊（導航與按鈕的點擊不能被它搶）。文字浮在它上面（.wrap 抬到 z-index 1）。*/
.hero{position:relative;overflow:clip;padding-top:calc(var(--bar-h) + var(--sat) + clamp(44px,7vw,92px));padding-bottom:clamp(40px,6vw,76px)}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-stage > .hero-gl{display:block;width:100%;height:100%;pointer-events:none}
.hero > .wrap{position:relative;z-index:1}
/* WebGL2 不可用時的靜態後備：一張極淡的點陣（純 CSS、靜止、不動可讀性）。
   用遮罩 + --ink 上色，所以深淺兩張紙都對；沒有漸層、沒有生成圖。
   這個狀態只由腳本寫上，所以沒有 JS 時頁面與從前完全一樣。 */
.hero-stage[data-hero-gl="off"]{
  background-color:var(--ink);
  opacity:.14;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Ccircle%20cx='1.2'%20cy='1.2'%20r='1.2'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Ccircle%20cx='1.2'%20cy='1.2'%20r='1.2'%20fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:24px 24px;
  mask-size:24px 24px;
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;
}
.hero-in{display:flex;flex-direction:column}
.hero-d{
  display:flex;align-items:center;gap:.11em;
  font-family:var(--font);font-weight:600;
  font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);
}
.hero-d .lk-mark{width:.82em;height:.82em;margin-right:0}
.hero-lead{margin-top:clamp(20px,2.6vw,32px);font-size:var(--fs-l);line-height:var(--lh-b);color:var(--ink-2);max-width:44ch}
.hero-act{margin-top:clamp(24px,3vw,40px)}
.hero-brand{
  margin-top:auto;
  display:flex;flex-wrap:wrap;gap:.3em 1.15em;
  list-style:none;padding:clamp(32px,5vw,64px) 0 0;
  font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-2);
  max-width:52ch;
}
.hero-brand li{white-space:nowrap}
@media (max-width:520px){
  /* 手機：七個字排成 4 + 3 兩列，不讓最後一個字自己落單 */
  .hero-brand{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:.4em 1.05em}
}

/* ══ 02 WORK ═════════════════════════════════════════════════════════ */
.work-list{margin-top:clamp(40px,5vw,72px);display:grid;gap:clamp(56px,7vw,104px)}
.item{display:grid;gap:clamp(20px,3vw,32px);align-items:start}
/* 圖位：沒有素材時留空的容器。有 aspect-ratio、有色階面、有說明；
   不放佔位圖、不用生成圖、不拿 SVG 冒充照片。 */
.slot{margin:0;aspect-ratio:16 / 10}
.slot-in{
  display:flex;align-items:flex-end;height:100%;
  padding:clamp(14px,1.8vw,22px);
  background:var(--slot);border-radius:var(--r-1);
}
.slot-note{display:block;font-size:var(--fs-b);line-height:var(--lh-b);color:var(--ink-2);max-width:42ch}
.head{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px)}
.app{width:88px;height:88px;flex:none;border-radius:var(--r-1)}
.name{
  font-family:var(--font-d);font-size:var(--fs-h);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.name a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;text-decoration-color:var(--ink-3);transition:text-decoration-color var(--dur-1) var(--ease-out)}
.name a:hover{text-decoration-color:currentColor}
.line{margin-top:var(--sp-2);font-size:var(--fs-l);color:var(--ink);max-width:40ch}
.log{margin-top:clamp(20px,2.4vw,28px);display:grid;gap:clamp(12px,1.6vw,18px)}
.log > div{display:grid;gap:2px}
.log dt{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3)}
.log dd{font-size:var(--fs-b);line-height:var(--lh-b);color:var(--ink-2);max-width:52ch}
.acts{margin-top:clamp(20px,2.4vw,28px)}

/* ══ 03 CAPABILITIES ═════════════════════════════════════════════════ */
.cap-body{margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(24px,3vw,36px);max-width:var(--measure)}
.cap-p{font-size:var(--fs-b);color:var(--ink-2)}
.cap-list{margin-top:clamp(36px,4.4vw,64px);display:grid;gap:clamp(24px,3vw,40px)}
.cap-list li{display:grid;gap:var(--sp-1)}
.ci-t{
  font-family:var(--font-d);font-size:var(--fs-xl);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.ci-d{font-size:var(--fs-b);color:var(--ink-2);max-width:var(--measure)}

/* ══ 04 PROCESS：真正的 <ol>，序號由 list marker 產生（不是裝飾編號）═ */
.steps{
  margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(32px,4.4vw,56px);
  list-style-type:decimal;list-style-position:inside;
}
/* li 保持 list-item（display:grid 會把序號吃掉）；間隔用 margin 給 */
.steps > li{display:list-item}
.step-m{margin-top:2px}
.step-d{margin-top:var(--sp-1)}
.steps > li::marker{
  font-family:var(--font-d);font-size:var(--fs-xl);color:var(--ink-2);
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500;
}
.step-t{
  font-family:var(--font-d);font-size:var(--fs-xl);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.step-m{font-size:var(--fs-b);line-height:var(--lh-b);color:var(--ink-2)}
.step-d{font-size:var(--fs-b);color:var(--ink-2);max-width:var(--measure)}

/* ══ 05 ABOUT ════════════════════════════════════════════════════════ */
.about-grid{margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(28px,3.6vw,56px)}
.about-p{font-size:var(--fs-b);color:var(--ink-2);max-width:var(--measure)}
.about-p + .about-p{margin-top:var(--sp-3)}
.principles{margin-top:clamp(28px,3.4vw,48px);display:grid;gap:clamp(20px,2.6vw,32px)}
.principles li{display:grid;gap:2px}
.pr-t{
  font-family:var(--font-d);font-size:var(--fs-xl);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.pr-d{font-size:var(--fs-b);color:var(--ink-2);max-width:var(--measure)}
.facts{margin-top:clamp(28px,3.4vw,48px);display:grid;gap:var(--sp-3)}
.facts > div{display:grid;gap:2px}
.facts dt{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3)}
.facts dd{font-size:var(--fs-b);color:var(--ink-2)}
.facts-note{margin-top:var(--sp-3);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3);max-width:var(--measure)}

/* ══ 06 CONTACT ══════════════════════════════════════════════════════ */
.contact-main{margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start}
.contact-left{display:grid;gap:var(--sp-1);justify-items:start}
.mail{
  font-family:var(--font-d);font-size:var(--fs-h);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
  display:inline-flex;align-items:center;min-height:var(--tap);
  text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px;text-decoration-color:var(--ink-3);
  transition:text-decoration-color var(--dur-1) var(--ease-out);
}
.mail:hover{text-decoration-color:currentColor}
.ctime{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3)}
.ctime time{font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ══ 07 FOOTER ═══════════════════════════════════════════════════════ */
.foot{padding-block:clamp(32px,4.4vw,56px) calc(clamp(40px,5vw,64px) + var(--sab))}
.foot-in{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5);
  justify-content:space-between;
}
.foot .lockup{font-size:var(--fs-m)}
.foot-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-2)}

/* ══ 桌機（>=860px）═════════════════════════════════════════════════ */
@media (min-width:860px){
  /* 作品：左圖右文（圖永遠在左），文字欄自成一個節奏 */
  /* 桌機：hero 是一個場，有自己的最小高度；手機由內容決定，不留空白 */
  .hero-in{min-height:clamp(300px,48svh,520px)}
  .item{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:clamp(32px,4.4vw,64px)}
  .log > div{grid-template-columns:minmax(84px,104px) minmax(0,1fr);gap:var(--sp-2);align-items:baseline}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.6vw,64px) clamp(32px,5vw,72px)}
  .cap-list{gap:clamp(28px,3.2vw,44px)}
  .cap-list li{grid-template-columns:minmax(160px,20%) minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
  .about-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,5vw,80px)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-5)}
  .contact-main{grid-template-columns:minmax(0,1fr) max-content;gap:var(--sp-3) clamp(32px,5vw,64px);align-items:center}
}
/* 引導句、按鈕、品牌行與字標的文字共用同一條左線：記號(0.82em)+間距(0.11em)
   懸在主標的左邊界裡，所以文字的起點是 0.93em。 */
@media (min-width:1024px){
  .hero-lead,.hero-act,.hero-brand{padding-left:calc(var(--fs-d) * .93)}
}

/* ══ 更寬（>=1100px）：應用程式圖示放大到該有的份量 ───────────────── */
@media (min-width:1100px){
  .app{width:146px;height:146px}
}