/* =========================================================
   Components — 大昌裝飾材料
   ========================================================= */

/* ---------- Media（照片一律 object-fit cover、圓角 0） ---------- */
.media{position:relative;background:var(--c-bg-2);overflow:hidden}
.media>img,.media>picture,.media>picture>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--4x3{aspect-ratio:4/3}.media--4x5{aspect-ratio:4/5}.media--1x1{aspect-ratio:1/1}
.media--16x9{aspect-ratio:16/9}.media--9x16{aspect-ratio:9/16}.media--3x2{aspect-ratio:3/2}
.media--21x9{aspect-ratio:21/9}.media--7x5{aspect-ratio:7/5}
.media__placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--c-ink-2)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--c-bg);border-bottom:1px solid var(--c-line);
  transition:height var(--dur)}
.site-header__inner{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:height .2s ease}
.site-header.is-compact .site-header__inner{height:var(--header-h-compact)}
.brand{display:flex;align-items:center;gap:14px;color:var(--c-ink);width:max-content}
.brand:hover{color:var(--c-ink)}
.brand__mark{width:30px;height:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__zh{font-family:var(--f-serif);font-size:16px;font-weight:600}
.brand__en{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;color:var(--c-ink-2)}
.site-nav{display:flex;gap:36px;font-size:15px}
.site-nav a{color:var(--c-ink);padding-block:4px;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--c-accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--c-ink)}
.site-header__cta{display:flex;justify-content:flex-end;align-items:center;gap:28px}
.link-measure{font-size:15px;color:var(--c-accent);border-bottom:1px solid var(--c-accent);padding-bottom:2px}
.link-measure:hover{color:var(--c-ink);border-color:var(--c-ink)}
.chip-line{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;border:1px solid var(--c-ink);padding:6px 10px;color:var(--c-ink);line-height:1}
.chip-line:hover{background:var(--c-ink);color:var(--c-bg)}
.nav-toggle{display:none;background:none;border:0;padding:10px 0;width:32px;height:40px;position:relative}
.nav-toggle span{display:block;height:1px;background:var(--c-ink);width:22px;margin:5px 0 5px auto;transition:transform .2s}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:49;background:var(--c-bg);padding:24px var(--page-x) 96px;
  display:flex;flex-direction:column;overflow:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu a{font-family:var(--f-serif);font-size:24px;font-weight:500;padding:16px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);
  display:flex;justify-content:space-between;align-items:baseline}
.mobile-menu a span{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2);letter-spacing:.12em}
.mobile-menu__foot{margin-top:32px;display:flex;flex-direction:column;gap:8px;font-family:var(--f-mono);font-size:13px;color:var(--c-ink-2)}

@media (max-width:1100px){.site-nav{gap:22px}}
@media (max-width:960px){
  .site-header__inner{grid-template-columns:1fr auto}
  .site-nav,.site-header__cta{display:none}
  .nav-toggle{display:block}
  .brand__en{display:none}
  .brand__mark{width:26px}
  .brand__zh{font-size:15px}
}

/* ---------- Mobile bottom bar ---------- */
.mobile-bar{display:none}
@media (max-width:767px){
  .mobile-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:var(--mobile-bar-h);background:var(--c-bg);border-top:1px solid var(--c-line)}
  .mobile-bar a{display:grid;place-items:center;font-size:14px;color:var(--c-ink);border-right:1px solid var(--c-line)}
  .mobile-bar a:last-child{background:var(--c-accent);color:var(--c-bg);border-right:0}
}

/* ---------- Buttons & links ---------- */
.btn{display:inline-block;font-size:15px;line-height:1.4;letter-spacing:.04em;padding:14px 28px;border:0;border-radius:0;
  transition:background var(--dur),color var(--dur),border-color var(--dur);text-align:center}
.btn--primary{background:var(--c-accent);color:var(--c-bg)}
.btn--primary:hover{background:var(--c-ink);color:var(--c-bg)}
.btn--secondary{background:transparent;color:var(--c-ink);border:1px solid var(--c-ink);padding:13px 28px}
.btn--secondary:hover{background:var(--c-ink);color:var(--c-bg)}
.btn--block{display:block;width:100%}
.on-dark .btn--secondary{color:var(--c-bg);border-color:var(--c-dark-muted)}
.on-dark .btn--secondary:hover{background:var(--c-bg);color:var(--c-ink)}
.on-dark .btn--primary:hover{background:var(--c-bg);color:var(--c-ink)}
.text-link{font-size:15px;color:var(--c-ink);border-bottom:1px solid var(--c-ink);padding-bottom:2px;width:max-content;display:inline-block;line-height:1.5}
.text-link:hover{color:var(--c-accent);border-color:var(--c-accent)}
.on-dark .text-link{color:var(--c-bg);border-color:var(--c-bg)}
.btn-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap}

/* ---------- Section header ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--c-line)}
.sec-head__title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sec-num{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;color:var(--c-accent)}
.sec-en{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-2)}
.sec-head .h2{margin-left:12px}
.sec-eyebrow{display:flex;align-items:baseline;gap:16px}
.on-dark .sec-en{color:var(--c-dark-muted)}
@media (max-width:767px){
  .sec-head{flex-direction:column;align-items:flex-start;padding-bottom:16px}
  .sec-head__title{gap:12px}
  .sec-head .h2{margin-left:6px}
  .sec-num{font-size:12px}.sec-en{font-size:10px}
}

/* ---------- Tags ---------- */
.spec-line{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--c-ink-2);line-height:1.6}
.spec-line--sm{font-size:10.5px;letter-spacing:.06em}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;border:1px solid var(--c-line);padding:5px 10px;color:var(--c-ink-2);background:none;line-height:1.4}
.tag.is-active,.tag[aria-pressed="true"]{border-color:var(--c-ink);color:var(--c-ink)}
button.tag{cursor:pointer}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:32px;flex-wrap:wrap}
.tab{background:none;border:0;padding:0 0 6px;font-family:var(--f-sans);font-size:15px;color:var(--c-ink-2);border-bottom:1px solid transparent;line-height:1.5}
.tab:hover{color:var(--c-ink)}
.tab[aria-selected="true"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.tabs--underline{border-bottom:1px solid var(--c-line);gap:28px}
.tabs--underline .tab{padding-bottom:10px;margin-bottom:-1px}
@media (max-width:767px){.tabs{gap:20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.tab{font-size:14px}}

/* Chip（反白選擇） */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:none;border:1px solid var(--c-line);padding:10px 16px;font-size:14px;color:var(--c-ink);line-height:1.4}
.chip:hover{border-color:var(--c-ink)}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--c-ink)}
.segmented .chip{border:0;border-right:1px solid var(--c-ink)}
.segmented .chip:last-child{border-right:0}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--c-ink-2);display:flex;flex-wrap:wrap;gap:10px}
.breadcrumb a{color:var(--c-ink-2)}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb [aria-current="page"]{color:var(--c-ink)}
.breadcrumb li+li::before{content:"/";margin-right:10px;color:var(--c-ink-2)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Case card ---------- */
.case-card{display:flex;flex-direction:column;gap:12px;color:var(--c-ink)}
.case-card:hover{color:var(--c-ink)}
.case-card:hover .case-card__title{color:var(--c-accent)}
.case-card__title{font-family:var(--f-serif);font-size:17px;font-weight:500;line-height:1.4;transition:color var(--dur)}
.case-card--lg{gap:14px}
.case-card--lg .case-card__title{font-size:22px}
.case-card .media .is-before{opacity:0;transition:opacity var(--dur)}
.case-card:hover .media .is-before,.case-card:focus-visible .media .is-before{opacity:1}
.before-badge{position:absolute;left:16px;top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;border:1px solid var(--c-ink);color:var(--c-ink);background:var(--c-bg);padding:5px 10px;opacity:0;transition:opacity var(--dur);pointer-events:none}
.case-card:hover .before-badge{opacity:1}
@media (max-width:767px){.case-card--lg .case-card__title{font-size:18px}}

/* ---------- Stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--c-line)}
.stat{padding:40px 32px 40px 0;border-right:1px solid var(--c-line);display:flex;flex-direction:column;gap:8px}
.stat+.stat{padding-left:32px}
.stat:last-child{border-right:0}
@media (max-width:767px){
  .stats{grid-template-columns:1fr 1fr;border-top:1px solid var(--c-line)}
  .stat,.stat+.stat{padding:20px 16px 20px 0;border-right:0;border-bottom:1px solid var(--c-line);gap:4px}
  .stat:nth-child(even){padding-left:16px;border-left:1px solid var(--c-line)}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .stat .number small{font-size:15px;margin-left:4px}
  .stat .label{font-size:10px;letter-spacing:.12em}
}

/* ---------- Compare table ---------- */
.compare{border-top:1px solid var(--c-ink)}
.compare__row{display:grid;grid-template-columns:160px 1fr 1fr;gap:24px;border-bottom:1px solid var(--c-line);padding:22px 0}
.compare__row--head{padding:16px 0 12px}
.compare__row--head span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.compare__row--head span.is-hl{color:var(--c-accent)}
.compare__k{font-family:var(--f-serif);font-size:17px;font-weight:500}
.compare__a{font-size:15px;line-height:1.7;color:var(--c-ink-2)}
.compare__b{font-size:15px;line-height:1.7}
@media (max-width:767px){
  .compare__row{grid-template-columns:1fr 1fr;gap:8px 16px;padding:16px 0}
  .compare__row--head span:first-child{display:none}
  .compare__k{grid-column:1/-1;font-size:15px}
  .compare__a,.compare__b{font-size:13px}
}

/* ---------- Spec table ---------- */
.spec-table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.spec-table th{font-weight:400;text-align:left;font-size:11px;letter-spacing:.12em;color:var(--c-ink-2);padding:12px 12px 12px 0;border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-line)}
.spec-table td{padding:14px 12px 14px 0;border-bottom:1px solid var(--c-line);vertical-align:top;line-height:1.6}
.spec-table td.no{color:var(--c-accent);white-space:nowrap}
.spec-table td.name{font-family:var(--f-sans);font-size:15px}
.spec-note{font-size:12px;color:var(--c-ink-2);margin-top:12px;line-height:1.7}
.is-price-hidden .col-price{display:none}
@media (max-width:767px){
  .spec-table thead{display:none}
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table td{display:block;width:100%}
  .spec-table tr{border-top:1px solid var(--c-ink);padding:12px 0 8px;margin-bottom:16px}
  .spec-table td{border:0;padding:4px 0;display:grid;grid-template-columns:88px 1fr;gap:12px}
  .spec-table td::before{content:attr(data-label);font-size:10.5px;letter-spacing:.12em;color:var(--c-ink-2);text-transform:uppercase}
}

/* ---------- Timeline (horizontal) ---------- */
.timeline-h{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));border-top:1px solid var(--c-ink)}
.timeline-h__step{padding:24px 24px 0 0;border-right:1px solid var(--c-line);display:flex;flex-direction:column;gap:16px;min-height:220px}
.timeline-h__step+.timeline-h__step{padding-left:24px}
.timeline-h__step:last-child{border-right:0}
.step-num{font-family:var(--f-serif);font-size:40px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.step-name{font-family:var(--f-serif);font-size:18px;font-weight:500;line-height:1.4}
.step-meta{font-family:var(--f-mono);font-size:11px;line-height:1.9;letter-spacing:.04em;color:var(--c-ink-2);display:flex;flex-direction:column}
.step-meta .code{color:var(--c-accent)}
@media (max-width:900px){
  .timeline-h{grid-template-columns:1fr}
  .timeline-h__step,.timeline-h__step+.timeline-h__step{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:16px 0;border-right:0;border-bottom:1px solid var(--c-line);min-height:0}
  .timeline-h__step .step-num{font-size:32px;grid-row:span 2}
}

/* ---------- Timeline (vertical) ---------- */
.timeline-v{border-top:1px solid var(--c-ink)}
.timeline-v__step{display:grid;grid-template-columns:96px 1fr 240px;gap:24px;padding:28px 0;border-bottom:1px solid var(--c-line);align-items:start}
.timeline-v__step .step-num{font-size:48px}
.timeline-v__body{display:flex;flex-direction:column;gap:8px}
.timeline-v__body p{font-size:15px;line-height:1.7;color:var(--c-ink-2)}
@media (max-width:767px){
  .timeline-v__step{grid-template-columns:56px 1fr;gap:6px 16px;padding:18px 0}
  .timeline-v__step .step-num{font-size:32px;grid-row:span 2}
  .timeline-v__step .step-meta{grid-column:2}
}

/* ---------- Forms（底線式） ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.field{display:flex;flex-direction:column;gap:10px;min-width:0}
.field--full{grid-column:1/-1}
.field__label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.field__label .req{color:var(--c-accent);margin-left:4px}
.field__input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--c-line);border-radius:0;padding:6px 0 10px;font-size:16px;color:var(--c-ink);min-height:40px;appearance:none;-webkit-appearance:none}
.field__input::placeholder{color:var(--c-ink-2);opacity:.8}
.field__input:focus{outline:0;border-bottom-color:var(--c-ink)}
textarea.field__input{min-height:96px;resize:vertical;line-height:1.7}
select.field__input{padding-right:24px;cursor:pointer}
.select-wrap{position:relative}
.select-wrap::after{content:"↓";position:absolute;right:0;top:8px;font-family:var(--f-mono);font-size:14px;color:var(--c-ink-2);pointer-events:none}
.field__error{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--c-accent);min-height:0}
.field.is-invalid .field__input{border-bottom-color:var(--c-accent)}
.upload{border:1px dashed var(--c-line);padding:28px;text-align:center;font-size:14px;color:var(--c-ink-2);cursor:pointer;position:relative;display:block}
.upload:hover,.upload.is-drag{border-color:var(--c-ink)}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.upload-list{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2);display:flex;flex-direction:column;gap:4px;margin-top:8px}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--c-ink-2);cursor:pointer;line-height:1.6}
.checkbox input{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:1px solid var(--c-ink-2);margin:5px 0 0;flex:none;border-radius:0;background:transparent;cursor:pointer}
.checkbox input:checked{background:var(--c-ink);border-color:var(--c-ink)}
.form__foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.form__note{font-size:12px;color:var(--c-ink-2)}
.form__success{grid-column:1/-1;border-top:1px solid currentColor;padding-top:24px;font-family:var(--f-serif);font-size:24px}
.form__success p{font-family:var(--f-sans);font-size:15px;color:var(--c-ink-2);margin-top:8px}
/* 深色底 */
.on-dark .field__label{color:var(--c-dark-muted)}
.on-dark .field__input{border-bottom-color:var(--c-dark-line);color:var(--c-bg)}
.on-dark .field__input:focus{border-bottom-color:var(--c-bg)}
.on-dark .field__input::placeholder{color:var(--c-dark-muted);opacity:.6}
.on-dark select.field__input option{color:var(--c-ink);background:var(--c-bg)}
.on-dark .select-wrap::after{color:var(--c-dark-muted)}
.on-dark .upload{border-color:var(--c-dark-line);color:var(--c-dark-muted)}
.on-dark .upload:hover,.on-dark .upload.is-drag{border-color:var(--c-dark-muted)}
.on-dark .upload-list{color:var(--c-dark-muted)}
.on-dark .checkbox{color:var(--c-dark-muted)}
.on-dark .checkbox input{border-color:var(--c-dark-muted)}
.on-dark .checkbox input:checked{background:var(--c-bg)}
.on-dark .form__note{color:var(--c-dark-muted)}
.on-dark .form__success p{color:var(--c-dark-muted)}
.on-dark .field__error{color:#D98B62}
.on-dark .field.is-invalid .field__input{border-bottom-color:#D98B62}
@media (max-width:767px){.form{grid-template-columns:1fr;gap:24px}.field__input{font-size:16px}}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--c-ink)}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq__q{width:100%;background:none;border:0;padding:24px 0;display:grid;grid-template-columns:48px 1fr 32px;gap:16px;align-items:baseline;text-align:left;color:var(--c-ink)}
.faq__q:hover .faq__text{color:var(--c-accent)}
.faq__n{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2)}
.faq__text{font-family:var(--f-serif);font-size:20px;font-weight:500;line-height:1.4;transition:color var(--dur)}
.faq__sign{font-family:var(--f-mono);font-size:18px;color:var(--c-accent);justify-self:end}
.faq__a{padding:0 48px 28px 64px;font-size:16px;line-height:1.8;color:var(--c-ink-2)}
.faq__a[hidden]{display:none}
@media (max-width:767px){
  .faq__q{grid-template-columns:32px 1fr 20px;gap:8px;padding:18px 0}
  .faq__text{font-size:16px}
  .faq__a{padding:0 0 20px 40px;font-size:15px}
}

/* ---------- Quote ---------- */
.quote{border-left:1px solid var(--c-ink);padding-left:32px}
.quote-block{background:var(--c-bg-2);padding:56px 64px}
.quote cite,.quote-block cite{display:block;margin-top:16px;font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
@media (max-width:767px){.quote-block{padding:32px 20px}.quote{padding-left:20px}}

/* ---------- Material tile ---------- */
.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--c-line);border:0}
.material{position:relative;aspect-ratio:1/1;background:var(--c-bg-2);color:var(--c-ink);overflow:hidden;display:block}
.material:hover{color:var(--c-ink)}
.material .media{position:absolute;inset:0}
/* 佔位文字放右上，避免與左下標題重疊 */
.material .media__placeholder{place-items:start start;padding:20px;text-align:left}
.material__cap{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:4px;z-index:1}
.material__name{font-family:var(--f-serif);font-size:20px;font-weight:500;transition:color var(--dur)}
.material:hover .material__name{color:var(--c-accent)}
/* 固定保留兩行高度：說明文字換行與否，名稱都對齊在同一條線 */
.material__en{font-family:var(--f-mono);font-size:10px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2);min-height:3.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.material--photo .material__cap{color:var(--c-bg)}
.material--photo .material__en{color:var(--c-bg);opacity:.85}
.material--photo .media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:rgba(31,30,28,.35)}
.materials--4x3 .material{aspect-ratio:4/3}
@media (max-width:767px){.materials{grid-template-columns:1fr 1fr}.material .media__placeholder{padding:12px}.material__cap{left:12px;right:12px;bottom:12px}.material__name{font-size:16px}.material__en{font-size:9px;letter-spacing:.1em}}

/* ---------- Hero（出血、文字左下） ---------- */
.hero{position:relative;height:85vh;min-height:560px;max-height:880px;background:var(--c-bg-2);overflow:hidden}
.hero .media{position:absolute;inset:0}
.hero__content{position:absolute;left:var(--page-x);bottom:72px;width:min(640px,calc(100% - 2*var(--page-x)));display:flex;flex-direction:column;gap:20px;pointer-events:none;color:var(--c-ink)}
.hero__content .btn-row{pointer-events:auto;margin-top:8px}
.hero__panel{background:rgba(242,238,231,.88);padding:40px 40px 36px;margin-left:-40px}
.hero__eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.hero__caption{position:absolute;right:var(--page-x);bottom:32px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--c-ink);background:rgba(242,238,231,.88);padding:4px 8px;pointer-events:none}
@media (max-width:767px){
  .hero{height:560px;min-height:0}
  .hero__content{bottom:24px;gap:14px}
  .hero__panel{padding:24px var(--page-x);margin-left:calc(-1 * var(--page-x));margin-right:calc(-1 * var(--page-x))}
  .hero__eyebrow{font-size:10px}
  .hero__caption{position:static;display:block;background:none;color:var(--c-ink-2);padding:10px var(--page-x) 0;font-size:10px}
}

/* ---------- Video ---------- */
.video{position:relative;background:var(--c-bg-2);overflow:hidden}
.video video,.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;left:24px;bottom:24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;border:1px solid var(--c-bg);color:var(--c-bg);background:rgba(31,30,28,.25);padding:8px 14px;cursor:pointer}
.video__play:hover{background:var(--c-ink);border-color:var(--c-ink)}
.video.is-playing .video__play{display:none}

/* ---------- Journal list ---------- */
.post-list{border-top:1px solid var(--c-ink)}
.post-row{display:grid;grid-template-columns:48px 1fr 120px;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink)}
.post-row:hover{color:var(--c-ink)}
.post-row:hover .post-row__title{color:var(--c-accent)}
.post-row__n{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2)}
.post-row__body{display:flex;flex-direction:column;gap:6px}
.post-row__title{font-family:var(--f-serif);font-size:22px;font-weight:500;line-height:1.4;transition:color var(--dur)}
.post-row__meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.post-row .media{width:120px;height:80px}
@media (max-width:767px){.post-row{grid-template-columns:28px 1fr 72px;gap:12px;padding:18px 0}.post-row__title{font-size:16px}.post-row .media{width:72px;height:56px}}

/* ---------- Info list（深色區塊 LINE / TEL） ---------- */
.info-list{border-top:1px solid var(--c-line)}
.info-list__row{display:grid;grid-template-columns:80px 1fr;padding:16px 0;border-bottom:1px solid var(--c-line);align-items:baseline;gap:12px}
.info-list__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--c-ink-2);text-transform:uppercase}
.info-list__v{font-family:var(--f-mono);font-size:22px}
.info-list__v--text{font-family:var(--f-sans);font-size:15px}
.on-dark .info-list,.on-dark .info-list__row{border-color:var(--c-dark-line)}
.on-dark .info-list__k{color:var(--c-dark-muted)}
@media (max-width:767px){.info-list__row{grid-template-columns:60px 1fr;padding:12px 0}.info-list__v{font-size:18px}}

/* ---------- Dark section ---------- */
.dark{background:var(--c-dark);color:var(--c-bg)}
.dark .h2,.dark h2,.dark h3{color:var(--c-bg)}
.dark .muted,.dark .caption{color:var(--c-dark-muted)}
.cta-band{padding:96px 0}
.cta-band__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
@media (max-width:767px){.cta-band{padding:56px 0}}

/* ---------- Filter sidebar ---------- */
.filter-group{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;border:0;padding:0;min-width:0}
.filter-group legend{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);padding:0 0 8px;border-bottom:1px solid var(--c-line);width:100%;margin-bottom:6px}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-ink-2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:1px solid var(--c-ink-2);margin:0;border-radius:0;flex:none;cursor:pointer}
.check input:checked{background:var(--c-ink);border-color:var(--c-ink)}
.check:has(input:checked){color:var(--c-ink)}
.check__count{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2)}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:24px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;padding-top:48px}
.pagination button,.pagination a{background:none;border:0;padding:0 0 4px;color:var(--c-ink-2);border-bottom:1px solid transparent}
.pagination [aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}

/* ---------- Before / After ---------- */
.ba{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--c-bg-2);--split:50%;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__before{position:absolute;inset:0;background:var(--c-line);clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:var(--c-bg);pointer-events:none}
.ba__label{position:absolute;top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;border:1px solid var(--c-ink);color:var(--c-ink);background:var(--c-bg);padding:5px 10px;pointer-events:none}
.ba__label--before{left:16px}.ba__label--after{right:16px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input[type=range]:focus-visible+.ba__line{outline:1px solid var(--c-accent)}

/* ---------- Footer ---------- */
.site-footer{background:var(--c-dark);color:var(--c-dark-muted);padding-top:80px;overflow:hidden}
.site-footer__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-bottom:80px;border-bottom:1px solid var(--c-dark-line)}
.site-footer__col{display:flex;flex-direction:column;gap:14px}
.site-footer__title{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9A958C;margin-bottom:8px}
.site-footer__col a,.site-footer__col span{font-size:14px;line-height:1.6;color:var(--c-dark-muted)}
.site-footer__col a:hover{color:var(--c-bg)}
.site-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:#9A958C}
/* 字寬約 5.1em：依容器內寬縮放，左右剛好對齊版面邊線 */
.site-footer__wordmark{font-family:var(--f-serif);font-weight:700;font-size:calc((min(100vw, var(--container)) - 2 * var(--page-x)) / 5.2);line-height:.78;letter-spacing:-0.03em;color:var(--c-dark-wordmark);margin:40px 0 -.07em;white-space:nowrap;pointer-events:none;user-select:none}
@media (max-width:960px){.site-footer__cols{grid-template-columns:repeat(3,1fr);row-gap:48px}}
@media (max-width:767px){
  .site-footer{padding-top:48px}
  .site-footer__cols{grid-template-columns:1fr 1fr;padding-bottom:40px;gap:32px 16px}
  .site-footer__col--company{grid-column:1/-1}
  .site-footer__wordmark{margin:24px 0 -.07em}
}

/* ---------- Misc ---------- */
.rule{border:0;border-top:1px solid var(--c-line);margin:0}
.rule--ink{border-top-color:var(--c-ink)}
.numbered-list{border-top:1px solid var(--c-ink)}
.numbered-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.numbered-list .n{font-family:var(--f-mono);font-size:11px;color:var(--c-accent)}
.kv{border-top:1px solid var(--c-ink)}
.kv__row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.kv__row dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.kv__row dd{font-size:15px;line-height:1.7}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--c-ink);color:var(--c-bg);padding:12px 20px;font-size:14px;z-index:80}

/* ---------- 頁尾前的 CTA／聯絡區：燕麥底，與深色 Footer 明確區隔 ---------- */
.cta-light{background:var(--c-bg-2);color:var(--c-ink);border-top:1px solid var(--c-line)}
.cta-light h2,.cta-light h3{color:var(--c-ink)}
.cta-light .muted,.cta-light .caption{color:var(--c-ink-2)}