/*
Theme Name: Lirea Studio
Theme URI: https://lireastudio.com/
Author: Lirea Studio
Description: Lirea Studio 莉芮亞數位工作室官方網站佈景主題。單頁式 UX/UI 設計作品集，支援深色模式，內建聯絡表單。
Version: 2.1.5
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lirea-studio
*/

/* ═══════════════════════════════════════════════════════════════
   1. 設計代號 — 色票取自山景畫作（暮色天空與雪山湖面）
      #344979  Shadow Olive  深藍（標題）
      #5D6DA5  Fog Brown     霧藍（主色、按鈕、連結）
      #9896BB  Beige Mist    灰紫（裝飾、細節）
      #C6C6E8  Soft Shell    淡藍紫（淺色面板、框線的來源）
      #F7E5EB  粉紅（案例區塊底色的來源，已再調淡）
      改配色要動三處：:root、深色模式的兩個區塊。
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#FCFCFE;       /* 底色：帶一點藍紫的白 */
  --surface:#FFFFFF;
  --surface-2:#F4F4FA;   /* 淡藍紫面板（Soft Shell 調淡） */
  --band:#FBF1F5;        /* 淡粉區塊（畫中天空的粉紅調淡） */
  --ink:#344979;         /* 標題：深藍 */
  --body:#566079;        /* 內文：帶藍的灰 */
  --faint:#737A9B;
  --rule:#E4E4F1;
  --rule-2:#CDCDE6;
  --accent:#5D6DA5;      /* 主色：霧藍 */
  --accent-deep:#344979;
  --accent-soft:#EEEFF8;
  --lav:#9896BB;         /* 灰紫 */
  --on-accent:#FFFFFF;
  --signal:#B4533A;      /* 語意色：僅代表「改版前／問題」與待填標記 */
  --signal-soft:#F8EAE5;
  --shadow:0 2px 4px rgba(52,73,121,.05), 0 12px 28px rgba(52,73,121,.08);
  --foot-bg:#EEEFF8;     /* 頁尾：淡藍紫 */
  --sky-1:#F8ECF1; --sky-2:#ECEDF8; --wash:#E9EAF6;  /* 天空漸層：淡粉 → 淡藍紫 */
  --foot-ink:#566079; --foot-faint:#737A9B;

  --f-display:"Playfair Display","Noto Serif TC",Georgia,serif;
  --f-body:"Poppins","Noto Sans TC",-apple-system,"Microsoft JhengHei",sans-serif;

  --col:1160px;
  --gutter:clamp(20px,5vw,56px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121626; --surface:#1A2036; --surface-2:#222A45; --band:#1F2138;
    --ink:#EAECF7; --body:#A9AFCB; --faint:#8088AA;
    --rule:#2C3453; --rule-2:#3D4770;
    --accent:#AAB3E6; --accent-deep:#C6C6E8; --accent-soft:#252B4A;
    --lav:#C6C6E8; --on-accent:#141A30;
    --foot-bg:#0D1120; --foot-ink:#C6C6E8; --foot-faint:#8088AA;
    --sky-1:#1F2138; --sky-2:#181D33; --wash:#161B30;
    --signal:#E0907A; --signal-soft:#32211C;
    --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#121626; --surface:#1A2036; --surface-2:#222A45; --band:#1F2138;
  --ink:#EAECF7; --body:#A9AFCB; --faint:#8088AA;
  --rule:#2C3453; --rule-2:#3D4770;
  --accent:#AAB3E6; --accent-deep:#C6C6E8; --accent-soft:#252B4A;
  --lav:#C6C6E8; --on-accent:#141A30;
  --foot-bg:#0D1120; --foot-ink:#C6C6E8; --foot-faint:#8088AA;
  --sky-1:#1F2138; --sky-2:#181D33; --wash:#161B30;
  --signal:#E0907A; --signal-soft:#32211C;
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.4);
}

/* ═══════════ 2. 基礎 ═══════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-body);font-size:16px;font-weight:400;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter)}

/* 小標籤 */
.eyebrow{display:block;font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .85rem}
.eyebrow.on-dark{color:var(--lav)}

/* 深／淺色模式切換用的圖片 */
.only-dark{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-dark{display:block!important}
  :root:not([data-theme="light"]) .only-light{display:none!important}
}
:root[data-theme="dark"] .only-dark{display:block!important}
:root[data-theme="dark"] .only-light{display:none!important}

.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem}

/* ═══════════ 3. 頁首 ═══════════ */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--surface-2) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:1.5rem;min-height:72px;
  max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;white-space:nowrap}
.brand img{width:58px;height:auto}
.brand .wm{font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  letter-spacing:.09em;color:var(--ink);line-height:1}
.bar nav{margin-left:auto;display:flex;gap:1.5rem}
.bar nav a{font-size:.88rem;text-decoration:none;color:var(--body);
  padding-block:.2rem;border-bottom:1.5px solid transparent;
  transition:color .16s,border-color .16s}
.bar nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:900px){.bar nav{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;font-family:inherit;font-size:.92rem;font-weight:500;
  padding:.78rem 1.5rem;border:1.5px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}
.btn-pri{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:var(--on-accent);border-color:var(--accent)}
.btn-pri:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-sec:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:.5rem 1.05rem;font-size:.85rem}
@media (max-width:900px){.bar .btn{margin-left:auto}}

/* ═══════════ 4. 圖文交錯的骨架 ═══════════
   .duo = 左右兩欄。加 .flip 就左右對調。
   窄螢幕一律回到「圖在上、文在下」。 */
.duo{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.duo.flip .duo-media{order:2}
@media (max-width:880px){
  .duo{grid-template-columns:1fr;gap:1.6rem}
  .duo.flip .duo-media{order:0}
}
.duo-text h3{font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.45;margin:0 0 .85rem}
.duo-text p{margin:0 0 1.2rem;max-width:36em}
.duo-text p:last-child{margin-bottom:0}

/* 圖片框 */
.shot{position:relative;overflow:hidden;border-radius:3px;
  background:var(--surface-2);box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* 直式圖（sitemap、手機）不裁切，改成貼在淡紫底上 */
.shot.contain{background:var(--surface-2);padding:clamp(1rem,3vw,2rem)}
.shot.contain img{aspect-ratio:4/3;object-fit:contain}
.shot.free img{aspect-ratio:auto}

/* 交付內容小標 */
.deliver{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.deliver li{font-size:.76rem;font-weight:500;color:var(--accent);
  background:var(--accent-soft);padding:.3rem .7rem;border-radius:2px}
.deliver-lab{display:block;font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .6rem}

/* ═══════════ 5. 區塊 ═══════════ */
.sec{padding-block:clamp(4rem,9vw,7rem)}
.sec-tinted{background:var(--surface-2)}
.sec-band{background:var(--band)}
.sec-head{max-width:38rem;margin:0 0 clamp(2.5rem,5vw,3.75rem)}
.sec-head h2{font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.35;margin:0 0 .85rem}
.sec-head p{margin:0;font-size:1.02rem}
.stack{display:grid;gap:clamp(3rem,7vw,5.5rem)}

/* ═══════════ 6. Hero ═══════════ */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem)}
.hero h1{font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.34;
  letter-spacing:-.005em;margin:0 0 1.35rem}
.hero .lede{font-size:clamp(1rem,1.5vw,1.1rem);max-width:33em;margin:0 0 2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}
.scope{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-top:1.4rem;
  border-top:1px solid var(--rule);font-size:.84rem;color:var(--faint)}
.scope b{color:var(--accent);font-weight:500}

/* ═══════════ 7. 合作流程 ═══════════ */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;counter-reset:step}
.flow-step{background:var(--surface);padding:1.6rem 1.4rem}
.flow-n{counter-increment:step;display:block;font-family:var(--f-display);
  font-size:1.45rem;font-weight:600;color:var(--lav);line-height:1;margin-bottom:.7rem}
.flow-n::before{content:counter(step,decimal-leading-zero)}
.flow-step h3{font-size:1rem;font-weight:600;margin:0 0 .3rem;font-family:var(--f-body)}
.flow-step .dur{display:block;font-size:.74rem;color:var(--accent);margin-bottom:.6rem}
.flow-step p{margin:0;font-size:.88rem;line-height:1.75}

/* ═══════════ 8. 案例 ═══════════ */
.case-meta{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem}
.case-tag{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:.26rem .62rem;border-radius:2px}
.duo-text h3.case-title{margin:0 0 1.15rem}
.pqr{display:grid;gap:.95rem;margin:0 0 1.15rem;padding:0}
.pqr > div{display:grid;grid-template-columns:4.2rem 1fr;gap:.9rem;align-items:start}
@media (max-width:480px){.pqr > div{grid-template-columns:1fr;gap:.2rem}}
.pqr dt{font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--faint);
  padding-top:.42rem}
.pqr dd{margin:0;font-size:.93rem;line-height:1.78}
.pqr dd b{color:var(--ink);font-weight:500}
.case-role{margin:0;padding-top:.95rem;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--faint)}

/* 待填標記 —— 上線前必須全部清掉 */
.todo{display:inline-block;background:var(--signal-soft);color:var(--signal);
  font-size:.76rem;font-weight:500;padding:.08rem .45rem;
  border:1px dashed currentColor;border-radius:2px}

/* ═══════════ 9. 流程圖 ═══════════ */
figure.fig{margin:0;padding:clamp(1.1rem,3vw,1.8rem);background:var(--surface);
  border:1px solid var(--rule);border-radius:3px;box-shadow:var(--shadow)}
.fig-scroll{overflow-x:auto}
figure.fig svg{display:block;min-width:460px;height:auto}
figcaption{font-size:.84rem;margin-top:1rem;padding-top:.85rem;
  border-top:1px solid var(--rule);line-height:1.7}
.sv-face{fill:var(--surface)}
.sv-plate{fill:var(--surface-2)}

/* ═══════════ 10. 關於 ═══════════ */
.logo-panel{display:grid;place-items:center;background:var(--surface-2);
  padding:clamp(2.5rem,7vw,4.5rem);border-radius:3px}
.logo-panel img{width:min(260px,70%)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;margin-top:2rem}
.facts > div{background:var(--surface);padding:1rem 1.15rem}
.facts dt{font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.25rem}
.facts dd{margin:0;font-size:.92rem;font-weight:500;color:var(--ink)}

/* ═══════════ 11. FAQ ═══════════ */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:1.2rem 2.2rem 1.2rem 0;position:relative;
  font-weight:500;font-size:1rem;color:var(--ink);list-style:none;line-height:1.65}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.6rem;
  width:9px;height:9px;border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--accent)}
.faq .ans{padding:0 0 1.4rem;font-size:.95rem;max-width:42em}
.faq .ans p{margin:0 0 .7rem}
.faq .ans p:last-child{margin:0}

/* ═══════════ 12. 聯絡 ═══════════ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4.5vw,3.5rem)}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.76rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.field label .req{color:var(--signal)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--rule-2);border-radius:2px;padding:.68rem .8rem;width:100%}
.field textarea{min-height:120px;resize:vertical;line-height:1.75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--faint);margin:0}
#formMsg{font-size:.92rem;padding:.9rem 1.05rem;border-radius:2px;
  border:1px solid var(--rule-2);background:var(--surface);line-height:1.75}
#formMsg a{color:var(--accent);font-weight:500}
[hidden]{display:none!important}

.reach{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;align-content:start}
.reach > a,.reach > div{background:var(--surface);padding:1.15rem 1.25rem;
  text-decoration:none;display:block;transition:background .16s}
.reach > a:hover{background:var(--accent-soft)}
.reach .k{display:block;font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.25rem}
.reach .v{display:block;font-size:.96rem;font-weight:500;color:var(--ink);
  word-break:break-all}
.reach > a .v{color:var(--accent)}

/* ═══════════ 13. 頁尾 ═══════════ */
footer{background:var(--foot-bg);color:var(--foot-ink);border-top:1px solid var(--rule);
  padding-block:3rem;font-size:.86rem}
.foot-in{max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:auto 1fr;gap:2rem 3rem;align-items:start}
@media (max-width:700px){.foot-in{grid-template-columns:1fr}}
.foot-brand img{width:110px;margin-bottom:.9rem}
.foot-brand p{margin:0;font-size:.8rem;color:var(--foot-faint);max-width:22em;line-height:1.75}
.foot-right{display:grid;gap:1.4rem;justify-items:start}
@media (min-width:701px){.foot-right{justify-items:end;text-align:right}}
.foot-right nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-right a{color:var(--foot-ink);text-decoration:none}
.foot-right a:hover{color:var(--accent)}
.cr{font-size:.76rem;color:var(--foot-faint);margin:0;letter-spacing:.04em}

/* ═══════════ 14. WordPress 補充 ═══════════ */
html{scroll-padding-top:80px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
/* 登入後的管理列會蓋住 sticky 頁首 */
body.admin-bar .bar{top:32px}
@media (max-width:782px){body.admin-bar .bar{top:46px}}
@media (max-width:600px){body.admin-bar .bar{top:0}}

/* wp_nav_menu 會輸出 ul，這裡還原成橫向排列 */
.bar nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.foot-right nav ul{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}

/* 表單防垃圾訊息欄位（真人看不到） */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 內頁、文章頁 */
.entry{max-width:46rem}
.entry-title{font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.35;margin:0 0 .85rem}
.entry-meta{font-size:.84rem;color:var(--faint);margin:0 0 2rem}
.entry-content > *{margin-block:0 1.3rem}
.entry-content h2,.entry-content h3{font-family:var(--f-display);line-height:1.45;margin-top:2.2rem}
.entry-content a{color:var(--accent)}
.entry-content blockquote{border-left:3px solid var(--lav);padding-left:1.2rem;margin-inline:0;color:var(--faint)}
.entry-content pre{overflow-x:auto;background:var(--surface-2);padding:1rem;border-radius:3px}
.entry-content img{border-radius:3px}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{display:block;margin-inline:auto}
.post-card{padding:1.6rem 0;border-bottom:1px solid var(--rule);max-width:46rem}
.post-card h2{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.45;margin:0 0 .4rem}
.post-card h2 a{text-decoration:none}
.post-card h2 a:hover{color:var(--accent)}
.post-card .entry-meta{margin-bottom:.8rem}
.post-card p{margin:0}
.pagination .nav-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.5rem}
.pagination .page-numbers{padding:.4rem .85rem;border:1px solid var(--rule-2);border-radius:2px;text-decoration:none}
.pagination .page-numbers.current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}


/* ═══════════ 15. 手機 / 平板 選單 ═══════════ */
.nav-toggle{display:none;width:42px;height:42px;padding:0;background:none;
  border:1px solid var(--rule-2);border-radius:3px;cursor:pointer;
  align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;
  transition:transform .2s,background .2s}
.nav-toggle span{position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.bar.open .nav-toggle span{background:transparent}
.bar.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.bar.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .bar nav{position:absolute;left:0;right:0;top:100%;margin:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.4rem var(--gutter) 1rem;box-shadow:var(--shadow)}
  .bar.open nav{display:block}
  .bar nav ul{flex-direction:column;gap:0}
  .bar nav a{display:block;padding:.85rem 0;font-size:1rem;
    border-bottom:1px solid var(--rule)}
  .bar nav li:last-child a{border-bottom:0}
}
@media (max-width:380px){
  .bar-in{gap:.7rem}
  .brand img{width:50px}
  .btn-sm{padding:.45rem .8rem}
}

/* ═══════════ 16. 合併後的作品案例（手機 / 平板 / 桌機）═══════════ */
.case{display:grid;gap:clamp(1.2rem,3vw,1.8rem)}
.case .case-meta{margin-bottom:.6rem}
.case-title{font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.45;margin:0}
.case-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,2vw,1.4rem)}
@media (max-width:640px){.case-shots{grid-template-columns:1fr}}
.case-shots figure.shot{margin:0;background:var(--surface)}
.case-shots figure.shot img{display:block}
.case-shots figure.shot figcaption{margin:0;padding:.6rem .9rem;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--faint)}
.case-body{max-width:46rem}

/* ═══════════ 17. 從頁首到頁尾的色調流程 ═══════════
   淡藍紫頁首 → 粉藍天空（Hero）→ 白 → 淡藍紫 → 淡粉 → 白 → 淡藍紫 → 藍紫漸層 → 淡藍紫頁尾 */
.hero{background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--paper) 100%)}
#process{background:var(--surface-2)}
#contact{background:linear-gradient(180deg,var(--paper) 0%,var(--wash) 100%)}

/* ═══════════ 18. 圖片 RWD 保險 ═══════════
   grid 的 1fr 預設不能縮得比內容小，寬圖或流程圖會把整欄撐出螢幕。
   改成 minmax(0,1fr)，並讓所有 grid 子項目都允許縮小。 */
.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){.duo{grid-template-columns:minmax(0,1fr)}}
.stack,.case{grid-template-columns:minmax(0,1fr)}
.contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.case-shots{grid-template-columns:minmax(0,1fr)}}
.duo > *,.stack > *,.case > *,.case-shots > *,.contact-grid > *,.foot-in > *,.facts > *,.flow > *{min-width:0}
img,svg,video,iframe{max-width:100%}
.shot,figure.fig{max-width:100%}
.shot img{width:100%;height:auto}
.shot.free img{aspect-ratio:auto}
/* 最後一道保險：萬一有東西超寬，也不要出現左右捲動（clip 不影響 sticky 頁首） */
body{overflow-x:clip}