@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-sans-tc-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/noto-sans-tc-500.woff2') format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-sans-tc-700.woff2') format('woff2')}

:root{
  --fluid: clamp(1px, calc(0.78px + 0.017vw), 1.16px);
  --fs-xs: calc(13 * var(--fluid));
  --fs-sm: calc(15 * var(--fluid));
  --fs-base: calc(18 * var(--fluid));
  --fs-lg: calc(22 * var(--fluid));
  --fs-xl: calc(28 * var(--fluid));
  --fs-2xl: calc(34 * var(--fluid));
  --fs-3xl: calc(42 * var(--fluid));
  --radius: 6px;
  --page: calc(1000 * var(--fluid));
  --page-wide: calc(1240 * var(--fluid));

  --ground: oklch(0.86 0.021 82);
  --paper: oklch(0.995 0.002 240);
  --paper-2: oklch(0.975 0.003 240);
  --slab: oklch(0.955 0.012 82);
  --line: oklch(0.90 0.006 240);
  --ink: oklch(0.40 0.014 240);
  --ink-2: oklch(0.50 0.012 240);
  --ink-3: oklch(0.52 0.012 240);
  --gold: #c9a86a;
  --gold-deep: oklch(0.50 0.075 82);
  --on-gold: oklch(0.22 0.03 82);
  --gold-on-ink: oklch(0.86 0.06 82);
  --on-ground: oklch(0.32 0.02 82);
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground: oklch(0.30 0.022 82);
    --paper: oklch(0.243 0.005 355);
    --paper-2: oklch(0.283 0.005 355);
    --slab: oklch(0.25 0.014 82);
    --line: oklch(0.32 0.008 240);
    --ink: oklch(0.88 0.008 240);
    --ink-2: oklch(0.76 0.008 240);
    --ink-3: oklch(0.72 0.008 240);
    --gold-deep: oklch(0.84 0.075 82);
    --gold-on-ink: oklch(0.42 0.075 82);
    --on-ground: oklch(0.94 0.02 82);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:var(--fs-base);font-weight:400;line-height:2;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:50%;translate:-50% 0;top:calc(-6 * var(--fs-base));z-index:200;
  background:var(--gold);color:var(--on-gold);
  padding:calc(0.5 * var(--fs-base)) calc(1.4 * var(--fs-base));
  border-radius:999px;font-size:var(--fs-sm);transition:top .18s;
}
.skip:focus{top:calc(0.8 * var(--fs-base))}

.nav{background:var(--paper)}
.nav-in{
  max-width:var(--page-wide);margin:0 auto;
  padding:calc(0.9 * var(--fs-base)) calc(1.4 * var(--fs-base));
  display:flex;align-items:center;gap:calc(1.6 * var(--fs-base));
}
.logo{display:block}
.logo img{height:calc(2.2 * var(--fs-base));width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:calc(1.5 * var(--fs-base));margin:0 auto}
.nav ul a{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}
.nav ul a:hover{color:var(--gold-deep)}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-base);line-height:1.4;font-family:inherit;
  padding:calc(0.55 * var(--fs-base)) calc(2.2 * var(--fs-base));
  border-radius:999px;border:1px solid var(--gold);
  background:var(--gold);color:var(--on-gold);cursor:pointer;
}
.pill:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:oklch(0.99 0.01 82)}
.pill-quiet{background:transparent;color:var(--on-ground);border-color:currentColor}
.pill-quiet:hover{background:transparent;color:var(--gold-deep);border-color:var(--gold-deep)}
.pill-sm{font-size:var(--fs-sm);padding:calc(0.35 * var(--fs-base)) calc(1.3 * var(--fs-base))}

.hero{
  position:relative;isolation:isolate;padding:0;
  background:var(--ground);color:var(--ink);
  min-height:calc(100svh - 5 * var(--fs-base));
  display:grid;grid-template-rows:1fr auto;
  overflow:hidden;
}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* 橫幅：滿版、貼在下緣、疊在畫面之上。蒙版在它自己的背景，上緣以漸層溶入底圖 */
.hero .band{
  grid-row:2;position:relative;width:100%;
  background:color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter:blur(calc(1.4 * var(--fs-base))) saturate(115%);
  -webkit-backdrop-filter:blur(calc(1.4 * var(--fs-base))) saturate(115%);
  padding:calc(1.7 * var(--fs-base)) calc(1.4 * var(--fs-base)) calc(1.9 * var(--fs-base));
}
/* 溶解帶：橫幅上緣往上長出一段漸層，讓交界不是一條直線 */
.hero .band::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  height:calc(6 * var(--fs-base));pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--paper) 0%, transparent),
    color-mix(in oklab, var(--paper) 42%, transparent) 58%,
    color-mix(in oklab, var(--paper) 94%, transparent));
  backdrop-filter:blur(calc(0.7 * var(--fs-base)));
  -webkit-backdrop-filter:blur(calc(0.7 * var(--fs-base)));
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 62%);
  mask-image:linear-gradient(to bottom, transparent, #000 62%);
}
.hero .band > * {max-width:var(--page-wide);margin-inline:auto}
.hero h1{
  font-size:var(--fs-3xl);font-weight:400;line-height:1.3;letter-spacing:.01em;
  text-align:center;text-wrap:balance;overflow-wrap:anywhere;color:var(--ink);
}
.hero .cta{margin-top:calc(1.1 * var(--fs-base));display:flex;justify-content:center;gap:calc(0.8 * var(--fs-base));flex-wrap:wrap}
.hero .pill-quiet{color:var(--ink);border-color:var(--line)}
.hero .under{
  margin-top:calc(0.85 * var(--fs-base));text-align:center;color:var(--ink-2);
  font-size:var(--fs-sm);line-height:1.9;
}

section{padding-block:calc(4.4 * var(--fs-base))}
.alt{background:var(--paper-2)}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:calc(1.4 * var(--fs-base))}
.wrap-wide{max-width:var(--page-wide);margin:0 auto;padding-inline:calc(1.4 * var(--fs-base))}
.badge{display:flex;justify-content:center;margin-bottom:calc(0.5 * var(--fs-base))}
.badge svg{width:calc(3.1 * var(--fs-base));height:calc(3.1 * var(--fs-base));color:var(--ink-3)}
h2{
  font-size:var(--fs-2xl);font-weight:400;line-height:1.5;text-align:center;
  letter-spacing:.02em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere;
}
.sub{
  margin-top:calc(1.8 * var(--fs-base));font-size:var(--fs-xl);font-weight:400;
  line-height:1.6;text-align:center;color:var(--ink);text-wrap:balance;max-width:none;
}
p{color:var(--ink-2);line-height:2}
.body{margin-top:calc(1.4 * var(--fs-base))}
.body p + p{margin-top:calc(1.2 * var(--fs-base))}

.slab{background:var(--slab);border-radius:var(--radius);margin-top:calc(2 * var(--fs-base));overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:1.7}
caption{
  text-align:left;padding:calc(1.1 * var(--fs-base)) calc(1.4 * var(--fs-base)) 0;
  font-size:var(--fs-xs);color:var(--ink-3);
}
th,td{padding:calc(0.75 * var(--fs-base)) calc(1.4 * var(--fs-base));text-align:left;vertical-align:top}
thead th{font-weight:700;color:var(--ink);white-space:nowrap}
tbody th{font-weight:400;color:var(--ink);white-space:nowrap}
tbody td{color:var(--ink-2)}



.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.4 * var(--fs-base));margin-top:calc(2.4 * var(--fs-base))}
.pair img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.pair figcaption{margin-top:calc(0.6 * var(--fs-base));text-align:center;font-size:var(--fs-xs);color:var(--ink-3)}
figure{margin:0}
.shot{margin-top:calc(2.4 * var(--fs-base))}
.shot img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
figcaption{
  margin-top:calc(0.9 * var(--fs-base));text-align:center;
  font-size:var(--fs-xs);color:var(--ink-3);line-height:1.8;
}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(0.6 * var(--fs-base));margin-top:calc(2 * var(--fs-base));max-width:none}
.chips b{
  font-weight:400;font-size:var(--fs-sm);line-height:1.6;
  padding:calc(0.32 * var(--fs-base)) calc(1 * var(--fs-base));
  border-radius:999px;background:var(--slab);color:var(--ink-2);
}
.chips b.on{background:var(--gold);color:var(--on-gold)}

.draft{
  margin-top:calc(2 * var(--fs-base));padding:calc(1.8 * var(--fs-base));
  border:1px dashed var(--gold);border-radius:var(--radius);background:var(--slab);
}
.draft p{color:var(--ink);max-width:none}
.stamp{
  display:inline-block;font-size:var(--fs-xs);letter-spacing:.24em;line-height:1.8;
  padding:calc(0.15 * var(--fs-base)) calc(0.8 * var(--fs-base));
  border:1px solid var(--gold-deep);color:var(--gold-deep);border-radius:999px;
  vertical-align:middle;margin-left:calc(0.5 * var(--fs-base));
}

.rows{list-style:none;margin-top:calc(2 * var(--fs-base));counter-reset:r}
.rows li{
  counter-increment:r;display:grid;
  grid-template-columns:calc(2.6 * var(--fs-base)) minmax(0,1fr);
  gap:calc(0.9 * var(--fs-base));padding-block:calc(0.7 * var(--fs-base));
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2);
}
.rows li:last-child{border-bottom:0}
.rows li::before{content:counter(r,decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-xs);color:var(--gold-deep)}

.form{
  margin-top:calc(2.2 * var(--fs-base));display:flex;flex-direction:column;
  align-items:center;gap:calc(0.7 * var(--fs-base));
}
.form label{font-size:var(--fs-sm);color:var(--ink-2)}
.form .row{display:flex;flex-wrap:wrap;gap:calc(0.7 * var(--fs-base));justify-content:center;width:100%}
.form input{
  flex:0 1 calc(20 * var(--fs-base));min-width:0;
  font:400 var(--fs-base)/1.6 var(--mono);color:var(--ink);
  padding:calc(0.55 * var(--fs-base)) calc(1.2 * var(--fs-base));
  border:1px solid var(--line);border-radius:999px;background:var(--paper);text-align:center;
}
.form input::placeholder{color:var(--ink-3)}
.note{margin-top:calc(1.2 * var(--fs-base));text-align:center;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.9;max-width:none}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(2.6 * var(--fs-base));margin-top:calc(2.2 * var(--fs-base))}
.contact div{text-align:center}
.contact dt{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ink-3);line-height:2;text-align:center}
.contact dd{font-family:var(--mono);font-size:var(--fs-base);line-height:1.7;text-align:center}
.contact a:hover dd{color:var(--gold-deep)}

footer{background:var(--ground);color:var(--on-ground);padding-block:calc(2.6 * var(--fs-base))}
.foot{
  max-width:var(--page-wide);margin:0 auto;padding-inline:calc(1.4 * var(--fs-base));
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(1.4 * var(--fs-base));
  font-size:var(--fs-xs);line-height:2;
}
.foot .sp{flex:1}


@media (max-width:52rem){
  .nav ul{display:none}
  .pair{grid-template-columns:minmax(0,1fr)}
  section{padding-block:calc(3.2 * var(--fs-base))}
  .hero h1{font-size:var(--fs-2xl)}
  .hero .band{padding:calc(1.8 * var(--fs-base)) calc(1.2 * var(--fs-base)) calc(2 * var(--fs-base))}
  h2{font-size:var(--fs-xl)}
  .sub{font-size:var(--fs-lg)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media (forced-colors:active){
  .slab,.draft,.chips b{border:1px solid CanvasText}
  .pill{border:1px solid ButtonText}
}
@media print{
  .nav,.skip,.hero .cta,.form{display:none}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.6}
  .hero,footer{background:#fff;color:#000}
  .shot img,.slab{border:1px solid #999;break-inside:avoid}
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:9pt}
}
.cta-center{display:flex;justify-content:center;margin-top:calc(2.2 * var(--fs-base))}
.centered{text-align:center}

/* ── 嵌入的 Helix Studio 展示版。視窗本身在展示層。 ── */

.hero .bg{pointer-events:none}
/* 比例給寬螢幕，下限給窄螢幕：一扇視窗要放得下頂欄、一個畫面、狀態列，低於 440px 就只剩邊框。 */
/* 寬度先定死，比例才只能決定高度；否則下限一生效，比例會反過來把寬度撐大。
   下限給窄螢幕：一扇視窗要放得下頂欄、一個畫面、狀態列。 */
.hx-stage{margin-top:calc(2.4 * var(--fs-base));width:100%;aspect-ratio:16 / 10;
  min-height:440px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}