/* 請我喝一杯咖啡 /coffee/：色票、字型、括號、角標框都來自 style.css，這裡只排版 */
html{scroll-snap-type:none}
body{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

.cf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gut)}
.cf-crumbs{display:flex;align-items:baseline;gap:.7em;min-width:0;font:italic 600 18px/1 var(--latin);letter-spacing:.01em}
.cf-crumbs a{text-decoration:none;color:var(--ink);white-space:nowrap}
.cf-crumbs i{font-style:normal;color:var(--muted)}
.cf-crumbs .here{font:600 17px/1 var(--serif);letter-spacing:.06em;color:var(--pink);overflow:hidden;text-overflow:ellipsis}
.cf-top .icon-btn{flex:none}

.cf{padding:0 var(--gut);max-width:1296px;margin:0 auto;box-sizing:content-box}
.cf section{min-width:0}

/* 開場：大標用底片顆粒標籤的漸層；逐字升起 */
.cf-hero{padding:clamp(48px,11svh,120px) 0 clamp(64px,12svh,128px)}
.cf-hero h1{--fs:min(calc((100vw - var(--gut) * 2) / 7),148px);font:900 var(--fs)/1.12 var(--serif);white-space:nowrap}
.ch{
  display:inline-block;color:var(--tag);
  background:var(--noise),linear-gradient(90deg,var(--tag),var(--tag2));
  background-size:90px 90px,7em 100%;background-position:0 0,calc(var(--i) * -1em) 0;background-blend-mode:overlay;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:cf-rise .6s var(--ease) both;animation-delay:calc(.08s + var(--i) * .07s);
}
@keyframes cf-rise{from{opacity:0;transform:translateY(.45em)}}
.cf-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;margin-top:clamp(32px,6svh,64px);align-items:start}
.cf-sign{display:flex;flex-direction:column;gap:6px}
.cf-sign .hi{font-size:clamp(56px,6.4vw,92px);color:var(--ink)}
.cf-sign .handle{color:var(--muted);padding-left:.2em}
.cf-lede{display:grid;gap:10px;max-width:34em;font-size:clamp(17px,1.5vw,20px);line-height:1.9;padding-top:.5em}

.cf h2{font-size:clamp(28px,3.4vw,44px)}
.cf-work{padding:clamp(40px,8svh,88px) 0}
.cf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.cf-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;min-width:0;text-decoration:none;color:var(--ink)}
.cf-card h3{font-size:24px}
.cf-card p{flex:1;color:var(--muted);line-height:1.8}
.cf-card:hover .go span,.cf-card:focus-visible .go span{transform:translateX(5px)}
.cf-card .go{margin-top:6px}

.cf-where{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding:clamp(56px,10svh,112px) 0}
.cf-lines{display:grid;gap:clamp(20px,3svh,30px);font:600 clamp(21px,2.3vw,31px)/1.55 var(--serif);letter-spacing:.03em}

/* 大按鈕：括號一直在，滑過去往外推開 */
.cf-end{display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(56px,11svh,120px) 0 clamp(64px,12svh,128px);text-align:center}
.cf-cta{
  --cf-gap:.34em;position:relative;display:inline-flex;align-items:center;gap:.26em;max-width:100%;
  padding:.3em .95em;color:var(--ink);text-decoration:none;cursor:var(--cur-hand);
  font:900 clamp(32px,9.6vw,104px)/1.1 var(--serif);letter-spacing:.04em;white-space:nowrap;
}
.cf-cta::before,.cf-cta::after{
  content:"[";position:absolute;top:50%;left:var(--cf-gap);transform:translate(-50%,-52%);
  font:300 1.3em/1 var(--latin);color:var(--pink);transition:left .42s var(--ease);
}
.cf-cta::after{content:"]";left:calc(100% - var(--cf-gap))}
.cf-cta:is(:hover,:focus-visible,:active)::before{left:0}
.cf-cta:is(:hover,:focus-visible,:active)::after{left:100%}
.cf-cta .bmc-dot{width:1em;height:1em}
.cf-cta .bmc-dot svg{width:.5em;height:.5em}
.cf-cta:is(:hover,:focus-visible) .bmc-dot{animation:bmc-wig .5s ease-out}
.cf-kao{font:400 17px/1.4 "PingFang TC","Microsoft JhengHei","Segoe UI Symbol",sans-serif;color:var(--muted);min-width:0}

.cf-foot{padding:24px var(--gut) calc(28px + env(safe-area-inset-bottom));text-align:center}

@media (max-width:719px){
  .cf-intro,.cf-where{grid-template-columns:minmax(0,1fr);gap:20px}
  .cf-cards{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
  .cf-lede{padding-top:0}
  .cf-cta{padding:.3em .8em}
}
@media (prefers-reduced-motion:reduce){
  .ch{animation:none}
  .cf-cta::before,.cf-cta::after{transition:none}
  .cf-cta:is(:hover,:focus-visible) .bmc-dot{animation:none}
}