/* 像花美好 Nice Flower — 網站樣式
   設計決策與紅線見 design/DESIGN.md。標準色來自品牌識別系統總表：
   鼠尾草綠 #8C9F7A／杏桃米 #F5C9A7／奶油黃 #FFE39A／暖米白 #FDF9F2／可可棕 #8B4A2E */

/* ---------- 1. tokens ---------- */
:root {
  --sage: #8C9F7A; --apricot: #F5C9A7; --butter: #FFE39A; --cream: #FDF9F2; --cocoa: #8B4A2E;
  --page: #FDFCF8;            /* 與標誌圖檔底色一致，標誌放上去不出現色塊 */
  --paper: #F8F1E4;           /* 分段用的紙色 */
  --surface: #FFFDF7;
  --sage-deep: #64795A; --sage-soft: #E6ECDD;
  --apricot-soft: #FBE7D6; --butter-soft: #FFF3CF;
  --cocoa-deep: #6E3820;
  --ink: #4F3529; --ink-2: #806555;   /* 原 #8A6E5F 在紙色底 4.18:1 不及格，現 4.78:1 */
   --line: #EADFD0;
  --dash: rgba(139, 74, 46, 0.3);
  --shadow-print: 0 14px 30px -18px rgba(111, 56, 32, 0.5);
  --font-hand: "LXGW WenKai TC", "DFKai-SB", "KaiTi", serif;
  --font-body: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-script: "Caveat", "Ink Free", "Segoe Print", cursive;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  /* 作品照片暫代插畫的配色 */
  --ph-bg: #F3E9DA; --ph-a: #FFFDF7; --ph-b: #FFE39A; --ph-c: #F5C9A7; --ph-stem: #8C9F7A; --ph-wrap: #E4D2BA;
}
.tone-sage { --ph-bg: #E6ECDD; --ph-wrap: #F8F1E4; }
.tone-apricot { --ph-bg: #FBE7D6; --ph-c: #E9A77E; --ph-wrap: #FFFDF7; }
.tone-butter { --ph-bg: #FFF3CF; --ph-b: #F3B93F; --ph-wrap: #FFFDF7; }

/* ---------- 2. base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s6); }
body { font-family: var(--font-body); color: var(--ink); background: var(--page); font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--s6); }
h1, h2, h3 { font-family: var(--font-hand); font-weight: 700; color: var(--cocoa); line-height: 1.4; letter-spacing: 0.04em; }
.script { font-family: var(--font-script); color: var(--sage-deep); letter-spacing: 0.02em; line-height: 1.1; }
.lead { font-family: var(--font-hand); font-size: 18px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 50; background: var(--cocoa); color: var(--surface); padding: 8px 16px; border-radius: 0 0 10px 10px; }
.skip:focus { top: 0; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- 3. components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; font-family: var(--font-hand); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; border: 1.5px solid var(--cocoa); cursor: pointer; transition: background .2s, color .2s, transform .2s; white-space: nowrap; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-cocoa { background: var(--cocoa); color: var(--surface); }
.btn-cocoa:hover { background: var(--cocoa-deep); border-color: var(--cocoa-deep); }
.btn-line { background: transparent; color: var(--cocoa); }
.btn-line:hover { background: var(--apricot-soft); }
.btn-sage { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--surface); }
.btn-sage:hover { background: #55684C; }
.btn:active { transform: translateY(1px); }
.link-more { font-family: var(--font-hand); color: var(--sage-deep); border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.link-more:hover { color: var(--cocoa); }

.bloom { width: 44px; height: 44px; flex: none; }
.divider { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.divider::before, .divider::after { content: ""; height: 1px; width: 72px; background: var(--cocoa); opacity: 0.35; }
.print { background: var(--surface); padding: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-print); }
/* 插畫融進頁面（2026-09-21，用戶：「插圖都是獨立的一張一張的…我要她融合進去」）：
   不要白框、不要陰影、不要傾斜，四邊柔化淡出到頁面底色，看起來像畫在紙上而不是貼上去的一張照片。
   兩層漸層取交集＝四個邊都淡；Firefox 讀 mask-image，Chrome／Safari 讀 -webkit- 那一支。 */
.blend { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

.preview-note { background: var(--cocoa-deep); color: #FBEFE2; font-size: 12.5px; letter-spacing: 0.04em; padding: 6px var(--s4); text-align: center; }

.sec-head { text-align: center; margin-bottom: var(--s12); }
.sec-head .script { font-size: 34px; }
.sec-head h2 { font-size: 34px; }
.sec-head p { color: var(--ink-2); margin: var(--s2) auto 0; max-width: 36em; }

/* ---------- 4. header / footer ---------- */
.site-head { padding: var(--s6) 0 var(--s4); }
.head-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.social { display: flex; gap: 10px; }
.soc { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-hand); font-size: 16px; color: var(--cocoa); transition: border-color .2s, transform .2s; }
.soc i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.soc svg { width: 20px; height: 20px; }
.soc-ig i { background: var(--apricot-soft); color: var(--cocoa); }
.soc-fb i { background: var(--sage-deep); color: var(--surface); }   /* 白圖示在 --sage 上只有 2.81:1 */
a.soc:hover { border-color: var(--cocoa); transform: translateY(-1px); }
.soc.is-todo { border-style: dashed; opacity: 0.6; cursor: help; }
.brand img { height: 104px; width: auto; }
.head-row .act { justify-self: end; }
.site-head nav ul { list-style: none; display: flex; justify-content: center; gap: var(--s12); margin-top: var(--s3); font-family: var(--font-hand); font-size: 18px; color: var(--cocoa); }
.site-head nav a { padding: 4px 2px; background: linear-gradient(var(--butter), var(--butter)) no-repeat 0 100% / 0 8px; transition: background-size .25s; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { background-size: 100% 8px; }

.site-foot { background: var(--paper); border-top: 1px solid var(--line); padding: var(--s16) 0 var(--s8); margin-top: var(--s24); }
.page-gifts .site-foot { margin-top: 0; }
.site-foot .top { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s12); align-items: center; }
.site-foot blockquote { font-family: var(--font-hand); font-size: 20px; color: var(--cocoa); line-height: 1.9; }
.site-foot .script { font-size: 34px; margin-top: var(--s3); display: block; color: var(--cocoa); }
.contact { list-style: none; display: grid; gap: var(--s3); }
.contact a { display: flex; align-items: center; gap: var(--s3); font-size: 15.5px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s; }
.contact a:hover { border-color: var(--cocoa); }
.contact b { font-family: var(--font-hand); color: var(--cocoa); min-width: 5.2em; }
.contact svg { width: 22px; height: 22px; flex: none; color: var(--cocoa); }
.site-foot .fine { margin-top: var(--s12); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); }
.m-bar { display: none; }

/* ---------- 5. home ---------- */
main > section { padding: var(--s24) 0 0; }
.hero { background: #FBF5E8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s8) 0 var(--s12); text-align: center; position: relative; overflow: hidden; }
/* 插畫不要吃掉整個第一屏：買花的人一進來就該看得到「預約花禮／看看有哪些花禮」兩顆按鈕。
   桌機 1440×900 原本插畫就有 810px 高，按鈕被推到摺線下面（2026-09-21）。手機本來就沒這個問題。
   限高度要用「限寬度」來做：插畫是 4:3，83vh 寬正好等於 62vh 高。直接寫 max-height＋object-fit 的話，
   元素框還是 1080px 寬，下面那層淡出遮罩就會落在圖的外面，圖的四邊變成硬邊。 */
.hero-art { width: min(1080px, 100%, 83vh); margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero .row { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; margin-top: var(--s2); }
.petal { position: absolute; width: 18px; height: 11px; border-radius: 60% 40% 60% 40%; background: var(--butter); opacity: 0.85; }

.hello { text-align: center; max-width: 720px; }
.hello p { font-family: var(--font-hand); font-size: 21px; line-height: 2.1; }
.hello .divider { margin-bottom: var(--s6); }

.pins { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s12) var(--s8); align-items: flex-start; }   /* 一列 4 張，不滿一列的置中（七類＝4＋3） */
.pin { flex: 0 0 calc((100% - 3 * var(--s8)) / 4); background: var(--surface); padding: 12px 12px 18px; border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(111, 56, 32, 0.45); transition: transform .25s; display: block; }
.pin:nth-child(1) { transform: rotate(-2deg); } .pin:nth-child(2) { transform: rotate(1.4deg) translateY(18px); }
.pin:nth-child(3) { transform: rotate(-1deg); } .pin:nth-child(4) { transform: rotate(2.2deg); }
.pin:nth-child(2), .pin:nth-child(4) { transform: rotate(1.6deg) translateY(18px); }
.pin:nth-child(5) { transform: rotate(-1.6deg); } .pin:nth-child(6) { transform: rotate(1.2deg) translateY(18px); } .pin:nth-child(7) { transform: rotate(-1deg); }
.pin:hover { transform: rotate(0) translateY(-4px); }
.pin .ph, .pin img { aspect-ratio: 1 / 1.08; }
.pin img { display: block; width: 100%; object-fit: cover; }
.pin h3 { text-align: center; font-size: 24px; margin-top: var(--s3); }
.pin p { text-align: center; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.after-pins { text-align: center; margin-top: var(--s16); font-family: var(--font-hand); font-size: 19px; }

.order { background: var(--paper); margin-top: var(--s24); padding: var(--s24) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 怎麼訂花：四個步驟，插畫是闆娘自己海報裡的水彩圖（2026-09-21 裁出來的） */
.how { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); align-items: stretch; }
.how > li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: var(--s6) var(--s6) var(--s6); position: relative; }
.how > li > b { position: absolute; top: calc(var(--s4) * -1); left: var(--s4); width: 42px; height: 42px;
  border-radius: 50%; color: var(--surface); display: grid; place-items: center; z-index: 1;
  font-family: var(--font-script); font-size: 25px; line-height: 1; padding-top: 3px; }
.how > .how-1 > b { background: var(--sage-deep); }
.how > .how-2 > b { background: #D99A86; color: var(--ink); }   /* 白字在這三個淺色圓上只有 2.0–2.8:1，改深色字 */
.how > .how-3 > b { background: #E0AE4E; color: var(--ink); }
.how > .how-4 > b { background: var(--sage); color: var(--ink); }
.how img { width: 100%; margin-bottom: var(--s4); }
.how h3 { display: inline-block; font-size: 19px; padding: 2px var(--s3); border-radius: 999px; margin-bottom: var(--s3); }
.how > .how-1 h3 { background: var(--sage-soft); }
.how > .how-2 h3 { background: var(--apricot-soft); }
.how > .how-3 h3 { background: var(--butter-soft); }
.how > .how-4 h3 { background: var(--sage-soft); }
.how p { font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.how .line-id { font-family: var(--font-hand); font-size: 18px; color: var(--cocoa); margin-top: var(--s1); letter-spacing: 0.04em; }
.how .how-note { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--dash); }
/* 兩個 LINE 關鍵字 */
.kws { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s12); }
.kw { border: 1px dashed var(--dash); border-radius: 18px; padding: var(--s6); background: var(--surface); }
.kw-now { background: #EEF3E7; }
.kw-price { background: #FBEDE6; }
.kw h3 { font-size: 20px; margin-bottom: var(--s1); }
.kw p { font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.kw { display: block; transition: transform .2s, box-shadow .2s; }
.kw:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(111, 56, 32, .6); }
.kw-go { display: inline-block; margin-top: var(--s2); font-family: var(--font-hand); font-size: 15px; color: var(--sage-deep); border-bottom: 1px solid currentColor; }
.order-cta { margin-top: var(--s6); }

/* 訂購須知: the owner's finished artwork (2026-09-20), a wide sheet for desktop and a tall one for phones */
.know { margin-top: var(--s12); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.know img { display: block; width: 100%; height: auto; }

/* 2026-09-21：課程區原本右邊放一張「闆娘＋Runa」插畫，但首頁最上面的主視覺已經是同樣的人和狗，
   同一頁看到兩次（用戶：「重複性有點高」）。插畫拿掉，闆娘的課程說明改成一欄置中。 */
.class-grid { max-width: 660px; margin: 0 auto; }
.class-grid .coming { font-size: 34px; }
.class-grid h2 { font-size: 34px; margin-bottom: var(--s2); }
.class-grid .lead { margin-bottom: var(--s4); }
/* 2026-09-21: the owner asked for the class block to be nothing but her own description and a LINE button
   (「課程 就直接連到Line官方,留言」), so the three-step sign-up list (.steps) and the "what do you want to
   learn" chips (.wish / .chip) are gone. .chips below is the gifts category nav - a different thing. */
.class-grid p { margin-bottom: var(--s4); }
.class-grid .topic-label { margin-bottom: var(--s2); }
.class-topics { list-style: none; margin: 0 0 var(--s4) var(--s2); }
.class-topics li { font-family: var(--font-hand); font-size: 18px; color: var(--cocoa); padding: 3px 0; }
.class-end { color: var(--ink-2); margin-top: var(--s6); }
.class-slogan { font-family: var(--font-hand); font-size: 19px; color: var(--cocoa); }

/* ---------- 6. gifts page ---------- */
.page-hero { background: #FBF5E8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s12) 0 var(--s8); text-align: center; }
.page-hero .script { font-size: 34px; }
.page-hero h1 { font-size: 44px; }
.page-hero .lead { max-width: 32em; margin: var(--s2) auto var(--s6); }
.chips { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; font-family: var(--font-hand); font-size: 17px; }
.chips a { padding: 6px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--cocoa); transition: border-color .2s, background .2s; }
.chips a:hover { border-color: var(--cocoa); background: var(--butter-soft); }

.cat { padding: var(--s16) 0 0; }
.cat:last-of-type { padding-bottom: var(--s24); }
.cat-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; border-bottom: 1px dashed var(--dash); padding-bottom: var(--s3); margin-bottom: var(--s8); }
.cat-head h2 { font-size: 30px; }
.cat-head .script { font-size: 23px; }   /* 分類的英文名（gifts.json 的 "en"），跟標誌的中英文並排同一種寫法 */
.cat-head p { color: var(--ink-2); font-size: 15px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8) var(--s6); }
.tile { display: flex; flex-direction: column; }
.tile .media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--paper); }
.tile .media img, .tile .media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tile:hover .media img, .tile:hover .media .ph { transform: scale(1.03); }
.tile .media img.fit { object-fit: contain; }   /* 橫幅照片整張放進直式格子，上下留紙色，不裁切 */
.tile .todo { position: absolute; left: 10px; top: 10px; font-size: 12px; letter-spacing: 0.08em; background: var(--surface); color: var(--ink-2); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.tile .meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s3); font-size: 13px; }
.tile .tag { color: var(--sage-deep); letter-spacing: 0.1em; }
.tile .price { font-family: var(--font-hand); color: var(--cocoa); font-size: 16px; }
.tile h3 { font-size: 21px; margin-top: 2px; }
.tile p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin-bottom: var(--s3); }
.tile .btn { align-self: flex-start; margin-top: auto; }
/* 照片牆：安靜的方格、只有名稱，整類（或整組）最下面一顆 LINE 按鈕 */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s4); }
.shot .media { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--paper);
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; position: relative;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease; }
.shot .media img { transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
/* 滑鼠一過去：方格輕輕浮起、照片慢慢放大、底下浮出「看大圖」 */
.shot .media:hover, .shot .media:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(111, 56, 32, .75); }
.shot .media:hover img, .shot .media:focus-visible img { transform: scale(1.07); }
.shot .media::after { content: "看大圖"; position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 10px);
  font-family: var(--font-hand); font-size: 14px; letter-spacing: .06em; color: var(--cocoa);
  background: rgba(255, 253, 247, .92); border-radius: 999px; padding: 3px 14px;
  opacity: 0; transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.shot .media:hover::after, .shot .media:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.shot .media img { width: 100%; height: 100%; object-fit: cover; }
.shot .media img.fit { object-fit: contain; }
.shot figcaption { font-family: var(--font-hand); font-size: 17px; color: var(--cocoa); margin-top: var(--s2); line-height: 1.5; }
.shot figcaption .of { color: var(--ink-2); font-size: 15px; }   /* 「｜品項」那一半淡一點 */
.shot .tag { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; color: var(--sage-deep); line-height: 1.4; }   /* 客製款 */
/* 分類底下的小組（盆花：小／大／造型）：小標＋參考照片牆＋整組一顆按鈕 */
.group { margin-top: var(--s12); scroll-margin-top: var(--s8); }
.cat-head + .group { margin-top: 0; }
.group-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.group-head h3 { font-size: 23px; background: linear-gradient(var(--butter), var(--butter)) no-repeat 0 92% / 100% 9px; padding: 0 2px; }
.group-head p { font-size: 14.5px; color: var(--ink-2); }
.group .cat-foot { margin-top: var(--s6); }
.cat-foot { margin-top: var(--s8); font-size: 15px; color: var(--ink-2); }
.cat-foot .link-more { margin-left: var(--s2); }
/* 花禮頁最後一行：其餘作品在 Instagram（2026-09-20 起沒有「作品集」分類） */
.more-works { margin: 0 0 var(--s4); font-size: 15px; color: var(--ink-2); }   /* the section above brings its own space */
.more-works .link-more { margin-left: var(--s1); }
/* 還沒有作品照的分類：一列一類，插畫在左 */
.soon-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s12); }
.soon { display: flex; align-items: center; gap: var(--s6); padding: var(--s6) 0; border-bottom: 1px dashed var(--dash); scroll-margin-top: var(--s8); }
.soon .ph { flex: 0 0 132px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--paper); }
.soon h3 { font-size: 24px; }
.soon p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin-bottom: var(--s3); }
.page-gifts .order { margin-top: 0; }
.page-gifts .know { margin-top: 0; }
.order-cta.center { margin-top: var(--s8); }

/* ---------- 6b. 404 ---------- */
.lost { text-align: center; padding: var(--s16) 0 0; border-top: 1px solid var(--line); }
.lost .script { font-size: 40px; }
.lost h1 { font-size: 38px; }
.lost .lead { max-width: 30em; margin: var(--s3) auto var(--s8); }
.lost .row { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.lost-art { width: min(360px, 78%); margin: var(--s12) auto 0; }

/* ---------- 6c. IG 連結頁（手機優先；寬螢幕左邊多一張白邊相片） ---------- */
.page-link { background: #FBF4EA; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 540px; max-width: 1180px; margin: 0 auto; gap: var(--s16); padding: var(--s12) var(--s8) var(--s16); align-items: start; }
.side { position: sticky; top: var(--s8); }
.side-art { border-radius: 14px; overflow: hidden; }
.side .under { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s6); padding: 0 var(--s2); }
.side .script { font-size: 30px; }
.side .under span:last-child { font-size: 13px; letter-spacing: 0.16em; color: var(--ink-2); }
.hub { position: relative; overflow: hidden; background: var(--page); border: 1px solid var(--line); border-radius: 36px; padding: var(--s8) var(--s8) var(--s8); text-align: center; }
.hub::before, .hub::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; z-index: 0; }
.hub::before { background: var(--apricot-soft); left: -96px; top: -84px; }
.hub::after { background: var(--sage-soft); right: -108px; top: 150px; }
.hub > * { position: relative; z-index: 1; }
.hub-logo { width: 236px; margin: 0 auto; }
.hub .tagline { font-family: var(--font-hand); font-size: 18px; margin: var(--s2) 0 var(--s6); }
.hub .btn-main { width: 100%; min-height: 58px; font-size: 19px; }
.trio { display: flex; justify-content: center; gap: var(--s8); margin: var(--s8) 0 var(--s6); }
.trio a { font-family: var(--font-hand); font-size: 16px; color: var(--cocoa); }
.trio .ic { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto var(--s2); border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; transition: transform .25s; }
.trio a:hover .ic { transform: translateY(-4px) rotate(-3deg); }
.trio .ic svg { width: 36px; height: 36px; }
.trio .ic.ig { background: #F3E2D3; } .trio .ic.fb { background: #B4BC9C; color: var(--surface); } .trio .ic.line { background: var(--butter-soft); }
.links { display: grid; gap: var(--s3); text-align: left; }
.links .row, .links details { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; transition: border-color .2s; }
.links .row:hover, .links details:hover, .links details[open] { border-color: rgba(139, 74, 46, 0.5); }
.row-head, .links summary { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s4); align-items: center; padding: 12px 18px 12px 12px; cursor: pointer; list-style: none; }
.row-head.is-plain { cursor: default; }
.links summary::-webkit-details-marker { display: none; }
.links .dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--font-script); font-size: 26px; color: var(--cocoa); }
.links b { display: block; font-family: var(--font-hand); font-size: 19px; color: var(--cocoa); line-height: 1.35; }
.links .s { font-size: 13.5px; color: var(--ink-2); }
.row-head i, .links summary::after { font-family: var(--font-script); font-style: normal; font-size: 30px; line-height: 1; color: var(--sage-deep); }
.links summary::after { content: "+"; }
.links details[open] summary::after { content: "–"; }
.links summary:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; border-radius: 24px; }
.thumbs > a { flex: 0 0 calc((100% - 3 * var(--s3)) / 4); min-width: 0; }   /* a long name must not widen its circle */
.thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s3); padding: var(--s1) var(--s6) var(--s6); text-align: center; font-family: var(--font-hand); font-size: 15px; color: var(--cocoa); }
.thumbs img, .thumbs .ph { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--line); }
.inner { padding: 0 var(--s6) var(--s6) 80px; font-size: 15px; }
.inner ol, .inner ul { padding-left: 1.2em; }
.inner li { margin-bottom: 4px; }
.inner li b { display: inline; font-size: inherit; }
.inner p { margin-top: var(--s2); }
.inner .btn { margin-top: var(--s3); }
.hub-foot { margin-top: var(--s8); font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.hub-foot .script { display: block; font-size: 24px; margin-bottom: 4px; }

/* ---------- 6d. 關於闆娘（闆娘自己寫的一封信＋Runa＋小檔案） ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s16); align-items: center; max-width: 1040px; }

.letter p { font-family: var(--font-hand); font-size: 19px; line-height: 2.1; margin-bottom: var(--s4); }
.letter .sign { text-align: right; color: var(--cocoa); font-size: 21px; margin: var(--s6) 0 0; line-height: 1.4; }
.letter .sign .script { display: block; font-size: 32px; color: var(--cocoa); }
.letter .closing { font-family: var(--font-hand); font-size: 19px; line-height: 2.1; margin-top: var(--s6); }
.letter .closing .script { display: block; font-size: 26px; margin-top: 2px; }
/* Runa：信後面的一段小字 */
.runa { max-width: 640px; margin-top: var(--s16); padding-top: var(--s12); border-top: 1px dashed var(--dash); text-align: center; }
.runa h2 { font-size: 23px; margin-bottom: var(--s2); }
.runa p { font-family: var(--font-hand); font-size: 18px; line-height: 2; color: var(--ink-2); }
.facts { max-width: 760px; margin: 0 auto; border-top: 1px dashed var(--dash); }
.facts > div { display: grid; grid-template-columns: 6em 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px dashed var(--dash); align-items: baseline; }
.facts dt { font-family: var(--font-hand); font-size: 19px; font-weight: 700; color: var(--cocoa); }
.facts dd { font-size: 15.5px; }
.facts .link-more { margin-left: var(--s2); font-size: 15px; }
.page-about .letter p, .page-about .runa p, .page-about .sec-head p, .page-about dd { text-wrap: pretty; }   /* 段尾不留單一個字 */

/* ---------- 6e. 作品照片檢視器（點方格看整張照片） ---------- */
.viewer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;   /* 手機版底部的 LINE 長條是 20 */
  background: rgba(62, 40, 30, 0.93); padding: var(--s12) var(--s6);
  opacity: 0; transition: opacity .22s ease; }
.viewer.is-open { opacity: 1; }
/* .viewer 自己設了 display: grid，會蓋掉瀏覽器對 hidden 的 display: none —— 沒有這一行，關掉之後
   那層透明的遮罩還留在最上面，把整個頁面的點擊都吃掉（2026-09-21 用戶回報「第二次就無法點了」）。 */
.viewer[hidden] { display: none; }
.viewer-frame { max-width: min(1100px, 100%); text-align: center; margin: 0; }
.viewer figcaption { opacity: 0; transition: opacity .2s ease .12s; }
.viewer.is-open figcaption { opacity: 1; }
.viewer img { max-width: 100%; max-height: 68vh; width: auto; object-fit: contain; border-radius: 10px;   /* 78→68vh：下面多了一顆訂購鈕 */
  background: var(--surface); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); margin: 0 auto;
  opacity: 1; transition: opacity .18s ease; }
.viewer img.is-turning { opacity: 0; }
.viewer figcaption { margin-top: var(--s4); font-family: var(--font-hand); font-size: 19px; color: var(--cream);
  display: flex; gap: var(--s4); justify-content: center; align-items: baseline; }
.viewer-count { font-family: var(--font-body); font-size: 13px; opacity: .7; letter-spacing: .08em; }
/* 看到喜歡的就直接訂這一款，不用關掉再去捲整類的按鈕（2026-09-21） */
.viewer-order { margin-top: var(--s4); opacity: 0; transition: opacity .2s ease .12s; }
.viewer.is-open .viewer-order { opacity: 1; }
/* LINE 電腦版不吃預填訊息，所以電腦上改成「按一下先幫你複製作品名稱」，貼進聊天室就好 */
.viewer-copied { display: block; margin-top: var(--s2); font-size: 13.5px; color: var(--cream); opacity: 0;
  transition: opacity .2s ease; }
.viewer-copied.is-on { opacity: .85; }
.viewer button { position: absolute; border: 0; background: rgba(253, 249, 242, .14); color: var(--cream);
  cursor: pointer; border-radius: 999px; line-height: 1; transition: background .2s; }
.viewer button:hover { background: rgba(253, 249, 242, .28); }
.viewer-close { top: var(--s4); right: var(--s4); width: 44px; height: 44px; font-size: 30px; }
.viewer-step { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 34px; padding-bottom: 4px; }
.viewer-prev { left: var(--s4); }
.viewer-next { right: var(--s4); }
body.is-viewing { overflow: hidden; }

@media (hover: none) {
  .shot .media::after { opacity: .9; transform: translate(-50%, 0); }
  /* 手指不像滑鼠那麼準：導覽列與文字連結原本只有 21–30px 高，按不太到（2026-09-21 自審量到的）。
     底線是畫在 padding 框的最下緣，所以加了上下留白就要把它拉回文字腳邊。 */
  .site-head nav a { padding: 10px 2px; background-position: 0 calc(100% - 7px); }   /* 左右不能再加，五個項目會擠成兩行 */
  .link-more { display: inline-block; padding: 7px 0; }
  .chips a { padding: 9px 18px; }
}

/* ---------- 7. small screens ---------- */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; max-width: 560px; gap: 0; padding: var(--s4) var(--s3) var(--s8); }
  .side { display: none; }
}
@media (max-width: 860px) {
  .page-link { padding-bottom: 0; }
  .hub { border-radius: 28px; padding: var(--s6) var(--s4) var(--s6); }
  .hub::before { left: -124px; }   /* 標誌圖檔有底色，色塊圓不能壓到它的矩形範圍 */
  .hub::after { right: -128px; }
  .hub-logo { width: 204px; }
  .trio { gap: var(--s6); }
  .trio .ic { width: 76px; height: 76px; }
  .thumbs { gap: var(--s3) var(--s2); padding: 0 var(--s3) var(--s4); font-size: 13px; letter-spacing: 0; white-space: nowrap; }   /* 五個字的分類名要排在一行 */
  .inner { padding-left: var(--s6); }
  .wrap { padding: 0 var(--s4); }
  main > section { padding-top: var(--s16); }
  .site-head { padding-top: var(--s3); }
  .head-row { grid-template-columns: 1fr auto; grid-template-areas: "social act" "brand brand"; row-gap: var(--s3); }
  .social { grid-area: social; gap: 8px; }
  .head-row .act { grid-area: act; }
  .brand { grid-area: brand; justify-self: center; }
  .soc { position: relative; height: 42px; width: 42px; padding: 0; justify-content: center; border: 0; background: none; }
  .soc span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .soc i { width: 42px; height: 42px; }
  .soc.is-todo i { outline: 1.5px dashed var(--ink-2); outline-offset: 2px; }
  .head-row .act .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
  .brand img { height: 78px; }
  .site-head nav ul { gap: var(--s6); font-size: 16px; flex-wrap: wrap; }
  .hero { padding: var(--s4) 0 var(--s8); }
  .sec-head { margin-bottom: var(--s8); }
  .sec-head h2, .class-grid h2 { font-size: 27px; }
  .sec-head .script, .class-grid .coming, .page-hero .script { font-size: 28px; }
  .hello p { font-size: 18px; }
  .pins { gap: var(--s6) var(--s4); }
  .pin { flex-basis: calc((100% - var(--s4)) / 2); }
  .pin:nth-child(n) { transform: none; }
  .pin:nth-child(even) { transform: translateY(16px); }
  .pin h3 { font-size: 20px; }
  .after-pins { margin-top: var(--s12); font-size: 17px; }
  .order { margin-top: var(--s16); padding: var(--s16) 0; }
  .how { grid-template-columns: 1fr; gap: var(--s8); }
  .how img { max-width: 320px; margin-left: auto; margin-right: auto; }
  .kws { grid-template-columns: 1fr; }
  .order-cta { text-align: center; }
  .know { margin-top: var(--s8); }   /* the tall sheet only below 560px (the <picture> decides), so no width cap here */
  .page-hero { padding: var(--s8) 0 var(--s6); }
  .page-hero h1 { font-size: 34px; }
  .chips { gap: 6px; font-size: 16px; }
  .chips a { padding: 5px 14px; }
  .cat { padding-top: var(--s12); }
  .cat:last-of-type { padding-bottom: var(--s16); }
  .cat-head h2 { font-size: 25px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); }
  .wall { grid-template-columns: 1fr 1fr 1fr; gap: var(--s4) var(--s2); }
  .shot figcaption { font-size: 14px; }
  .viewer { padding: var(--s16) var(--s3) var(--s12); }
  .viewer img { max-height: 56vh; }
  .viewer-step { width: 42px; height: 42px; font-size: 28px; }
  .viewer figcaption { font-size: 17px; flex-direction: column; align-items: center; gap: 2px; }
  .soon-list { grid-template-columns: 1fr; }
  .soon { gap: var(--s4); padding: var(--s4) 0; }
  .soon .ph { flex-basis: 96px; }
  .soon h3 { font-size: 20px; }
  .tile h3 { font-size: 18px; }
  .tile .btn { padding: 0 14px; font-size: 14px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .about-art { width: 82%; margin: 0 auto; }
  .letter p { font-size: 17.5px; line-height: 2; }
  .said-band { margin-top: var(--s16); padding: var(--s16) 0; }
  .said { grid-template-columns: 1fr; gap: var(--s4); }
  .said figure:nth-child(even) { transform: none; }
  .said blockquote { font-size: 17px; }
  .facts > div { grid-template-columns: 4.6em 1fr; gap: var(--s3); }
  .facts dt { font-size: 18px; }
  .site-foot { margin-top: var(--s16); padding-top: var(--s12); }
  .site-foot .top { grid-template-columns: 1fr; gap: var(--s8); }
  .site-foot blockquote { font-size: 18px; }
  body { padding-bottom: 68px; }
  .m-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding: var(--s2) var(--s4); }
  .m-bar .btn { flex: 1; }
}

/* 多數 Android 手機是 360px 寬：五個導覽項目用 24px 間距會擠成兩行（2026-09-22 深度審查量到的）。 */
@media (max-width: 400px) {
  .site-head nav ul { gap: var(--s3); font-size: 15px; }
}
@media (max-width: 340px) {
  .site-head nav ul { gap: var(--s2); font-size: 14.5px; letter-spacing: 0; }
}

/* 真的拿在手上看的寬度（本專案一律用 560px 當手機的界線，跟訂購須知那張圖同一條線）。
   一排三張時每格只剩約 110px，花小到看不出差別，作品名還會從「小盆花」中間斷行。 */
@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .shot figcaption { font-size: 15px; }
}