/* ============================================================
Studio Whispace + Architects — studiowhispace.com rebuild
規則（依線上 Wix Studio 新版實測）:
· 文字、四角 LOGO／標誌／按鈕 = 固定 px（不隨視窗縮放）
· 圖牆與首頁主圖 = 視窗寬度百分比（隨視窗縮放）
· 圖與圖之間縱向間距 = 固定 80px
============================================================ */
/* 字型改由各頁 的 載入，不用 @import。
@import 是串行的：要等 style.css 下載＋解析完才會去要字型 CSS，
再等字型 CSS 回來才開始下載字型檔，白白多兩輪往返。 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--gray: #8c8c8c;
--gray-d: #5f5f5f;
--gray-l: #b5b5b5;
--border: #e3e3e3;
/* 中文一律 font-weight: 400。
2026-08-06 對照線上實測：about（12px/21.6/0.6px）、作品內頁（12px/21.6/0.6px）、
team（13px/23.4/0.65px）三處的中文全部都是 fw400、#737373。
復刻原本統一寫 300，比線上細一級，業主與我對照後都認為太細，全站改回 400。 */
--font-zh: 'GenRyuMinTW', 'Noto Serif TC', 'Songti TC', serif;
--font-en: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* 垂直分類選單專用（線上實測就是 signika，跟全站的 Rubik 不同家族） */
--font-cats: 'Signika', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* ---- 左緣基準線：LOGO 與垂直分類選單共用同一個數字 ----
業主在 Wix 裡是把 LOGO 和分類選單設成「距離最左側同一個值」，所以任何視窗寬度
都不會跑掉。這裡照同樣的做法：只維護 --logo-left 與 --logo-w 兩個值，
--edge 會自己算出來，改斷點時不用再逐一手改百分比。
為什麼不能直接把選單的 left 寫成 --logo-left：
home-logo1.svg 的 viewBox 是 141.7 見方，但「時」字的墨跡從 x=20.685 才開始，
左側有一塊留白。所以 LOGO 圖框的左緣 ≠ 看得到的字的左緣，中間差了
圖寬 × (20.685 / 141.7)。--edge 就是把這塊留白加回去之後、真正的視覺左緣。
（線上的 SVG 被裁到剛好貼齊墨跡，所以在 Wix 那邊兩者才會是同一個數字。） */
--logo-left: 72px;
--logo-w: 128px;
/* home-logo1.svg 逐筆量出來的墨跡（viewBox 141.7 見方），上下兩行左緣不一樣：
上行「時」 minX 24.39 → 24.39/141.7 = 0.1721242 ← 業主指定對這一行
下行「絮絮」minX 20.69 → 20.69/141.7 = 0.1459774
整體最右 maxX 121.3 → 121.3/141.7 = 0.8560339 （＝絮的右邊）
業主指定：選單左緣對「時」的左緣，右緣對整個 LOGO 的右緣。 */
--logo-ink-l1: 0.1721242;
--logo-ink-l: 0.1459774;
--logo-ink-r: 0.8560339;
/* 文字本身的左側留白：Signika 14px 的 "a"，字身墨跡比文字起點右 0.6px。
要「視覺」對齊就得先扣掉，否則對到的是文字起點不是看得到的筆畫。
換字級要重量（canvas measureText 的 actualBoundingBoxLeft）。 */
--cats-bearing: 0.6px;
--edge: calc(var(--logo-left) + var(--logo-w) * var(--logo-ink-l1) - var(--cats-bearing));
--edge-x: calc(var(--logo-left) + var(--logo-w) * var(--logo-ink-r));
/* ---- 右緣基準線：右上 LOGO 與右側下拉選單共用 ----
跟 --edge 同樣的道理，home-logo2.svg 右側也有留白：
viewBox 寬 283.5、墨跡右緣在 251.8 → 圖寬 234 時右邊留白 26.16px，
26.16 / 234 = 0.1118。 */
--title-right: 22px;
--title-w: 234px;
--title-ink-r: 0.1118;
--edge-r: calc(var(--title-right) + var(--title-w) * var(--title-ink-r));
/* ---- WORKS 的視覺頂端 ----
業主指定：分類選單、作品清單、照片三者的「看得到的最上緣」要在同一條線上，
而且是固定值、拉伸視窗不能跳動（原本五個斷點各有一組 top：237/227/207/212/202）。
基準取 212px＝線上 @1440 照片的頂端。
文字要扣掉「行框頂端到字身頂端」的距離，否則對齊的是看不見的行框而不是字。
這兩個偏移是用 canvas 的 TextMetrics 實測本站字型量出來的：
分類選單 Signika 14px / lh 19.6px → 4.01px
作品清單 Rubik 13px / lh 23.4px → 6.70px
換字級或行高就要重量，量法見 HANDOFF 第 7 節。 */
--tm-h: 150px; /* 右側直排標記的高度，margin 位移由它推算 */
--works-top: 212px;
--works-cats-ink: 4.01px;
--works-list-ink: 6.7px;
}
html { scroll-behavior: smooth; }
body {
background: #fff;
color: var(--gray);
font-family: var(--font-en);
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--gray-d); }
img { max-width: 100%; display: block; }
/* ---- 換頁淡入淡出 ----
ws-nav 由 js/reveal.js 加上；JS 沒跑就完全不套用，不會出現整頁透明。
進站淡入 0.45s，離站淡出 0.38s（需與 reveal.js 的 LEAVE_MS 一致）。 */
@keyframes ws-page-in { from { opacity: 0; } to { opacity: 1; } }
html.ws-nav body {
animation: ws-page-in .45s ease both;
transition: opacity .38s ease;
}
html.ws-nav.is-leaving body {
opacity: 0;
animation: none; /* 淡出時要蓋掉進場動畫，否則 both 會把 opacity 鎖在 1 */
}
@media (prefers-reduced-motion: reduce) {
html.ws-nav body,
html.ws-nav.is-leaving body { animation: none; transition: none; opacity: 1; }
}
/* ============================================================
捲動淡入 — 依線上 Wix 實測（motion-fadeIn）
純透明度、無位移；1.2s；cubic-bezier(.445,.05,.55,.95)
.ws-fx 由 js/reveal.js 在 立即加到 ，
所以 JS 失效時這些規則不會生效，內容一律可見。
============================================================ */
@keyframes ws-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.ws-fx .home-image, html.ws-fx .home-caption,
html.ws-fx .ab-photo, html.ws-fx .ab-svct, html.ws-fx .ab-svcl, html.ws-fx .ab-logotype,
html.ws-fx .ab-zh1, html.ws-fx .ab-en1, html.ws-fx .ab-zh2, html.ws-fx .ab-en2,
html.ws-fx .ab-mark, html.ws-fx .ab-info, html.ws-fx .ab-buttons, html.ws-fx .ab-map,
html.ws-fx .tm-zh, html.ws-fx .tm-en, html.ws-fx .tm-photo, html.ws-fx .tm-coreh,
html.ws-fx .tm-names, html.ws-fx .tm-roles, html.ws-fx .tm-pasth, html.ws-fx .tm-past,
html.ws-fx .tm-awh, html.ws-fx .tm-year, html.ws-fx .tm-list, html.ws-fx .tm-logo,
html.ws-fx .works-list-item, html.ws-fx .work-thumb,
html.ws-fx .pr-header, html.ws-fx .pr-title, html.ws-fx .pr-intro, html.ws-fx .pr-entry,
html.ws-fx .pj-col, html.ws-fx .pj-img, html.ws-fx .pj-slider { opacity: 0; }
html.ws-fx .ws-in {
animation: ws-fade-in 1.2s cubic-bezier(.445, .05, .55, .95) forwards;
}
/* 系統開啟「減少動態效果」時完全不套用。
reveal.js 本身也會直接 return，所以 ws-fx 根本不會被加上；
這裡只是雙重保險，選擇器要跟上面那份清單一致，不能用 [class] 之類的通用寫法，
否則會蓋掉 .work-thumb:hover img 的 opacity: .88。 */
@media (prefers-reduced-motion: reduce) {
html.ws-fx .home-image, html.ws-fx .home-caption,
html.ws-fx .ab-photo, html.ws-fx .ab-svct, html.ws-fx .ab-svcl, html.ws-fx .ab-logotype,
html.ws-fx .ab-zh1, html.ws-fx .ab-en1, html.ws-fx .ab-zh2, html.ws-fx .ab-en2,
html.ws-fx .ab-mark, html.ws-fx .ab-info, html.ws-fx .ab-buttons, html.ws-fx .ab-map,
html.ws-fx .tm-zh, html.ws-fx .tm-en, html.ws-fx .tm-photo, html.ws-fx .tm-coreh,
html.ws-fx .tm-names, html.ws-fx .tm-roles, html.ws-fx .tm-pasth, html.ws-fx .tm-past,
html.ws-fx .tm-awh, html.ws-fx .tm-year, html.ws-fx .tm-list, html.ws-fx .tm-logo,
html.ws-fx .works-list-item, html.ws-fx .work-thumb,
html.ws-fx .pr-header, html.ws-fx .pr-title, html.ws-fx .pr-intro, html.ws-fx .pr-entry,
html.ws-fx .pj-col, html.ws-fx .pj-img, html.ws-fx .pj-slider { opacity: 1; animation: none; }
}
/* ============================================================
四角固定元素（線上實測：固定 px、釘在視窗）
============================================================ */
.corner-logo {
position: fixed;
top: -2px;
left: var(--logo-left);
z-index: 100;
user-select: none;
}
.corner-logo img { width: var(--logo-w); }
/* 手機版頁首白底：線上捲動時左上 LOGO／右上字標下方有約 88px 高的白帶（業主 2026-11-04 手機實機確認），
照片與文字不會疊進去。z-index 94：壓在內容（≤50）上、在下拉選單（95）與四角元件（100）之下。 */
@media (max-width: 750px) {
body::before {
content: ''; position: fixed; top: 0; left: 0; right: 0; height: 88px;
background: #fff; z-index: 94; pointer-events: none;
}
}
.corner-title {
position: fixed;
top: -13px;
right: var(--title-right);
z-index: 100;
cursor: pointer;
}
.corner-title img { width: var(--title-w); }
.corner-up {
position: fixed;
bottom: 48px;
left: 88px;
z-index: 100;
font-size: 20px;
line-height: 1;
color: #2a2a2a;
cursor: pointer;
transform: rotate(90deg);
}
.corner-up:hover { color: #000; }
.corner-about {
position: fixed;
bottom: -4px;
right: 13px;
z-index: 100;
}
.corner-about img { width: 131px; }
/* ---- 頁尾 LOGO（目前沒有任何頁面在用，樣式先留著）----
對照 6_studiowhispace_screenshots，線上每一頁在內容結束後的左下方，
都還有一枚與左上角同尺寸、同左緣的「時絮絮」。業主目前不要，所以 HTML 沒放。
要復原：在各頁 前加一行
，21.6px）。
原本這裡寫 margin-bottom:19px 是照中文的做法套的，跟線上不符。 */
.ab-en1 p, .ab-en2 p {
font-size: 12px; line-height: 19.2px; letter-spacing: normal; /* 線上是 normal */
color: #737373; margin-bottom: 0; text-align: left; /* 線上是 start，不是 justify */
}
/* 線上這 5 行（email、電話、地址、兩個公司名稱）是同一組規格，
包括英文/數字也吃中文網頁字型的字形（不是分開套字型）。
原本沒寫 font-family，會繼承 body 的 --font-en（Rubik 那組），Rubik 不含中文字，
所以中文的三行會落到系統預設字型，跟站上其他中文長得不一樣——這是業主回報的原因。
實測 GenRyuMinTW 本身含完整的英文／數字字形（量寬跟系統 sans-serif fallback
不同），所以英文行套中文字型不會出現方框或跳字型。 */
.ab-info p {
font-family: var(--font-zh);
font-size: 12px;
font-weight: 400;
line-height: 27.6px;
letter-spacing: normal;
color: #737373;
}
.ab-info a:hover { color: #3b3b3b; }
/* 圖片：線上各斷點的裁切比例不同，故高度逐段指定、用 cover */
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-logotype img, .ab-mark img { width: 100%; height: auto; display: block; }
.ab-buttons { display: flex; }
.ab-buttons a {
display: flex; align-items: center; justify-content: center;
height: 46px; font-size: 8px; letter-spacing: .22em; color: #3b3b3b;
border: 1px solid rgba(59,59,59,.3); border-radius: 999px;
}
.ab-buttons a:hover { border-color: #3b3b3b; }
/* ---- 地圖（OpenStreetMap + CARTO Positron，免 API 金鑰）---- */
.ab-map { overflow: hidden; background: #f2f2f2; }
.ab-map #ws-map { width: 100%; height: 100%; background: #f2f2f2; }
/* 蓋掉 Leaflet 預設的藍色連結與圓角，配合全站灰階 */
.ab-map .leaflet-container { font-family: var(--font-en); background: #f2f2f2; }
.ab-map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.75); }
.ab-map .leaflet-control-attribution a { color: #737373; }
.ab-map .leaflet-bar a { color: #3b3b3b; border-radius: 0; }
.ws-map-pin span {
display: block; width: 14px; height: 14px; border-radius: 50%;
background: #3b3b3b; box-shadow: 0 0 0 4px rgba(59,59,59,.18);
}
/* 鄰近地標（捷運站）用空心圈，跟事務所本身分得開 */
.ws-map-pin.is-poi span {
width: 12px; height: 12px;
background: #fff; border: 1.5px solid #8c8c8c; box-shadow: none;
}
/* 地圖上的常駐標籤：白底無框，跟全站灰階字級一致（Leaflet 預設樣式要一一蓋掉）。
⚠️ 這裡必須是 white-space:nowrap。Leaflet 的 tooltip pane 是一個 0×0 的元素，
標籤又是 position:absolute，所以「可用寬度」會被算成 0 ——
一改成 normal 就會變成一行一兩個字、整塊往下爆二十幾行。
標籤放不下時要改的是字級或文案長度，不是這一行。 */
.ab-map .leaflet-tooltip.ws-map-tip {
background: rgba(255,255,255,.92);
border: 0; border-radius: 0; box-shadow: none;
padding: 5px 8px;
white-space: nowrap;
color: #737373;
font-family: var(--font-zh);
font-weight: 400;
text-align: center;
}
.ab-map .leaflet-tooltip.ws-map-tip::before { display: none; } /* 拿掉小箭頭 */
.ab-map .ws-map-tip b {
display: block; font-weight: 400; font-size: 11px; line-height: 1.5; color: #3b3b3b;
}
.ab-map .ws-map-tip i {
display: block; font-style: normal; font-size: 10px; line-height: 1.5; color: #8c8c8c;
}
.ab-map .ws-map-tip.is-home b { font-size: 12px; }
/* 地圖沒載成功時才顯示的文字連結；成功時蓋在地圖下方看不到 */
.ab-map-fallback {
position: absolute; inset: 0; display: none;
align-items: center; justify-content: center; text-align: center;
padding: 0 24px; font-size: 12px; line-height: 1.7; color: #737373;
}
.ab-map #ws-map:not(.is-ready) ~ .ab-map-fallback { display: flex; }
.ab-map #ws-map.is-ready ~ .ab-map-fallback { display: none; }
/* ---- 斷點 A：≥1923px ---- */
.about-main { height: 2782px; }
.ab-photo { left: 25.00%; top: 309px; width: 31.71%; height: 438px; }
.ab-svct { left: 61.50%; top: 566px; width: 13.50%; }
.ab-svcl { left: 61.50%; top: 637px; width: 13.50%; }
.ab-svcl li { line-height: 36px; }
.ab-logotype { left: 40.02%; top: 1009px; width: 10.01%; }
.ab-zh1 { left: 56.71%; top: 1059px; width: 14.29%; }
.ab-en1 { left: 56.71%; top: 1338px; width: 14.29%; }
.ab-zh2 { left: 24.08%; top: 1593px; width: 14.29%; }
.ab-en2 { left: 24.08%; top: 1873px; width: 14.29%; }
.ab-mark { left: 48.66%; top: 1852px; width: 18.60%; }
.ab-info { left: 24.10%; top: 2366px; width: 11.43%; }
.ab-buttons { left: 24.10%; top: 2556px; gap: 11px; }
.ab-buttons a { width: 83px; }
.ab-map { left: 42.08%; top: 2357px; width: 39.71%; height: 282px; }
/* ---- 斷點 B：1683–1922px ---- */
@media (max-width: 1922px) and (min-width: 1683px) {
.about-main { height: 2691px; }
.ab-photo { left: 25.00%; top: 278px; width: 31.70%; height: 394px; }
.ab-svct { left: 61.50%; top: 487px; width: 13.51%; }
.ab-svcl { left: 61.50%; top: 564px; width: 13.51%; }
.ab-logotype { left: 40.02%; top: 914px; width: 10.01%; }
.ab-zh1 { left: 56.70%; top: 956px; width: 16.67%; }
.ab-en1 { left: 56.70%; top: 1229px; width: 16.67%; }
.ab-zh2 { left: 24.08%; top: 1487px; width: 16.67%; }
.ab-en2 { left: 24.08%; top: 1770px; width: 16.67%; }
.ab-mark { left: 48.71%; top: 1742px; width: 18.60%; }
.ab-info { left: 24.10%; top: 2275px; width: 13.33%; }
.ab-buttons { left: 24.10%; top: 2465px; gap: 11px; }
.ab-buttons a { width: 85px; }
.ab-map { left: 42.08%; top: 2275px; width: 39.71%; height: 283px; }
}
/* ---- 斷點 C：1443–1682px ---- */
@media (max-width: 1682px) and (min-width: 1443px) {
.about-main { height: 2641px; }
.ab-photo { left: 25.00%; top: 241px; width: 32.84%; height: 406px; }
.ab-svct { left: 64.19%; top: 466px; width: 10.81%; }
.ab-svcl { left: 64.19%; top: 546px; width: 10.81%; }
.ab-svcl li { line-height: 33.7px; }
.ab-logotype { left: 37.52%; top: 863px; width: 12.51%; }
.ab-zh1 { left: 58.49%; top: 905px; width: 19.99%; }
.ab-en1 { left: 58.49%; top: 1201px; width: 19.99%; }
.ab-zh2 { left: 24.08%; top: 1450px; width: 19.35%; }
.ab-en2 { left: 24.08%; top: 1734px; width: 19.35%; }
.ab-mark { left: 58.49%; top: 1797px; width: 18.60%; }
.ab-info { left: 24.10%; top: 2231px; width: 15.48%; }
.ab-buttons { left: 24.10%; top: 2415px; gap: 11px; }
.ab-buttons a { width: 80px; }
.ab-map { left: 46.22%; top: 2231px; width: 39.71%; height: 224px; }
}
/* ---- 斷點 D：1001–1442px（一般筆電）---- */
@media (max-width: 1442px) and (min-width: 1001px) {
.about-main { height: 2724px; }
.ab-photo { left: 17.50%; top: 247px; width: 44.60%; height: 350px; }
.ab-svct { left: 67.44%; top: 456px; width: 15.06%; }
.ab-svcl { left: 67.44%; top: 505px; width: 15.06%; }
.ab-svcl li { line-height: 30.7px; }
.ab-logotype { left: 32.00%; top: 814px; width: 18.00%; }
.ab-zh1 { left: 55.00%; top: 860px; width: 20.77%; }
.ab-en1 { left: 55.00%; top: 1226px; width: 20.77%; }
.ab-zh2 { left: 20.00%; top: 1560px; width: 25.00%; }
.ab-en2 { left: 20.00%; top: 1863px; width: 25.00%; }
.ab-mark { left: 55.85%; top: 1863px; width: 29.15%; }
.ab-info { left: 20.00%; top: 2328px; width: 19.82%; }
.ab-buttons { left: 20.00%; top: 2498px; gap: 24px; }
.ab-buttons a { width: 90px; }
.ab-map { left: 48.92%; top: 2328px; width: 37.15%; height: 209px; }
}
/* ---- 斷點 E：751–1000px ---- */
@media (max-width: 1000px) and (min-width: 751px) {
.about-main { height: 2794px; }
.ab-photo { left: 19.85%; top: 211px; width: 44.42%; height: 256px; }
.ab-svct { left: 69.91%; top: 334px; width: 19.12%; }
.ab-svcl { left: 69.91%; top: 382px; width: 19.12%; }
.ab-svcl li { line-height: 28.7px; }
.ab-logotype { left: 19.85%; top: 676px; width: 12.50%; }
.ab-zh1 { left: 50.00%; top: 724px; width: 33.18%; }
.ab-en1 { left: 50.00%; top: 984px; width: 33.18%; }
.ab-zh2 { left: 18.91%; top: 1369px; width: 33.33%; }
.ab-en2 { left: 18.91%; top: 1651px; width: 33.33%; }
.ab-mark { left: 53.00%; top: 2000px; width: 37.00%; }
.ab-info { left: 18.90%; top: 2377px; width: 26.67%; }
.ab-buttons { left: 18.90%; top: 2568px; gap: 11px; }
.ab-buttons a { width: 82px; }
.ab-map { left: 51.84%; top: 2377px; width: 41.88%; height: 239px; }
}
/* ---- 斷點 F：≤750px 手機 ----
2026-09-22 依線上 @375 / @390 / @430 / @600 / @750 實測重做。
原本這一段是「把桌機版拆成單欄流式」的暫代版，與線上完全不同。
線上手機版的模型（實測歸納，不是推測）：
· 整頁固定高 3086px（375–480 量到的完全一樣），>480 之後才隨寬度長高
· 文字欄＝寬 min(80%, 390px) 置中；標題／服務列另有自己的左緣與寬度
· 主圖 75% 寬、224px 高（固定）
· 英文段落截到 5 行 + Read more（線上同樣做法，見 js/readmore.js）
· 第二段中文是「下緣對齊 1802px」，不是上緣固定（實測 375/430 高度不同、下緣一樣）
· 兩枚 SVG（直排書法、雙品牌標記）線上是以「墨跡外框」定位的，
我們的檔案四周有留白，所以下面的百分比是從 getBBox 反算回來的：
about-logo2.svg viewBox 0 0 250 500，墨跡 93.849 45.9 70.237 378.8
about-logo1.svg viewBox 0 0 566.9 283.5，墨跡 39.857 8.955 488.243 266.745
· --e1 / --e2 是 Read more 展開後要往下推的量，由 js/readmore.js 寫入 */
@media (max-width: 750px) {
.about-main {
--e1: 0px; --e2: 0px;
height: calc(3086px + var(--e1) + var(--e2));
padding: 0;
}
/* 文字欄：寬 min(80%, 390px)，永遠置中 */
.ab-zh1, .ab-en1, .ab-zh2, .ab-en2, .about-main .ws-readmore {
left: 50%; transform: translateX(-50%);
width: 80%; max-width: 390px;
}
.ab-photo { left: 13.06%; width: 75%; height: 224px; top: calc(30.91vw + 84.1px); }
.ab-photo img { height: 100%; aspect-ratio: auto; }
.ab-svct { left: 14.67%; width: 48.73%; top: calc(14.55vw + 465.4px);
font-size: 12px; line-height: 24px; }
.ab-svcl { left: 14.67%; width: 48.73%; top: calc(30.91vw + 466.1px); }
.ab-svcl li { font-size: 11px; line-height: 22px; }
/* 直排書法：墨跡高＝60.27vw、墨跡水平置中、墨跡中心固定在 849px */
.ab-logotype { left: 29.483%; width: 39.777%; top: calc(849px - 37.435vw); }
.ab-zh1 { top: 1027px; }
.ab-zh1 p, .ab-zh2 p { margin-bottom: 21.6px; }
.ab-en1 { top: 1315px; }
.ab-en2 { top: calc(1851px + var(--e1)); }
.ab-en1 p, .ab-en2 p { line-height: 18px; margin-bottom: 18px; }
.ab-en1 p:last-child, .ab-en2 p:last-child { margin-bottom: 0; }
/* 截 5 行（線上實測高度 90 = 5 × 18） */
.ab-en1, .ab-en2 { max-height: 90px; overflow: hidden; }
.ab-en1.is-expanded, .ab-en2.is-expanded { max-height: none; overflow: visible; }
.ab-en1 + .ws-readmore { top: calc(1415px + var(--e1)); }
.ab-en2 + .ws-readmore { top: calc(1951px + var(--e1) + var(--e2)); }
/* 第二段中文：下緣固定在 1802px */
.ab-zh2 { top: auto; bottom: calc(1284px + var(--e2)); }
/* 雙品牌標記：墨跡寬 min(70vw, 300px)、墨跡中心固定在 2184.4px */
.ab-mark {
left: 50%; transform: translateX(-50%);
width: min(70vw, 300px);
top: calc(2184.4px - 0.27317 * min(70vw, 300px) + var(--e1) + var(--e2));
}
/* 放大到「墨跡剛好等於容器寬」並把左上留白吃掉；
max-width:none 是必要的，全域 img{max-width:100%} 會把它壓回容器寬。 */
.ab-mark img { width: 116.109%; max-width: none; margin-left: -8.1645%; margin-top: -1.8352%; }
.ab-info { left: 24.21%; width: 58.91%;
top: calc(10.9vw + 2357.1px + var(--e1) + var(--e2)); }
.ab-buttons { left: 24.21%; width: 50.13%; gap: 7.35vw;
top: calc(45.45vw + 2377.5px + var(--e1) + var(--e2)); }
.ab-buttons a { flex: 1 1 auto; }
.ab-map { left: 0; width: 100%; height: 236px;
top: calc(3.6vw + 2668.5px + var(--e1) + var(--e2)); }
}
/* 481–750px：線上這一段的區塊留白改用另一組比例（實測 @600 / @750），
手機段的公式套到這裡會差一兩百 px，所以只覆寫會變的那幾個 top。 */
@media (min-width: 481px) and (max-width: 750px) {
/* max() 是為了 481px 附近不要比手機段還矮（線上 ≤480 一律 3086） */
.about-main { height: calc(max(3086px, 90vw + 2614px) + var(--e1) + var(--e2)); }
.ab-photo { top: calc(30vw + 88px); }
.ab-svct { top: calc(16.67vw + 451px); }
.ab-svcl { top: calc(32.67vw + 454px); }
.ab-logotype { top: calc(22.565vw + 537px); }
.ab-zh1 { top: calc(93.33vw + 578px); }
.ab-en1 { top: calc(90.67vw + 838px); }
.ab-en1 + .ws-readmore { top: calc(90.67vw + 938px + var(--e1)); }
.ab-zh2 { top: auto; bottom: calc(2.6vw + 1269.5px + var(--e2)); }
.ab-en2 { top: calc(90vw + 1379px + var(--e1)); }
.ab-en2 + .ws-readmore { top: calc(90vw + 1479px + var(--e1) + var(--e2)); }
.ab-mark { top: calc(90vw + 1712.5px - 0.27317 * min(70vw, 300px) + var(--e1) + var(--e2)); }
.ab-info { top: calc(104.67vw + 1859px + var(--e1) + var(--e2)); }
.ab-buttons { top: calc(134.67vw + 1906px + var(--e1) + var(--e2)); }
.ab-map { top: calc(128vw + 2023px + var(--e1) + var(--e2)); }
}
/* ============================================================
TEAM — 依線上 Wix Studio 五個斷點逐一實測後復刻
------------------------------------------------------------
量測方式：在 studiowhispace.com/team 開同源 iframe，逐一設成
2100 / 1800 / 1550 / 1300 / 900 px，讀每個元件的
getBoundingClientRect()，水平換算成視窗百分比、垂直取絕對 px。
Wix 的斷點：1922 / 1682 / 1442 / 1000 / 750
下面的區間與其對齊。每一段的 left/top/width 都是量到的實值，
不是推算，也不要憑感覺改。要改先重量一次。
注意：HTML 不可以寫 inline style 的 left/top/width，會蓋掉媒體查詢。
============================================================ */
.team-main { position: relative; }
.tm-zh, .tm-en, .tm-photo, .tm-coreh, .tm-names, .tm-roles,
.tm-pasth, .tm-past, .tm-awh, .tm-year, .tm-list, .tm-logo { position: absolute; }
/* ---- 字體規格（各斷點共用，實測字級不隨斷點改變）---- */
.tm-zh p {
font-family: var(--font-zh);
font-weight: 400; /* 線上實測 400，見 :root --font-zh 的說明 */
font-size: 13px; line-height: 23.4px;
letter-spacing: 0.65px; /* 線上實測；原本 .06em = 0.78px 偏寬 */
color: #737373; margin-bottom: 23px;
}
.tm-zh p:last-child { margin-bottom: 0; }
.tm-en p {
font-size: 12px; line-height: 19.2px;
letter-spacing: normal; /* 線上是 normal，原本 .01em */
color: #737373; /* 線上 #737373，原本 #8f8f8f 偏淡 */
margin-bottom: 19px;
}
.tm-en p:last-child { margin-bottom: 0; }
.tm-coreh, .tm-pasth {
font-size: 14px; font-weight: 400; letter-spacing: normal; color: #3b3b3b;
}
/* 線上中文與英文是兩組規格：中文 13px 明體 fw400 字距 0.65px、
英文 14px Rubik（線上 rubik-light fw700 → 本機 400，見坑 1）字距 normal。
行高維持 36px 讓三列跟右邊的職稱欄對齊。 */
.tm-names p {
line-height: 36px; color: #737373;
}
.tm-names .zh {
font-family: var(--font-zh); font-weight: 400;
font-size: 13px; letter-spacing: 0.65px;
}
.tm-names .sep { margin: 0 6px; font-size: 12px; color: #9c9c9c; }
.tm-names .en {
font-size: 14px; font-weight: 400; letter-spacing: normal;
}
.tm-roles p {
font-family: var(--font-zh); font-weight: 400;
font-size: 12px; line-height: 36px;
letter-spacing: normal; /* 線上 normal，原本 .1em = 1.2px */
color: #737373; /* 線上 #737373，原本 #9c9c9c 偏淡 */
white-space: nowrap;
}
.tm-past {
font-family: var(--font-zh); font-weight: 400;
font-size: 14px; /* 線上 14px，原本 13px */
letter-spacing: normal; /* 線上 normal，原本 .06em */
color: #737373; white-space: nowrap;
}
.tm-awh { font-size: 18px; font-weight: 500; line-height: 41.4px; letter-spacing: normal; color: #3b3b3b; } /* 線上是 rubik-medium → 本機 500，原本 300 太細 */
.tm-year { font-size: 16px; font-weight: 400; line-height: 36.8px; letter-spacing: normal; color: #737373; }
.tm-list p { font-size: 12px; font-weight: 400; line-height: 30px; letter-spacing: normal; color: #737373; } /* 線上行高 30px，原本 27.6px */
.tm-l24 p { line-height: 21.6px; }
/* 年份（tm-year）要跟該年獎項清單第一行（tm-list p）的文字最上緣對齊，
但兩者字級、行高都不同，行框頂端天生對不齊，中間差了一段「半行距＋字型自身的
ascent 誤差」。用 canvas 實際畫出「2022」與清單文字、逐像素找墨跡最上緣量出來：
tm-year（16px / lh 36.8） ink top = 12.4px
tm-list（12px / lh 30） ink top = 10.375px → tm-year 要比清單頂端高 2.025px
tm-l24（12px / lh 21.6） ink top = 5.925px → tm-year 要比清單頂端高 6.475px
下面五個斷點的 .tm-y22/.tm-y23 的 top 都是「該斷點 .tm-l22/.tm-l23 的 top − 2.025」，
.tm-y24 是「該斷點 .tm-l24 的 top − 6.475」，四捨五入到整數 px。
之後如果任一邊的字級或行高改了，要重新量、重新算，不能只改其中一邊的 top。 */
.tm-photo img { width: 100%; aspect-ratio: 396/362; object-fit: cover; }
.tm-g22a img { width: 153px; }
.tm-g23a img { width: 200px; }
.tm-g23b img { width: 67px; }
.tm-g24a img { width: 71px; }
.tm-g24b img { width: 109px; }
/* ---- 斷點 A：≥1923px（Wix 最寬那一段）---- */
.team-main { height: 1881px; }
.tm-zh { left: 25.00%; top: 265px; width: 16.47%; }
.tm-en { left: 25.00%; top: 527px; width: 16.47%; }
.tm-photo { left: 56.38%; top: 265px; width: 18.09%; }
.tm-coreh { left: 56.29%; top: 892px; }
.tm-names { left: 56.29%; top: 947px; }
.tm-roles { left: 65.43%; top: 947px; }
.tm-pasth { left: 56.29%; top: 1074px; }
.tm-past { left: 56.29%; top: 1129px; }
.tm-awh { left: 25.61%; top: 1273px; }
.tm-y22 { left: 25.61%; top: 1349px; }
.tm-l22 { left: 31.37%; top: 1351px; width: 17.93%; }
.tm-g22a { left: 49.54%; top: 1351px; }
.tm-y23 { left: 25.61%; top: 1494px; }
.tm-l23 { left: 31.39%; top: 1496px; width: 17.93%; }
.tm-g23a { left: 49.54%; top: 1509px; }
.tm-g23b { left: 58.84%; top: 1496px; }
.tm-y24 { left: 25.61%; top: 1670px; }
.tm-l24 { left: 31.39%; top: 1676px; width: 17.93%; }
.tm-g24a { left: 49.91%; top: 1631px; }
.tm-g24b { left: 56.54%; top: 1639px; }
/* ---- 斷點 B：1683–1922px ---- */
@media (max-width: 1922px) and (min-width: 1683px) {
.team-main { height: 1877px; }
.tm-zh { left: 25.00%; top: 241px; width: 20.42%; }
.tm-en { left: 25.00%; top: 507px; width: 20.42%; }
.tm-photo { left: 56.38%; top: 241px; width: 18.09%; }
.tm-coreh { left: 56.38%; top: 860px; }
.tm-names { left: 56.38%; top: 909px; }
.tm-roles { left: 70.03%; top: 909px; }
.tm-pasth { left: 56.38%; top: 1066px; }
.tm-past { left: 56.38%; top: 1115px; }
.tm-awh { left: 25.12%; top: 1284px; }
.tm-y22 { left: 25.12%; top: 1369px; }
.tm-l22 { left: 31.85%; top: 1371px; width: 20.92%; }
.tm-g22a { left: 53.52%; top: 1371px; }
.tm-y23 { left: 25.12%; top: 1504px; }
.tm-l23 { left: 31.87%; top: 1506px; width: 20.92%; }
.tm-g23a { left: 53.04%; top: 1536px; }
.tm-g23b { left: 63.90%; top: 1524px; }
.tm-y24 { left: 25.12%; top: 1680px; }
.tm-l24 { left: 31.87%; top: 1686px; width: 20.92%; }
.tm-g24a { left: 53.71%; top: 1653px; }
.tm-g24b { left: 61.21%; top: 1661px; }
}
/* ---- 斷點 C：1443–1682px ---- */
@media (max-width: 1682px) and (min-width: 1443px) {
.team-main { height: 1767px; }
.tm-zh { left: 25.00%; top: 249px; width: 23.91%; }
.tm-en { left: 25.00%; top: 516px; width: 23.91%; }
.tm-photo { left: 60.19%; top: 249px; width: 19.81%; }
.tm-coreh { left: 60.20%; top: 802px; }
.tm-names { left: 60.20%; top: 849px; }
.tm-roles { left: 74.84%; top: 849px; }
.tm-pasth { left: 60.47%; top: 1003px; }
.tm-past { left: 60.47%; top: 1051px; }
.tm-awh { left: 25.14%; top: 1170px; }
.tm-y22 { left: 25.15%; top: 1254px; }
.tm-l22 { left: 32.95%; top: 1256px; width: 24.28%; }
.tm-g22a { left: 58.10%; top: 1256px; }
.tm-y23 { left: 25.15%; top: 1390px; }
.tm-l23 { left: 32.98%; top: 1392px; width: 24.28%; }
.tm-g23a { left: 57.55%; top: 1421px; }
.tm-g23b { left: 70.14%; top: 1409px; }
.tm-y24 { left: 25.15%; top: 1566px; }
.tm-l24 { left: 32.98%; top: 1572px; width: 24.28%; }
.tm-g24a { left: 58.10%; top: 1543px; }
.tm-g24b { left: 67.03%; top: 1547px; }
}
/* ---- 斷點 D：1001–1442px（一般筆電最常落在這段）---- */
@media (max-width: 1442px) and (min-width: 1001px) {
.team-main { height: 1770px; }
.tm-zh { left: 18.00%; top: 253px; width: 27.07%; }
.tm-en { left: 18.00%; top: 516px; width: 27.07%; }
.tm-photo { left: 55.37%; top: 253px; width: 25.85%; }
.tm-coreh { left: 55.37%; top: 823px; }
.tm-names { left: 55.37%; top: 873px; }
.tm-roles { left: 73.35%; top: 873px; }
.tm-pasth { left: 55.37%; top: 1026px; }
.tm-past { left: 55.37%; top: 1076px; }
.tm-awh { left: 18.17%; top: 1187px; }
.tm-y22 { left: 18.17%; top: 1262px; }
.tm-l22 { left: 27.48%; top: 1264px; width: 28.95%; }
.tm-g22a { left: 57.47%; top: 1272px; }
.tm-y23 { left: 18.17%; top: 1402px; }
.tm-l23 { left: 27.48%; top: 1404px; width: 28.95%; }
.tm-g23a { left: 56.81%; top: 1429px; }
.tm-g23b { left: 71.83%; top: 1416px; }
.tm-y24 { left: 18.17%; top: 1573px; }
.tm-l24 { left: 27.51%; top: 1579px; width: 28.95%; }
.tm-g24a { left: 57.47%; top: 1546px; }
.tm-g24b { left: 68.42%; top: 1554px; }
.tm-g24b img { width: 105px; }
}
/* ---- 斷點 E：751–1000px。成員欄整個從右側移到左側，logo 也縮小。---- */
@media (max-width: 1000px) and (min-width: 751px) {
.team-main { height: 1846px; }
.tm-zh { left: 18.14%; top: 232px; width: 37.27%; }
.tm-en { left: 17.84%; top: 493px; width: 37.27%; }
.tm-photo { left: 63.76%; top: 232px; width: 26.24%; }
.tm-coreh { left: 17.84%; top: 834px; }
.tm-names { left: 17.84%; top: 886px; }
.tm-roles { left: 40.90%; top: 886px; }
.tm-pasth { left: 18.39%; top: 1041px; }
.tm-past { left: 18.39%; top: 1093px; }
.tm-awh { left: 18.03%; top: 1201px; }
.tm-y22 { left: 18.03%; top: 1261px; }
.tm-l22 { left: 27.73%; top: 1263px; width: 35.02%; }
.tm-g22a { left: 66.32%; top: 1268px; }
.tm-y23 { left: 17.80%; top: 1404px; }
/* 線上量到的自然寬 39.62% 會與右側 logo 重疊 7px，收到 38.5% */
.tm-l23 { left: 27.53%; top: 1406px; width: 38.50%; }
.tm-g23a { left: 66.32%; top: 1406px; }
.tm-g23b { left: 67.15%; top: 1469px; }
.tm-y24 { left: 18.03%; top: 1578px; }
.tm-l24 { left: 27.76%; top: 1584px; width: 30.17%; }
.tm-g24a { left: 67.15%; top: 1656px; }
.tm-g24b { left: 67.15%; top: 1569px; }
.tm-g22a img { width: 132px; }
.tm-g23a img { width: 159px; }
.tm-g23b img { width: 52px; }
.tm-g24a img { width: 51px; }
.tm-g24b img { width: 70px; }
}
/* ---- 斷點 F：≤750px 手機 ----
2026-09-22 依線上 @375 / @430 / @600 / @700 實測重做（原本是單欄流式暫代版）。
線上手機版與桌機版的差別（實測）：
· **團隊照排在最上面**，中文語錄在照片之後（桌機是文字在左、照片在右）
· 照片 75% 寬、68.6vw 高（等比放大，不是固定 px）
· 英文段落截到 6 行 + Read more
· 成員名字欄與職稱欄的行高不同（32.5 / 30.8），兩欄各自排
· **五枚獎項標誌在頁尾集中成一組**（桌機是各年份旁邊一枚）
群組左緣 12.8%，內部位移是固定 px：
BOTY(0,0,46×81)、TINTA(77,2,135×34)、台北設計獎(215,0,42×42)、
金點(77,57,105×27)、ADA(215,47,48×48)
· 獎項清單字級會隨視窗寬度變（線上實測 10.26px@375 → 11.67px@700）
· --e1 是 Read more 展開後要往下推的量，由 js/readmore.js 寫入 */
@media (max-width: 750px) {
.team-main {
--e1: 0px;
height: calc(112.73vw + 1757.2px + var(--e1));
padding: 0;
}
.tm-photo { left: 12.54%; width: 75%; height: 68.6vw; top: calc(25.45vw + 85.55px); }
.tm-photo img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.tm-zh { left: 12.54%; width: 75%; top: calc(118.18vw + 84.8px); }
.tm-zh p { margin-bottom: 23.4px; }
.tm-en { left: 12.54%; width: 75%; top: calc(87.27vw + 476.7px);
max-height: 108px; overflow: hidden; }
.tm-en p { line-height: 18px; margin-bottom: 18px; }
.tm-en p:last-child { margin-bottom: 0; }
.tm-en.is-expanded { max-height: none; overflow: visible; }
.team-main .ws-readmore { left: 12.54%; width: 75%; }
.tm-en + .ws-readmore { top: calc(87.27vw + 594.7px + var(--e1)); }
.tm-coreh { left: 12.54%; width: 64.1%; top: calc(90.91vw + 680.1px + var(--e1)); }
.tm-names { left: 12.54%; width: 58.35%; top: calc(100vw + 692px + var(--e1)); }
.tm-roles { left: 69.07%; width: 22.85%; top: calc(100vw + 692px + var(--e1)); }
/* 線上這三列的間距是 32.5px。只寫 line-height 不夠：一行裡有 13px 中文（明體）、
12px 分隔線與 13px 英文三種基線，行框會被撐到 34px，三列下來就差 4px。
直接鎖死列高，內容溢出的 1.5px 不會被裁（overflow 預設 visible）。 */
.tm-names p { line-height: 32.5px; height: 32.5px; }
.tm-names .en { font-size: 13px; }
.tm-roles p { font-size: 11px; line-height: 30.8px; }
.tm-pasth { left: 12.54%; width: 67.7%; top: calc(101.82vw + 837.2px + var(--e1)); }
.tm-past { left: 12.54%; width: 79.5%; top: calc(110.91vw + 849.1px + var(--e1));
font-size: 13px; line-height: 26px; white-space: normal; }
/* 線上這兩個容器寬 320px（固定）；≤360px 的手機會超出右緣，所以再夾一層 87% */
.tm-awh { left: 12.54%; width: min(320px, 87%); top: calc(112.73vw + 982.2px + var(--e1)); }
.tm-year { left: 12.54%; width: min(320px, 87%); }
.tm-list { left: 12.54%; width: 75%; }
.tm-list p { font-size: calc(0.435vw + 8.63px); line-height: 2.3; }
.tm-l24 p { line-height: 1.8; }
.tm-y22 { top: calc(112.73vw + 1057.2px + var(--e1)); }
.tm-l22 { top: calc(112.73vw + 1092.2px + var(--e1)); }
.tm-y23 { top: calc(112.73vw + 1202.2px + var(--e1)); }
.tm-l23 { top: calc(112.73vw + 1237.2px + var(--e1)); }
.tm-y24 { top: calc(112.73vw + 1367.2px + var(--e1)); }
.tm-l24 { top: calc(112.73vw + 1402.2px + var(--e1)); }
/* 獎項標誌群組（線上手機版集中在頁尾） */
.tm-logo { --gx: 12.8%; --gy: calc(112.73vw + 1506.2px + var(--e1)); }
.tm-logo img { width: 100%; height: 100%; object-fit: contain; }
.tm-g24a { left: var(--gx); top: var(--gy); width: 46px; height: 81px; }
.tm-g23a { left: calc(var(--gx) + 77px); top: calc(var(--gy) + 2px); width: 135px; height: 34px; }
.tm-g23b { left: calc(var(--gx) + 215px); top: var(--gy); width: 42px; height: 42px; }
.tm-g22a { left: calc(var(--gx) + 77px); top: calc(var(--gy) + 57px); width: 105px; height: 27px; }
.tm-g24b { left: calc(var(--gx) + 215px); top: calc(var(--gy) + 47px); width: 48px; height: 48px; }
}
/* 481–750px：線上這一段的區塊留白比例不同（實測 @600 / @700），只覆寫 top */
@media (min-width: 481px) and (max-width: 750px) {
.team-main { height: calc(172vw + 1460px + var(--e1)); }
.tm-photo { top: calc(25vw + 88px); }
.tm-zh { top: calc(117vw + 91px); }
.tm-en { top: calc(129vw + 273px); }
.tm-en + .ws-readmore { top: calc(129vw + 391px + var(--e1)); }
.tm-coreh { top: calc(142vw + 422px + var(--e1)); }
.tm-names, .tm-roles { top: calc(150vw + 438px + var(--e1)); }
.tm-pasth { top: calc(161vw + 543px + var(--e1)); }
.tm-past { top: calc(169vw + 559px + var(--e1)); }
.tm-awh { top: calc(172vw + 685px + var(--e1)); }
.tm-y22 { top: calc(172vw + 760px + var(--e1)); }
.tm-l22 { top: calc(172vw + 795px + var(--e1)); }
.tm-y23 { top: calc(172vw + 905px + var(--e1)); }
.tm-l23 { top: calc(172vw + 940px + var(--e1)); }
.tm-y24 { top: calc(172vw + 1070px + var(--e1)); }
.tm-l24 { top: calc(172vw + 1105px + var(--e1)); }
.tm-logo { --gx: 12.6%; --gy: calc(172vw + 1209px + var(--e1)); }
}
/* ============================================================
PRESS — 依線上 Wix 五個斷點實測。
21 筆條目改為流式清單，欄位用「相對清單容器」的百分比，
所以大部分數值在各斷點是共用的，只有容器位置與列高需要逐段寫。
============================================================ */
.press-main { position: relative; }
.pr-header, .pr-title, .pr-intro, .pr-list { position: absolute; }
.pr-header img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-title { font-size: 18px; font-weight: 300; letter-spacing: normal; color: #3b3b3b; }
.pr-intro { font-size: 12px; line-height: 19.2px; letter-spacing: .01em; color: #737373; }
.pr-entry { position: relative; }
.pr-entry::after {
content: ''; position: absolute; left: 0; right: 0;
border-top: 1px solid #9d9d9d;
}
.pr-entry .logo {
position: absolute; left: 0; top: 0; height: 101px;
display: flex; align-items: center; justify-content: center;
}
.pr-entry .logo span {
font-size: 11px; letter-spacing: .08em; color: #b5b5b5; text-align: center;
}
.pr-entry .logo img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; background: #fff;
}
.pr-entry .date, .pr-entry .title {
position: absolute;
font-size: 12px; line-height: 19.2px; letter-spacing: .01em; color: #737373;
}
/* ---- 各斷點共用的欄位比例（相對 .pr-list 容器）---- */
.pr-entry .logo { width: 13.08%; }
.pr-entry .date { left: 31.81%; width: 22.73%; }
.pr-entry .title { left: 31.81%; width: 34.94%; }
/* 字重：線上日期是 rubik-light fw700（坑 1 → 本機 400），標題是 rubik-v2 fw600（真 Rubik，照寫） */
.pr-entry .date { font-weight: 400; }
.pr-entry .title { font-weight: 600; }
/* 桌機／平板：標題寬度夠就不換行 —— 寬度跟著文字，最多延伸到清單右緣才換行 */
@media (min-width: 751px) {
.pr-entry .title { width: auto; max-width: 68.19%; }
}
@media (min-width: 751px) and (max-width: 1000px) {
.pr-entry .title { width: auto; max-width: 65.55%; }
}
/* ===== 斷點 A：≥1923px ===== */
.press-main { height: 3955px; }
.pr-header { left: 24.29%; top: 330px; width: 24.19%; height: 339px; }
.pr-title { left: 54.52%; top: 585px; }
.pr-intro { left: 54.52%; top: 630px; width: 21.18%; }
.pr-list { left: 24.24%; top: 897px; width: 60.61%; }
.pr-entry { height: 142px; }
.pr-entry::after { top: 130px; }
.pr-entry .date { top: 36px; }
.pr-entry .title { top: 59px; }
/* ===== 斷點 B：1683–1922px ===== */
@media (max-width: 1922px) and (min-width: 1683px) {
.press-main { height: 3892px; }
.pr-header { left: 24.29%; top: 397px; width: 24.19%; height: 272px; }
.pr-title { left: 54.52%; top: 585px; }
.pr-intro { left: 54.52%; top: 630px; width: 21.18%; }
.pr-list { left: 24.24%; top: 897px; width: 60.61%; }
.pr-entry { height: 139px; }
.pr-entry::after { top: 119px; }
.pr-entry .date { top: 32px; }
.pr-entry .title { top: 55px; }
}
/* ===== 斷點 C：1443–1682px ===== */
@media (max-width: 1682px) and (min-width: 1443px) {
.press-main { height: 3789px; }
.pr-header { left: 24.29%; top: 361px; width: 25.71%; height: 272px; }
.pr-title { left: 54.52%; top: 549px; }
.pr-intro { left: 54.52%; top: 594px; width: 21.18%; }
.pr-list { left: 24.24%; top: 847px; width: 60.61%; }
.pr-entry { height: 136px; }
.pr-entry::after { top: 119px; }
.pr-entry .date { top: 33px; }
.pr-entry .title { top: 56px; }
}
/* ===== 斷點 D：1001–1442px（一般筆電）===== */
@media (max-width: 1442px) and (min-width: 1001px) {
.press-main { height: 3687px; }
.pr-header { left: 24.29%; top: 325px; width: 35.76%; height: 272px; }
.pr-title { left: 66.67%; top: 514px; }
.pr-intro { left: 66.67%; top: 559px; width: 23.92%; }
.pr-list { left: 24.24%; top: 797px; width: 60.61%; }
.pr-entry { height: 133px; }
.pr-entry::after { top: 119px; }
.pr-entry .date { top: 26px; }
.pr-entry .title { top: 64px; }
}
/* ===== 斷點 E：751–1000px。介紹文移到左側，欄位變寬。 ===== */
@media (max-width: 1000px) and (min-width: 751px) {
.press-main { height: 3703px; }
.pr-header { left: 24.16%; top: 261px; width: 53.06%; height: 272px; }
.pr-title { left: 24.16%; top: 683px; }
.pr-intro { left: 24.16%; top: 728px; width: 51.12%; }
.pr-list { left: 24.24%; top: 897px; width: 60.61%; }
.pr-entry { height: 129px; }
.pr-entry::after { top: 119px; }
.pr-entry .logo { width: 21.99%; }
.pr-entry .date { left: 34.45%; width: 42.65%; top: 31px; }
.pr-entry .title { left: 34.45%; width: 65.53%; top: 69px; }
}
/* ===== 斷點 F：≤750px 手機 =====
2026-09-22 依線上 @375 / @430 / @480 / @600 / @750 實測重做。
這一段線上的特徵（實測）：
· **所有 top 都是固定 px，不隨寬度變**：頭圖 188、Press 488、說明 533、第一筆 688
· 水平全部是視窗百分比：logo 左 8% 寬 18%、日期與標題左 34.95%
· 每筆的列高會隨寬度微幅變長：實測 123.9@375 → 127.85@750（≈1.053vw + 119.95px）
· 日期＋標題是「在列裡垂直置中」的一組（標題換兩行時日期會往上移），
不是各自固定 top —— 所以這裡改用 grid + align-content: center
· 分隔線：全寬、#9d9d9d 1px，在每列 top 119px（2026-09-23 業主指正後重量 @375：807/930/1054） */
@media (max-width: 750px) {
/* 頁高：第一筆 688 + 21 筆列高 + 最後一筆 logo 101 + 頁尾 99（實測 @375/@430/@750 都吻合） */
.press-main { height: calc(21.06vw + 3287px); padding: 0; }
.pr-header { left: 12.55%; width: 75%; height: 208px; top: 188px; }
.pr-header img { height: 100%; aspect-ratio: auto; }
.pr-title { left: 12.55%; width: 48.8%; top: 488px; }
.pr-intro { left: 12.55%; width: 75%; top: 533px; }
.pr-list { left: 0; width: 100%; top: 688px; }
.pr-entry {
height: calc(1.053vw + 119.95px);
display: grid;
grid-template-columns: 34.95% 58.4%;
align-content: center;
padding-bottom: 5px;
}
.pr-entry::after { top: 119px; }
.pr-entry .logo { left: 8%; top: 0; width: 18%; height: 101px; }
.pr-entry .date, .pr-entry .title {
position: static; left: auto; top: auto;
grid-column: 2; width: auto;
}
.pr-entry .date { width: 65.07%; margin-bottom: 24px; font-size: 12px; line-height: 14px; }
.pr-entry .title { font-size: 12px; line-height: 19.2px; }
}
@media (max-width: 1024px) {
/* 手機／平板：回到固定字級、單欄流式排版 */
html { font-size: 16px; }
/* LOGO 線上是三段尺寸，不是兩段（實測墨跡的 寬 / 位置）：
≥1025 90×90 @ (90, 15) ← 桌機，見 :root
751–1024 70×70 @ (55, 14) ← 這一段
≤750 50×50 @ (20, 19) ← 下面的巢狀 @media
我們的 SVG 左上有留白，所以要從墨跡反推 CSS 值（k 值見 :root 的註解）：
圖寬 = 墨跡寬 / 0.710057， left = X − 圖寬 × 0.1459774，
top = Y − 圖寬 × 0.1386521 */
:root { --logo-left: 40.6px; --logo-w: 98.6px; } /* 70 / (55,14) */
.corner-logo { top: 0.3px; }
@media (max-width: 750px) {
:root { --logo-left: 9.7px; --logo-w: 70.4px; } /* 50 / (20,19) */
.corner-logo { top: 9.2px; }
}
:root { --title-right: 12px; --title-w: 150px; }
.corner-title { top: 2px; }
/* 平板段（751–1024）線上字標墨跡寬 149px、本站原本 116px（2026-11-04 比對報告截圖量測）。
150 × 149.4/116.2 ≈ 193；right／top 由線上墨跡右緣與頂端反推。手機段維持 150（量起來已一致）。 */
@media (min-width: 751px) {
:root { --title-right: 17px; --title-w: 193px; }
.corner-title { top: -11px; }
}
/* 平板起 LOGO 縮小，墨跡只剩 68px 寬，但 "architecture" 要 72.8px
→ 右緣對齊在這一段物理上做不到，放掉寬度只保左緣對齊。 */
.works-cats { width: auto; }
.corner-menu { top: 84px; }
.corner-menu nav { gap: 13px; margin-bottom: 32px; }
.corner-menu nav a { font-size: 12px; }
.corner-menu .menu-social { gap: 12px; margin-bottom: 14px; }
.corner-menu .menu-social svg { width: 15px; height: 15px; }
:root { --tm-h: 110px; } /* margin 位移會自己跟著算 */
.corner-up { left: 24px; bottom: 26px; font-size: 18px; }
.corner-about { right: 8px; bottom: -2px; }
.corner-about img { width: 96px; }
/* ---- 手機（≤750）的四角元件：2026-09-22 依線上 @375 / @390 / @430 實測 ----
線上手機版與桌機版的差別（實測，不是推測）：
下拉選單 首項 top 110px、列距 37px（桌機是 top 84）
右緣：線上是「離視窗 10px」，比右上字標的墨跡右緣還往外 18.8px；
**業主 2026-09-23 指定要跟字標右緣切齊**，所以這裡用 --edge-r
（＝字標右邊界 + 圖檔右側留白，定義見 :root），不照線上的 10px。
社群圖示 **不在選單裡**，永遠固定在右下角 20×20、右 20px、下 40px（列距 6px）
直排商標 手機版沒有 → 隱藏
右下 About 角標 手機版沒有 → 隱藏
回到頂端「<」 左 14.5px、下 44px、20px、#737373
選單本身仍然是「點右上標題才展開」，跟桌機一樣（業主確認過）。
作法：容器改成永遠可見（社群圖示要看得到），只把 nav 與直排商標做淡入淡出。 */
@media (max-width: 750px) {
.corner-menu {
top: 110px; right: var(--edge-r);
opacity: 1; transform: none; pointer-events: none;
}
.corner-menu nav {
gap: 20.2px; margin-bottom: 0;
opacity: 0; transform: translateY(-8px); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.corner-menu.open nav { opacity: 1; transform: none; pointer-events: all; }
/* 容器本身永遠不能有 transform：有 transform 的祖先會變成 position:fixed 的
定位基準，右下角的社群圖示就會跟著選單跑掉。 */
.corner-menu.open { transform: none; }
.corner-menu .menu-trademark { display: none; }
.corner-menu .menu-social {
position: fixed; right: 20px; bottom: 40px;
gap: 6px; margin: 0; pointer-events: all;
}
/* display:block 是必要的：