/* 雷兹工業 旗艦版
   鯊魚車庫：整頁是 LOGO 的世界。LOGO 原檔的黃與黑交替，LOGO 字上的斜切當區塊邊界，「\ … \」當標籤。
   照片只用雷兹自己在高架橋下拍的交車照（同一個背景、全車左側），它們本身就是一致的攝影。
   動態兩個主角：開場的 LOGO 組裝，與「一台車」隨捲動畫出來、最後淡入交車照。
   只有一種外觀（品牌色），刻意不跟深色主題切換。CSP 只放行本站的樣式與腳本：不可以有 style 屬性與內嵌腳本。 */

@font-face { font-family: "Noto TC"; src: url("assets/fonts/noto-tc-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Noto TC"; src: url("assets/fonts/noto-tc-900.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Krona One"; src: url("assets/fonts/krona-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Michroma"; src: url("assets/fonts/michroma.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light;
  --yellow: #F4DA25;      /* LOGO 原檔的底色 */
  --ink: #211814;         /* LOGO 原檔的墨色 */
  --ink-2: #2D231D;       /* 黑底上的照片底色 */
  --bone: #F1EBD6;
  --ink-soft: #B5AA85;    /* 黑底上的次要文字 */
  --yellow-soft: #4F4210; /* 黃底上的次要文字 */
  --rule: #40352A;
  --sans: "Noto TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --wide: "Krona One", "Arial Black", sans-serif;
  --tech: "Michroma", "Eurostile", Arial, sans-serif;
  --cut: clamp(28px, 4vw, 56px);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 12px; }
body { margin: 0; background: var(--ink); color: var(--bone); font: 500 1rem/1.85 var(--sans); -webkit-text-size-adjust: 100%; }
.wrap { padding-inline: max(20px, calc((100% - 1200px) / 2)); }
p, h1, h2, h3, dl, dd, figure, ol, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; word-break: keep-all; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--ink); color: var(--yellow); padding: 10px 16px; font-weight: 900; }
.skip:focus { top: 12px; }
html:not(.js) .js-only { display: none; }

.label { font: 400 .74rem/1 var(--tech); letter-spacing: .3em; }
.label::before { content: "\\\00a0\00a0" / ""; }
.label::after { content: "\00a0\00a0\\" / ""; }
.head { display: grid; gap: 12px; }
.head h2 { font: 900 clamp(1.75rem, 3.9vw, 2.9rem)/1.3 var(--sans); letter-spacing: .1em; }
.lede { max-width: 44ch; }

/* 按鈕是一塊有厚度的鐵牌：後面墊一塊同形狀、描邊的「影子」，滑過時浮起、按下去時壓平。
   --edge＝邊框、影子描邊與焦點框的顏色（一定是跟底色對比的那個）；--back＝影子裡面的填色（＝按鈕所在區塊的底色） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px 0 28px; font: 900 1.02rem/1 var(--sans); letter-spacing: .2em; text-decoration: none; border: 2px solid var(--edge); cursor: pointer; box-shadow: 6px 6px 0 -2px var(--back), 6px 6px 0 var(--edge); }
a.btn::after { content: "\2192" / ""; letter-spacing: 0; }
.btn:focus-visible { outline-color: var(--edge); outline-offset: 10px; }
@media (hover: hover) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 -2px var(--back), 8px 8px 0 var(--edge); } }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 -2px var(--back), 0 0 0 var(--edge); }
@media (prefers-reduced-motion: no-preference) { .btn { transition: transform .12s, box-shadow .12s, background-color .12s; } }
.btn-ink { --edge: var(--ink); --back: var(--yellow); background: var(--ink); color: var(--yellow); }
.btn-ink:hover { background: #000; }
.btn-yellow { --edge: var(--yellow); --back: var(--ink); background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--bone); }
.btn-line { --edge: var(--yellow); --back: var(--ink); background: var(--ink); color: var(--yellow); }
.btn-line:hover { background: var(--yellow); color: var(--ink); }

/* ---------- 開場 ---------- */
.hero { background: var(--yellow); color: var(--ink); container-type: inline-size; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); padding-block: 16px calc(var(--cut) + 40px); display: grid; gap: 4px; overflow: clip; }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.home { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 1rem/1 var(--sans); letter-spacing: .3em; }
.home-mark { width: 36px; aspect-ratio: 225 / 215; fill: var(--ink); }
.nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.nav a { font: 900 .92rem/2.4 var(--sans); letter-spacing: .24em; text-decoration: none; }
.nav a:hover { text-decoration: underline 2px; }

.stage { --w: min(400px, 100cqw - 120px); display: grid; justify-items: center; padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); }
/* LOGO 原檔的比例：整組 543×398，鯊魚、REZ、INDUSTRIES 各自的位置照原檔 */
.lockup { position: relative; width: var(--w); aspect-ratio: 543 / 398; font-size: 1rem; }
.lockup > svg { position: absolute; overflow: visible; fill: var(--ink); }
/* 鯊魚放在一個底邊貼齊水平線的框裡：從線下翻上來時，線下的部分看不到（像從水裡出來） */
.markbox { position: absolute; left: 0; right: 0; top: -18%; height: 74.9%; overflow: hidden; pointer-events: none; }
.mark { position: absolute; left: 26.89%; top: 24.03%; width: 41.44%; height: 72.12%; overflow: visible; fill: var(--ink); transform-origin: 50% 75%; }
.word { left: 0; top: 59.8%; width: 100%; height: 28.14%; transform-origin: 50% 100%; }
.ind { left: 14.36%; top: 96.23%; width: 68.69%; height: 3.77%; }
.mark .streak { opacity: 0; }
.mark .streak circle { fill: none; stroke: var(--ink); stroke-linecap: round; }
.mark .streak circle:first-child { stroke-width: 6; stroke-dasharray: 14 86; }
.mark .streak circle:last-child { stroke-width: 3; stroke-dasharray: 8 92; stroke-dashoffset: -48; }
.word .pc, .ind .ch { transform-box: fill-box; transform-origin: 50% 100%; }
.glint { transform: translateX(800px) skewX(-24deg); }
.sea { position: absolute; left: calc(50% - 50cqw); width: 100cqw; top: 56.9%; height: 0; pointer-events: none; }
.sea .line { position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; background: var(--ink); clip-path: inset(0 50% 0 50%); }
.sea .finbox { position: absolute; left: 0; right: 0; bottom: 1px; height: calc(var(--w) * .13); overflow: hidden; }
/* 背鰭的水平與垂直分開動：translate 管往前游、transform 管潛下去，兩段重疊，所以不會在中間停住 */
.sea .fin { position: absolute; left: 0; bottom: 0; width: calc(var(--w) * .15); height: auto; fill: var(--ink); translate: calc(56cqw - 50%) 0; transform: translateY(105%); }
.ripple, .splash { position: absolute; left: 53%; top: 0; }
.ripple::before, .ripple::after { content: ""; position: absolute; left: calc(var(--w) * -.12); top: calc(var(--w) * -.03); width: calc(var(--w) * .24); height: calc(var(--w) * .06); border: 2px solid var(--ink); border-color: var(--ink) transparent transparent; border-radius: 50%; opacity: 0; }
.splash i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0; }
.splash i:nth-child(1) { --x: -64; --y: -62; }
.splash i:nth-child(2) { --x: -38; --y: -104; }
.splash i:nth-child(3) { --x: -12; --y: -128; }
.splash i:nth-child(4) { --x: 16; --y: -116; }
.splash i:nth-child(5) { --x: 40; --y: -92; }
.splash i:nth-child(6) { --x: 66; --y: -58; }
.splash i:nth-child(7) { --x: -86; --y: -30; }

.intro { display: grid; justify-items: center; text-align: center; gap: 6px; }
.tagline { font: 900 clamp(1.25rem, 3vw, 1.9rem)/1.4 var(--sans); letter-spacing: .32em; margin-right: -.32em; }
.what { font: 400 .78rem/1.6 var(--tech); letter-spacing: .32em; margin-right: -.32em; color: var(--yellow-soft); text-transform: uppercase; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 24px; margin-top: 20px; }
.hours { font: 900 .9rem/1.5 var(--sans); letter-spacing: .14em; }
.replay { font: 400 .66rem/1 var(--tech); letter-spacing: .18em; background: none; color: var(--ink); border: 1.5px solid var(--ink); padding: 11px 12px; cursor: pointer; }
.replay:hover { background: var(--ink); color: var(--yellow); }

/* 開場動畫（約 3 秒、只播一次）：
   背鰭劃開一條線 → 在中間潛下去、濺起水花 → 鯊魚從線下翻上來 → R、E、Z 沿 LOGO 的斜度滑進來、落地時整排一沉
   → 一道光掃過字面 → \ INDUSTRIES \ 一個字母一個字母展開。往下捲時整組 LOGO 往後退。
   動畫只在螢幕上、且沒有「減少動態」時才有；列印與減少動態直接是完成的 LOGO */
@media screen and (prefers-reduced-motion: no-preference) {
  .play .fin { animation: fin-swim 1.2s .2s cubic-bezier(.3, .05, .45, 1) both, fin-dive .42s .92s cubic-bezier(.55, 0, .85, .45) both; }
  .play .line { animation: line-cut 2.3s .05s both; }
  .play .ripple::before { animation: ripple .8s 1.0s ease-out both; }
  .play .ripple::after { animation: ripple .8s 1.16s ease-out both; }
  .play .splash i { animation: drop .75s 1.02s cubic-bezier(.15, .7, .35, 1) both; }
  .play .splash i:nth-child(even) { animation-delay: 1.08s; }
  .play .mark { animation: breach .95s 1.05s var(--ease) both; }
  .play .streak { animation: streak .9s 1.05s ease-out both; }
  .play .pc1 { animation: in-left .55s 1.62s cubic-bezier(.15, .9, .25, 1.1) both; }
  .play .pc2 { animation: in-up .55s 1.74s cubic-bezier(.15, .9, .25, 1.1) both; }
  .play .pc3 { animation: in-right .55s 1.86s cubic-bezier(.15, .9, .25, 1.1) both; }
  .play .word { animation: thud .4s 2.28s ease-out both; }
  .play .glint { animation: glint .85s 2.4s ease-in-out both; }
  .play .ch { animation: ch-in .4s 2.5s var(--ease) both; }
  .play .ch1 { animation: slash-l .55s 2.36s var(--ease) both; }
  .play .ch12 { animation: slash-r .55s 2.36s var(--ease) both; }
  .play .ch3 { animation-delay: 2.54s; }
  .play .ch4 { animation-delay: 2.58s; }
  .play .ch5 { animation-delay: 2.62s; }
  .play .ch6 { animation-delay: 2.66s; }
  .play .ch7 { animation-delay: 2.7s; }
  .play .ch8 { animation-delay: 2.74s; }
  .play .ch9 { animation-delay: 2.78s; }
  .play .ch10 { animation-delay: 2.82s; }
  .play .ch11 { animation-delay: 2.86s; }
}
@supports (animation-timeline: scroll()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .stage { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
}
@keyframes fin-swim { from { translate: -110% 0; } to { translate: calc(56cqw - 50%) 0; } }
@keyframes fin-dive { from { transform: translateY(0); } to { transform: translateY(105%); } }
/* 水平線一口氣畫完（不跟背鰭同步，才不會在中間減速），LOGO 字落地時再從兩端收回 */
@keyframes line-cut {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.25, .6, .3, 1); }
  24% { clip-path: inset(0 0 0 0); }
  78% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  100% { clip-path: inset(0 50% 0 50%); }
}
@keyframes ripple { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4, 1.6); } }
@keyframes drop {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  12% { opacity: 1; }
  55% { transform: translate(calc(var(--x) * var(--w) / 560), calc(var(--y) * var(--w) / 560)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) * var(--w) / 400), 4px) scale(.5); }
}
@keyframes breach {
  0% { transform: translateY(112%) rotate(-24deg) scale(.9); }
  62% { transform: translateY(-5%) rotate(4deg) scale(1.03); }
  100% { transform: none; }
}
@keyframes streak { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@keyframes in-left { 0% { opacity: 0; transform: translateX(-130%) skewX(-24deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes in-up { 0% { opacity: 0; transform: translateY(110%); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes in-right { 0% { opacity: 0; transform: translateX(130%) skewX(-24deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes thud { 0% { transform: none; } 30% { transform: translateY(2%) scaleY(.985); } 100% { transform: none; } }
@keyframes glint { from { transform: translateX(0) skewX(-24deg); } to { transform: translateX(800px) skewX(-24deg); } }
@keyframes ch-in { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes slash-l { from { opacity: 0; transform: translateX(170px); } to { opacity: 1; transform: none; } }
@keyframes slash-r { from { opacity: 0; transform: translateX(-170px); } to { opacity: 1; transform: none; } }
@keyframes draw { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 55% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-out { to { transform: translateY(20%) scale(.9); opacity: .2; } }

/* ---------- 一台車：沒有 JS 或減少動態時，整台車畫好、五步全部列出；有 JS 時定住、隨捲動一步一步畫 ---------- */
.story { padding-block: 72px 112px; }
.pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.story-text { display: grid; gap: 12px; align-content: center; min-width: 0; }
.story .label, .story h2 { color: var(--yellow); }
.story h2 { font: 900 clamp(1.6rem, 3.2vw, 2.4rem)/1.35 var(--sans); letter-spacing: .1em; }
.story .lede, .src, .story-fig figcaption { color: var(--ink-soft); }
.steps { list-style: none; padding: 0; margin-top: 8px; display: grid; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 2.4em 1.8em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.steps .no { font: 400 .7rem/1 var(--tech); letter-spacing: .1em; color: var(--ink-soft); }
.steps b { font: 900 1.35rem/1 var(--sans); color: var(--yellow); }
.src { font-size: .85rem; }
.story-fig { display: grid; gap: 12px; min-width: 0; }
.story-fig figcaption { font-size: .85rem; }
.bike { width: 100%; height: auto; overflow: hidden; }
.bike .photo { opacity: 0; }
.bike .ln { fill: none; stroke: var(--bone); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bike .thin { stroke-width: 1.3; }
.bike .spoke { stroke-width: .9; }
.bike .tire { stroke-width: 3; }
.bike .tube-o { fill: none; stroke: var(--bone); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.bike .tube-i { fill: none; stroke: var(--ink); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.bike .leg { stroke-width: 14; }
.bike .grip { stroke-width: 10; }
.bike .pipe { stroke-width: 9; }
.bike .fender { stroke-width: 6; }
.bike .steel { stroke: var(--yellow); stroke-width: 5; }
.bike .bolt { stroke-width: 3.5; }
.bike .solid { fill: var(--ink); stroke: var(--bone); stroke-width: 2.2; stroke-linejoin: round; }
.bike .hand { fill: var(--yellow); stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; }
.bike .flame { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.bike .flame-y { fill: var(--yellow); stroke: var(--yellow); stroke-width: 1; }
.bike .tank-logo { fill: var(--yellow); }
.bike .ground { stroke: var(--rule); stroke-width: 2; }

@media screen {
  .story-live .story { height: 560vh; padding-block: 0; }
  .story-live .pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding-block: 40px; }
  .story-live .steps li { opacity: .55; transition: opacity .4s; }
  .story-live .steps li.on { opacity: 1; }
  /* 選擇器不可以寫 [pathLength]：Chromium 切換父層 class 時，不會重算「駝峰命名的 SVG 屬性選擇器」命中的子元素，
     線稿會一直停在隱藏狀態（2026-10-13 實測；getComputedStyle 量得到、畫面卻不更新）。改用「零件群組的直接子元素」 */
  .story-live .bike .part > :not(use) { stroke-dasharray: 1 1; }
  .story-live .bike .part:not(.on) > :not(use) { stroke-dashoffset: 1; fill-opacity: 0; }
  .story-live .bike .part.on > :not(use) { animation: draw 1.4s cubic-bezier(.5, 0, .2, 1) both; }
  .story-live .bike .part.on .tank-logo { animation: fade-in .5s .9s both; }
  .story-live .bike .part:not(.on) .tank-logo { opacity: 0; }
  .story-live .bike .photo { transition: opacity 1.2s .2s; }
  .story-live .bike .drawing { transition: opacity .9s; }
  .story-live .bike.photo-on .photo { opacity: 1; }
  .story-live .bike.photo-on .drawing { opacity: 0; }
}
@media screen and (max-width: 899px) {
  .pin { grid-template-columns: minmax(0, 1fr); }
  /* 手機定住時一個畫面放不下五步：只顯示目前這一步，其他步驟留給螢幕閱讀器 */
  .story-live .pin { align-content: center; gap: 20px; padding-block: 24px; }
  .story-live .steps li:not(.on) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .story-live .story .lede, .story-live .src, .story-live .story-fig figcaption { display: none; }
}

/* ---------- 作品：雷兹自己的交車照，7／5、5／7 交錯；滑過時背鰭沿說明的底線游過去（開場同一個動作） ---------- */
.works { padding-block: 72px 140px; display: grid; gap: 40px; }
.works .head { color: var(--yellow); }
.works .lede { color: var(--ink-soft); }
.grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 28px; align-items: start; }
.work { grid-column: span 6; min-width: 0; }
.work:nth-child(4n + 1), .work:nth-child(4n + 4) { grid-column: span 7; }
.work:nth-child(4n + 2), .work:nth-child(4n + 3) { grid-column: span 5; }
.work:nth-child(4n + 2), .work:nth-child(4n + 3) { margin-top: 72px; }
.work a { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.ph { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ink-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.cap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.cap b { font: 900 1.3rem/1.4 var(--sans); letter-spacing: .08em; color: var(--yellow); }
.cap .d { grid-column: 1 / -1; color: var(--ink-soft); font-size: .93rem; max-width: 40ch; }
.st { font: 900 .78rem/1 var(--sans); letter-spacing: .16em; color: var(--yellow); border: 1.5px solid currentColor; padding: 6px 9px 5px; white-space: nowrap; }
.cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.rf { position: absolute; left: 0; bottom: 0; width: 34px; height: auto; fill: var(--yellow); opacity: 0; }
.work a:focus-visible { outline-offset: 8px; }
@media screen and (prefers-reduced-motion: no-preference) {
  .ph img { transition: transform 1.2s var(--ease); }
  .work a:hover .ph img { transform: scale(1.04); }
  .cap::after { transition: transform .3s; }
  .rf { transition: opacity .2s, left 0s .2s; }
  .work a:hover .cap::after { transform: scaleX(1); transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
  /* 用 left 不用 100cqw：絕對定位的 svg 量到的容器寬度不對，背鰭會游出卡片（2026-10-13 實測多出 120px） */
  .work a:hover .rf { opacity: 1; left: calc(100% - 34px); transition: opacity .15s, left .9s cubic-bezier(.45, 0, .2, 1); }
}
.more { color: var(--ink-soft); font-size: .95rem; }
.more a { color: var(--yellow); font-weight: 900; }
@media (max-width: 760px) {
  .work, .work:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 服務：黃底，上下兩邊沿 LOGO 的斜切 ---------- */
.services { background: var(--yellow); color: var(--ink); clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); margin-block: calc(var(--cut) * -1); padding-block: calc(var(--cut) + 64px) calc(var(--cut) + 72px); display: grid; gap: 32px; }
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 48px; }
.svc div { border-top: 2px solid var(--ink); padding-block: 16px 24px; display: grid; gap: 6px; align-content: start; }
.svc dt { font: 900 1.4rem/1.35 var(--sans); letter-spacing: .14em; }
.svc dd { color: var(--yellow-soft); max-width: 34ch; }

/* ---------- 老闆 ---------- */
.crew { padding-block: calc(var(--cut) + 72px) 96px; display: grid; gap: 36px; }
.crew .head { color: var(--yellow); }
.crew .lede { color: var(--ink-soft); }
.people { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; }
.people li { display: grid; gap: 8px; align-content: start; min-width: 0; }
.people img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--ink-2); margin-bottom: 8px; }
.people h3 { display: flex; align-items: center; gap: 16px; font: 900 1.6rem/1.3 var(--sans); letter-spacing: .14em; color: var(--yellow); }
.people .letter { flex: none; height: 2.2em; width: auto; fill: var(--yellow); }
.people .aka { font: 400 .74rem/1.6 var(--tech); letter-spacing: .14em; color: var(--ink-soft); }
.people p:last-child { max-width: 34ch; }

/* ---------- 來店：最後是一整排 REZ ---------- */
.visit { padding-block: 72px 0; display: grid; gap: 40px; overflow: clip; border-top: 1px solid var(--rule); }
.visit .head { color: var(--yellow); }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px 40px; }
.vgrid > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.vgrid h3 { font: 400 .7rem/1.6 var(--tech); letter-spacing: .24em; color: var(--ink-soft); margin-bottom: 4px; }
.vgrid .sel { user-select: all; }
.line-id { font: 400 1.5rem/1.3 var(--wide); color: var(--yellow); user-select: all; }
.acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.bigword { width: 100%; height: auto; aspect-ratio: 543 / 112; fill: var(--yellow); margin-top: 24px; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px calc(88px + env(safe-area-inset-bottom, 0px)); font-size: .85rem; color: var(--ink-soft); }

/* 隨時可以按的 LINE 預約：有 JS 時只在開場與來店區塊都不在畫面上時出現 */
.float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 15; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); font: 900 .9rem/1 var(--sans); letter-spacing: .16em; padding: 15px 18px; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.js .float { visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.js .float.show { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }

@media print {
  .float, .replay, .sea, .skip, .rf { display: none !important; }
  .hero, .services { clip-path: none; margin-block: 0; }
}