/* ─────────────────────────────────────────────────────────────
SIXTY 官網共用底層
─────────────────────────────────────────────────────────────
🔴 這一支是 index.html 與未來 d/index.html（分享頁）共用的。
分享頁只帶合成器播某一天的音符事件，演算法不上網——但它要長得
跟官網是同一個東西，所以字體、色票、間距住在這裡，不住在頁面裡。
加新頁面時只要 這一支，不要複製一份改。
🔴 色票取自 app 的視覺 SSOT `reference/prototype/SIXTY_App_v4.dc.html`
的 theme() 函式（L592–602），**mature 分支**，不是 young。
young 那組是另一個世界觀（Archivo Black、橘色按鈕），app 沒出貨。
設計檔如果跟這裡不一致，以 v4 為準並回頭改這裡，不要在頁面裡就地覆蓋。
⚠️ app 的數值是給 400px 寬的手機框用的（h1 是 24px、標籤 10px）。
網頁不能照抄——桌機上 24px 的主標會小得像註腳。
下面保留的是**比例與字距的性格**（大字距、全大寫小標、克制的字級差），
絕對值用 clamp() 隨視窗長大。
───────────────────────────────────────────────────────────── */
/* ── 字體 ────────────────────────────────────────────────────
jf open 粉圓，與 app 同一套。授權 SIL OFL 1.1。
🔴 OFL 有兩件事要做到，而網站也算「散布」：
① 附上授權全文 —— `web/OFL-huninn.txt`，頁尾要連得到。
② 這支字體宣告了 Reserved Font Name（'open huninn' / 'huninn'），
所以**改過的版本不可以沿用那個名字**。我們送出的是原始未修改的
TTF，沒有踩到這條；但如果之後為了減肥去做 subset 或轉 woff2，
那就是 Modified Version，family 名要換掉，頁尾也要跟著改口。
減肥是效能問題，改名是授權問題，兩件事要一起決定。
⚠️ 粉圓的漢字部分衍生自 Kosugi Maru（Apache-2.0），
所以 `web/Apache-2.0-KosugiMaru.txt` 也要一起送。
⚠️ 這個 TTF 是 4.9 MB。手機上第一次載入會等，所以：
① font-display:swap —— 先用系統字上畫面，字體到了再換，不留白。
② fallback 疊了正體中文的系統字（蘋方、思源），換字時位移比較小。 */
@font-face {
font-family: 'Huninn';
src: url('./fonts/jf-openhuninn-2.1.ttf') format('truetype');
/* ⚠️ 粉圓只有一個字重。這裡**故意宣告成 400 而不是 400 500**：
宣告成範圍的話，瀏覽器會認為 500／600 都「有這個字重」而直接拿 400 去畫，
標題就跟內文一樣細。宣告成 400，600 落在範圍外，瀏覽器才會補合成粗體
—— 設計稿在 Google Fonts 上拿到的也正是合成粗體（那邊同樣只有 400）。 */
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--font-sans: 'Huninn', 'PingFang TC', 'Noto Sans TC',
-apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* 淺色（v4 mature / light）。 */
--bg: #EAE8E3;
--bg-image: none;
--card: rgba(255, 255, 255, .5);
--bar: rgba(234, 232, 227, .7);
--sheet: rgba(255, 255, 255, .85);
--text: #1B1D26;
--sub: rgba(27, 29, 38, .6);
--faint: rgba(27, 29, 38, .4);
--line: rgba(27, 29, 38, .12);
--line2: rgba(27, 29, 38, .26);
--btn-bg: #1B1D26;
--btn-fg: #EAE8E3;
--acc: #FF3B00;
--acc-fg: #FFFFFF;
/* 版面尺度。數值抄自 landing 設計稿的容器（max-width:1080px、
padding:0 clamp(18px,4vw,40px)），不是我自己挑的。 */
--wrap: 1080px;
--gutter: clamp(18px, 4vw, 40px);
--section-y: clamp(50px, 8vw, 90px); /* 設計稿每一段的下緣間距 */
--radius: 16px; /* v4 的 btnR，mature 是 16px */
}
/* 深色兩條路，data-theme 一定贏過 media query。
① prefers-color-scheme —— 系統設定。
② :root[data-theme=...] —— 頁面上的手動切換。
🔴 2026-08-11 起，官網**預設淺色**（三頁的 都寫死 data-theme="light"），
所以 ① 這一段實務上不會生效——它留著是因為那個
`:not([data-theme='light'])` 守衛正好讓「寫死 light」自動關掉整段深色，
拆掉 media query 反而要動括號結構（我試過，漏了一個右括號整份 CSS 就壞）。
真正在跑的是 ②：按了深色 → data-theme='dark' → 第 107 行那段。 */
/* 捲軸與表單元件跟著**頁面**的主題，不是跟著系統。
`` 只是宣告兩種都支援；
沒有這兩行的話，深色系統的訪客會在淺色頁面上看到一條深色捲軸。 */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg: #0B0A09;
/* v4 的深色底不是純色，是一層極淡的暖光加一個從頂端散開的徑向漸層。
少了它整頁會像關燈的黑，而不是 app 那種「暗處有溫度」。 */
--bg-image:
linear-gradient(rgba(232, 131, 58, .035), rgba(232, 131, 58, 0) 32%),
radial-gradient(120% 90% at 50% 0%, #181510 0%, #100F0C 55%, #0B0A09 100%);
--card: rgba(239, 233, 220, .05);
--bar: rgba(12, 11, 10, .72);
--sheet: rgba(25, 23, 19, .94);
--text: #EFE9DC;
--sub: rgba(239, 233, 220, .56);
--faint: rgba(239, 233, 220, .32);
--line: rgba(239, 233, 220, .09);
--line2: rgba(239, 233, 220, .2);
--btn-bg: #EFE9DC;
--btn-fg: #12110E;
/* 深色的強調色是 #E8833A 不是 #FF3B00 —— 純橘紅在深底上會發光刺眼。
這是 v4 自己分開的兩個值，不是同一個色加透明度。 */
--acc: #E8833A;
--acc-fg: #12110E;
}
}
:root[data-theme='dark'] {
--bg: #0B0A09;
--bg-image:
linear-gradient(rgba(232, 131, 58, .035), rgba(232, 131, 58, 0) 32%),
radial-gradient(120% 90% at 50% 0%, #181510 0%, #100F0C 55%, #0B0A09 100%);
--card: rgba(239, 233, 220, .05);
--bar: rgba(12, 11, 10, .72);
--sheet: rgba(25, 23, 19, .94);
--text: #EFE9DC;
--sub: rgba(239, 233, 220, .56);
--faint: rgba(239, 233, 220, .32);
--line: rgba(239, 233, 220, .09);
--line2: rgba(239, 233, 220, .2);
--btn-bg: #EFE9DC;
--btn-fg: #12110E;
--acc: #E8833A;
--acc-fg: #12110E;
}
/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-weight: 400;
color: var(--text);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
line-height: 1.75; /* 正體中文的行距要比英文鬆，1.5 會擠 */
}
/* 🔴 深色的底是一層徑向漸層（v4 的 bg），它必須以**視窗**為基準，
不是以整份文件為基準 —— 不然頁面越長，頂端那圈暖光就被拉得越開，
最後糊成一整片。
⚠️ 直覺的作法是 `background-attachment: fixed`，**但 iOS Safari 長年
把 fixed 當成 scroll 處理**，那正是「手機優先 × 深色」這個交叉點。
改用一層 position:fixed 的偽元素鋪底，每個瀏覽器行為都一樣。
⚠️ 這一項我只在桌機 Chrome 上驗過，沒有真的 iOS 裝置可以測。 */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-color: var(--bg);
background-image: var(--bg-image);
pointer-events: none;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* ── 版面 ─────────────────────────────────────────────────── */
/* ⚠️ 設計稿的容器是 `max-width:1080px; padding:0 clamp(18px,4vw,40px)`，
而它**沒有**設 box-sizing:border-box —— 所以 1080 是「內容」的寬度，
左右留白是加在外面的，總寬 1160。
我們有全域 border-box（該有），照抄的話內容會縮成 1000，
1440 視窗下整塊內容窄 80px、往內縮 40px。看得出來。
所以這裡把留白加回 max-width，讓內容維持設計稿的 1080。 */
.wrap {
width: 100%;
max-width: calc(var(--wrap) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ── 排版原語 ─────────────────────────────────────────────
命名照 v4 的 h1 / h1s / h2 / h3 / eyebrow，方便兩邊對照。 */
.t-h1 {
font-weight: 500;
font-size: clamp(1.75rem, 6vw, 3.25rem);
line-height: 1.35;
letter-spacing: .01em;
margin: 0;
}
.t-h1s { /* 主標下面那一句 */
font-weight: 400;
font-size: clamp(.95rem, 2.4vw, 1.125rem);
line-height: 1.9;
color: var(--sub);
margin: 0;
}
.t-h2 {
font-weight: 500;
font-size: clamp(1.35rem, 4vw, 2rem);
line-height: 1.45;
margin: 0;
}
.t-h3 {
font-weight: 500;
font-size: clamp(1.05rem, 2.6vw, 1.25rem);
line-height: 1.6;
margin: 0;
}
.t-body {
font-size: clamp(.9rem, 2.2vw, 1rem);
line-height: 1.95;
color: var(--sub);
margin: 0;
}
/* 眉標。v4 用 10px / .16em / 全大寫 / 強調色。
⚠️ text-transform:uppercase 對中文沒作用也沒害處，但字距 .16em
套在中文上會鬆到散開，所以中文的眉標另外收窄。 */
.t-eyebrow {
font-size: .6875rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--acc);
margin: 0;
}
.t-eyebrow:lang(zh-Hant) { letter-spacing: .08em; }
.t-faint {
font-size: .8125rem;
line-height: 1.8;
color: var(--faint);
}
/* ── 按鈕 ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .875rem 1.75rem;
border: 1px solid transparent;
border-radius: var(--radius);
font: inherit;
font-weight: 500;
font-size: .9375rem;
text-decoration: none;
cursor: pointer;
transition: opacity .18s ease, background-color .18s ease;
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ghost { background: none; color: var(--text); border-color: var(--line2); }
.btn:hover { opacity: .82; }
/* ── 卡片 ─────────────────────────────────────────────────── */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 2rem);
}
/* ── 頁尾 ─────────────────────────────────────────────────── */
.site-footer {
border-top: 1px solid var(--line);
padding-block: clamp(2.5rem, 6vw, 4rem);
font-size: .8125rem;
line-height: 2;
color: var(--faint);
}
.site-footer a { text-decoration-color: var(--line2); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--sub); }
/* ── 無障礙 ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* 使用者要求減少動態時就真的不要動。
這一站的動畫是氣氛不是資訊，全部關掉不會少任何內容。 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}