.c-hero{padding:clamp(24px,4vw,48px) var(--g) clamp(48px,6vw,80px)}
.crumb{color:var(--mute-ink);margin-bottom:clamp(24px,4vw,56px)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ver)}
.c-hero__grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(24px,5vw,96px);align-items:end}
.minimap{width:100%;max-width:240px;height:auto;overflow:visible;display:block}
.minimap .land{fill:var(--ink-2);stroke:rgba(243,235,221,.45);stroke-width:1.2}
.minimap .mm-line{fill:none;stroke:var(--ver);stroke-width:3;stroke-linecap:round}
.minimap .mm-hq{fill:var(--paper)}.minimap .mm-pt{fill:var(--ver)}
.minimap text{fill:var(--paper);font-size:30px;font-weight:700;paint-order:stroke;stroke:var(--ink);stroke-width:6px}
.c-tags{color:var(--ver);margin-bottom:20px}
.c-hero h1{font-family:var(--serif);font-weight:900;line-height:1.05}
.c-hero .t1{display:block;font-size:clamp(64px,10vw,176px);letter-spacing:-.01em}
.c-hero .t2{display:block;font-size:clamp(22px,2.4vw,36px);line-height:1.4;margin-top:18px;color:var(--mute-ink);font-weight:700}
.c-lead{margin-top:28px;font-size:19px;line-height:1.85;max-width:34em}
.c-meta{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-ink)}
.c-meta>div{padding:18px 20px 0 0}.c-meta>div+div{border-left:1px solid var(--line-ink);padding-left:20px}
.c-meta dt{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--mute-ink)}
.c-meta dd{font-family:var(--serif);font-weight:900;font-size:19px;margin-top:6px;line-height:1.5}
.c-cover{background:var(--ink)}
.c-cover img{width:100%;height:min(86svh,900px);object-fit:cover}
.c-sec{padding:clamp(72px,10vw,150px) var(--g)}
.c-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,6vw,120px);align-items:start}
.c-row+.c-row{margin-top:clamp(56px,8vw,120px)}
.c-row h2{font-family:var(--serif);font-weight:900;font-size:clamp(56px,8vw,140px);line-height:1;color:var(--ver)}
.c-row p{font-size:clamp(18px,1.5vw,21px);line-height:1.95;max-width:34em}
.c-steps{list-style:none;counter-reset:s;max-width:36em}
.c-steps li{counter-increment:s;position:relative;padding:0 0 32px 64px;font-size:clamp(18px,1.5vw,21px);line-height:1.9}
.c-steps li::before{content:"0" counter(s);position:absolute;left:0;top:-4px;font-family:var(--serif);font-weight:900;font-size:32px;color:var(--ver)}
.c-steps li+li{border-top:1px solid var(--line);padding-top:32px}.c-steps li+li::before{top:28px}
.c-gal{padding:0 var(--g) clamp(72px,10vw,150px);display:grid;gap:clamp(16px,2vw,32px)}
.c-gal--pair{grid-template-columns:2.1fr 1fr;align-items:end}
.c-gal--three{grid-template-columns:1fr 1fr 1fr}
.c-gal--three figure:nth-child(2){margin-top:clamp(40px,6vw,96px)}
.c-gal img{width:100%;height:auto;display:block}
.c-gal--three img{aspect-ratio:4/5;object-fit:cover}
.c-gal figcaption,.c-bleed figcaption{font-size:14px;color:var(--mute);margin-top:12px}
.c-result{padding:clamp(72px,10vw,150px) var(--g) 0}
.c-result .c-row p{color:var(--paper)}
.c-bleed{margin:clamp(56px,8vw,120px) calc(var(--g)*-1) 0;padding-bottom:clamp(24px,3vw,40px)}
.c-bleed img{width:100%;height:min(80svh,820px);object-fit:cover}
.c-bleed figcaption{color:var(--mute-ink);padding:0 var(--g)}
.c-read{margin-top:clamp(72px,8vw,120px);border-top:2px solid var(--ink);padding-top:24px}
.c-read .label{color:var(--mute);margin-bottom:12px}
.c-read ul{list-style:none}
.c-read li a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:900;font-size:clamp(19px,1.6vw,24px);text-decoration:none}
.c-read li a:hover{color:var(--ver)}
.c-read li a::after{content:" →";color:var(--ver)}
.c-next .label{margin-bottom:16px}
.c-next h2{font-size:clamp(40px,6.4vw,120px)}
.c-next h2 a{text-decoration:none}
.c-next h2 a:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}
.c-next .ways b a{text-decoration:none}.c-next .ways b a:hover{text-decoration:underline}
@media (max-width:900px){
  .c-hero__grid{grid-template-columns:1fr;gap:28px}
  .minimap{max-width:150px}
  .c-meta{grid-template-columns:1fr 1fr}
  .c-meta>div:nth-child(3){border-left:0;padding-left:0}
  .c-row{grid-template-columns:1fr;gap:16px}
  .c-gal--pair,.c-gal--three{grid-template-columns:1fr}
  .c-gal--three figure:nth-child(2){margin-top:0}
  .c-steps li{padding-left:52px}
}

/* 思源細黑覆寫 */
.c-hero .t1,.c-row h2,.c-steps li::before{font-weight:200}
.c-hero .t2{font-weight:400}
.c-meta dd,.c-read li a{font-weight:700}

/* ===== generated case pages (81) ===== */
.c-hero--nomap .c-hero__grid{grid-template-columns:1fr}
.c-hero .t1--long{font-size:clamp(40px,5.6vw,104px);line-height:1.12}
.c-hero h1{word-break:keep-all;overflow-wrap:anywhere}
.c-row>div>p+p{margin-top:1em}
.c-row>div>p+.c-steps{margin-top:32px}
.c-gal--one{grid-template-columns:1fr;max-width:1100px;margin:0 auto}
.c-gal--flip{grid-template-columns:1fr 2.1fr}
.c-gal--rest{grid-template-columns:1fr 1fr;align-items:start}
.c-gal--rest figure:nth-child(even){margin-top:clamp(40px,6vw,96px)}
.c-result__pad{height:clamp(72px,10vw,150px)}
/* the hero map line draws from Taichung to the project on load */
.minimap .mm-line{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .minimap .mm-line{animation:mm-draw 1.4s var(--ease) .3s both}
  .minimap .mm-pt{animation:mm-pop .5s var(--ease) 1.5s both;transform-box:fill-box;transform-origin:center}
}
@keyframes mm-draw{from{stroke-dashoffset:1}}
@keyframes mm-pop{from{transform:scale(0)}}
@media (max-width:900px){.c-gal--flip,.c-gal--rest{grid-template-columns:1fr}.c-gal--rest figure:nth-child(even){margin-top:0}}
/* title fits its column: size from character count (--n); long titles wrap naturally and balance */
.c-hero .t1{font-size:clamp(40px,min(10vw,calc(52vw / var(--n,6))),176px)}
.c-hero--nomap .t1{font-size:clamp(40px,min(10vw,calc(84vw / var(--n,6))),176px)}
.c-hero .t1--long{font-size:clamp(34px,min(5.6vw,calc(104vw / var(--n,12))),104px);word-break:normal;text-wrap:balance}
@media (max-width:900px){.c-hero .t1{font-size:clamp(34px,calc(86vw / var(--n,6)),72px)}.c-hero .t1--long{font-size:clamp(28px,7.4vw,44px)}}
/* KUMA: case pages carry no moving lines — the map line is static */
.minimap .mm-line,.minimap .mm-pt{animation:none!important}

/* ===== images at their natural proportions, never upscaled (2026-10-01, KUMA) ===== */
.c-cover{padding:0 var(--g) clamp(32px,4vw,56px);text-align:center;background:var(--ink)}
.c-cover img{display:inline-block;width:auto;height:auto;max-height:86svh;object-fit:contain;vertical-align:top}
.c-gal img{width:100%;height:auto;margin:0 auto}
.c-gal--three{align-items:start}
.c-gal--three img{aspect-ratio:auto;object-fit:contain}
.c-gal--pair img,.c-gal--rest img,.c-gal--one img{object-fit:contain}
.c-bleed{margin:clamp(56px,8vw,120px) 0 0;padding-bottom:clamp(24px,3vw,40px);text-align:center}
.c-bleed img{display:inline-block;width:100%;height:auto;max-height:86svh;object-fit:contain}
.c-bleed figcaption{padding:0;text-align:left}
@media (max-width:900px){.c-cover{padding:0 0 24px}.c-cover img{width:100%;max-height:none}}

.c-hero .c-tags{text-wrap:balance}
.c-read li small{display:block;color:var(--mute);font-size:14px;line-height:1.6;margin-top:2px}
.c-hero .c-tags a{color:inherit;text-decoration:none}.c-hero .c-tags a:hover{text-decoration:underline}
.c-hero .c-tags a+a::before{content:" · ";text-decoration:none;display:inline-block;white-space:pre}
.c-next .c-prev{margin:0 0 18px;font-size:15px}.c-next .c-prev a{color:inherit}