/* The Moment當下 官網樣式 v2
   設計語言：取自店裡實物。招牌三角形＋直排「當／下」＝全站符號；燈箱暖黃＝唯一的行動色（預約按鈕只用它）；
   白牆、橡木、黑皮椅、蕨類綠＝底色與點綴。所有照片套同一種暖調與細顆粒，讓不同年代、不同手機拍的照片看起來是同一組。 */
:root {
  --plaster: #f4f4f1;
  --tint: #ebeae5;
  --ink: #000;
  --ink-soft: #4f5250;
  --oak: #8f6640;
  --fern: #3f5d42;
  --lamp: #f2c98a;
  --lamp-deep: #e9b96c;
  --line: #d8d6ce;
  --white: #ffffff;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--plaster); color: var(--ink); font: 400 16px/1.85 var(--sans); letter-spacing: .03em; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body { padding-bottom: 0; font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.35; letter-spacing: .08em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 19px; }
p { margin: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
.narrow { max-width: 820px; }
.measure { max-width: 32em; }
.stack { display: grid; gap: 16px; align-content: start; }
.lead { font-size: 18px; color: var(--ink-soft); }
.note-line { margin-top: 28px; font-size: 15px; color: var(--ink-soft); }

/* 三角形記號：取自門口三角招牌，放在每個區塊標題前 */
.tri { display: inline-block; width: .62em; height: .54em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-right: .45em; vertical-align: .08em; color: var(--oak); }
.sec-title { display: flex; align-items: baseline; gap: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.head-row .aside { font-size: 14px; color: var(--ink-soft); }

/* 照片：統一暖調＋細顆粒；設計師照統一黑白 */
.grade { position: relative; overflow: hidden; background: var(--tint); }
.grade img { filter: saturate(.84) contrast(1.05) sepia(.07); }
.grade::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.mono img { filter: grayscale(1) contrast(1.06) brightness(1.02); }

/* 按鈕：全站只有一種行動色＝燈箱暖黃 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .08em; border: 1px solid var(--lamp); background: var(--lamp); color: var(--ink); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); background: var(--lamp-deep); }
.btn-quiet { background: transparent; color: inherit; border-color: currentColor; }
.btn-quiet:hover { background: transparent; }
.btn-big { padding: 16px 36px; font-size: 17px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* 頁首 */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--plaster); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--plaster); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand span { font-family: var(--serif); font-size: 16px; letter-spacing: .14em; }
.nav { display: flex; gap: 28px; font-size: 15px; letter-spacing: .1em; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--ink); }
.nav-book { display: none; }
@media (min-width: 900px) { .nav-book { display: inline-flex; background: var(--lamp); color: var(--ink); text-decoration: none; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .08em; } }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; color: var(--ink); }
@media (max-width: 899px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--plaster); border-bottom: 1px solid var(--line); padding: 8px max(20px, env(safe-area-inset-left, 0px)) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* 手機底部常駐 */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1.6fr 1fr 1fr; background: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dock a { color: var(--plaster); text-decoration: none; text-align: center; padding: 15px 6px; font-size: 15px; border-right: 1px solid #2f3231; }
.dock a:first-child { background: var(--lamp); color: var(--ink); font-weight: 500; }
@media (min-width: 900px) { .dock { display: none; } }

/* 首屏：左＝直排大字「當下」＋店名與預約；右＝三角招牌店面 */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; display: grid; }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: clamp(380px, 62vh, 640px); object-fit: cover; object-position: 50% 30%; }
.hero-text { position: relative; padding: 36px max(20px, env(safe-area-inset-left, 0px)) 40px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.hero-copy { display: grid; gap: 18px; }
.hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); letter-spacing: .06em; line-height: 1.2; }
.hero-sub { color: #d9d7d0; font-size: 15px; letter-spacing: .14em; display: grid; gap: 4px; }
.hero-sub .tri { color: var(--lamp); }
.vert { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--serif); font-weight: 600; color: var(--lamp); line-height: 1; letter-spacing: .12em; font-size: clamp(76px, 22vw, 120px); user-select: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 40% 60%; min-height: calc(100vh - 66px); }
  .hero-media { order: 2; }
  .hero-media img { height: 100%; min-height: 680px; max-height: 960px; }
  .hero-text { grid-template-columns: auto 1fr; align-items: center; gap: clamp(28px, 3.5vw, 56px); padding: 56px clamp(36px, 4.5vw, 80px); }
  .vert { font-size: clamp(130px, 13vw, 220px); order: -1; }
}

/* 區塊 */
section.block { padding-block: clamp(64px, 9vw, 120px); }
.block-tint { background: var(--tint); }
.page-head { padding-block: clamp(56px, 8vw, 100px) clamp(28px, 4vw, 44px); }
.page-head .wrap { display: grid; gap: 14px; }

/* 作品牆 */
.works { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .works { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.work { margin: 0; display: grid; gap: 8px; }
.work .grade { aspect-ratio: 4/5; }
.work img { width: 100%; height: 100%; object-fit: cover; }
.work figcaption { font-size: 13px; color: var(--ink-soft); letter-spacing: .1em; }

/* 服務：小示意圖＋一行說明＋詢價 */
.svc-list { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .svc-list { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.svc-item { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding-block: 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.svc-item img { width: 72px; height: 96px; object-fit: contain; background: var(--white); border: 1px solid var(--line); }
.svc-item .stack { gap: 6px; }
.svc-item p { font-size: 15px; color: var(--ink-soft); }
.svc-page .svc-item { grid-template-columns: 110px 1fr; padding-block: 36px; }
.svc-page .svc-item img { width: 110px; height: 146px; }

/* 設計師 */
.stylists { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stylists { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stylists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.stylist { display: grid; gap: 12px; align-content: start; }
.stylist .ph { aspect-ratio: 4/5; display: block; }
.stylist .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .6s ease, filter .6s ease; }
.stylist .ph:hover img { transform: scale(1.03); filter: grayscale(0) contrast(1.02); }
.stylist .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.stylist .name { font-family: var(--serif); font-size: 26px; letter-spacing: .1em; text-decoration: none; }
.stylist .yrs { font-size: 13px; color: var(--ink-soft); }
.stylist .acts { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tags li { font-size: 13px; border: 1px solid var(--line); padding: 2px 12px; border-radius: 999px; background: var(--white); }

.profile { display: grid; gap: 36px; }
@media (min-width: 900px) { .profile { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } }
.profile .ph { aspect-ratio: 4/5; }
.profile .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* 客人回饋：Google 徽章＋一則大字 */
.reviews { display: grid; gap: 40px; }
@media (min-width: 900px) { .reviews { grid-template-columns: 300px 1fr; gap: 72px; align-items: start; } }
.gbadge { display: grid; gap: 6px; text-decoration: none; padding: 28px; background: var(--ink); color: #fff; }
.gbadge .score { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--lamp); }
.gbadge .stars { letter-spacing: .2em; color: var(--lamp); }
.gbadge .count { font-size: 14px; color: #c9c7c0; }
.quote { margin: 0; display: grid; gap: 10px; align-content: start; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.8; }
.quote figcaption { font-size: 13px; color: var(--ink-soft); }
.quote.big blockquote { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.6; }
.quote-row { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .quote-row { grid-template-columns: 1fr 1fr; } }

/* 空間 */
.space { display: grid; gap: 16px; grid-template-columns: 1fr; }
.space figure { margin: 0; display: grid; gap: 8px; }
.space figcaption { font-size: 13px; letter-spacing: .1em; color: var(--ink-soft); }
.space .grade { aspect-ratio: 4/3; }
.space img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .space { grid-template-columns: 7fr 5fr; gap: 20px; }
  .space .a { grid-row: span 2; grid-template-rows: 1fr auto; }
  .space .a .grade { aspect-ratio: auto; min-height: 460px; }
}
.ph-wide { margin: 0; }
.ph-wide.grade { aspect-ratio: 4/3; }
.ph-wide img { width: 100%; height: 100%; object-fit: cover; }
.ph-portrait.grade { aspect-ratio: 4/5; max-width: 460px; }
.ph-portrait img { object-position: 50% 20%; }

/* 關於頁頂圖 */
.about-top .grade { height: clamp(280px, 48vh, 520px); }
.about-top img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* 部落客文章 */
.press { display: grid; border-top: 1px solid var(--line); }
.press-item { display: grid; gap: 4px 24px; padding-block: 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 900px) { .press-item { grid-template-columns: 100px 1fr 220px; align-items: baseline; } }
.press-item .date { font: 500 13px var(--mono); color: var(--oak); }
.press-item .q { font-family: var(--serif); font-size: 18px; }
.press-item .src { font-size: 14px; color: var(--ink-soft); }
.press-item:hover .q { text-decoration: underline; text-underline-offset: .3em; }

/* 預約帶（每頁只出現一次） */
.band { background: var(--ink); color: #e9e7e1; padding-block: clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.band h2 { color: #fff; }
.band-in { display: grid; gap: 28px; position: relative; }
@media (min-width: 900px) { .band-in { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 64px; } }
.band-cta { display: grid; gap: 10px; justify-items: start; font-size: 14px; color: #b9b7b0; }
@media (min-width: 900px) { .band-cta { justify-items: end; text-align: right; } }
.band .vert-bg { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-size: clamp(120px, 16vw, 240px); white-space: nowrap; color: rgba(242,201,138,.08); pointer-events: none; }

.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.steps li::marker { font-family: var(--mono); color: var(--oak); }
.facts { display: grid; margin: 0; }
.facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--ink-soft); }
.facts dd { margin: 0; }
.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
details { border-bottom: 1px solid var(--line); padding-block: 16px; }
summary { cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--oak); }
details[open] summary::after { content: "−"; }
details p { margin-top: 10px; color: var(--ink-soft); }

/* 頁尾：資訊為主，不再重複大按鈕 */
.site-foot { background: #000; color: #c9c7c0; padding-block: 48px 36px; font-size: 14px; }
.site-foot .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot a { color: #fff; }
.foot-name { font-family: var(--serif); font-size: 18px; color: #fff; letter-spacing: .1em; }
.site-foot .small { margin-top: 32px; font-size: 12px; color: #a3a19b; }

/* ── 第 2 輪（照評審 r1）── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root { --ink-soft: #3f4240; }
.brand .tri { color: var(--oak); font-size: 22px; margin-right: 2px; }
.brand span { font-size: 17px; }
/* 首屏：英文小字＋直排大字；照片左側壓暗，把電表推進陰影；照片與文字之間用三角斜切 */
.hero-en { display: block; font: 500 14px var(--mono); letter-spacing: .6em; color: #d9d7d0; }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 55%); }
@media (min-width: 900px) {
  .hero-media { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); margin-left: -6%; }
}
@media (min-width: 900px) {
  .hero-text { padding: 56px clamp(28px, 3vw, 56px); gap: clamp(20px, 2.5vw, 40px); }
  .hero .vert { font-size: clamp(110px, 10vw, 170px); }
  .hero-sub span { white-space: nowrap; }
}
/* 預約帶頂端：一個往下的三角缺口，對應招牌 */
.band::before { content: ""; position: absolute; top: -1px; left: 50%; width: 56px; height: 28px; transform: translateX(-50%); background: var(--plaster); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.block-tint + .band::before { background: var(--tint); }
.band .vert-bg { top: 0; bottom: 0; transform: none; display: flex; align-items: center; font-size: clamp(90px, 11vw, 170px); right: 4%; }
/* 小字放大、加深 */
.svc-item p, .head-row .aside, .work figcaption, .stylist .yrs, .space figcaption, .quote figcaption { font-size: 15px; color: var(--ink-soft); }
.work figcaption { letter-spacing: .04em; display: flex; gap: 10px; align-items: baseline; }
.work figcaption .kind { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--oak); border: 1px solid currentColor; padding: 0 6px; }
/* 服務頁：結構護髮三步驟、每項配兩張作品 */
.flow { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; color: var(--ink); }
.flow li + li::before { content: "→"; margin: 0 10px; color: var(--oak); }
.mini-works { display: grid; grid-template-columns: repeat(2, 96px); gap: 8px; margin-top: 6px; }
.mini-works .grade { aspect-ratio: 4/5; }
.mini-works img { width: 100%; height: 100%; object-fit: cover; }
/* 關於頁：頂圖保留招牌、創辦人照片縮小與文字頂端對齊 */
.about-top img { object-position: 50% 12%; }
.founder { display: grid; gap: 32px; }
@media (min-width: 760px) { .founder { grid-template-columns: 320px 1fr; gap: 56px; align-items: start; } }
.founder .ph-portrait.grade { max-width: 320px; }
.founder img { width: 100%; height: 100%; object-fit: cover; }
/* 交通頁地圖 */
.map { width: 100%; aspect-ratio: 4/3; border: 0; filter: grayscale(.4) contrast(1.02); }
/* ── 第 3 輪：直排標題骨架、三角系統、單一強調色（古銅）、直角按鈕 ── */
:root { --accent: #9a6a3c; --accent-light: #c99a66; }
.tri { color: var(--accent); }
.btn { border-radius: 0; background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover { background: #845a31; border-color: #845a31; }
.btn-quiet { background: transparent; color: inherit; border-color: currentColor; }
.btn-quiet:hover { background: transparent; border-color: currentColor; }
.arr { display: inline-block; width: .45em; height: .6em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 4px; }
.nav-book { border-radius: 0 !important; background: var(--accent) !important; color: #fff !important; }
.dock a:first-child { background: var(--accent); color: #fff; }
.hero .vert, .any-box .vert { color: var(--accent-light); }
.gbadge .score, .gbadge .stars { color: var(--accent-light); }
.hero-sub .tri { color: var(--accent-light); }
/* 三角斜角：照片右下角切掉一角，像招牌的三角 */
.cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); }
/* 區塊之間的三角缺口（往下指，像招牌） */
.block, .band { position: relative; }
.block-tint::before, .band::before, .block-tint + .block:not(.block-tint)::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 52px; height: 26px; transform: translateX(-50%);
  background: var(--plaster); clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 1; }
.block-tint + .block:not(.block-tint)::before, .block-tint + .band::before { background: var(--tint); }
.page-first::before, .hero + .block::before { display: none; }
.band .vert-bg { display: none; }
/* 區塊標題：手機橫排；電腦直排立在左欄 */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 28px; }
.sec-head .aside { font-size: 15px; color: var(--ink-soft); }
@media (min-width: 900px) {
  .sec { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .sec-head { flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start; gap: 14px; margin: 0; position: sticky; top: 96px; }
  .sec-head .sec-title { writing-mode: vertical-rl; font-size: 36px; letter-spacing: .32em; line-height: 1; }
  .sec-head .sec-title .tri { margin: 0 0 .5em; }
  .sec-head .aside { writing-mode: vertical-rl; font-size: 13px; letter-spacing: .18em; color: var(--ink-soft); max-height: 460px; line-height: 1.6; }
}
.page-first { padding-top: clamp(40px, 6vw, 80px); }
/* 設計師：電腦四欄（含「不指定」） */
@media (min-width: 900px) { .stylists { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.stylist .bio { font-size: 15px; color: var(--ink-soft); }
.any-box { aspect-ratio: 4/5; background: var(--ink); display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); }
.any-box .vert { font-size: clamp(48px, 5vw, 72px); }
.stylist.any .name { font-family: var(--serif); font-size: 26px; letter-spacing: .1em; }
/* 服務 */
.svc-item { align-items: start; color: inherit; text-decoration: none; }
.svc-page .svc-item h2 { font-size: 24px; }
.flow li { white-space: nowrap; }
/* 作品圖說 */
.work figcaption { flex-wrap: wrap; gap: 4px 10px; }
.work figcaption .kind { white-space: nowrap; }
.work figcaption .by { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
/* 個人頁、創辦人 */
.role { color: var(--accent); letter-spacing: .14em; font-size: 15px; }
.founder-name { font-size: 26px; letter-spacing: .12em; }
.founder .quote.big blockquote { font-size: clamp(20px, 2.2vw, 26px); }
@media (min-width: 760px) { .founder { grid-template-columns: 300px 1fr; } }

/* ── 第 4 輪 ── */
:root { --accent: #8a5d33; --ink-soft: #3a3d3b; }
/* 網站版招牌：發光的三角燈箱，直排「當／下」，下方 THE MOMENT（照門口實物） */
.signbox { filter: drop-shadow(0 0 28px rgba(242, 214, 160, .45)) drop-shadow(0 0 6px rgba(242, 214, 160, .5)); width: clamp(180px, 46vw, 230px); }
.sign { aspect-ratio: 1 / .92; background: linear-gradient(#fbf7ef, #efe6d6); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 30% 0 9%; color: var(--ink); }
.sign-v { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 7.5vw, 40px); letter-spacing: .14em; line-height: 1; }
.sign-en { font-family: var(--serif); font-size: clamp(10px, 2.4vw, 13px); letter-spacing: .26em; margin-top: 4px; }
/* 直排兩個字不准折成兩欄（折了會讀成「下當」） */
.sign-v { white-space: nowrap; }
.hero-en { display: none; }
.hero-text { grid-template-columns: 1fr; justify-items: start; gap: 24px; }
.signbox { width: 170px; }
@media (min-width: 900px) {
  .hero-text { grid-template-columns: 1fr; justify-items: start; align-content: center; gap: 36px; padding-left: clamp(40px, 5vw, 96px); }
  .signbox { width: clamp(240px, 21vw, 320px); }
  .sign { padding-top: 27%; }
  .sign-v { font-size: clamp(40px, 3.4vw, 54px); }
  .sign-en { font-size: clamp(13px, 1vw, 16px); }
  .hero-copy { gap: 20px; }
  .hero .btn { padding: 15px 32px; font-size: 16px; }
}
/* 區塊序號與標題：一律貼齊內容頂端，不再黏著捲動 */
.sec-no { font: 500 13px var(--mono); letter-spacing: .1em; color: var(--accent); }
.sec-aside { font-size: 15px; color: var(--ink-soft); margin-bottom: 24px; max-width: 46em; }
@media (min-width: 900px) {
  .sec-head { position: static; flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec-no { order: -1; }
}
/* 作品：說明列＋「其他設計師作品」卡 */
.works-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.works-head p { font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }
.work figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; min-height: 2.9em; }
.work .wname { font-size: 14px; line-height: 1.5; color: var(--ink); }
.works-more { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 20px; }
.more-card { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); background: var(--white); text-decoration: none; }
.more-card .mc-name { font-family: var(--serif); font-size: 17px; }
.more-card .mc-ig { font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.more-card .arr { color: var(--accent); }
/* 照片外框：一條古銅細線，讓不同來源的照片看起來同一組 */
.work .grade, .stylist .ph, .svc-work, .about-side .grade { outline: 1px solid rgba(138, 93, 51, .35); outline-offset: -1px; }
.grade img { filter: saturate(.8) contrast(1.05) sepia(.1); }
.mono img { filter: grayscale(1) contrast(1.06) brightness(1.02); }
/* 設計師卡：按鈕固定在卡片底部對齊 */
.stylist { display: flex; flex-direction: column; gap: 10px; }
.stylist .acts { margin-top: auto; padding-top: 6px; }
@media (max-width: 639px) {
  .stylists { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .stylist .name, .stylist.any .name { font-size: 20px; }
  .stylist .meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stylist .bio { display: none; }
  .stylist .acts { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stylist .btn { padding: 10px 14px; font-size: 14px; }
  .works-more { grid-template-columns: 1fr; }
}
/* 服務頁：每項配一張對應作品 */
.svc-work { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; margin-top: 8px; text-decoration: none; clip-path: none; outline: 0; }
.svc-work img { width: 72px; height: 90px; object-fit: cover; }
.svc-work span { font-size: 13px; color: var(--ink-soft); }
.flow li + li::before { content: none; }
.flow li:not(:last-child)::after { content: "→"; margin: 0 10px; color: var(--accent); }
/* 關於頁：文字＋店內細節照並排，報導收合 */
.about-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: start; } }
.about-side { margin: 0; }
.about-side .grade { aspect-ratio: 3/4; }
.about-side img { width: 100%; height: 100%; object-fit: cover; }
.about-top img { object-position: 50% 45%; }
.press-more { border: 0; padding-block: 8px 0; }
.press-more summary { font-size: 15px; color: var(--ink-soft); justify-content: flex-start; gap: 8px; padding-block: 12px; }
.press-more summary::after { content: "＋"; }

/* ── 第 5 輪 ── */
/* 作品：四欄，Rita／Aniya 用同尺寸深色卡；每張標設計師 */
@media (min-width: 900px) { .works-4 { grid-template-columns: repeat(4, 1fr); } }
.work figcaption { grid-template-columns: auto 1fr auto; }
.work figcaption .by { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ig-tile { aspect-ratio: 4/5; background: var(--ink); color: #fff; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 28px 16px; text-decoration: none; }
.ig-tile .vert { font-size: clamp(34px, 3.6vw, 52px); color: var(--accent-light); text-orientation: mixed; letter-spacing: .2em; align-self: center; }
.ig-tile .ig-go { font-size: 14px; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 4px; }
.ig-tile:hover { background: #26292a; }
/* 設計師頁：每人一整列＝照片／介紹／作品 */
.st-rows { display: grid; gap: 48px; }
.st-row { display: grid; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.st-row .ph { aspect-ratio: 4/5; display: block; max-width: 320px; }
.st-row .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.st-row .meta { display: flex; align-items: baseline; gap: 14px; }
.st-row .name { font-family: var(--serif); font-size: 30px; letter-spacing: .1em; text-decoration: none; }
.st-row .bio { font-size: 16px; color: var(--ink-soft); }
.st-row .acts { display: flex; gap: 16px; align-items: center; }
.st-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-works .work figcaption { font-size: 12px; }
@media (min-width: 900px) {
  .st-row { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
  .st-works:has(.ig-tile) { grid-template-columns: minmax(0, 200px); }
}
.st-rows .stylist.any { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
.st-rows .stylist.any .any-box { aspect-ratio: 4/5; }
.st-rows .stylist.any .acts { margin-top: 0; }
.any-box .vert, .ig-tile .vert { white-space: nowrap; }
.st-rows .any-box .vert { font-size: 34px; }
.st-works .work figcaption .wname, .st-works .work figcaption .by { display: none; }
.st-works .ig-tile + figcaption { display: none; }
/* 設計師卡：名字與職稱一律左靠緊跟 */
.stylist .meta { justify-content: flex-start; gap: 12px; }
@media (max-width: 639px) { .stylist .bio { display: block; font-size: 14px; } }
/* 服務頁：示意圖與作品同高並排；結構護髮用三格步驟 */
.svc-list.svc-page { grid-template-columns: 1fr; }
.svc-row2 { display: grid; gap: 20px; padding-block: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
@media (min-width: 900px) { .svc-row2 { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: center; } }
.svc-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc-visual > img, .svc-photo { aspect-ratio: 3/4; width: 100%; height: auto; }
.svc-visual > img { object-fit: contain; background: var(--white); border: 1px solid var(--line); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-row2 h2 { font-size: 26px; }
.svc-cap { font-size: 13px; color: var(--ink-soft); }
.flow-boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: stretch; aspect-ratio: 3/4; }
.flow-boxes li { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--white); border: 1px solid var(--line); font-size: 15px; }
.flow-boxes .n { font: 500 13px var(--mono); color: var(--accent); }
/* 交通頁：三角燈箱指路圖、問答撐滿寬度 */
.visit-sign { margin: 0; display: grid; gap: 10px; max-width: 360px; }
.visit-sign .grade { aspect-ratio: 3/4; }
.visit-sign img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.visit-sign figcaption { font-size: 15px; color: var(--ink); letter-spacing: .06em; }
.faq { max-width: none; }
/* 關於頁頂圖：夜晚街景，保留招牌 */
.about-top img { object-position: 50% 40%; }
/* 空間照：統一暖色＋壓暗四角 */
.space .grade::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.28) 100%); }
.space .grade img { filter: saturate(.78) contrast(1.06) sepia(.14) brightness(.98); }

/* ── 第 6 輪 ── */
/* 修 bug：手機作品格子被說明文字撐寬（首頁、Sandy 頁可以左右滑） */
.works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } .works-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work, .work figcaption, .work .wname { min-width: 0; }
.work figcaption { grid-template-columns: auto minmax(0, 1fr) auto; }
.work .wname { overflow-wrap: anywhere; }
@media (max-width: 639px) { .work figcaption .by { display: none; } .work figcaption { grid-template-columns: auto minmax(0, 1fr); } }
/* 首屏：招牌放大、跟照片裡的燈箱同一個高度，收掉下方空白 */
@media (min-width: 900px) {
  .hero-text { align-content: start; padding-top: clamp(48px, 7vh, 96px); gap: 32px; }
  .signbox { width: clamp(300px, 26vw, 400px); }
  .sign-v { font-size: clamp(52px, 4.4vw, 72px); }
  .sign-en { font-size: clamp(14px, 1.1vw, 18px); }
}
/* 設計師頁：三列右欄一樣寬；Rita／Aniya 的作品位跟 Sandy 縮圖同高；不指定同一排法 */
@media (min-width: 900px) { .st-row { grid-template-columns: 240px minmax(0, 1fr) 420px; } }
.st-ig { display: grid; place-content: center; gap: 10px; text-align: center; aspect-ratio: 12 / 5; background: var(--ink); color: #fff; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.st-works:has(.st-ig) { grid-template-columns: minmax(0, 1fr); }
.st-row { grid-template-columns: minmax(0, 1fr); }
.st-row > * { min-width: 0; }
@media (min-width: 900px) { .st-row { grid-template-columns: 240px minmax(0, 1fr) 420px; } }
.st-ig span:first-child { font-family: var(--serif); font-size: 20px; letter-spacing: .14em; color: var(--accent-light); }
.st-ig .go { font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.st-any .any-box { max-width: 240px; }
@media (max-width: 899px) { .st-any .any-box { max-width: 160px; } }
/* 交通頁步行示意圖 */
.visit-route { margin: 0; display: grid; gap: 10px; max-width: 380px; }
.visit-route img { width: 100%; height: auto; border: 1px solid var(--line); }
.visit-route figcaption { font-size: 15px; letter-spacing: .06em; }
/* 預約步驟改成直式時間軸 */
.steps { list-style: none; padding: 0; counter-reset: st; gap: 0; }
.steps li { counter-increment: st; position: relative; padding: 0 0 28px 44px; border-left: 1px solid var(--line); margin-left: 14px; font-size: 17px; }
.steps li:last-child { border-color: transparent; }
.steps li::before { content: counter(st); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--accent); color: #fff; font: 500 13px var(--mono); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 8px; }
/* 結構護髮步驟：細線框、透明底，跟全站一致 */
.flow-boxes li { background: transparent; }
/* 關於頁創辦人區：引言放大、區塊收緊 */
.founder { align-items: center; }
.founder .quote.big blockquote { font-size: clamp(24px, 2.8vw, 34px); }
.about-top .grade { height: clamp(260px, 40vh, 440px); }
.about-top img { object-position: 50% 55%; }

/* ── 第 7 輪 ── */
/* 作品：一位設計師一列，左名字右三張，三人版面一致 */
.works-by { display: grid; gap: 28px; }
.wk-row { display: grid; gap: 12px; min-width: 0; }
.wk-who { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wk-name { font-family: var(--serif); font-size: 24px; letter-spacing: .1em; text-decoration: none; color: var(--ink); }
.wk-role { font-size: 13px; color: var(--ink-soft); letter-spacing: .1em; }
.wk-who .text-link { margin-left: auto; font-size: 14px; }
.wk-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.works-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.more-ig { margin-top: 16px; }
@media (min-width: 900px) {
  .works-by { gap: 0; }
  .wk-row { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 28px; border-top: 1px solid var(--line); }
  .wk-row:last-child { border-bottom: 1px solid var(--line); }
  .wk-who { display: grid; gap: 6px; justify-items: start; }
  .wk-name { font-size: 32px; }
  .wk-who .text-link { margin: 10px 0 0; }
  .wk-pics { gap: 16px; }
  .works-3 { gap: 20px; }
}
.work .grade { display: block; overflow: hidden; }
.work img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work a:hover img, .work a:focus-visible img { transform: scale(1.04); }
/* 設計師頁：右欄放自己的三張作品 */
.st-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 沒有作品照時的設計師列（保留給之後新進設計師） */
.st-side { display: grid; gap: 14px; align-content: start; }
/* 服務頁：沒有作品照的項目，示意圖單獨一格 */
.svc-visual:not(:has(.flow-boxes)) { grid-template-columns: minmax(0, 180px); }
/* 區塊序號改明體 */
.sec-no { font: 500 15px var(--serif); letter-spacing: .14em; }

/* 預約流程：三步驟 */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: p; }
.process li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.process li:last-child { border-bottom: 1px solid var(--line); }
.process .p-n { grid-row: span 2; width: 40px; height: 36px; display: grid; place-items: end center; padding-bottom: 4px; background: var(--accent); color: #fff; font: 500 14px var(--mono); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.process h3 { font-size: 20px; }
.process p { font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }
.process-cta { margin-top: 24px; }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .process li { grid-template-columns: 1fr; row-gap: 14px; padding: 28px 28px 32px 0; border-top: 1px solid var(--ink); border-bottom: 0 !important; }
  .process li + li { padding-left: 28px; border-left: 1px solid var(--line); }
  .process .p-n { grid-row: auto; width: 48px; height: 42px; }
  .process h3 { font-size: 24px; }
}

/* 預約帶：夜晚店面當底圖 */
.band-photo { background: #000; }
.band-photo .band-bg { position: absolute; inset: 0; background: url(../img/storefront-night.webp) center 40% / cover no-repeat; opacity: .32; filter: saturate(.7); }
.band-photo .band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 100%); }

/* 空間照：點了看大圖 */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,16,15,.92); display: grid; place-items: center; padding: 56px 16px 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; }
.lb-close { position: absolute; top: 12px; right: 16px; background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: 6px 14px; font-size: 14px; letter-spacing: .1em; cursor: pointer; }

/* 互動：只在使用者沒有設定「減少動態」時才播放；沒有 JS 時內容照常顯示 */
@media (prefers-reduced-motion: no-preference) {
  /* 首屏招牌：進場時亮燈一次，之後微微呼吸 */
  .signbox { animation: sign-on 1.6s ease-out .2s both, sign-breathe 5s ease-in-out 2s infinite; }
  @keyframes sign-on { 0% { opacity: .15; } 30% { opacity: .9; } 38% { opacity: .35; } 52% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes sign-breathe { 0%, 100% { filter: drop-shadow(0 0 28px rgba(242,214,160,.45)) drop-shadow(0 0 6px rgba(242,214,160,.5)); } 50% { filter: drop-shadow(0 0 40px rgba(242,214,160,.62)) drop-shadow(0 0 10px rgba(242,214,160,.6)); } }
  /* 預約流程：捲到時依序出現 */
  .process.will-play li { opacity: 0; transform: translateY(16px); }
  .process.play li { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 180ms); }
  /* 步行路線：從捷運站畫到燈箱 */
  .visit-route.will-play .route-line { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .visit-route.play .route-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s ease-in-out; }
}
.visit-route svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); }

/* ── 第 8 輪 ── */
/* 段落最後一行不要只剩一個字 */
p, .bio, blockquote { text-wrap: pretty; }
/* 引號、括號與逗號相鄰時收緊（避免「當下」 ，這種多出來的空隙） */
.quote blockquote, .press-item .q { font-feature-settings: "palt"; }
/* 報導日期改明體，全站不再用等寬字 */
.press-item .date { font: 500 14px var(--serif); letter-spacing: .08em; color: var(--accent); }
/* 首屏：多一行營業時間與捷運步行 */
.hero-facts { color: #b9b7b0; }
/* 手機首屏：照片撐滿第一個畫面，真燈箱在上；地址、服務、按鈕疊在壓暗的下半部 */
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .hero-media, .hero-text { grid-area: 1 / 1; }
  .hero-media img { height: calc(100svh - 118px); min-height: 520px; max-height: 780px; object-position: 50% 0%; }
  .hf-mrt { display: none; }
  /* 壓暗層放在文字區本身（照片框的 ::after 已經被顆粒質感用掉） */
  .hero-text { background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 62%, rgba(0,0,0,0) 100%); padding-top: 110px; }
  .hero-text { z-index: 2; align-self: end; padding: 0 20px 28px; }
  .hero .signbox { display: none; }
  .hero-copy { gap: 18px; }
  .hero-sub { font-size: 15px; gap: 6px; }
}
/* 三步驟：全站同一個元件。電腦版三欄上緣對齊、每欄同樣內距 */
.process li { align-content: start; }
@media (min-width: 900px) {
  .process li, .process li + li { padding: 28px 28px 32px; }
  .process li:first-child { padding-left: 0; }
}
/* 直式版（預約頁左欄）：永遠一欄 */
.process-col { grid-template-columns: 1fr !important; }
.process-col li, .process-col li + li { grid-template-columns: 48px minmax(0, 1fr) !important; padding: 16px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
.process-col li:last-child { border-bottom: 1px solid var(--line) !important; }
.process-col .p-n { grid-row: span 2 !important; width: 40px !important; height: 36px !important; }
.process-col h3 { font-size: 19px !important; }
.process-col + .small { color: var(--ink-soft); font-size: 14px; }
/* 迷你版（服務頁結構護髮）：只有標題、橫排三格 */
.process-mini { margin-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.process-mini li, .process-mini li + li { grid-template-columns: 1fr !important; row-gap: 8px; padding: 14px 12px 14px 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 0 !important; border-left: 0 !important; }
.process-mini li + li { padding-left: 12px !important; border-left: 1px solid var(--line) !important; }
.process-mini .p-n { grid-row: auto !important; width: 30px !important; height: 26px !important; font-size: 12px; }
.process-mini h3 { font-size: 15px !important; letter-spacing: .04em; }
/* 服務頁：四項同一個排法（示意圖一欄、文字一欄），消掉中間空白 */
.svc-row2 { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
.svc-visual { display: block; }
.svc-visual > img { width: 96px; height: auto; aspect-ratio: 3/4; }
@media (min-width: 900px) { .svc-row2 { grid-template-columns: 160px minmax(0, 1fr); gap: 48px; } .svc-visual > img { width: 160px; } .svc-row2 .stack { max-width: 40em; } }
/* 首頁設計師卡（手機兩欄）：按鈕一律貼齊卡片底部 */
.stylist .acts { margin-top: auto; }
.stylists { align-items: stretch; }
/* 關於頁頂圖：電腦版裁到看得見燈箱招牌 */
@media (min-width: 900px) { .about-top img { object-position: 50% 28%; } }
/* 區塊標題：英文小字（手機橫排在標題右邊；電腦直排、往右下錯開） */
.sec-en { font: 500 11px var(--sans, inherit); letter-spacing: .32em; color: var(--accent); }
@media (min-width: 900px) {
  .sec-head { flex-direction: row; align-items: flex-start; gap: 10px; }
  .sec-head .sec-title { font-size: 26px; letter-spacing: .4em; }
  .sec-en { writing-mode: vertical-rl; margin-top: 3.2em; font-size: 11px; letter-spacing: .4em; }
}
/* 作品：電腦版每列一大兩小，三位設計師左右交替 */
@media (min-width: 900px) {
  .wk-pics { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
  .wk-pics .work:first-child { grid-row: span 2; }
  .wk-pics .work:first-child .grade { aspect-ratio: auto; height: 100%; }
  .wk-row:nth-child(even) .wk-pics { grid-template-columns: 1fr 2fr; }
  .wk-row:nth-child(even) .wk-pics .work:first-child { grid-column: 2; grid-row: 1 / span 2; }
  .wk-row { align-items: start; }
  .wk-who { padding-top: 8px; }
}
/* 頁尾：超大外框三角，下緣被頁面切掉 */
.site-foot { position: relative; overflow: hidden; }
.site-foot .wrap { position: relative; z-index: 1; }
.foot-tri { position: absolute; right: -6vw; bottom: -18vw; width: min(72vw, 620px); height: auto; color: var(--accent-light); opacity: .28; pointer-events: none; }
@media (min-width: 900px) { .foot-tri { right: 4vw; bottom: -160px; width: 460px; } }

/* ── 第 9 輪 ── */
/* 底色微調偏冷：取店裡白牆、水泥、鐵件（評審連續說像「暖奶油預設色」） */
:root { --plaster: #f1f2f0; --tint: #e5e7e4; --line: #d3d6d2; }
/* 退回上一輪的標點收緊：它把全形逗號、驚嘆號擠成半形寬 */
.quote blockquote, .press-item .q { font-feature-settings: normal; }
/* 首屏：Google 評價一行 */
.hero-rate { display: inline-flex; align-items: baseline; gap: 10px; color: #d9d7d0; text-decoration: none; font-size: 14px; letter-spacing: .08em; }
.hero-rate .hr-score { font: 600 24px var(--serif); color: var(--accent-light); }
.hero-rate .hr-stars { color: var(--accent-light); letter-spacing: .1em; font-size: 13px; }
.hero-rate:hover span:last-child { text-decoration: underline; text-underline-offset: .3em; }
.hero-media img { filter: sepia(.12) saturate(.9) brightness(1.03); }
@media (min-width: 900px) {
  /* 首屏剛好一個畫面高，左欄內容垂直置中 */
  .hero { min-height: 0; height: calc(100vh - 66px); max-height: 900px; }
  .hero-media img { min-height: 0; height: 100%; object-position: 62% 18%; }
  .hero-text { align-content: center; padding-top: 40px; padding-bottom: 40px; }
}
/* 同底色的區塊連在一起時，縮小中間的空白 */
section.block:not(.block-tint):not(.page-first) + section.block:not(.block-tint) { padding-top: clamp(16px, 2.5vw, 40px); }
/* 服務頁：電腦版兩欄；護髮流程改一行文字，不再用三角編號（三角編號只代表預約流程） */
@media (min-width: 900px) {
  .svc-list.svc-page { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .svc-row2 { grid-template-columns: 120px minmax(0, 1fr); gap: 32px; }
  .svc-visual > img { width: 120px; }
}
.svc-row2 .flow { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
/* 設計師頁「不指定」：橫跨全寬的黑底帶，不佔照片位置 */
.st-row.st-any { grid-template-columns: minmax(0, 1fr) !important; background: var(--ink); color: #d9d7d0; padding: 28px clamp(20px, 4vw, 48px); border-bottom: 0; }
.st-any .any-box { display: none; }
.st-any .name { color: #fff; }
.st-any .bio { color: #d9d7d0; }
@media (min-width: 900px) { .st-any .stack { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; } .st-any .meta, .st-any .bio, .st-any .acts { margin: 0; } }
/* 關於頁頂圖：電腦版拉高、往下對焦，讓燈箱招牌與門口都在畫面裡 */
@media (min-width: 900px) { .about-top .grade { height: clamp(360px, 60vh, 580px); } .about-top img { object-position: 50% 46%; } }
/* 交通頁右欄：路線圖與地圖同寬 */
.visit-route, .map { max-width: 520px; width: 100%; }
/* 首頁設計師卡：四張卡一律「按鈕在上、連結在下」，按鈕不換行，四顆按鈕同一高度 */
.stylist .acts { flex-direction: column; align-items: flex-start; gap: 10px; }
.stylist .btn { white-space: nowrap; }
/* ── 第 10 輪 ── */
/* 首頁作品：每位設計師一列三張等大（收掉左欄 2,500px 空白、首頁縮短） */
@media (min-width: 900px) {
  .wk-pics, .wk-row:nth-child(even) .wk-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .wk-pics .work:first-child, .wk-row:nth-child(even) .wk-pics .work:first-child { grid-row: auto; grid-column: auto; }
  .wk-pics .work:first-child .grade { aspect-ratio: 4/5; height: auto; }
  .wk-row { align-items: center; padding-block: 24px; }
}
/* 內頁開場：電腦版頁面主標改橫排大字，比底部預約帶的標題大 */
@media (min-width: 900px) {
  .page-first .sec { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .page-first .sec-head { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
  .page-first .sec-head .sec-title { writing-mode: horizontal-tb; font-size: clamp(44px, 4vw, 56px); letter-spacing: .12em; line-height: 1.1; align-items: center; }
  .page-first .sec-head .sec-title .tri { margin: 0 .35em 0 0; font-size: .5em; }
  .page-first .sec-en { writing-mode: horizontal-tb; margin: 0; font-size: 12px; }
}
/* 手機首屏：試過加小三角招牌，跟照片裡真的燈箱重複、字也被切到，不採用（照片裡的燈箱就是記號） */
/* 底部預約帶：改用夜景街道照，看得到亮著的燈箱與店面 */
.band-photo .band-bg { background-image: url(../img/street-night.webp); background-position: 62% 38%; opacity: .5; filter: saturate(.85); }
.band-photo .band-bg::after { background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.3) 100%); }
/* 服務：示意圖拿掉外框，少一點樣板感 */
.svc-visual > img, .svc-item img { background: transparent; border: 0; }
/* 大字引言：兩行長度平衡，不把詞拆開 */
.quote.big blockquote { text-wrap: balance; }
@media (min-width: 900px) { .quote.big blockquote { word-break: keep-all; } }
/* 手機版直式人像與其他圖片同寬 */
@media (max-width: 899px) { .st-row .ph, .ph-portrait { max-width: none; } }

/* ── 第 11 輪 ── */
/* 全站一條網格：電腦版所有區塊標題在左欄（同一條線），所有內容從同一條線開始；內頁大標題橫跨在上方 */
@media (min-width: 900px) {
  .page-first .sec { grid-template-columns: 92px minmax(0, 1fr); column-gap: 56px; row-gap: 40px; }
  .page-first .sec-head { grid-column: 1 / -1; }
  .page-first .sec-body { grid-column: 2; }
  /* 首屏左欄對齊選單列的商標 */
  .hero-text { padding-left: max(48px, calc((100vw - 1320px) / 2 + 48px)); }
}
/* 設計師頁：作品改滿版三張，放大到看得出髮色與捲度 */
@media (min-width: 900px) {
  .st-row { grid-template-columns: 240px minmax(0, 1fr); }
  .st-works { grid-column: 1 / -1; gap: 16px; }
}
/* 關於頁的預約帶換一張照片（同頁不重複用夜景） */
.band-alt .band-bg { background-image: url(../img/window-seat.webp); background-position: 50% 55%; opacity: .4; }
/* 交通頁：示意圖與地圖都撐滿右欄 */
.visit-route, .map { max-width: none; }
/* 服務頁三角流程：三個角＝三個步驟 */
.tri-flow { position: relative; margin: 0 auto 48px; max-width: 640px; aspect-ratio: 600 / 470; }
.tri-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tri-flow .tf-edge { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tri-flow circle { fill: var(--accent); }
.tf-pt { position: absolute; display: grid; gap: 2px; width: 13em; font-size: 14px; color: var(--ink-soft); }
.tf-pt b { font: 600 19px var(--serif); color: var(--ink); letter-spacing: .08em; }
.tf-n { font: 500 13px var(--serif); color: var(--accent); }
.tf-top { left: 50%; top: 0; transform: translate(24px, -6px); }
.tf-right { right: 0; bottom: 0; transform: translateY(calc(100% + 8px)); text-align: right; justify-items: end; }
.tf-left { left: 0; bottom: 0; transform: translateY(calc(100% + 8px)); }
.tf-center { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); }
.tf-center .vert { font-size: clamp(40px, 7vw, 64px); color: var(--accent-light); }
@media (max-width: 899px) {
  .tri-flow { aspect-ratio: auto; max-width: none; padding-top: 0; }
  .tri-flow svg, .tf-center { display: none; }
  .tf-pt { position: static; transform: none; width: auto; text-align: left; justify-items: start; padding: 14px 0 14px 18px; border-left: 2px solid var(--accent); margin-bottom: 10px; }
}
@media (min-width: 900px) { .tri-flow { margin-bottom: 140px; } .tf-pt { width: 17em; } }
/* 手機選單：蓋滿整個畫面 */
@media (max-width: 899px) { .nav.open { position: fixed; top: 64px; bottom: 0; left: 0; right: 0; overflow-y: auto; font-size: 18px; z-index: 40; } }
/* 小連結：可點範圍實際放大到 44px 高（上方加內距、用負外距抵銷，畫面位置不變） */
/* 第 18 輪修 bug：原本用負外距把可點範圍往上撐，蓋到上面的預約按鈕（點按鈕下半部會跳 IG）。改成真的內距，可點範圍只在自己身上 */
.text-link { display: inline-block; padding-block: 11px; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.site-foot a { display: inline-block; padding-block: 9px; }
.space img:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ── 第 12 輪 ── */
/* 電腦版首屏：畫的三角縮小退成標誌，照片裡的真燈箱當主角；左下電表箱用漸層壓暗（不裁建築物，凱要多顯示建築） */
@media (min-width: 900px) {
  .signbox { width: clamp(150px, 12vw, 190px); }
  .sign-v { font-size: clamp(30px, 2.4vw, 40px); }
  .sign-en { font-size: 11px; }
  .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 0% 100%, rgba(0,0,0,.72), rgba(0,0,0,0) 70%); }
  .hero h1 .hero-en { display: none; }
  /* 900–1099 寬：首屏文字不再被照片蓋住 */
  .hero-sub span { white-space: normal; }
}
/* 作品放大窗：照片下方有「去 IG 看原貼文」 */
.lb-fig { margin: 0; display: grid; gap: 14px; justify-items: center; max-height: 100%; }
.lb-fig img { max-height: calc(100vh - 140px); }
.lb-ig { color: #fff; font-size: 15px; letter-spacing: .08em; border-bottom: 1px solid currentColor; text-decoration: none; padding-top: 12px; }
/* 手機作品：每位設計師的三張改成可左右滑的大圖 */
@media (max-width: 899px) {
  .wk-pics, .st-works, .works-3 { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .wk-pics::-webkit-scrollbar, .st-works::-webkit-scrollbar, .works-3::-webkit-scrollbar { display: none; }
  .wk-pics .work, .st-works .work, .works-3 .work { scroll-snap-align: start; }
  /* 設計師頁手機：人像縮小、作品放大 */
  .st-row .ph { max-width: 46%; }
}
/* 首頁同底色相鄰區塊（服務→回饋）不出現多餘的小三角 */
.block-tint + .block-tint::before { display: none; }
.block-tint + .block-tint { padding-top: 0; }
/* 服務頁三角縮小、「當下」加深 */
.tri-flow { max-width: 500px; }
.tf-center .vert { color: var(--accent); font-size: clamp(36px, 5vw, 52px); }
/* 結尾預約帶：露出完整招牌 */
.band-photo .band-bg { background-position: 62% 22%; opacity: .58; }
/* 回饋區：窄螢幕與 1024 寬不擠成窄欄、不溢出 */
.reviews > * { min-width: 0; }
.gbadge { max-width: 100%; }
@media (min-width: 900px) and (max-width: 1199px) { .reviews { grid-template-columns: 1fr; gap: 32px; } .gbadge { max-width: 360px; } }
/* 手機底部：預留高度＝固定列高度，消掉 2px 細縫 */
@media (max-width: 899px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }
/* 問答與電話：可點範圍 44px 以上 */
summary { min-height: 44px; align-items: center; }
.facts a[href^="tel:"] { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* ── 第 13 輪 ── */
/* 首頁服務：左邊三角流程（判斷→施作→回家整理），右邊四項服務 */
.svc-home { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .svc-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .svc-home .tri-flow { margin: 24px 0 96px; }
  .svc-home .svc-list { grid-template-columns: 1fr; }
}
/* 首頁作品左欄：名字下放專長，不再是剩下來的空白 */
.wk-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--ink-soft); }
.wk-tags li + li::before { content: "／"; margin-right: 10px; color: var(--line); }
@media (min-width: 900px) { .wk-tags { display: grid; gap: 2px; } .wk-tags li + li::before { content: none; } .wk-tags li::before { content: "▴ "; color: var(--accent); font-size: 10px; } }
/* 底部預約帶：照片只佔右側、招牌在右三分之一；文字在左邊深色實底上，不再壓到招牌 */
.band-photo .band-bg { left: 38%; background-position: 55% 28%; opacity: .75; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.band-photo .band-bg::after { background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); }
.band-alt .band-bg { background-position: 50% 50%; opacity: .6; }
@media (max-width: 899px) { .band-photo .band-bg { left: 0; opacity: .35; -webkit-mask-image: none; mask-image: none; } }
/* 平板（600–899）：作品維持三欄，不用手機的左右滑；示意圖、地圖、評分卡限制寬度 */
@media (min-width: 600px) and (max-width: 899px) {
  .wk-pics, .st-works, .works-3 { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .visit-route, .map { max-width: 480px; }
  .gbadge { max-width: 360px; }
  .st-row .ph { max-width: 220px; }
}
@media (max-width: 1199px) { .gbadge { max-width: 360px; } }
/* 320 寬：設計師兩欄一樣寬 */
@media (max-width: 639px) { .stylists { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stylists > * { min-width: 0; } }
/* 1024 首屏：「捷運大橋頭站步行 5 分鐘」整句一起換行，不把「分鐘」單獨斷下去 */
.hf-mrt { white-space: nowrap; }
/* 設計師個人頁大標題跟其他內頁同一套字級 */
.profile h1 { font-size: 30px; }
@media (min-width: 900px) { .profile h1 { font-size: clamp(44px, 4vw, 56px); } }
/* 鍵盤焦點框改品牌古銅色 */
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--accent); }
/* 放大窗：上一張／下一張 */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; }
.lb-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox.lb-single .lb-nav { display: none; }
@media (max-width: 599px) { .lb-nav { top: auto; bottom: 20px; transform: none; } }
/* ── 第 14 輪 ── */
/* 預約帶：文字與按鈕全部收在左邊深色實底，照片在右邊完整露出；每頁不同照片 */
.band-photo .band-in { grid-template-columns: minmax(0, 620px); }
.band-photo .band-cta { justify-items: start; text-align: left; }
.band-street .band-bg { background-image: url(../img/street-night.webp); background-position: 55% 28%; }
.band-wash .band-bg { background-image: url(../img/wash.webp); background-position: 50% 50%; }
.band-chairs .band-bg { background-image: url(../img/chairs.webp); background-position: 50% 45%; }
.band-counter .band-bg { background-image: url(../img/counter.webp); background-position: 50% 50%; }
.band-window .band-bg { background-image: url(../img/window-seat.webp); background-position: 50% 50%; }
.band-storefront .band-bg { background-image: url(../img/storefront-night.webp); background-position: 50% 35%; }
@media (min-width: 900px) { .band-photo .band-bg { left: 45%; opacity: .8; } }
/* 作品左欄專長：每一項都同樣的標記 */
@media (min-width: 900px) { .wk-tags li::before, .wk-tags li + li::before { content: "▴"; margin-right: 6px; color: var(--accent); font-size: 10px; } }
/* 1024 首屏：捷運那句整句不斷行（上一輪被 .hero-sub span 規則蓋掉） */
.hero-sub .hf-mrt { white-space: nowrap; }
/* 手機點擊範圍 44px */
@media (max-width: 899px) {
  .menu-btn { min-height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-rate { min-height: 44px; align-items: center; }
  .wk-name { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 放大窗：底色不透明、標出誰的作品第幾張；手機上一張下一張放在左右兩側中間 */
.lightbox { background: #0f100f; }
.lb-fig figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lb-who { color: #d9d7d0; font-size: 14px; letter-spacing: .12em; }
@media (max-width: 599px) { .lb-nav { top: 50%; bottom: auto; transform: translateY(-50%); width: 40px; height: 56px; background: rgba(0,0,0,.45); } }
/* 手機服務頁：保留一個小三角，三個步驟排在下面 */
@media (max-width: 899px) { .tri-flow svg { display: block; position: static; width: 120px; height: auto; margin: 0 0 16px; } }
/* 跳到主要內容（鍵盤使用者按 Tab 才出現） */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── 第 15 輪 ── */
/* 首屏營業時間：時間與捷運各自不斷行，整段只會在兩者之間換行 */
.hero-sub .hf-time { white-space: nowrap; }
/* 服務三角：角上的 1／2／3；手機版三角放大一點，配下面的清單 */
.tf-num text { font: 600 34px var(--serif); fill: var(--accent); }
@media (min-width: 900px) { .tf-num { display: none; } }
@media (max-width: 899px) { .tri-flow svg { width: 180px; } }
/* 平板：交通頁地圖撐滿整欄，跟上方資料表對齊 */
@media (min-width: 600px) and (max-width: 899px) { .map { max-width: none; } }

/* ── 第 16 輪：900–1240 中間寬度（iPad 橫放、小筆電）── */
/* 選單：1100 以下用手機的收合選單，避免每項折成兩行 */
@media (min-width: 900px) and (max-width: 1099px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--plaster); border-bottom: 1px solid var(--line); padding: 8px 48px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-head .wrap { justify-content: space-between; }
  /* 首屏：照片不再往左斜切壓到文字，兩欄各半 */
  .hero { grid-template-columns: 48% 52%; }
  .hero-media { clip-path: none; margin-left: 0; }
  .hero-text { padding-left: 48px; padding-right: 28px; }
  .hero-sub .hf-mrt { display: block; }
}
@media (min-width: 1100px) { .nav-book { margin-left: 4px; } }
/* 第 18 輪修 bug：900–1099 原本把頂部 LINE 按鈕藏掉，這段寬度整頁找不到 LINE。改成顯示在「選單」旁邊 */
@media (min-width: 900px) and (max-width: 1099px) { .site-head .wrap { justify-content: flex-start; } .menu-btn { margin-left: auto; } }
/* 首頁服務：1280 以下三角與清單上下疊，標籤不再互相擠 */
@media (min-width: 900px) and (max-width: 1279px) {
  .svc-home { grid-template-columns: minmax(0, 1fr); }
  .svc-home .tri-flow { margin: 0 auto 120px; width: 100%; max-width: 500px; }
  .svc-home .svc-list { grid-template-columns: 1fr 1fr; }
}
/* 設計師卡按鈕：不超出卡片，窄的時候允許換行 */
.stylist .btn { white-space: normal; max-width: 100%; }
@media (max-width: 1099px) { .stylist .btn { padding-inline: 14px; } }
/* 筆記標題：只在詞與詞之間換行（大螢幕），兩行長度平衡 */
.note-list .note-title { text-wrap: balance; }
@media (min-width: 600px) { .note-list .note-title { word-break: keep-all; } }
/* 文章結尾：其他筆記 */
.note-more { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink); }
.note-more h2 { font-size: 19px; margin-bottom: 8px; }
.note-more .note-list { border-top: 0; }
/* 頁尾主要頁面 */
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ── 第 17 輪：拿掉 AI 樣板裝飾、三角圖小螢幕版、設計師列、技術小毛病 ── */
/* 等寬字體拿掉：步驟編號、日期一律用標題的明體 */
:root { --mono: var(--serif); }
/* 評論署名：名字一行、來源小一級 */
.quote figcaption { display: grid; gap: 2px; }
.q-who { color: var(--ink); font-size: 15px; letter-spacing: .06em; }
.q-src { font-size: 13px; color: var(--ink-soft); }
/* 預約帶與首屏：資訊各占一行 */
.band-cta { gap: 4px; }
.band-cta .btn { margin-bottom: 8px; }
.hero-sub .hf-mrt { display: block; }
/* 文章署名：作者與日期分兩行 */
.note-by { display: grid; gap: 2px; }
.note-by time { color: var(--ink-soft); font-size: 13px; }
/* 放大窗：名字與第幾張分開 */
.lb-count { color: #9e9b94; font-size: 12px; letter-spacing: .1em; }
/* 服務三角：大螢幕用旁邊的說明，小螢幕把字寫進三角裡（中心「當下」、三個角的步驟名），說明清單貼齊左邊 */
.tf-svgl { display: none; }
.tf-svgl text { font: 600 26px var(--serif); fill: var(--ink); letter-spacing: 2px; }
.tf-svgl .tf-c { font-size: 62px; fill: var(--accent); }
@media (max-width: 899px) {
  .tri-flow svg { width: 100%; max-width: 340px; margin: 0 0 20px; }
  .tf-svgl { display: inline; }
  .tf-num { display: none; }
  .tf-pt { padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); margin: 0; }
  .tf-pt b { font-size: 17px; }
}
/* 設計師頁：大螢幕時作品放在同一列右邊，填掉右半邊空白 */
@media (min-width: 1200px) {
  .st-row { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 560px); align-items: start; }
  .st-works { grid-column: auto; gap: 12px; }
}
.st-row .acts .btn { white-space: nowrap; flex: none; }
.st-row .acts { flex-wrap: wrap; row-gap: 10px; }
/* 地圖降飽和，跟全站色調一致 */
.map { filter: grayscale(.75) sepia(.12) contrast(.95); }
/* 筆記列表頁：第一篇橫跨兩欄當主打，5 篇剛好排滿 */
@media (min-width: 900px) { .feature-first li:first-child { grid-column: 1 / -1; } .feature-first li:first-child h2 { font-size: clamp(22px, 2.2vw, 27px); } }
/* 頁尾選單：固定三欄兩列，不再一下斷這裡一下斷那裡 */
.foot-nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 18px; }
/* 900–1099：選單鈕與頁首高度跟其他寬度一致 */
@media (min-width: 900px) and (max-width: 1099px) { .menu-btn { min-height: 44px; } }
/* 放大窗：底部留白，IG 連結不貼螢幕邊 */
.lightbox { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.lb-fig img { max-height: calc(100vh - 180px); }
/* 手機首屏：漸層再加深、字加一點陰影，背後白色電箱也讀得到；矮螢幕首屏不蓋到評分 */
@media (max-width: 899px) {
  .hero-text { background: linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.93) 72%, rgba(0,0,0,0) 100%); padding-top: 140px; }
  .hero-text, .hero-text a { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
  .hero-media img { height: max(380px, calc(100svh - 118px)); min-height: 0; }
}
/* 手機橫拿：收掉底部固定列、頁首不黏住，讓內容有空間 */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1099px) {
  .dock { display: none; }
  body { padding-bottom: 0; }
  .site-head { position: static; }
}

/* ── 第 18 輪：首屏一個主角、首頁節奏、元件統一、技術毛病 ── */
/* 首屏（電腦版）：拿掉畫的三角燈箱，照片裡真的燈箱當唯一主角；左邊改成大字店名 */
@media (min-width: 900px) {
  .hero .signbox { display: none; }
  .hero h1 .sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .hero h1 { font-size: clamp(40px, 4vw, 62px); line-height: 1.15; letter-spacing: .04em; }
  .hero-copy { gap: 26px; }
}
/* 空間：滿版照片帶，打破同一種版型一路重複 */
.space-band { position: relative; background: #000; }
.space-strip { display: grid; gap: 4px; grid-template-columns: 1fr; }
.space-strip figure { position: relative; margin: 0; }
.space-strip .grade { aspect-ratio: 4 / 3; height: 100%; }
.space-strip img { width: 100%; height: 100%; object-fit: cover; }
.space-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px max(20px, env(safe-area-inset-left, 0px)) 18px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); color: #f1efe9; font: 600 17px var(--serif); letter-spacing: .12em; display: flex; align-items: baseline; gap: 14px; z-index: 2; }
.space-strip figcaption span { font: 400 14px var(--sans); letter-spacing: .08em; color: #d9d7d0; }
.space-strip figcaption .tri { color: var(--accent-light); }
@media (min-width: 760px) {
  .space-strip { grid-template-columns: 2fr 1fr 1fr; height: clamp(360px, 46vw, 640px); }
  .space-strip .grade { aspect-ratio: auto; }
  .space-strip figcaption { padding-left: 28px; }
}
.space-band + .band::before { display: none; }
/* 專長標籤只留一種樣式：直角切角，跟全站一致（不用圓角膠囊）；選單鈕也改直角 */
.tags li { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.menu-btn { border-radius: 0; }
/* 「設計師」職稱不斷成兩行 */
.stylist .yrs, .st-row .yrs, .role, .stylist .name { white-space: nowrap; }
/* 設計師頁大螢幕：作品比頭像大 */
@media (min-width: 1200px) {
  .st-row { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 640px); }
}
/* 頁尾裝飾三角：900 以下拿掉，不再壓到連結文字 */
@media (max-width: 899px) { .foot-tri { display: none; } }
/* 筆記標題：只在詞組之間換行，太長才允許斷；手機列表拿掉小圖，標題有完整寬度 */
.note-list .note-title, .note h1 { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 599px) { .note-list a { grid-template-columns: minmax(0, 1fr); } .note-list .note-ico { display: none; } }
/* 預約三步驟：首頁與交通頁標題同一個字級 */
.process h3, .process-col h3, .process .p-t { font-size: 21px !important; letter-spacing: .08em; margin: 0; }
.prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose ol li { margin: .4em 0; }
/* 區塊明暗：交替的底色拉開一點，頁面才有段落感 */
:root { --tint: #e3e5e1; }

/* ── 髮況筆記 ── */
.note-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.note-list li { border-bottom: 1px solid var(--line); }
.note-list a { display: grid; gap: 6px; padding: 24px 0; text-decoration: none; color: var(--ink); }
.note-list .note-title { font-size: clamp(19px, 2vw, 23px); letter-spacing: .04em; }
.note-list p { color: var(--ink-soft); font-size: 15px; max-width: 46em; }
.note-meta { font-size: 13px; color: var(--accent); letter-spacing: .08em; }
.note-list a:hover h2 { text-decoration: underline; text-underline-offset: .3em; }
.note-wrap { max-width: 760px; }
.crumbs { font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; margin-bottom: 20px; }
.crumbs a { color: var(--ink-soft); }
.note h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.35; letter-spacing: .04em; }
.note-by { margin: 14px 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); font-size: 14px; color: var(--accent); letter-spacing: .06em; }
.prose { font-size: 17px; line-height: 1.95; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 23px; margin: 2em 0 .7em; padding-left: 14px; border-left: 3px solid var(--accent); line-height: 1.4; }
.prose h3.faq-q { font-size: 18px; margin: 1.4em 0 .4em; }
.prose ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose a { color: var(--accent); }
.prose .refs-h { font-size: 15px; border-left-color: var(--line); color: var(--ink-soft); }
.prose .ref { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; margin-bottom: .6em; }
/* 第 15 輪：筆記頁講網站自己的語言（三角小標、服務線條圖、兩欄列表） */
.note-list a { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.note-txt { display: grid; gap: 6px; min-width: 0; }
.note-ico { width: 56px; height: auto; }
@media (min-width: 900px) { .note-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.note-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: center; }
.note-head .note-ico { width: 64px; }
@media (min-width: 600px) { .note h1 { word-break: keep-all; } }
.prose h2 { border-left: 0; padding-left: 0; display: flex; gap: 12px; align-items: baseline; }
.prose h2::before { content: ""; flex: 0 0 auto; width: 14px; height: 12px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateY(-2px); }
.prose .refs-h::before { background: var(--line); }
.crumbs a { display: inline-block; padding-block: 10px; }
.crumbs { margin-bottom: 8px; align-items: center; }
.note { padding-bottom: clamp(56px, 7vw, 96px); }
/* 小連結：看起來一樣，但可點範圍放大到約 44px 高 */
.text-link, .site-foot a, .hero-rate { position: relative; }
/* 第 18 輪：拿掉往四周撐開的隱形點擊區（會蓋到相鄰的按鈕與頁尾連結） */

/* ── 第 19 輪：評審（日間 42、夜燈 41）與 GPT 第 2 輪點名的地方 ── */
/* 髮況筆記卡：拿掉服務小圖、改一行分類字，所有寬度都是一整欄。
   修手機塌成 56px 窄欄：舊的手機「一欄」規則寫在前面，被後面同樣強度的「56px＋其餘」規則蓋回去，小圖藏起來後文字就掉進 56px 那欄 */
.note-list a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.note-cat { margin: 0; font-size: 13px; letter-spacing: .14em; color: var(--accent); }
.note-head { display: block; }
.note-head .note-cat { margin-bottom: 12px; }
/* 電腦版兩欄：同一列兩張卡共用同一組列高（分類、標題、摘要、閱讀時間各一列），摘要從同一個高度開始；兩邊標題都一行時不多留空行 */
@media (min-width: 900px) {
  .note-grid > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .note-grid > li > a { grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
}
/* 古銅色小字在淺灰底上對比 4.48、差一點不到 4.5（檢查程式量到：分類字、閱讀時間、三角編號）；整體色調壓深一點點 */
:root { --accent: #865a31; }
/* 首頁服務三角：頂點的說明往右多留一點，不貼著三角形的右邊線（評審量到不到 10px） */
@media (min-width: 900px) { .svc-home .tf-top { transform: translate(48px, -6px); } }

/* 設計師（首頁與設計師頁同一種一人一列）：手機版頭像跟名字並排、作品排在下面（評審：頭像只佔半寬、右半邊空著） */
@media (max-width: 899px) {
  .st-row { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 18px; row-gap: 18px; align-items: start; }
  .st-row .ph { max-width: none; grid-column: 1; grid-row: 1; }
  /* 只限一般設計師列：「不指定」那列沒有頭像、本來就是單欄（GPT 第 3 輪抓到：600–899 寬文字被推到右邊、左邊空一欄） */
  .st-row:not(.st-any) > .stack { grid-column: 2; grid-row: 1; }
  .st-row > .st-works { grid-column: 1 / -1; }
  .st-row .name { font-size: 26px; }
}

/* 回饋：4.9 只留首屏那一次（評審：大數字加小標籤出現兩次是 AI 常見做法），這裡只放評論原文與 Google 連結 */
section.block .reviews { grid-template-columns: minmax(0, 1fr); }

/* 空間：回到全站同一種直排標題（評審：只有這一區把標題壓在照片上），深色底保留，讓這一區跟上下分開 */
.space-block { background: #000; color: #f1efe9; }
.space-block .sec-title { color: #f1efe9; }
.space-block + .band::before { display: none; }
@media (min-width: 760px) { .space-strip { height: clamp(300px, 32vw, 500px); } }
/* 圖說不攔點擊：點在「洗髮區」那幾個字上也能放大照片（GPT 抓到：原本點圖說沒反應） */
.space-strip figcaption { pointer-events: none; padding-top: 40px; }

/* 預約與交通：預約按鈕下面放門口三角燈箱的照片（評審：寫「認明三角燈箱」卻沒有燈箱照片）；放左欄，左右兩欄高度才接近 */
.visit-door { margin: 16px 0 0; }
.visit-door .grade { aspect-ratio: 4 / 3; }
.visit-door img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.visit-door figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-soft); letter-spacing: .06em; }

/* 手機與平板首屏也有店名大字（評審：電腦版最強的字體畫面，手機上看不到） */
@media (max-width: 899px) {
  .hero h1 .sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .hero h1 { font-size: clamp(32px, 9vw, 46px); line-height: 1.12; letter-spacing: .03em; }
}

/* 字體接上招牌：招牌上的 THE MOMENT 是高對比細襯線字，店名與設計師名字的英文改用同一類字（Bodoni Moda），中文照舊 */
.brand span, .hero h1, .st-row .name, .profile h1, .founder-name { font-family: "Bodoni Moda", var(--serif); }

/* ── 第 20 輪：第 19 輪評審點名的地方 ── */
/* 店名每一處同一種字：頁尾店名也改 Bodoni（評審：頁首、首屏改了，頁尾漏了） */
.foot-name { font-family: "Bodoni Moda", var(--serif); }
/* 三角頂點的說明一律往右移、不貼斜線（評審：服務頁的三角比較大，說明離斜線只剩 4–9px；首頁上一輪已修） */
@media (min-width: 900px) { .tf-top, .svc-home .tf-top { transform: translate(48px, -6px); } }
/* 服務說明：首頁與服務頁同一種字樣（評審：首頁 15px 淺灰、服務頁 17px 深色，同一段話兩種樣子） */
.svc-item p, .svc-row2 .stack > p { font-size: 16px; color: var(--ink-soft); }
/* 服務頁每一項接相關的髮況筆記（評審：服務頁只是首頁那段字放大，想多了解的人只拿到一句話） */
.svc-notes { margin-top: 14px; }
.svc-notes-h { display: block; font-size: 13px; letter-spacing: .14em; color: var(--accent); }
.svc-notes ul { list-style: none; margin: 0; padding: 0; }
.svc-notes li { margin: 0; }
/* 平板：人像固定 220px 寬，不比作品照大（評審：768 寬人像 291×364、作品 236×295，人像旁空一大塊） */
@media (min-width: 600px) and (max-width: 899px) { .st-row:not(.st-any) { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
/* 手機與平板：預約按鈕與「IG 作品」一律上下排，三位設計師同一種排法（評審：名字長的會把 IG 擠到下一行，三列長得不一樣） */
@media (max-width: 899px) { .st-row:not(.st-any) .acts { flex-direction: column; align-items: flex-start; row-gap: 2px; } }
/* 關於頁店內照：手機與平板改 4:3，不比一個畫面還高（評審：平板 728×971，下半張都是地板） */
@media (max-width: 899px) { .about-side .grade { aspect-ratio: 4 / 3; } }
/* 筆記連結折行時不留單一個字在最後一行 */
.svc-notes a { text-wrap: balance; }
/* 首屏店名改細字重：招牌上的「當下」是細明體，原本 600 粗體接不上（評審點名中文沒接上招牌） */
.hero h1 { font-weight: 400; }

/* ── 第 20 輪（續）：日間評審（45 分）點名的地方 ── */
/* 首屏店名照門口招牌的排法：「當」在上、大寫加字距的 THE MOMENT 在中間、「下」在下（評審：要一個只屬於這家店的招牌畫面）；讀屏照樣讀「The Moment當下」 */
.hero h1.wordmark { font-size: clamp(30px, 3.4vw, 50px); line-height: 1; }
.hero h1.wordmark .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wm { display: inline-grid; justify-items: center; row-gap: .3em; }
.wm-zh { font-family: var(--serif); font-weight: 400; font-size: 1.5em; line-height: 1; }
.wm-en { font-family: "Bodoni Moda", var(--serif); font-weight: 400; font-size: .72em; letter-spacing: .3em; margin-right: -.3em; line-height: 1; }
@media (max-width: 899px) { .hero h1.wordmark { font-size: clamp(22px, 6.4vw, 32px); } }
/* 頁首店名也跟招牌一樣用大寫加字距；設計師名字是小寫，不再拉開字距（評審：小寫拉字距是排版上要避免的做法） */
.brand span { text-transform: uppercase; letter-spacing: .14em; }
/* 窄手機：大寫店名變寬，320 寬頁首長到 91px（檢查程式量到），收字距與字級 */
@media (max-width: 379px) { .brand span { letter-spacing: .04em; font-size: 14px; } }
/* 首屏 THE MOMENT 字距收一點：1340 寬以上比左欄寬 11px（檢查程式量到） */
.wm-en { letter-spacing: .24em; margin-right: -.24em; }
/* 大字引言：整個詞組放不下時允許拆開（關於頁 1240 寬，創辦人那句凸出格子 16px） */
.quote blockquote { overflow-wrap: anywhere; }

/* ── 第 21 輪：第 20 輪日間評審（49 分）點名的地方 ── */
/* 中文大標全部用首屏那種細字重，層級靠字級拉開（評審：子頁大標、預約與諮詢、三角中心「當下」還是 600 粗體，跟招牌的口氣不一致） */
.sec-title, .tf-center .vert, .founder-name, .note h1 { font-weight: 400; }
/* 店名只有一種樣子：頁尾也用頁首那組（Bodoni、大寫、加字距、400）（評審：頁尾 700 粗體小寫，離招牌最遠） */
.foot-name { text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
/* 中文斷行：不讓一兩個字掉到最後一行（評審：服務頁「褪色後／的黃」「選哪／種燙」） */
p, li, h1, h2, h3, figcaption, .text-link { text-wrap: pretty; }
/* 首頁預約三步驟借路線圖的畫法：前兩步是路上的圓點、第三步「到店」是門口的三角燈箱，中間用路線圖那條虛線連起來（評審：首屏以下要有只屬於這家店的形式） */
.process-route li { border: 0 !important; }
.process-route .p-n { width: 40px; height: 40px; clip-path: circle(50%); background: var(--ink); place-items: center; padding: 0; }
.process-route li:last-child .p-n { width: 46px; height: 40px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--accent); place-items: end center; padding-bottom: 4px; }
.process-route li:not(:last-child)::after { content: ""; position: absolute; border: 0 dotted var(--accent); pointer-events: none; }
@media (max-width: 899px) {
  .process-route li:not(:last-child)::after { left: 18px; top: 64px; bottom: -12px; border-left-width: 3px; }
}
@media (min-width: 900px) {
  .process-route li, .process-route li + li { padding-top: 20px; }
  .process-route li:not(:last-child)::after { top: 38px; left: 50px; right: -18px; border-top-width: 3px; }
  .process-route li + li:not(:last-child)::after { left: 78px; }
}
/* 手機與平板的預約帶：照片在上、用原本的亮度，字在下、純黑底（夜燈評審：字壓在壓暗的照片上，燈箱被蓋掉、子頁像一層灰霧） */
@media (max-width: 899px) {
  .band-photo { padding-top: 0; }
  .band-photo .band-bg { position: relative; inset: auto; left: 0; display: block; width: 100%; aspect-ratio: 16 / 9; opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; margin-bottom: clamp(32px, 7vw, 48px); }
  .band-photo .band-bg::after { display: none; }
}
/* 首屏按鈕不沾文字陰影（夜燈評審：手機與平板的「LINE 預約諮詢」字的周圍有一圈黑色暈影） */
.hero-text .btn { text-shadow: none; }
/* 平板交通頁：路線圖置中（評審：480px 靠左，跟上面滿版的門口照片右緣對不齊） */
@media (max-width: 899px) { .visit-route { margin-inline: auto; } }
/* 首頁手機：首屏那顆「LINE 預約諮詢」還在畫面上時，底部固定列先收起來（夜燈評審：第一眼兩顆一樣的主按鈕只差 80px） */
.dock { transition: transform .25s ease, visibility .25s; }
.dock.dock-wait { transform: translateY(110%); visibility: hidden; }

/* ── 第 22 輪：第 21 輪評審（夜燈 49）點名的地方 ── */
/* 電腦版預約帶：照片用原本的亮度，只在左邊留一段過渡漸層讓字讀得清楚（夜燈評審：招牌最亮只到 138／255，同一張照片在關於頁是 246） */
@media (min-width: 900px) {
  .band-photo .band-bg { opacity: 1; }
  .band-photo .band-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 38%); }
}
/* 交通頁三步驟也用首頁的路線畫法（夜燈評審：最該用路線畫法的交通頁反而是三個三角形）；這一組永遠是直的 */
.process-col.process-route li, .process-col.process-route li + li, .process-col.process-route li:last-child { border: 0 !important; }
.process-col.process-route .p-n { width: 40px !important; height: 40px !important; }
.process-col.process-route li:last-child .p-n { width: 46px !important; height: 40px !important; }
.process-col.process-route li:not(:last-child)::after { left: 18px; right: auto; top: 62px; bottom: -10px; border-top-width: 0; border-left-width: 3px; }
/* 短的字（標題、說明、連結、報導標題）每一行長度平均分配，不讓一兩個字掉到最後一行（評審量到 25 處；上一輪的 pretty 對中文效果不夠） */
h1, h2, h3, figcaption, .text-link, .svc-item p, .svc-row2 .stack > p, .bio, .note-list p, .process p, .sec-aside, .press-item .q, .svc-notes li, .facts dd, .about-grid p, .lead { text-wrap: balance; }
/* 服務頁筆記連結改成整行的區塊，平均分行才管得到它；評論引言改回一般斷字，不再「詞放不下就硬拆」留下尾巴 */
.svc-notes .text-link { display: block; }
.quote blockquote { word-break: normal; text-wrap: balance; }
/* 預約步驟的路線畫成跟交通頁路線圖同一種筆觸（日間評審：細點線、實心三角，跟路線圖對不上）：
   米色路面上一顆顆古銅圓點，終點三角是米白底、黑色描邊；前兩步的黑圓點對應路線圖上的捷運站 */
:root { --road: #c9c3b6; --tri-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M23 2.5 L43.5 38 H2.5 Z' fill='%23fbf7ef' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.process-route li:not(:last-child)::after { border-width: 0 !important; border-radius: 6px; background: radial-gradient(circle, var(--accent) 0 2.6px, transparent 3px) 0 50% / 14px 12px repeat-x, var(--road); z-index: 0; }
.process-route .p-n { position: relative; z-index: 1; }
/* 終點三角用一張描邊三角圖當底（第一版用兩層三角疊出描邊，量對比的程式看不到上層，誤判成字跟底同色 1.00） */
.process-route li:last-child .p-n { clip-path: none; background: var(--tri-img) center / 100% 100% no-repeat; color: var(--ink); }
/* 文章段落最後幾個字黏在一起不拆行（build.js glue） */
.nw { white-space: nowrap; }
/* 手機寬度的文章標題改一般斷字＋平均分行（「詞不拆開」在窄螢幕放不下會硬拆，留下「髮？」「度」這種尾巴） */
@media (max-width: 599px) { .note h1, .note-list .note-title { word-break: normal; } }
@media (max-width: 899px) {
  .process-route li:not(:last-child)::after { left: 14px; width: 12px; top: 58px; bottom: -18px; background: radial-gradient(circle, var(--accent) 0 2.6px, transparent 3px) 50% 0 / 12px 14px repeat-y, var(--road); }
}
@media (min-width: 900px) {
  .process-route:not(.process-col) li:not(:last-child)::after { top: 34px; height: 12px; left: 40px; right: -28px; }
  .process-route:not(.process-col) li + li:not(:last-child)::after { left: 68px; }
}
.process-col.process-route li:not(:last-child)::after { left: 14px; width: 12px; top: 56px; bottom: -16px; background: radial-gradient(circle, var(--accent) 0 2.6px, transparent 3px) 50% 0 / 12px 14px repeat-y, var(--road); }
/* 門牌、步行時間不拆行（日間評審：1024 寬「直接來昌吉街／83 號」）：產生網頁時把中間的空白換成不換行空白（build.js nbspBrand） */
/* 電腦版預約帶照片：上下兩邊也融進黑底，不留直線硬邊（日間評審：首頁夜景照上下是一條直線） */
@media (min-width: 900px) {
  .band-photo .band-bg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
}
/* 交通頁開頭按鈕：LINE 一顆佔滿寬，電話與導航兩顆等寬並排（日間評審：1440 寬導航單獨掉到第二列，三顆寬度不一） */
@media (min-width: 600px) {
  .page-first .split .btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
  .page-first .split .btn-row .btn { justify-content: center; text-align: center; }
  .page-first .split .btn-row .btn-big { grid-column: 1 / -1; }
}
/* 標題前的三角跟著標題大小等比例（日間評審：56px 頁標配最小的三角，34px 的預約與諮詢反而配大三角） */
.sec-title .tri, .page-first .sec-head .sec-title .tri { font-size: .6em; }
/* 平板服務三角放大，頂點的字不再只有 12px（日間評審：縮成畫面中間 300px 的窄欄） */
@media (min-width: 600px) and (max-width: 899px) { .tri-flow svg { max-width: 520px; } }
/* 關於頁報導標題加底線，看得出是連結（日間評審：全站其他連結都有底線，只有這 12 篇沒有） */
.press-item .q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
/* ── 第 23 輪：第 22 輪夜燈評審與四位研究員點名的地方 ── */
/* 按鈕滑過要看得出變化（研究員：舊規則只把 #865a31 換成 #845a31，肉眼看不出） */
.btn:hover { background: #6e4826; border-color: #6e4826; }
.btn-quiet:hover { background: rgba(134, 90, 49, .08); }
/* 專長改成一行字，不再是長得像按鈕、卻點不了的框框（研究員：可點與不可點要一眼分得出） */
.tags-line { margin: 0; font-size: 14px; color: var(--ink-soft); letter-spacing: .04em; }
/* 首頁預約三步驟三段等距（研究員量到一到二 387px、二到三 359px：第一格沒有左內距） */
@media (min-width: 900px) {
  .process-route:not(.process-col) li, .process-route:not(.process-col) li + li { padding-left: 0; padding-right: 28px; }
  .process-route:not(.process-col) li:not(:last-child)::after, .process-route:not(.process-col) li + li:not(:last-child)::after { left: 40px; right: 0; }
}
/* 手機與平板：預約帶開頭是照片時，不畫區塊交界的小缺口（夜燈評審：黑三角壓在照片上） */
@media (max-width: 899px) { .band-photo::before { display: none; } }
/* 首頁平板的服務三角跟服務頁一樣大（夜燈評審：首頁 768 只有 258px，頂點字 13px） */
@media (min-width: 600px) and (max-width: 899px) { .svc-home .tri-flow svg { width: 100% !important; max-width: 520px !important; } }
/* 短的字只在標點或詞與詞之間換行（兩位評審與研究員：「設計／師」「橘／黃」「目／前」被拆開；平均分行會切在詞中間）
   放不下的長句才退回任意位置斷（overflow-wrap: anywhere） */
.bio, .tags-line, .process p, .process h3, .svc-item p, .svc-item h3, .svc-row2 .stack > p, .svc-row2 h2, .sec-aside, .note-list .note-title, .note-list p, .svc-notes a, .press-item .q, .quote blockquote, .about-grid p, .lead, .hero-sub span, .facts dd, .band .stack p, figcaption { word-break: keep-all; overflow-wrap: anywhere; }
/* 相鄰兩個全形標點，前一個收成半形寬（研究員：「當下」，、挑剔。」各空出一整個字寬；clreq 6.3.2.2） */
.pt { font-feature-settings: "halt"; }
/* 全站正文只在詞與詞之間、或標點後面換行：詞界由 build.js 用中文斷詞器放好 <wbr>；整個詞比一行還長才退回任意位置斷 */
main { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 599px) { .note h1, .note-list .note-title { word-break: keep-all; } }
/* 店名、門牌、步行時間整段不換行 */
.nb { white-space: nowrap; }
/* 服務四項改成路上的四站：每一站是一盞小燈箱（跟預約步驟的終點同一個三角），裡面一個字；站與站之間是同一條米色路面加古銅圓點 */
.svc-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.svc-route > li { position: relative; padding: 2px 0 30px 64px; }
.svc-route > li:last-child { padding-bottom: 0; }
.svc-route .svc-mark { position: absolute; left: 0; top: 0; z-index: 1; width: 46px; height: 40px; display: grid; place-items: end center; padding-bottom: 4px; background: var(--tri-img) center / 100% 100% no-repeat; color: var(--ink); font: 500 15px var(--serif); line-height: 1; }
.svc-route > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; width: 12px; top: 40px; bottom: 0; border-radius: 6px; background: radial-gradient(circle, var(--accent) 0 2.6px, transparent 3px) 50% 0 / 12px 14px repeat-y, var(--road); }
.svc-route h3, .svc-route h2 { margin: 6px 0; font-size: 21px; }
.svc-route h3 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.svc-route p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.svc-route-page > li { padding-bottom: 46px; }
/* 第 24 輪：站點燈箱放大、字離底邊遠一點（評審：燈箱裡的字約 13px、貼著三角底邊，有點擠）；路面跟著置中 */
.svc-route > li { padding-left: 74px; }
.svc-route .svc-mark { width: 54px; height: 47px; padding-bottom: 7px; font-size: 18px; }
.svc-route > li:not(:last-child)::after { left: 21px; top: 47px; }
/* 服務頁跟首頁同一個排法：1280 以上左邊三角、右邊四站；三角在捲動時停在畫面上（自己檢查：原本四站擠在左邊，右半邊空了約 1000px 高） */
@media (min-width: 1280px) { .svc-split .tri-flow { position: sticky; top: 120px; } }
.svc-route-page h2 { font-size: 24px; }
/* 空間改成五條直條（研究員：Granhand 用直條把品質不一的照片排成一組；直條也延續直式招牌的軸線），標籤直排在左上 */
.strips5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px; height: min(62vh, 560px) !important; }
.strips5 figure { position: relative; margin: 0; min-width: 0; height: 100%; }
.strips5 .grade { height: 100%; aspect-ratio: auto !important; }
.strips5 img { width: 100%; height: 100%; object-fit: cover; }
.strips5 figure:nth-child(1) img { object-position: 30% 60%; }
.strips5 figure:nth-child(2) img { object-position: 40% 55%; }
.strips5 figure:nth-child(3) img { object-position: 52% 50%; }
.strips5 figure:nth-child(4) img { object-position: 45% 60%; }
.strips5 figure:nth-child(5) img { object-position: 55% 60%; }
.space-strip.strips5 figcaption { display: block; position: absolute; left: 10px; top: 10px; right: auto; bottom: auto; padding: 10px 6px; background: rgba(241, 241, 239, .94); color: var(--ink); writing-mode: vertical-rl; font: 500 15px var(--serif); letter-spacing: .22em; text-shadow: none; pointer-events: none; }
@media (max-width: 759px) {
  .strips5 { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
  .strips5 figure, .strips5 .grade { height: 128px; }
}
/* 手機與平板的預約帶照片：上下邊也融進黑底（日間評審：照片頂端純黑接區段底色，有一條全寬接縫） */
@media (max-width: 899px) {
  /* 第 24 輪：只有上面接深色區塊（首頁的空間區）時照片上緣才淡出；子頁上面是淺色區塊，淡出會露出一條深色帶（評審：淺色接深色硬邊） */
  .band-photo .band-bg { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .space-block + .band-photo .band-bg { -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 82%, transparent); }
}
/* 交通頁路線圖在電腦上不要放太大（研究員：1440 寬地圖字 18–22px，比旁邊 15px 的步驟還大） */
@media (min-width: 900px) { .visit-route { max-width: 400px; margin-inline: auto; } }
/* 第 24 輪：交通頁電腦版上排「左步驟＋按鈕、右路線圖」，路線圖貼齊頁面右緣（評審：置中後三個框左右緣都不對齊）；
   門口燈箱照移到兩欄下面、整個寬度的一條橫幅（評審：右欄路線圖下面整塊空的）。平板路線圖限寬，字不比步驟標題大 */
@media (min-width: 900px) {
  .visit-route { margin-left: auto; margin-right: 0; }
  .visit-door { margin-top: clamp(48px, 5vw, 72px); }
  .visit-door .grade { aspect-ratio: 12 / 5; }
  .visit-door img { object-position: 50% 0%; }
}
@media (min-width: 600px) and (max-width: 899px) { .visit-route { max-width: 400px; } .visit-door .grade { aspect-ratio: 16 / 8; } }
/* 手機的交通頁、個人頁：開頭那組按鈕一顆一行、同寬（評審：三顆按鈕寬度不一，掃視時有點亂） */
@media (max-width: 599px) {
  .page-first .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .page-first .btn-row .btn { justify-content: center; text-align: center; }
}
.st-row .name, .profile h1, .founder-name { letter-spacing: .02em; }
/* 筆電寬度（1200 以上）設計師列：文字欄至少 240px、作品欄最多 600px（評審：1200 寬文字欄只剩 64px，按鈕和字溢到作品照上） */
@media (min-width: 1200px) { .st-row:not(.st-any) { grid-template-columns: 160px minmax(240px, 1fr) minmax(0, 600px); } }
/* 「不確定找誰」那句可以點，直接跳到「不指定」（評審：手機上提示跟選項相隔將近三個畫面） */
#st-any { scroll-margin-top: 88px; }
/* 全站只用一種黑：首屏左欄、不指定、空間、預約帶、頁尾、手機底部列（評審量到三種近黑，空間接預約帶有一條色差縫） */
:root { --black: #000; }
.hero, .dock, .any-box, .st-row.st-any, .space-block, .band { background-color: var(--black); }
/* 頁尾：三欄各一件事（店的資訊／頁面／聯絡與社群），連結一行一個（評審：3×2 連結間距不一，看起來像網站地圖） */
.foot-nav, .foot-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: start; align-content: start; }
.foot-nav a, .foot-links a { padding-block: 7px; }
/* 空間照片圖說：底下的漸層加深（評審量到「靠窗座位」壓到地板反光，字的對比不到 4.5） */
.space-strip figcaption { background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, 0) 100%); }
/* 平板服務頁：三角圖跟下面的清單一起置中（評審：768 寬三角偏左、清單置中，兩個中心差 80px） */
@media (max-width: 899px) { .tri-flow svg { display: block; margin-inline: auto; } }

/* ── 第 23 輪：排版研究員那份報告裡查證過的四條（放在最後，蓋過前面同名規則）── */
/* 瀏覽器不准自己描粗、描斜（筆記粗體要 700，網站只下載黑體 400／500，實測是硬描出來的假粗體，筆畫糊在一起；Apple 台灣全站也這樣設） */
body { font-synthesis: none; }
/* 11-10 上線前（字型瘦身後）：關掉 Chrome 內建的「相鄰標點自動擠半格」（text-spacing-trim 預設會擠），只留我們自己的 .pt 規則。
   瘦身後的字型讓 Chrome 這個功能開始生效，疊在 .pt 上面，「、「」這種組合兩個都被擠成半格、中間沒空隙（乾淨自審量到 2 處）；
   Safari 不支援這個屬性，不受影響。 */
body { text-spacing-trim: space-all; }
/* 筆記條列開頭的小標題（「第一，受損程度。」）用已下載的明體 600，跟頁面標題同一套字 */
.prose strong { font-family: var(--serif); font-weight: 600; }
/* ↑ 第 24 輪改回黑體 700（這輪起真的下載 700）：明體 600 筆畫細，量起來墨色只有內文的 0.93 倍，看不出是小標（評審） */
.prose strong { font-family: inherit; font-weight: 700; }
/* 長段落（筆記內文、關於頁）回到繁中慣例：字與字之間都能換行、左右排齊（clreq 6.2）。
   只在詞與詞之間換行，右邊會參差到 3 個字寬（研究員實測手機 52px）；詞界換行只留給標題與短說明。參考來源有網址，不排齊 */
.prose p:not(.ref), .prose li, .about-grid p { word-break: normal; text-align: justify; text-wrap: pretty; }
/* 第 24 輪：關於頁那段（店主原文）改回只在詞與詞之間換行、靠左：評審每輪都看這頁，字字可斷會出現「怎／麼整理」「人情／味」；
   段落短，靠左的參差不明顯。筆記全文維持書本排法（只在詞界斷再排齊，手機最鬆一行每字撐開 12.8px，實測不可行） */
.about-grid p { word-break: keep-all; text-align: start; }
/* ↑ text-wrap 一定要蓋回 pretty：關於頁段落原本設 balance（每行長度平均分配、每行都比欄寬短），
   再加左右排齊，瀏覽器會把每行硬撐到全寬，字距被拉開成「在 這 座 城 市」（第 23 輪部署後自己截圖抓到） */
/* 引言開頭的「往左收半格：括號左半邊本來就是空白，不收的話引言看起來比署名往右縮（clreq 6.3.2.3；全站引言都由程式加「」） */
.quote blockquote { text-indent: -.5em; }
/* 首屏字標照門口招牌：當／THE MOMENT／下 上下等距，中文不要比英文大太多，1200 以上英文兩側加招牌上那兩條細線（研究員量店門照片：上下間距 10px 對 10.5px） */
.wm { row-gap: .34em; }
.wm-zh { font-size: 1.2em; }
.wm-en { letter-spacing: 0; margin-right: 0; text-box: trim-both cap alphabetic; margin-block: .1em -.1em; }
.wm-en-t { letter-spacing: .24em; margin-right: -.24em; white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1200px) {
  .wm-en { display: flex; align-items: center; gap: .7em; }
  /* 字標照自己的完整寬度排（文字欄會跟著撐寬）；細線預設跟招牌一樣長（1.6em），空間不夠時自己縮短、最短半個字寬 */
  .wm { width: max-content; }
  .wm-en::before, .wm-en::after { content: ""; width: 1.6em; flex: 0 1 auto; min-width: .5em; height: 1px; background: currentColor; opacity: .75; }
}
/* 1416 以上文字欄跟著頁面容器往右推（左緣＝(100vw−1320)/2+48），照片框從 36.4vw 開始（實測 1200／1440／1920 三點都是 36.4%）。
   字標右端最多伸進照片框 50px（那段仍是全黑淡出區；1920 寬伸進 129px 時右邊細線被照片蓋掉）：
   寬度上限＝36.4vw＋50 −〔(100vw−1320)/2＋48〕＝662px − 13.6vw；英文加兩個間距約 373px，
   所以每條細線＝(上限 − 373) ÷ 2 ≈ 144px − 6.8vw，最短半個字寬、最長跟招牌一樣 1.6em。
   （不靠瀏覽器自己縮：實測細線不肯縮、整排溢出外框，1920 寬照樣伸進照片 129px） */
@media (min-width: 1416px) {
  .wm-en::before, .wm-en::after { width: clamp(.5em, calc(144px - 6.8vw), 1.6em); flex: none; }
}
/* 第 24 輪：子頁標題列右端掛的三角燈箱（鐵臂從右邊伸出、燈箱底部停在標題細線上方，不往下壓到內容） */
/*   top 一定要歸零：區段標題在電腦版是「黏在畫面上、top: 96px」，改成相對定位後那 96px 會變成整個標題往下推、疊到說明文字上（自己截圖抓到）。
     子頁開頭的標題佔滿整列，本來就黏不住，歸零沒有可見差別 */
.page-first .sec-head { position: relative; top: auto; }
/*   吊桿往上畫 600px，超出開頭區塊的部分剪掉，看起來就是從選單列底下垂下來（overflow: clip 不會讓裡面「跟著捲動停住」的東西失效） */
.page-first { overflow: clip; }
.hang { position: absolute; right: 16px; bottom: 4px; width: 60px; pointer-events: none; }
.hang::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 6px); width: 1.5px; height: 600px; margin-left: -.75px; background: var(--ink); }
.hang svg { display: block; width: 100%; height: auto; overflow: visible; }
.hang .face { fill: #fbf7ef; stroke: #000; stroke-width: 2.8; stroke-linejoin: round; }
.hang text { fill: #000; font: 500 19px var(--serif); }
@media (min-width: 900px) {
  .hang { right: 28px; bottom: 16px; width: clamp(80px, 8vw, 116px); }
}
/* 第 24 輪：設計師列的按鈕區固定兩行（自己看截圖：名字長短決定排法，Rita 是按鈕＋介紹同一行、Aniya／Sandy 是按鈕自己一行），
   第一行預約按鈕、第二行「看介紹」「IG 作品」，三位一樣；平板也一樣（評審：768 寬三個連結各佔一行、右邊空一大塊）；手機維持一個一行 */
@media (min-width: 600px) {
  .st-row:not(.st-any) .acts { display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 22px; row-gap: 12px; }
  .st-row:not(.st-any) .acts .btn { grid-column: 1 / -1; justify-self: start; }
}
/* 第 24 輪：手機與平板的服務三角圖，角上只標 1、2、3，中間留「當下」；步驟名和說明只在下面清單講一次（評審：名字在圖上講一次、清單又講一次） */
@media (max-width: 899px) {
  .tf-svgl text:not(.tf-c) { display: none; }
  .tf-num { display: inline; }
}
/* 第 24 輪：平板另外排（評審：768 寬像手機拉寬）：左右留白 36px（首屏文字跟著對齊），服務三角圖和清單左右並排 */
@media (min-width: 600px) and (max-width: 899px) {
  .wrap { padding-left: max(36px, env(safe-area-inset-left, 0px)); padding-right: max(36px, env(safe-area-inset-right, 0px)); }
  .hero-text { padding-left: 36px; padding-right: 36px; }
  .tri-flow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 36px; align-items: center; }
  .tri-flow svg, .svc-home .tri-flow svg { grid-column: 1; grid-row: 1 / span 3; width: 100% !important; max-width: 300px !important; margin: 0 !important; }
  .tri-flow .tf-pt { grid-column: 2; }
  .tri-flow .tf-center { display: none; }
}
/* 首屏地址、營業時間、捷運那幾行只佔字的長度：字標變寬會把整欄撐寬，原本每一行的外框跟著拉到照片底下（1400–1600 寬檢查程式判成被蓋） */
.hero-sub { justify-items: start; }

/* ── 第 25 輪：三角只留給招牌、站點、終點；黑就是黑；筆記不撐字距 ── */
/* 區塊交界的三角缺口全部拿掉（日間評審：跟標題前的 ▲ 一樣只是裝飾，會稀釋招牌、服務站、預約終點、路線圖上那幾個有意義的三角）。
   區塊之間靠深淺底色交替分開。同一輪：近黑色（#141615、#0e0f0e、#1b1d1c 和它們的半透明版）全部換成真的黑（官方反例第 5 條：用帶色的近黑代替黑） */
.block-tint::before, .band::before, .block-tint + .block:not(.block-tint)::before { content: none; display: none; }
/* 筆記小標前的小三角也是裝飾，拿掉 */
.prose h2::before { content: none; display: none; }
/* 筆記內文：跟全站一樣只在詞與詞之間換行、靠左，不再左右排齊。
   排齊時為了湊滿一行會把字距撐開（夜燈評審在 360 寬量到 16 行、最鬆每字多 6.3px，段落第一行也有）；靠左就不撐字，詞也不會被拆在兩行 */
.prose p:not(.ref), .prose li { word-break: keep-all; text-align: start; }
/* 關於頁結尾那盞燈箱只在夜燈版出現（日間版結尾是窗邊座位照） */
.band-lamp { display: none; }
/* 寬螢幕首屏（1600 以上）：照片從「文字欄左緣＋字標全寬＋間距」之後才開始，字標兩側細線固定跟招牌同比例（1.6em）。
   夜燈評審：1920 寬細線縮成約 18px 像破折號，2560 寬右邊那條被照片蓋住（自己量：2240 伸進 9px、2560 伸進 40px）。
   原因：文字欄跟著頁面中間對齊往右移，照片卻照螢幕比例從 36.4vw 開始，越寬越擠。
   照片斜邊在字標高度的位置約等於欄界（斜邊多出的 9% 跟往左伸的 6% 幾乎抵銷，量過）；照片是直幅（寬高比 0.73），欄寬變窄只會上下多露、不會左右裁到店面 */
@media (min-width: 1600px) {
  .hero { grid-template-columns: max(40%, calc((100vw - 1320px) / 2 + 48px + 520px)) minmax(0, 1fr); }
  .wm-en::before, .wm-en::after { width: 1.6em; }
}
/* 子頁吊燈的位置（日間評審 r24：吊桿離正上方的按鈕差 15–17px，看起來像沒對好）：
   電腦版正對頁首「LINE 預約諮詢」按鈕的中心：按鈕固定 140px 寬、右緣跟標題列右緣是同一條線（量過 900／1024／1280／1440／1920 都是）；
   手機平板放在頁首店名右緣和選單按鈕左緣的正中間（店名寬 203px；360 以下店名 156px） */
/*   按鈕原本自然寬 140.1px；第一版固定 140px 少了 0.1px，字折成兩行、頁首從 69 長到 95px（寬度掃描 504 處，自己抓到）⇒ 固定 144px＋不准折行 */
@media (min-width: 900px) {
  .nav-book { width: 144px; white-space: nowrap; box-sizing: border-box; justify-content: center; }
  .hang { right: calc((144px - clamp(80px, 8vw, 116px)) / 2); }
}
@media (max-width: 899px) { .hang { right: calc(50% - 102px); } }
/* 第 31 輪：手機與平板不放頁首吊牌（日間評審 r30：600 以下吊線從頁首底線上沒有意義的位置垂下來；390、768 寬牌子裡的字因為太小早就藏起來，只剩空白三角） */
@media (max-width: 899px) { html:not(.night) .hang { display: none; } }
@media (max-width: 379px) { .hang { right: calc(50% - 79px); } }
/* 手機設計師列（日間評審 r24：頭像下面空了 189–234px，比頭像還高；預約按鈕擠在右邊 192px 窄欄）：
   頭像旁只放名字與專長；介紹、預約按鈕、兩個連結放在下面佔整欄寬，兩個連結同一行（跟平板、電腦同一種排法） */
@media (max-width: 599px) {
  .st-row:not(.st-any) { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: start; }
  .st-row:not(.st-any) > .stack { display: contents; }
  .st-row:not(.st-any) > .ph { grid-column: 1; grid-row: 1 / span 2; }
  .st-row:not(.st-any) .meta { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .st-row:not(.st-any) .tags-line { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .st-row:not(.st-any) .bio { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .st-row:not(.st-any) .acts { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 22px; row-gap: 12px; margin: 0; }
  .st-row:not(.st-any) .acts .btn { grid-column: 1 / -1; justify-self: start; }
  .st-row:not(.st-any) > .st-works { grid-column: 1 / -1; grid-row: 5; }
}
/* 平板服務三角（日間評審 r24：整組固定 500px 寬、置中，頁面其他東西都靠左；右邊說明欄只剩 164px，每條都折成兩行）：靠左、佔滿內容寬 */
@media (min-width: 600px) and (max-width: 899px) {
  .tri-flow, .svc-home .tri-flow { max-width: none; width: auto; margin-left: 0; margin-right: 0; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .tri-flow svg, .svc-home .tri-flow svg { max-width: 260px !important; }
}
/* 預約帶 900–1199 寬（夜燈評審 r24 逐字量：「設計師會回覆建議、價格」那幾個字壓在照片的白色招牌上，對比只有 1.1–2.3；
   日間首頁用同一張照片也會中）：文字欄右緣停在照片框左緣之前（照片框從 45% 開始、左邊先淡出），字底下永遠沒有照片 */
/*   band-check.js 對照第 24 輪：900–1200 每 20px × 8 頁共 112 處字跑進照片框，最多 251px；1200 以上也跑進 116px，所以電腦版所有寬度都套。
     欄寬＝照片框左緣（45vw）−頁面左邊留白 − 16px；頁面左邊留白 1416 以下是 48px，以上是 (100vw−1320)/2＋48 */
@media (min-width: 900px) { .band-photo .band-in { grid-template-columns: minmax(0, min(620px, calc(45vw - 64px))); } }
@media (min-width: 1416px) { .band-photo .band-in { grid-template-columns: minmax(0, calc(596px - 5vw)); } }
/* 設計師個人頁的名字大標在手機平板跟其他子頁大標同一級（評審：768 寬是 30px，其他子頁 38.4px） */
@media (max-width: 899px) { .profile h1 { font-size: clamp(30px, 5vw, 48px); } }

/* ── 第 26 輪 ── */
/* 照片右下角的斜切角全部拿掉（夜燈評審 r25：首頁就有 12 個，跟拿掉的標題 ▲、區塊缺口是同一類裝飾，稀釋了「三角＝燈箱」）；
   「不指定」方塊、IG 方塊、專長標籤的切角一起拿掉。畫面上的三角只剩燈箱、站點、終點、路線圖、當下流程圖 */
.cut, .any-box, .st-ig, .tags li { clip-path: none; }
/* 手機的「當下」三角流程圖跟內容左緣對齊（夜燈評審 r25：固定 300px 寬置中，左緣 x=45，同一區其他東西都在 x=20） */
@media (max-width: 599px) {
  .tri-flow, .svc-home .tri-flow { max-width: none; margin-left: 0; margin-right: 0; }
  .tri-flow svg { margin-left: 0 !important; margin-right: auto !important; }
}
/* 平板交通頁的路線圖靠左（夜燈評審 r25：固定 400px 置中，左緣 x=184，同頁其他東西都在 x=36）；寬度維持 400，字才不會比步驟標題大 */
@media (min-width: 600px) and (max-width: 899px) { .visit-route { margin-left: 0; margin-right: auto; } }
/* 大字片段（build.js 的 ph()：引言、筆記標題、報導標題）：標點之間整段放得下就不拆，比一整行還長才在片段裡換行。
   text-indent 一定要歸零：引言開頭「往左收半格」是設在整段上的，會被每個片段繼承，每段都往左縮 */
.seg { display: inline-block; text-indent: 0; }
/* 報導標題是有底線的連結：片段包成 inline-block 後，連結的底線不會延伸進去，自己畫 */
.press-item .seg { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
/* 日間版小燈箱照門口實物畫（日間評審 r25：粗黑框三角加一個字像警告標誌，「燙」會讀成「小心燙」）：
   暖白燈面、深色字、細淺灰邊表現燈箱的厚度，加一點落在牆上的影子；夜燈版在 night.css 另外改成亮著的燈面 */
:root { --tri-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M23 2.5 L43.5 38 H2.5 Z' fill='%23fffdf7' stroke='%23b9b4a8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svc-route .svc-mark, .process-route li:last-child .p-n { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .16)); }
.hang .face { fill: #fffdf7; stroke: #b9b4a8; stroke-width: 1.6; }
.hang .lamp { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); }
.visit-route .rt-lamp { filter: url(#rt-shadow); }
/* 服務四站不用點點軌道串起來（日間評審 r25：剪、染、燙、護是並列的選項，串成軌道會讀成要依序走完）；軌道只留給預約三步和步行路線 */
.svc-route > li:not(:last-child)::after { display: none; }
/* 平板吊燈正對頁首「選單」按鈕的中心（日間評審 r25：768 寬吊燈飄在頁面中間、沒靠著任何東西；電腦版對 LINE 按鈕、手機版靠近大標）。
   選單按鈕 58px 寬貼著標題列右緣，吊燈 60px 寬 ⇒ 往右 1px 就同一條中線 */
@media (min-width: 600px) and (max-width: 899px) { .hang { right: -1px; } }
/* 作品照放大框也是純黑（日間評審 r25：rgb(15,16,15)，「黑就是黑」漏掉的一處） */
.lightbox { background: #000; }

/* ── 第 27 輪 ── */
/* 引言開頭的「只讓這一個字往左懸掛半格；整段的首行縮排歸零（片段是 inline-block，整段縮排會把第一段片段的每一行都往左推出內容邊界） */
.quote blockquote { text-indent: 0; }
.q-open { margin-left: -.5em; }
/* 首屏評分改成跟地址、營業時間同一級的一行小字（日間評審 r26：「4.9」大數字配小標籤是官方點名的首屏預設做法） */
.hero-rate .hr-score { font: inherit; font-weight: 500; }
/* 手機平板的小吊燈不放字（日間評審 r26：60px 寬的燈箱裡「當下」只有約 8px 高，看起來像一團雜點）；電腦版照舊 */
@media (max-width: 899px) { .hang text { display: none; } }
/* 服務頁「作品」：品牌做出來的樣子（不寫名字），3×3；電腦版每張 240px 寬（第 28 輪：日間評審 r27 說 9 張一排每張約 111px 像索引縮圖，撐不起品牌美感） */
.works-brand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* 第 29 輪：電腦版改成跟設計師個人頁同一套欄寬（三欄填滿、間距 20px）；日間評審 r28：固定 240px 在 1440 寬右邊空出約 330px */
@media (min-width: 900px) { .works-brand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* 片段包在有底線的連結裡時，底線要畫在每個片段上（inline-block 不會延續外層連結的底線；日間評審 r27：服務頁 6 個筆記連結底線不見） */
.text-link .seg { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.works-brand .work .grade { aspect-ratio: 4 / 5; }

/* 店裡的實物變成面（研究員方案 C「木格櫃＋櫃檯」，色票從店內照片實際取色；只套日間版：夜燈版的 <html> 有 class="night"，這組規則碰不到）
   日間評審 r24／r25：底層配色離官方反例第 1 型很近（淺色底＋高對比明體＋棕色點綴）；拿 10 分要讓橡木、蕨類綠、燈箱暖白成為刻意用上的面，而不只是一顆棕色按鈕。
   分工：白牆＝預設底；灰橡（木格櫃）＝「架上有什麼」的區塊（服務、髮況筆記）；黑＝夜裡的街（首屏左欄、空間、預約帶、頁尾）；
         燈面白＝亮著的燈與暗底上的主要按鈕；蕨類深綠（櫃檯的生態缸）＝「問櫃檯」的地方（不指定、手機底部列）。
   跟研究員原案不同處：頁尾維持黑色（空間、預約帶、頁尾連成一整段夜街，不在黑色預約帶下面突然接一塊綠） */
html:not(.night) {
  --lamp-face: #fbf7ef;
  --shelf: #c8bcad;        /* 木格櫃抽屜面實測 #b49c86（shelves.webp 764,738），提亮、降彩度 */
  --shelf-board: #836f5e;  /* 木格櫃側板實測（shelves.webp 980,509） */
  --shelf-ink: #4b3829;    /* 木格櫃格內陰影實測 #51392e 再壓深 */
  --shelf-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'640'%20height%3D'640'%3E%3Cfilter%20id%3D'w'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20filterUnits%3D'userSpaceOnUse'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.004%200.11'%20numOctaves%3D'4'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.32%200%200%200%200%20.25%200%200%200%200%20.19%200.576%200%200%200%20-0.252'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  --leaf: #334b2f;         /* 櫃檯生態缸的葉片綠（counter.webp 170,800 實測 #5e8b52）壓深到明度 38 */
  --accent: var(--shelf-ink);  /* 小字、站點、三角線：古銅改深橡，棕色只以「面」出現 */
}
/* 按鈕不再是古銅色：亮底＝黑鐵（鏡框、剪髮椅的黑）配燈面白字；暗底＝亮著的燈面配黑字 */
html:not(.night) .btn { background: #000; border-color: #000; color: var(--lamp-face); }
html:not(.night) .btn:hover { background: #3a3d3b; border-color: #3a3d3b; }
html:not(.night) .btn-quiet { background: transparent; color: inherit; border-color: currentColor; }
html:not(.night) .btn-quiet:hover { background: rgba(0, 0, 0, .06); }
html:not(.night) .nav-book { background: #000 !important; color: var(--lamp-face) !important; }
html:not(.night) .hero .btn:not(.btn-quiet), html:not(.night) .band .btn, html:not(.night) .st-any .btn { background: var(--lamp-face); border-color: var(--lamp-face); color: #000; }
html:not(.night) .hero .btn:not(.btn-quiet):hover, html:not(.night) .band .btn:hover, html:not(.night) .st-any .btn:hover { background: #fff; border-color: #fff; box-shadow: 0 0 18px rgba(251, 247, 239, .35); }
html:not(.night) .hero .btn-quiet:hover { background: rgba(255, 255, 255, .08); }
html:not(.night) .dock a:first-child { background: var(--lamp-face); color: #000; }
/* 深色面上的鍵盤焦點框一律燈面白（深橡在黑底、深綠底上看不清楚） */
html:not(.night) .hero :focus-visible, html:not(.night) .band :focus-visible, html:not(.night) .site-foot :focus-visible, html:not(.night) .dock :focus-visible, html:not(.night) .st-any :focus-visible, html:not(.night) .space-block :focus-visible, html:not(.night) .lightbox :focus-visible { outline-color: var(--lamp-face); }
/* 首屏的評分與頁首店名前的三角：最後兩處古銅點綴，改成燈面白（暗底）與黑鐵（亮底） */
html:not(.night) .hero-rate .hr-score, html:not(.night) .hero-rate .hr-stars { color: var(--lamp-face); }
html:not(.night) .brand .tri { color: #000; }
/* 第 28 輪：木頭只給家具（日間評審 r27：滿版木紋七處、像整面牆貼了一張木紋紙，跨頁看起來是「隔一段換一次木紋」的斑馬紋；
   拿 10 分要「只有架上的東西是木頭，其他段落回到牆面；木紋只畫在層板、側板這些板材上」）
   ⇒ 段落底色回到牆（白牆、淺灰牆，平塗）；木頭只出現在三件家具：筆記＝木格櫃（每篇一格）、報導＝書櫃、問答＝抽屜
   木格櫃照空間照那張實物：板材亮（有木紋）、格子暗（平塗＋上緣陰影） */
/* 第 29 輪：三件家具做成同一組木櫃（日間評審 r28：筆記櫃像「沙色紙板隔成四格」：層板 8px 太薄、木紋是整片墊在底下沒順著板子走、
   格子偏黃；抽屜櫃外框是深色，三件不像同一組）
   ⇒ 同一種灰橡板材（抽屜面那個顏色）：外框 18px、層板與隔板 16px（手機 12／10）；
      橫的板（頂板、底板、層板）木紋橫走＝櫃體底色；直的板（左右側板、同一層兩格中間的隔板）木紋直走＝另外畫上去的板；
      格子＝同一塊木頭在陰影裡（同色系壓暗、上緣有上一層板的陰影、左右側微暗、下緣是層板頂面的一道亮）；整件櫃子下緣一道底座與落地陰影 */
html:not(.night) {
  --board: var(--shelf);
  --cell: #b5a99a;
  --cell-shadow: rgba(48, 36, 26, .62);
  --fr: 18px; --bd: 16px;
  --grain-h: var(--shelf-grain);
  --grain-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'640'%20height%3D'640'%3E%3Cfilter%20id%3D'w'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20filterUnits%3D'userSpaceOnUse'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.11%200.004'%20numOctaves%3D'4'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.32%200%200%200%200%20.25%200%200%200%200%20.19%200.576%200%200%200%20-0.252'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
}
@media (max-width: 899px) { html:not(.night) { --fr: 12px; --bd: 10px; } }
html:not(.night) :is(.note-list, .press.shelf, .faq) { position: relative; border: 0; gap: var(--bd); padding: var(--fr); background: var(--grain-h) 0 0 / 640px 640px, var(--board); box-shadow: 0 3px 0 #8d7c6b, 0 18px 24px -16px rgba(0, 0, 0, .4); }
html:not(.night) :is(.note-list, .press.shelf, .faq)::before, html:not(.night) :is(.note-list, .press.shelf, .faq)::after { content: ""; position: absolute; top: var(--fr); bottom: var(--fr); width: var(--fr); background: var(--grain-v) 0 0 / 640px 640px, var(--board); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(60, 44, 32, .18); pointer-events: none; }
html:not(.night) :is(.note-list, .press.shelf, .faq)::before { left: 0; }
html:not(.night) :is(.note-list, .press.shelf, .faq)::after { right: 0; }
/* 格子：同一塊木頭在陰影裡 */
html:not(.night) .note-list > li, html:not(.night) .press.shelf .cubby { position: relative; border: 0; background: var(--cell);
  box-shadow: inset 0 26px 22px -18px var(--cell-shadow), inset 10px 0 12px -10px rgba(48, 36, 26, .3), inset -10px 0 12px -10px rgba(48, 36, 26, .3), inset 0 -3px 0 rgba(255, 255, 255, .14); }
html:not(.night) .note-list > li { --ink-soft: #2a2b2a; --accent: #34261b; }  /* 第 31 輪：格子裡 13px 的分類與閱讀時間對比 4.6–4.8 → 約 6.3（r30：過門檻但不寬裕） */
html:not(.night) .note-list a { padding: 28px 24px 26px; }
@media (max-width: 599px) { html:not(.night) .note-list a { padding: 24px 18px 22px; } }
/* 同一層左右兩格中間的隔板：畫在左邊那一格的右側（首頁 2×2；筆記頁第一篇橫跨兩欄，之後兩兩一層）；落單的最後一篇橫跨兩欄，不留空格子 */
@media (min-width: 900px) {
  html:not(.night) .note-grid:not(.feature-first) > li:nth-child(odd):not(:last-child)::after,
  html:not(.night) .note-grid.feature-first > li:nth-child(even):not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--bd); background: var(--grain-v) 0 0 / 640px 640px, var(--board); pointer-events: none; }
  html:not(.night) .note-grid:not(.feature-first) > li:last-child:nth-child(odd), html:not(.night) .note-grid.feature-first > li:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* 蕨類深綠＝櫃檯的生態缸：「不指定」（交給櫃檯安排）與手機底部列 */
html:not(.night) .st-row.st-any { background-color: var(--leaf); }
html:not(.night) .dock { background-color: var(--leaf); }
html:not(.night) .dock a { color: var(--lamp-face); border-right-color: rgba(251, 247, 239, .16); }
/* 交通頁步行路線跟著換深橡（路線圖嵌在頁面裡，顏色寫在檔案裡，用 class 蓋過去） */
html:not(.night) .visit-route .route-line { stroke: var(--shelf-ink); }

/* ── 第 28 輪 ── */
/* 黑白人像滑過變彩色（凱 11-09：「設計師照片鼠標移去可以變彩色更動動可以保留」；舊的設計師卡片有這條，現在的設計師列沒有套到）
   滑鼠移上去或鍵盤選到：慢慢轉回彩色、微微放大（照片框本身會裁掉超出的部分）；開「減少動態」只變色不放大；手機沒有滑鼠，維持黑白 */
.st-row .ph img, .ph-portrait img { transition: filter .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.st-row .ph:hover img, .st-row .ph:focus-visible img, .ph-portrait:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .st-row .ph img, .ph-portrait img { transition: none; }
  .st-row .ph:hover img, .st-row .ph:focus-visible img, .ph-portrait:hover img { transform: none; }
}
/* 技術稽核（研究員，第 26 輪預覽實測）：
   ① 手機平板用鍵盤時，焦點會藏在底部固定列下面（WCAG 2.2 的 2.4.11）：捲動時底部預留固定列的高度（研究員實測被蓋的焦點 6 個變 0 個）；底部列自己的焦點框往內畫 */
@media (max-width: 899px) { html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.dock a:focus-visible { outline-offset: -4px; }
/* ② 從首頁點服務名稱跳到服務頁，那一項的標題被黏在上方的頁首蓋住（標題頂端 y=8、頁首底邊 y=69）：跟「不指定」的錨點一樣預留 88px */
.svc-route li[id] { scroll-margin-top: 88px; }
/* ③ 作品照、空間照被鍵盤選到時看不出來（外框被照片外框的規則蓋掉、空間照的框被裁掉）：照片內側畫黑白雙圈，深色淺色照片都看得到 */
.work a.grade:focus-visible, .space-strip img:focus-visible { outline: none; }
.work a.grade:focus-visible::before, .space-strip .grade:has(> img:focus-visible)::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 3px #000, inset 0 0 0 6px #fff; }
/* ④ 問答的「＋／−」不讓讀屏念出來（無障礙名稱原本是「…設計師？ +」） */
summary::after { content: "+"; content: "+" / ""; }
details[open] summary::after { content: "−"; content: "−" / ""; }
.press-more summary::after { content: "＋"; content: "＋" / ""; }
/* 選單打開時後面的頁面不捲（site.js 的 setMenu 加 html.menu-open）；選單自己捲到底也不帶動後面 */
@media (max-width: 1099px) { html.menu-open { overflow: hidden; } .nav.open { overscroll-behavior: contain; } }
/* 報導＝木格櫃格子裡的一排書背（中段原創性研究員方案 A，build.js 的 pressShelf；只套日間版）
   第 29 輪：12 本改成 4 格 × 3 本（日間評審 r28：900–1279 兩格加一格通寬，第三格半空）。
   1280 以上四格一排、書背直排（每格約 214–228px，三本書背約 209px，像擺滿的一格）；
   640–1279 兩層兩格、書橫躺疊起來；639 以下一格一格往下疊 */
html:not(.night) .press.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 書櫃跟筆記木格櫃同一件家具（板材、格子的樣子寫在上面那組共用規則） */
html:not(.night) .press.shelf .cubby { display: flex; align-items: flex-end; justify-content: flex-start; gap: 4px; min-height: 530px; padding: 26px 10px 0; }  /* 最高那本 500px＋上方 26px＋留一點 */
@media (min-width: 1280px) { html:not(.night) .press.shelf .cubby:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--bd); background: var(--grain-v) 0 0 / 640px 640px, var(--board); pointer-events: none; } }
html:not(.night) .press.shelf .press-item { writing-mode: vertical-rl; flex: none; display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 60px; height: var(--h, 360px); padding: 16px 7px 0; border: 0;
  background: var(--bk, #fbf7ef); color: var(--ink-bk, #000); text-decoration: none; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .14), inset 2px 0 0 rgba(255, 255, 255, .22); transition: transform .18s ease; }
html:not(.night) .press.shelf .press-item:hover, html:not(.night) .press.shelf .press-item:focus-visible { transform: translateY(-12px); }
html:not(.night) .press.shelf .press-item:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
html:not(.night) .press.shelf .press-item .q { order: 1; font-family: var(--serif); font-size: 17px; line-height: 1.55; letter-spacing: .06em; text-decoration: none; color: inherit; }
html:not(.night) .press.shelf .press-item .q .seg, html:not(.night) .press.shelf .press-item:hover .q { text-decoration: none; }
html:not(.night) .press.shelf .press-item .vbar { text-combine-upright: all; }
/* 第 29 輪：站名不拆（日間評審 r28：直排書背上「甜蜜列車｜長 ACO」「米寶｜麻」被拆成兩行）；日期、站名放大到 13px；
   日期改成每本都一樣的白底細框小牌（上一輪淺色書的日期標籤跟書同色，看不出來） */
html:not(.night) .press.shelf .press-item .src { order: 2; margin-inline-start: auto; font-size: 13px; letter-spacing: .06em; white-space: nowrap; color: inherit; }
html:not(.night) .press.shelf .press-item .date { order: 3; writing-mode: horizontal-tb; align-self: stretch; margin: 0 -4px 6px; padding: 5px 2px; text-align: center;
  font: 500 13px/1 var(--serif); letter-spacing: 0; background: #fffdf7; color: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
@media (min-width: 640px) and (max-width: 1279px) {
  html:not(.night) .press.shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not(.night) .press.shelf .cubby:nth-child(odd)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--bd); background: var(--grain-v) 0 0 / 640px 640px, var(--board); pointer-events: none; }
}
@media (max-width: 1279px) {
  /* 第 30 輪：疊起來的書互相貼著（日間評審 r29：每本之間 4px 空隙透出格子底色，像三張懸空的卡片）；接觸處只剩書本身下緣那道細陰影 */
  html:not(.night) .press.shelf .cubby { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 0; min-height: 0; padding: 18px 12px 0; }
  /* 第 31 輪：站名跟日期牌放不下同一行時，日期牌換到下一行靠右（日間評審 r30：640–650 寬「女王的美妝保養殿堂」跟日期牌只隔 2px） */
  html:not(.night) .press.shelf .press-item { writing-mode: horizontal-tb; height: auto; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 12px; padding: 13px 14px; margin-inline: var(--l, 0) var(--r, 0); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .22); }
  html:not(.night) .press.shelf .press-item .q { flex: 1 0 100%; font-size: 16.5px; letter-spacing: .02em; text-wrap: pretty; }  /* 第 31 輪：平均分行讓中間一行只剩「燙髮、」（r30，640 寬） */
  html:not(.night) .press.shelf .press-item .src { flex: 0 1 auto; margin: 0; }
  html:not(.night) .press.shelf .press-item .date { margin: 0 0 0 auto; padding: 3px 7px; align-self: center; }
  html:not(.night) .press.shelf .press-item:hover, html:not(.night) .press.shelf .press-item:focus-visible { transform: translateX(6px); }
}
@media (max-width: 639px) { html:not(.night) .press.shelf { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html:not(.night) .press.shelf .press-item { transition: none; } }
/* 問答＝木格櫃最下面的抽屜（研究員方案 C）：題目寫在灰橡抽屜面上，上緣一道指槽；點開像拉開抽屜，下面露出淺色的抽屜內裡和答案（只套日間版）
   第 29 輪：外框改成跟另外兩件同一種亮的板材（日間評審 r28：抽屜櫃外框是深色，三件不像同一組）；抽屜面跟櫃體同一塊木頭，
   四周一道 3px 的深色縫（抽屜面跟櫃體之間看進去的暗處），抽屜之間隔一條橫檔；每個抽屜面的木紋各取一段，不會四片一模一樣 */
/* 第 30 輪（日間評審 r29：抽屜外圍 3px 實色描邊像「畫出來的框」，另外兩件是用光影做深度；鍵盤焦點框貼在描邊外側、看起來只是線變粗；
   打開時同一圈框裡瞬間長出一塊面板，是一般的展開清單換上木紋）
   ⇒ 抽屜面＝題目那一列：縫改成光影（上緣、左緣一道半透明的暗，下緣接一道亮），不畫實色框
   ⇒ 鍵盤焦點框畫在抽屜面內側 8px，跟縫分開
   ⇒ 打開＝拉出抽屜：抽屜面留在上面，下面露出抽屜盒（左右兩片側板直紋、盒底在抽屜面的陰影裡），答案是放在盒裡的一張紙卡；
      一般動態下抽屜盒從抽屜面底下滑出來，開「減少動態」直接是拉開的樣子 */
html:not(.night) .faq { max-width: 820px; display: grid; margin-top: 8px; }
html:not(.night) .faq details { position: relative; z-index: 1; border: 0; padding: 0; background: none; }
html:not(.night) .faq summary { position: relative; min-height: 78px; padding: 22px 26px 20px; color: #000; font-size: 18px;
  background: var(--grain-h) 211px 37px / 640px 640px, var(--board);
  box-shadow: 0 -2px 2px -1px rgba(40, 30, 22, .5), -2px 0 2px -1px rgba(40, 30, 22, .38), 1px 0 0 rgba(40, 30, 22, .14), 0 2px 0 rgba(255, 252, 245, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
html:not(.night) .faq details:nth-of-type(2) summary { background-position: 97px 301px, 0 0; }
html:not(.night) .faq details:nth-of-type(3) summary { background-position: 433px 158px, 0 0; }
html:not(.night) .faq details:nth-of-type(4) summary { background-position: 18px 472px, 0 0; }
html:not(.night) .faq summary:focus-visible { outline: 2px solid #000; outline-offset: -8px; }
html:not(.night) .faq summary::before { content: ""; position: absolute; top: 0; left: 50%; width: 92px; height: 10px; margin-left: -46px; background: linear-gradient(to bottom, var(--shelf-ink), #6b5545); border-radius: 0 0 5px 5px; }
html:not(.night) .faq summary::after { color: var(--shelf-ink); font-size: 20px; }
/* 拉開時抽屜面往前、在盒子上投一道影 */
html:not(.night) .faq details[open] summary { z-index: 1; box-shadow: 0 -2px 2px -1px rgba(40, 30, 22, .5), -2px 0 2px -1px rgba(40, 30, 22, .38), 1px 0 0 rgba(40, 30, 22, .14), 0 8px 10px -6px rgba(40, 30, 22, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
/* 抽屜盒：比抽屜面左右各窄 14px；左右兩片側板是透明邊框透出的直紋板材，盒底是同一塊木頭在陰影裡 */
html:not(.night) .faq .faq-tray { position: relative; margin: 0 14px; padding: 14px 14px 16px; border-inline: 10px solid transparent;
  background: linear-gradient(#a89c8e, #b3a798) padding-box, var(--grain-v) 0 0 / 640px 640px border-box, var(--board) border-box;
  box-shadow: inset 0 18px 16px -12px rgba(40, 30, 22, .6), 0 3px 0 rgba(40, 30, 22, .22); }
/* 答案＝放在抽屜裡的一張紙卡 */
html:not(.night) .faq .faq-tray p { margin: 0; padding: 16px 18px 18px; background: #f7f3eb; color: #2f312f; box-shadow: 0 1px 2px rgba(40, 30, 22, .3), 0 8px 12px -8px rgba(40, 30, 22, .45); }
/* 第 31 輪：拉開的動作改成高度跟著長（日間評審 r30：舊做法第 0 毫秒下面三格抽屜就整個跳下去 95px，盒子才在 0.4 秒內出現；關上時直接消失）
   抽屜內容的框（::details-content）從 0 長到原本高度，下面的抽屜跟著一起被推開；關上時同樣滑回去。
   不支援這個寫法的瀏覽器整條規則不生效，就是直接打開，不會壞；開「減少動態」沒有動作 */
html:not(.night) .faq { interpolate-size: allow-keywords; }
html:not(.night) .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s cubic-bezier(.2, .7, .2, 1), content-visibility .45s allow-discrete; }
html:not(.night) .faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { html:not(.night) .faq details::details-content { transition: none; } }
@media (max-width: 639px) {
  html:not(.night) .faq summary { padding: 22px 18px 18px; font-size: 17px; }
  html:not(.night) .faq .faq-tray { margin: 0 8px; padding: 10px 10px 12px; border-inline-width: 8px; }
  html:not(.night) .faq .faq-tray p { padding: 14px 16px 16px; }
}
/* 第 30 輪：交通頁 600–899 寬，路線圖跟門口照並排（日間評審 r29：路線圖固定 400px 靠左、右邊空 128–408px，下面的門口照卻是通寬）
   左邊怎麼走、右邊門口長什麼樣，兩張同高；步驟與按鈕照舊通寬在上面（外層 .split 讓出來，兩張圖直接排進 .sec-body 的兩欄） */
/* 第 31 輪：延伸到 1279（日間評審 r30：900–1279 寬左欄步驟＋三顆按鈕比右欄路線圖高 81–296px，右下空一個洞；步驟被擠到 290px 寬、每段折三行）
   路線圖 3 份寬、門口照 2 份寬（圖裡的字在最窄的 600 寬也有 13px），門口照拉到跟路線圖一樣高 */
@media (min-width: 600px) and (max-width: 1279px) {
  .sec-body:has(> .visit-door) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 16px; align-items: stretch; }
  .sec-body:has(> .visit-door) > .split { display: contents; }
  .sec-body:has(> .visit-door) > .split > .stack { grid-column: 1 / -1; margin-bottom: 24px; }
  .sec-body:has(> .visit-door) .visit-route { max-width: none; margin: 0; align-self: start; }
  .sec-body:has(> .visit-door) .visit-door { display: flex; flex-direction: column; margin: 0; }
  .sec-body:has(> .visit-door) .visit-door .grade { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; position: relative; }
  /* 照片不參與決定這一列多高（照原比例會把整列撐得比路線圖高），只填滿路線圖定下的高度 */
  .sec-body:has(> .visit-door) .visit-door .grade img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
/* 900–1279：路線圖固定 420px（再寬圖跟字都太大，1279 寬會到 611px、字 25px），門口照補滿剩下的寬度 */
@media (min-width: 900px) and (max-width: 1279px) { .sec-body:has(> .visit-door) { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
/* 「電話」「Google 地圖導航」並排、加起來跟 LINE 鈕一樣寬（r30：834 寬兩顆只到三分之二寬；1280 以上左欄因此少一列、跟路線圖齊）
   第 31 輪驗證：400–452 寬兩顆的字會折成兩行（實量 454 起才排得下），所以從 480 起才並排，留字型載入前後的差 */
@media (min-width: 480px) {
  .sec-body:has(> .visit-door) .btn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .sec-body:has(> .visit-door) .btn-row > .btn-big { grid-column: 1 / -1; }
  .sec-body:has(> .visit-door) .btn-row > .btn { width: auto; margin: 0; justify-content: center; text-align: center; }
}
/* 設計師名字改成標題（build.js stylistRows 的 name-h）：標題本身不帶預設的字級與外距，外觀照舊由 .name 決定 */
.st-row .name-h { margin: 0; font: inherit; letter-spacing: inherit; }
/* ⑤ 手機橫拿時第一屏沒有任何 LINE 入口：矮螢幕橫向時頁首也顯示「LINE 預約諮詢」 */
/* 第 29 輪補上按鈕樣式（日間評審 r28：橫拿時這顆鈕沒有內距、帶底線，看起來像一行字；電腦版的樣式寫在 900 以上那條裡，這裡吃不到） */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 899px) {
  .nav-book { display: inline-flex; align-items: center; padding: 8px 16px; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing: .06em; }
}

/* ── 第 32 輪：首屏＝門邊的木格櫃（build.js 首頁 .front） ──
   日間評審 r30：首屏仍是全站最像範本的一塊（黑底左欄放字標、地址、兩顆鈕、星等，右邊照片），照片旁那欄沒用到全站最強的兩個想法（三角和木頭）；
     10 分＝「第一屏就能讓人認出：這是掛三角燈箱、用木格櫃的那家店」。
   凱 11-08：「封面店面建築物是不是可以多顯示一點」「在多一點」「電腦板顯示一開始那旁邊留白太多了」。
   ⇒ 照片旁那欄換成店裡那座灰橡木格櫃（跟筆記櫃、書櫃、問答抽屜同一套板材、格子、木紋走向）：
      最上面一大格放門口那盞三角燈箱；下面四格各一盞小燈箱＝四項服務；再下面是地址、營業時間、Google 評論；最底下的抽屜面放 LINE 預約鈕。
      照片改窄改高、只從下面裁（電錶那段），1440×900 露出原圖高度約 85%（原本 67%）；照片上不再壓字、不壓暗。
   兩種排法：1100 以上而且畫面比 6:5 寬＝櫃子在左、照片在右；其他（手機、平板、直拿的大平板）＝照片在上、櫃子在下。
   櫃子寬度小於 540 時（手機）服務改兩欄。舊的 .hero 規則沒有刪，首頁已經不用。 */
/* 第 34 輪：首屏高＝畫面高 − 頁首實高 69 − 14（日間評審 r33：原本扣 66，頁首實高 68.9 ⇒ 櫃子與照片的共同底邊永遠落在畫面下緣再往下 2.9px，
     櫃子底座那條深色地面線與影子在常見桌機第一屏都被切掉）；刻意短 14px，地面線和影子一定看得到
   --below＝手機與平板直拿時照片底下還要放的東西（頁首 69＋照片與櫃子間距 20＋櫃子第一列＋底部列 58＋留白 8），第一列照實量取保守值 */
.front { --hh: 69px; --fh: clamp(560px, calc(100svh - var(--hh) - 14px), 1000px); --below: 372px; --padX: max(20px, env(safe-area-inset-left, 0px)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--plaster); }
@media (min-width: 400px) { .front { --below: 349px; } }   /* 400–519：第一列實量 194（412）、175（430–480） */
@media (min-width: 520px) { .front { --below: 455px; } }   /* 520 以上平板排法（燈箱佔左上兩格）：第一列實量 236（600）、296（768–899），取 300 */
/* 600–899 頁首與下面每一段都留 36px（第 24 輪平板規則），櫃子原本留 20 ⇒ 768 寬櫃子 x20、店名 x36 差 16，同一種「差一點沒對齊」，跟著 36 */
@media (min-width: 600px) and (max-width: 899px) { .front { --padX: max(36px, env(safe-area-inset-left, 0px)); } }
@media (min-width: 900px) { .front { --padX: max(48px, calc((100vw - 1320px) / 2 + 48px)); } }
/* 手機橫拿（高 500 以下）：首屏本來就一屏放不下，櫃子拉到 680 高，最上面那格燈箱才不會縮成 100px（844×390 實量 113px） */
@media (max-height: 500px) and (orientation: landscape) { .front { --fh: 680px; } }
.fr-photo { position: relative; order: -1; margin: 0; min-height: 0; }
.fr-photo picture { display: block; height: 100%; }
/* 第 34 輪：手機與平板直拿的照片高度改用瀏覽器真實可視高度（svh＝工具列展開時的高度）算
   （日間評審 r33：390×664、412×780 這類真實高度下照片佔可用高度 73–86%，營業時間掉到底部列下面）
   ⇒ 照片高＝可視高 − 照片底下要放的東西，最矮 240、最高照原本（寬 × 1.16、74svh）；只從下面裁，門口三角燈箱在原圖上方 5–25%，裁不到 */
.fr-photo img { width: 100%; height: clamp(240px, calc(100svh - var(--below)), min(calc(100vw * 1.16), 74svh)); object-fit: cover; object-position: 50% 0; filter: sepia(.12) saturate(.9) brightness(1.03); }
.fr-side { container: frside / inline-size; padding: 20px var(--padX) 40px; }
/* 櫃體：外框、層板＝橫紋，左右側板＝直紋（筆記櫃同一個畫法） */
.fr-cab { position: relative; display: grid; gap: var(--bd, 16px); padding: var(--fr, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "n n a a" "n n t t" "s s s s" "d d d d";  /* 平板（照片在上）：燈箱佔左上兩格，右邊兩格放地址與時間；寬螢幕與手機各自改（見下面） */
  background: var(--grain-h) 0 0 / 640px 640px, var(--board); box-shadow: 0 3px 0 #8d7c6b, 0 18px 24px -16px rgba(0, 0, 0, .4); }
.fr-cab::before, .fr-cab::after { content: ""; position: absolute; top: var(--fr); bottom: var(--fr); width: var(--fr); background: var(--grain-v) 0 0 / 640px 640px, var(--board); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(60, 44, 32, .18); pointer-events: none; }
.fr-cab::before { left: 0; }
.fr-cab::after { right: 0; }
/* 格子：同一塊木頭在陰影裡（上緣有上一層板的影、左右微暗、下緣一道層板亮面） */
.fr-niche, .fr-svc li, .fr-cell { position: relative; background: var(--cell);
  box-shadow: inset 0 26px 22px -18px var(--cell-shadow), inset 10px 0 12px -10px rgba(48, 36, 26, .3), inset -10px 0 12px -10px rgba(48, 36, 26, .3), inset 0 -3px 0 rgba(255, 255, 255, .14); }
/* 同一層左右兩格中間的隔板：畫在左邊那一格的右側，木紋直走 */
.fr-svc li:not(:last-child)::after, .fr-niche::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--bd); background: var(--grain-v) 0 0 / 640px 640px, var(--board); pointer-events: none; }
/* 最上面那一格：門口那盞燈箱放在層板上 */
.fr-niche { grid-area: n; display: grid; min-height: 0; }
.fr-lamp { display: grid; place-items: end center; min-height: 0; margin: 0; padding: 22px 16px 3px; line-height: 1; }
.fr-lamp-svg { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 240 / 207; overflow: visible; filter: drop-shadow(4px 7px 6px rgba(40, 30, 22, .34)); }
.fr-lamp-svg .rim { fill: #e2e3df; stroke: #6d706e; stroke-width: 1.1; stroke-linejoin: miter; }
.fr-lamp-svg .face { fill: #fbf7ef; stroke: rgba(0, 0, 0, .14); stroke-width: .7; }
.fr-lamp-svg .zh { font: 600 40px "Noto Serif TC", "Songti TC", serif; fill: #111; }
.fr-lamp-svg .en { font: 500 15.5px "Bodoni Moda", "Noto Serif TC", serif; letter-spacing: 2.4px; fill: #111; }
/* 四項服務：每一格一盞小燈箱（服務頁同一個記號）＋名稱，整格可以點 */
.fr-svc { grid-area: s; display: grid; grid-template-columns: subgrid; gap: var(--bd); margin: 0; padding: 0; list-style: none; }
.fr-svc a { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; height: 100%; min-height: 112px; padding: 16px 14px 14px; color: #000; text-decoration: none; }
.fr-mark { display: grid; place-items: end center; width: 46px; height: 40px; padding-bottom: 4px; background: var(--tri-img) center / 100% 100% no-repeat; color: #000; font: 500 15px/1 var(--serif); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fr-name { font: 600 17px/1.3 var(--serif); letter-spacing: .08em; }
.fr-svc a:hover .fr-mark, .fr-svc a:focus-visible .fr-mark { transform: translateY(-5px); }
.fr-svc a:hover .fr-name, a.fr-cell:hover .fr-k { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.fr-svc a:focus-visible, a.fr-cell:focus-visible { outline: 2px solid #000; outline-offset: -6px; }
/* 地址、時間、評論 */
.fr-cell { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 96px; margin: 0; padding: 16px 16px 14px; color: #000; text-decoration: none; font-size: 14.5px; line-height: 1.6; letter-spacing: .04em; word-break: keep-all; overflow-wrap: anywhere; }
.fr-k { font: 600 16.5px/1.45 var(--serif); letter-spacing: .06em; }
/* 第 33 輪：地址拆三行（小字區名／粗體街名門牌／小字捷運），時間配一行小字「營業時間」，兩格同一個排法
   （日間評審 r32：320 寬「昌吉街 83｜號」、常見手機寬度「每天 12:00–｜20:00」；門牌「83 號」與「12:00–20:00」整串不拆，「昌吉街」與「每天」可以自己一行） */
.fr-s { font-size: 13.5px; line-height: 1.5; color: #2a2b2a; }
.fr-addr { grid-area: a; }
.fr-time { grid-area: t; }
/* r31 評審：評分列放在首屏按鈕下面是「主視覺底下補一排數據」的預設做法 ⇒ 評分移到回饋段開頭（build.js 回饋段的說明文字），首屏不放 */
/* 文章小標不再用彈性排版（第 25 輪拿掉標題前的小三角後，display:flex 只剩副作用：字、換行記號、標點 span 各被當成一格排，
   r31 評審：「設計師怎麼規劃「退色路線」？」在 390 寬變成「設計師怎麼規劃　　」？」｜「退色路線」） */
.prose h2 { display: block; }
/* 問答抽屜的題目包成一段（summary 是彈性排版，題目跟右邊的＋／−各一格；題目裡的換行記號不再把字拆成好幾格） */
.faq summary > .faq-q { flex: 1 1 auto; min-width: 0; }
/* 參考來源的網址可以從任何地方換行（一整串網址不能斷時，前一行會只填到四成多：390 寬「…研究新聞稿）.」44%） */
.prose .ref a { overflow-wrap: anywhere; word-break: break-all; }
/* 最底下一個整寬的抽屜＝LINE 預約諮詢（第 33 輪，日間評審 r32：空抽屜像拿掉設計師鈕留下的洞；LINE 鈕是平面黑方塊貼在抽屜面上，
   櫃子其他格都是「整格就是連結」）⇒ 抽屜整面就是連結，抽屜面中間嵌一塊黑底燈面字的名牌（全站主鈕同一個樣子，一眼看得出是按鈕），
   滑過或按下時抽屜往外拉出一點（問答抽屜拉開同一個影子），開「減少動態」只換影子不移動 */
.fr-drawer { grid-area: d; position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 22px 16px 16px; color: inherit; text-decoration: none;
  background: var(--grain-h) 211px 37px / 640px 640px, var(--board);
  box-shadow: 0 -2px 2px -1px rgba(40, 30, 22, .5), -2px 0 2px -1px rgba(40, 30, 22, .38), 1px 0 0 rgba(40, 30, 22, .14), 0 2px 0 rgba(255, 252, 245, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease; }
.fr-drawer::before { content: ""; position: absolute; top: 0; left: 50%; width: 92px; height: 10px; margin-left: -46px; background: linear-gradient(to bottom, var(--shelf-ink), #6b5545); border-radius: 0 0 5px 5px; }
.fr-plate { display: inline-block; padding: 15px 30px; background: #000; color: var(--lamp-face, #fbf7ef); font: 500 16px/1.2 var(--sans); letter-spacing: .08em; white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .25); }
.fr-line:hover, .fr-line:focus-visible { transform: translateY(3px); box-shadow: 0 -2px 2px -1px rgba(40, 30, 22, .5), -2px 0 2px -1px rgba(40, 30, 22, .38), 1px 0 0 rgba(40, 30, 22, .14), 0 8px 10px -6px rgba(40, 30, 22, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.fr-line:hover .fr-plate { background: #3a3d3b; }
.fr-line:focus-visible { outline: 2px solid #000; outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .fr-line:hover, .fr-line:focus-visible { transform: none; } }
/* 櫃子 480–559：格子變窄，服務格與抽屜內距收小 */
@container frside (max-width: 559px) {
  .fr-svc a { padding: 14px 10px 12px; }
  .fr-name { font-size: 16px; letter-spacing: .06em; }
  .fr-cell, .fr-drawer { padding-left: 14px; padding-right: 12px; }
}
/* 寬螢幕（900 以上、畫面比 6:5 寬）：櫃子在左、照片在右
   照片高＝首屏高；寬＝高 × 0.8627＝原圖 1540×2100 露出 85% 的高度、只從下面裁；櫃子至少留 480（再窄照片改成露出整個高度、左右少裁一點），
   照片最窄不小於首屏高的一半。手機橫拿（812 寬以上、高 500 以下）也這樣排：照片在上的排法只看得到雨遮（844×390 實量露出 25%） */
@media (min-width: 900px) and (min-aspect-ratio: 6/5), (min-width: 812px) and (max-height: 500px) and (orientation: landscape) {
  /* 櫃子左緣對齊頁首店名（第 33 輪：日間評審 r32「1600 寬差 28px，差一點對齊比完全不對齊更像錯誤」⇒ 1800 以下完全對齊，1800 以上才收窄左邊的牆，見下面） */
  .front { --gap: clamp(28px, 2.8vw, 48px); --top: clamp(24px, 4.2vh, 44px);
    --pw: max(calc(var(--fh) * .45), min(calc(var(--fh) * .8627), calc(100vw - var(--padX) - var(--gap) - 480px)));
    --padH: var(--padX);
    /* 燈箱那一格的高：首屏高扣掉頂上的牆與下面三層（約 400），最高 400；多出來的高度變成櫃子上方的牆，櫃子站在地上 */
    --nh: clamp(150px, calc(var(--fh) - var(--top) - 400px), 400px);
    grid-template-columns: minmax(0, 1fr) var(--pw); grid-template-rows: minmax(0, 1fr); column-gap: var(--gap); height: var(--fh); padding-left: var(--padH); }
  .fr-photo { order: 0; grid-column: 2; grid-row: 1; height: var(--fh); }
  .fr-photo img { height: 100%; }
  /* 第 33 輪：櫃子底邊貼齊照片底邊（日間評審 r32：門邊的櫃子要跟門站在同一個地面上） */
  .fr-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; padding: var(--top) 0 0; }
  .fr-cab { grid-template-rows: var(--nh) auto auto auto; grid-template-areas: "n n n n" "s s s s" "a a t t" "d d d d"; }
  .fr-niche::after { content: none; }
  .fr-addr::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--bd); background: var(--grain-v) 0 0 / 640px 640px, var(--board); pointer-events: none; }
  /* 燈箱跟著那一格的高度縮放（格子高度＝首屏高扣掉下面三層），一定坐在層板上、不會凸出格子 */
  .fr-niche { position: relative; }
  .fr-lamp { position: absolute; inset: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: clamp(16px, 3vh, 30px) 16px 3px; }  /* 列高要寫死，燈箱的 height:100% 才算得出來（自動列高時會照寬度比例撐到 328px） */
  .fr-lamp-svg { width: 100%; height: 100%; max-width: 380px; max-height: 330px; aspect-ratio: auto; }
}
/* 1600 以上櫃子變寬、那一格變大，燈箱上限跟著放大（1920 寬原本 361px 寬的燈箱坐在 677×474 的格子裡，上面空一大片） */
@media (min-width: 1600px) and (min-aspect-ratio: 6/5) { .front { --nh: clamp(150px, calc(var(--fh) - var(--top) - 400px), 460px); } .fr-lamp-svg { max-width: 470px; max-height: 410px; } }
/* 1800 以上：左邊的牆最多留畫面寬的一成（1920 寬照頁首店名對齊會空 348px：凱 11-08「電腦板顯示一開始那旁邊留白太多了」）。
   第 34 輪（日間評審 r33：舊算式在櫃子封頂 900 之後把多的寬度全丟到左邊，2560 寬櫃子 x749、店名 x668 差 81，2327 差 36，像差一點沒對齊；3440 左邊空 47%）
   ⇒ 櫃子最寬 900，再寬的螢幕把「櫃子＋照片」整組置中、照片右邊也留同樣的牆（1800–2100 照舊：櫃子在畫面寬一成、照片貼右邊）。
   驗算：店名 x＝50vw − 612；櫃子 x＝max(10vw, 50vw − 474 − 照片寬÷2)；兩者相差＝max(40vw − 612, 照片寬÷2 − 138) ≥ 103，永遠不會落在「差一點」
   第 35 輪（日間評審 r34：1800–2260 寬櫃子封頂 900 之後，多出來的寬度變成照片右邊一條牆縫，1920×937 差 43、2200×1100 左 220 右 169，像差一點置中）
   ⇒ 照片右緣只有兩種狀態：①整組置中後左右的牆至少一成（--c ≥ 10vw）＝左右一樣寬；②其他情況照片一定貼右邊，櫃子封頂後多的寬度給照片（照片變寬、只從下面多裁）。
   切換點只有一個：--c 剛好等於 10vw 時，右邊的牆從 0 直接跳到一成寬（180 以上），中間沒有 3–60px 的狀態。
   padding-right 的寫法：(--c − 10vw) 乘一個很大的數再夾在 0 和 --c 之間＝不到一成時是 0、超過一成時是 --c（CSS 沒有 if，用夾住的方式做開關）
   乘數用 10 億：第 35 輪評審抓到乘 10 萬時 1983×823 剛好平手、計算殘差 0.001px 被放大成右邊牆 100（櫃子左 198.3），落在中間；
   瀏覽器的計算殘差不是 0 就至少約 0.00001px，乘 10 億一定衝到 --c，不會再停在中間（tie-scan.js：447 個高度的切換點兩側各 3px 實測） */
@media (min-width: 1800px) and (min-aspect-ratio: 6/5) {
  .front { --c: calc((100vw - 900px - var(--gap) - var(--pw)) / 2);
    --padH: max(10vw, var(--c));
    grid-template-columns: minmax(0, 900px) minmax(var(--pw), 1fr);
    padding-right: clamp(0px, (var(--c) - 10vw) * 1000000000, var(--c)); }
}
/* 櫃子窄（手機）：燈箱縮到左格、地址與時間疊在右格，服務兩欄，一個整寬的 LINE 抽屜（放在寬螢幕那段後面：同樣寫在 .fr-cab 上，後寫的才會贏）
   第 33 輪（日間評審 r32：390×844 櫃子高 805px，燈箱格 232px 接在照片裡那盞燈正下方、同一塊招牌看兩次，空抽屜 84px，地址時間掉出第一屏）
   ⇒ 照片下面第一列就是小燈箱加地址營業時間 */
@container frside (max-width: 479px) {
  .fr-cab { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "n a" "n t" "s s" "d d"; }
  .fr-svc li:nth-child(even)::after, .fr-addr::after { content: none; }
  .fr-niche::after { content: ""; }
  .fr-svc a { min-height: 92px; }
  .fr-lamp { padding: 14px 8px 3px; }
  .fr-lamp-svg { max-width: 150px; }
  .fr-cell { min-height: 0; padding: 12px 12px 11px; }
  .fr-k { font-size: 15.5px; }
  .fr-s { font-size: 12.5px; }
  .fr-drawer { min-height: 80px; }
}