/* ==========================================================================
   翼王資訊社 · 首頁改版原型
   規範來源：翼王資訊_Phase2_識別手冊_2a（朱印 × 楷書）
   配色比例：宣紙白 70% / 墨黑 25% / 朱印紅 5%
   ========================================================================== */

/* 楷書子集：只含本頁固定品牌字串，自架不依賴 CDN。
   CMS 可編輯的內文不套楷書，避免客戶改字後缺字。 */
@font-face {
    font-family: 'EW Kai';
    src: url('fonts/ewkai-subset.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    /* ponytail: 子集僅涵蓋本頁固定文案（107 字）。若標語改動，需重跑 build-font.sh */
}

:root {
    --ink:      #16130F;   /* 墨黑 主色 — 文字／底 */
    --seal:     #A8352A;   /* 朱印紅 強調 — 印章／重點 */
    --paper:    #F1EBDD;   /* 宣紙白 底 — 紙／留白 */
    --wood:     #2E5E3A;   /* 青木綠 輔色 — 僅限命名典故，日常版面不用 */

    /* 手冊內實際使用的中性階
       注意：手冊的 #8A7F66 是印刷用說明文字色，在宣紙白上只有 3.33:1，
       未達 WCAG AA 的 4.5:1。螢幕上的小字一律改用 --ink-55（實測 4.84:1）。
       #8A7F66 僅保留給非文字用途（框線需 3:1 即可）。 */
    --ink-70:   #443E34;
    --ink-55:   #6E6553;   /* 小字最小可用色 — 4.84:1 */
    --ink-45:   #8A7F66;   /* 僅限框線／非文字 — 3.33:1 */
    --rule:     #C6BBA0;
    --rule-lt:  #D6CCB5;
    --on-ink:   #C7BEA9;   /* 墨黑底上的次要文字 4.8:1 */

    --kai:   'EW Kai', 'TW-Kai', '全字庫正楷體', 'AR PL UKai TW', 'LXGW WenKai TC', 'LXGW WenKai', serif;
    --body:  '方正仿宋', 'FZFangSongB-Z02', 'Noto Serif CJK TC', 'Noto Serif TC', serif;
    --pf:    'Playfair Display', Georgia, serif;
    --mono:  'Noto Sans Mono', ui-monospace, monospace;

    --gut: clamp(20px, 5vw, 74px);
    --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.95;
    -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* 全站可見焦點：朱印紅外框，兩種底色上都夠明顯 */
:focus-visible {
    outline: 3px solid var(--seal);
    outline-offset: 3px;
    border-radius: 1px;
}
.on-ink :focus-visible { outline-color: var(--paper); }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: var(--paper);
    padding: 12px 20px; font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* ---------- 朱印 ----------------------------------------------------------
   手冊 03：正方 1×、內框留白 7%、框線 3%、二字各半格、字面約格高 62%
   禁忌：不加漸層、不拉伸、不換底色、不改圓形、不換黑體、不降透明度        */
.seal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 1;
    width: var(--sz, 52px);
    background: var(--seal);
    color: var(--paper);
    box-shadow: inset 0 0 0 calc(var(--sz, 52px) * .03) rgba(241, 235, 221, .24);
    flex: none;
}
.seal i {
    font-family: var(--kai);
    font-style: normal;
    font-weight: 700;
    font-size: calc(var(--sz, 52px) * .34);
    line-height: 1;
    display: grid;
    place-items: center;
}

/* ---------- 頁首 ---------- */
.hd {
    position: sticky; top: 0; z-index: 40;
    background: rgba(241, 235, 221, .93);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
}
.hd .wrap { display: flex; align-items: center; gap: 18px; min-height: 74px; }
.hd .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hd .brand b {
    font-family: var(--kai); font-weight: 700; font-size: 21px; letter-spacing: .1em;
}
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
    font-family: var(--kai); font-size: 15.5px; letter-spacing: .08em;
    text-decoration: none; padding: 9px 13px; color: var(--ink-70);
}
.nav a:hover { color: var(--seal); }

/* 漢堡鈕：≥861px 隱藏，窄螢幕才出現 */
.burger {
    margin-left: auto; display: none;
    width: 46px; height: 46px; padding: 11px;
    background: none; border: 1px solid var(--rule); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); margin: 4px 0; }
.burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.burger[aria-expanded="true"] span { background: var(--paper); }

@media (max-width: 860px) {
    .burger { display: block; }
    .nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        padding: 8px var(--gut) 18px;
    }
    .nav.open { display: flex; }
    .nav a {
        padding: 14px 0; font-size: 17px;      /* 觸控目標 ≥44px 高 */
        border-bottom: 1px solid var(--rule-lt);
    }
    .nav a:last-child { border-bottom: 0; }
}

/* ---------- Hero ----------
   直排楷書大字 + 朱印。手冊 1a 方向的版面語言。 */
.hero { padding: clamp(48px, 9vw, 108px) 0 clamp(56px, 10vw, 120px); }
.hero .frame {
    border: 1px solid var(--rule);
    padding: clamp(28px, 5vw, 64px);
    position: relative;
}
.hero .frame::after {
    content: ''; position: absolute; inset: 7px;
    border: 1px solid var(--rule-lt); pointer-events: none;
}
.hero .meta {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em;
    color: var(--ink-55); display: flex; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.hero .stage {
    display: flex; justify-content: center; align-items: flex-start;
    gap: clamp(24px, 5vw, 54px);
    margin: clamp(40px, 7vw, 76px) 0 clamp(28px, 5vw, 52px);
}
.hero h1 {
    font-family: var(--kai);
    writing-mode: vertical-rl;
    font-size: clamp(52px, 10.5vw, 108px);
    font-weight: 700; letter-spacing: .12em; line-height: 1.05;
    margin: 0;
}
.hero .en {
    font-family: var(--pf); font-style: italic;
    font-size: clamp(19px, 3vw, 30px);
    color: var(--ink-70); text-align: center; margin: 0;
}
.hero .sub {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .2em;
    color: var(--ink-55); text-align: center; margin: 14px 0 0;
}
.hero .acts { margin-top: clamp(34px, 5vw, 52px); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
    /* 手機改橫排，直排在窄螢幕會撐爆高度 */
    .hero h1 { writing-mode: horizontal-tb; text-align: center; letter-spacing: .06em; }
    .hero .stage { flex-direction: column; align-items: center; gap: 26px; }
}

.btn {
    font-family: var(--kai); font-size: 16px; letter-spacing: .08em;
    text-decoration: none; padding: 13px 30px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper);
}
.btn:hover { background: var(--seal); border-color: var(--seal); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- 墨黑帶 ---------- */
.on-ink { background: var(--ink); color: var(--paper); }
.band { padding: clamp(56px, 9vw, 104px) 0; }
.band h2 {
    font-family: var(--kai); font-size: clamp(30px, 5.2vw, 52px);
    font-weight: 700; line-height: 1.4; margin: 0; letter-spacing: .04em;
}
.band .lede { color: var(--on-ink); max-width: 44em; margin: 22px 0 0; }
.pillars {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(20px, 3vw, 38px); margin-top: clamp(38px, 6vw, 62px);
}
.pillars > div { border-top: 2px solid var(--paper); padding-top: 16px; }
.pillars h3 { font-family: var(--kai); font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.pillars p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--on-ink); }

/* ---------- 一般區段 ---------- */
.sec { padding: clamp(58px, 9vw, 108px) 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
    color: var(--seal); margin: 0 0 10px;
}
.sec h2 {
    font-family: var(--kai); font-size: clamp(30px, 5vw, 46px);
    font-weight: 700; margin: 0; letter-spacing: .05em;
}
.sec .note { color: var(--ink-55); margin: 16px 0 0; max-width: 46em; }

/* 服務：細線分隔列（不用 01/02/03 編號 — 服務不是流程，編號不帶資訊） */
.svc { margin-top: clamp(34px, 5vw, 54px); border-top: 1px solid var(--ink); }
.svc > div {
    display: grid; grid-template-columns: minmax(150px, 260px) 1fr;
    gap: clamp(14px, 3vw, 40px);
    padding: 22px 0; border-bottom: 1px solid var(--rule-lt);
}
.svc h3 { font-family: var(--kai); font-size: 21px; font-weight: 700; margin: 0; letter-spacing: .05em; }
.svc p { margin: 0; color: var(--ink-70); }
@media (max-width: 640px) { .svc > div { grid-template-columns: 1fr; gap: 6px; } }

/* 主推系統：有框卡片，容納較長說明，與下方「還在跑」的無框格線區隔 */
/* minmax 的下限要包 min()，否則 320px 螢幕上欄寬撐破版面（實測 scrollW 330 > 320） */
.flagship { margin-top: clamp(34px, 5vw, 54px); display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.flagship article { border: 1px solid var(--rule); display: flex; flex-direction: column; }
.flagship img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--rule); background: #fff; }
.flagship .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.flagship h3 { font-family: var(--kai); font-size: 20px; font-weight: 700; margin: 0; line-height: 1.5; letter-spacing: .04em; }
.flagship p { margin: 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-70); }
.flagship .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--seal); }

/* 成果案例：統一 16:10 縮圖 */
.work { margin-top: clamp(34px, 5vw, 54px); display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.work figure { margin: 0; }
.work img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border: 1px solid var(--rule); background: #fff;
}
.work figcaption { margin-top: 14px; }
.work h3 { font-family: var(--kai); font-size: 17.5px; font-weight: 700; margin: 0; line-height: 1.6; letter-spacing: .03em; }
.work .yr { font-family: var(--mono); font-size: 12.5px; color: var(--ink-55); margin: 6px 0 0; }
.work .yr b { color: var(--seal); font-weight: 500; }
.todo {
    color: var(--ink-55); border-bottom: 1px dashed var(--ink-45);
    font-style: normal;
}

/* 團隊：墨黑名章（朱紅保留給品牌印，不外借） */
.team { margin-top: clamp(34px, 5vw, 54px); display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(20px, 3vw, 36px); }
.team .card { text-align: center; }
.team .name-seal {
    width: 108px; aspect-ratio: 1; margin: 0 auto 18px;
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    box-shadow: inset 0 0 0 3px rgba(241, 235, 221, .2);
    font-family: var(--kai); font-size: 30px; font-weight: 700;
    letter-spacing: .04em; line-height: 1.15;
}
.team h3 { font-family: var(--kai); font-size: 19px; font-weight: 700; margin: 0; letter-spacing: .06em; }
.team p { margin: 5px 0 0; font-size: 14px; color: var(--ink-55); font-family: var(--mono); }

/* 知識分享：整張卡片是連結（觸控目標大，不用去點標題那一行）。
   刻意不放縮圖 —— 這裡的內容是文章，封面圖要另外做才有東西可放，
   沒有圖的卡片在這個宣紙版面上也站得住。日後在後台上傳了 filename，
   要顯示縮圖再加樣式即可。 */
.know { margin-top: clamp(34px, 5vw, 54px); display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 30px); }
.know a {
    border: 1px solid var(--rule); background: #FBF7EE;
    padding: 26px 28px 24px; text-decoration: none;
    display: flex; flex-direction: column; gap: 10px;
}
.know a:hover { border-color: var(--seal); }
.know .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--seal); }
.know .t {
    font-family: var(--kai); font-size: 20px; font-weight: 700;
    line-height: 1.55; letter-spacing: .04em; color: var(--ink);
}
.know .d { font-size: 15.5px; line-height: 1.9; color: var(--ink-70); }
.know .go {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em;
    color: var(--ink-55); margin-top: auto; padding-top: 6px;
}
.know a:hover .go { color: var(--seal); }

/* 聯絡表單 */
.form { margin-top: clamp(30px, 5vw, 46px); display: grid; gap: 20px; max-width: 620px; }
.form .row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.field label {
    display: block; font-family: var(--kai); font-size: 15.5px;
    letter-spacing: .06em; margin-bottom: 7px;
}
.field .req { color: var(--seal); font-family: var(--mono); font-size: 12px; margin-left: 4px; }
.field input, .field textarea {
    width: 100%; font: inherit; font-size: 16px;
    padding: 12px 14px; background: #FBF7EE;
    border: 1px solid var(--ink-45); color: var(--ink);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--seal); }
.hint { font-size: 13.5px; color: var(--ink-55); font-family: var(--mono); margin: 6px 0 0; }

.contact-info { display: grid; gap: 14px; margin-top: 34px; font-family: var(--mono); font-size: 14px; }
/* 觸控目標：WCAG 2.2 AA 要求 ≥24×24 */
.contact-info a { color: var(--ink); text-underline-offset: 4px;
                  display: inline-block; padding: 4px 2px; min-height: 24px; }

/* 頁尾 */
.ft { padding: clamp(48px, 7vw, 82px) 0 44px; }
.ft .top { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.ft .slog { font-family: var(--kai); font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: .07em; margin: 0; }
.ft .en { font-family: var(--pf); font-style: italic; font-size: 17px; color: #B7AC94; margin: 8px 0 0; }
.ft hr { border: 0; border-top: 1px solid #3A342B; margin: 38px 0 20px; }
.ft .fine {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: #8A8069;
}
/* 觸控目標：WCAG 2.2 AA 要求 ≥24×24，純文字連結預設高度不足 */
.ft .fine a { display: inline-block; padding: 6px 2px; min-height: 24px; }

/* 聯絡表單送出結果 */
.formmsg { margin: 4px 0 0; font-size: 15px; padding: 10px 14px; border-left: 3px solid; }
.formmsg.ok  { border-color: var(--ink);  background: #EBE4D4; color: var(--ink); }
.formmsg.err { border-color: var(--seal); background: #F3E3DF; color: #7E2318; }

/* 蜜罐欄位：一定要真的移出畫面，用 display:none 有些機器人會偵測而跳過 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }