/* LYENZO.design — portfolio site. Follows LYENZO Visual Identity 4.0:
   black + white + four greys only, LINE Seed TW Regular/Bold only,
   English & numbers big, Chinese small on the shoulder (superscript),
   one flipped number per layout, thin-line tables, no decoration. */
@font-face{font-family:"LINE Seed TW";src:url(/assets/fonts/lineseedtw-rg-latin.172c87acd8.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+2000-206F}
@font-face{font-family:"LINE Seed TW";src:url(/assets/fonts/lineseedtw-bd-latin.e695d8ecb7.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+2000-206F}

:root{
  --black:#000;--white:#fff;--g1:#f2f2f2;--g2:#c8c8c8;--g3:#8a8a8a;--g4:#333;
  --gut:clamp(16px,3.33vw,64px);
  --fs:17px;
  --font:"LINE Seed TW","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font);font-size:17px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased;line-break:strict;overflow-wrap:normal;hyphens:manual}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
ol,ul{margin:0;padding:0;list-style:none}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--black);color:var(--white);padding:8px 14px;font-size:16px}
.skip:focus{left:16px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut);position:relative}

/* superscript: Chinese sits on the English shoulder */
.sup{display:inline-block;font-size:14px;font-weight:700;line-height:1.2;margin-left:.4em;vertical-align:calc(var(--fs)*.68 - 10px);letter-spacing:0;white-space:nowrap}
.nb{white-space:nowrap}
.pager .nb,.pager .sup{white-space:normal}
/* flipped page number — one per layout, small */
.flip{position:absolute;top:24px;right:var(--gut);transform:rotate(180deg);font-size:14px;font-weight:700;line-height:1;margin:0}

/* header */
.site-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--gut);background:var(--white);border-bottom:1px solid var(--g1)}
.brand{display:block;line-height:0}
.brand svg{width:132px;height:auto;color:var(--black)}
.site-head nav{display:flex;gap:clamp(14px,2vw,28px)}
.site-head nav a{--fs:16px;font-size:16px;line-height:1.2;text-decoration:none;padding:10px 0;white-space:nowrap}
.site-head nav a:hover span[lang=en]{text-decoration:underline;text-underline-offset:4px}
.site-head nav .sup{margin-left:.25em}

/* type scale */
.display{--fs:clamp(64px,12.5vw,230px);font-size:var(--fs);line-height:1.2;letter-spacing:-.01em}
.display-2{--fs:clamp(48px,8vw,140px);font-size:var(--fs);line-height:1.2;letter-spacing:-.01em}
.display-3{--fs:clamp(32px,5.2vw,92px);font-size:var(--fs);line-height:1.2}
.h-sec{--fs:clamp(32px,4vw,56px);font-size:var(--fs);line-height:1.2}
.h-small{--fs:clamp(20px,2vw,26px);font-size:var(--fs);line-height:1.2;color:var(--g2)}
.lead-zh{font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.6;margin-top:2.2em}
.lead-zh + p{margin-top:.8em;color:var(--g4)}
.dark{background:var(--black);color:var(--white)}
.dark .lead-zh + p,.dark .div-lead p,.dark .where-copy p{color:var(--g2)}
.textlink{font-size:17px;text-underline-offset:4px}

/* home: hero */
.hero{position:relative;padding:clamp(56px,9vw,140px) 0 clamp(64px,10vw,160px)}
.hero-grid{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
@supports (container-type:inline-size){
  .hero .display{--fs:clamp(56px,min(12.5vw,24cqi),230px)}
  @media (min-width:900px){.hero .display{--fs:min(12.5vw,230px,calc((100cqi - 48px) * .1404))}}
}
.hero-copy{padding-top:clamp(0px,2.4vw,40px);color:var(--g4)}
.hero-copy p+p{margin-top:.9em}
.hero-copy .en{font-size:14px;line-height:1.6;margin-top:2.4em;max-width:46em}
.statement{padding:clamp(72px,11vw,170px) 0}
.statement p{max-width:40em}

/* crowded market — thin-line rows */
.crowded{padding:clamp(72px,9vw,140px) 0}
.rows{margin-top:clamp(40px,5vw,72px)}
.rows li{display:grid;grid-template-columns:clamp(40px,7vw,110px) minmax(0,1fr) auto;align-items:baseline;gap:24px;padding:clamp(20px,2.4vw,34px) 0;border-top:1px solid var(--g4)}
.rows li:last-child{border-bottom:1px solid var(--g4)}
.rows .n{font-size:14px;color:var(--g3)}
.rows .big{--fs:clamp(28px,4.2vw,60px);font-size:var(--fs);line-height:1.2}
.rows .zh{font-size:16px;color:var(--g2)}

/* three / four columns */
.purpose,.pays,.services{padding:clamp(72px,9vw,140px) 0}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(40px,6vw,96px)}
.cols3 li{border-top:1px solid var(--black);padding-top:16px;display:flex;flex-direction:column}
.cols3 .n,.cols4 .n{font-size:14px;color:var(--g4)}
.cols3 .big{--fs:clamp(40px,4.4vw,64px);font-size:var(--fs);line-height:1.2;margin:clamp(40px,5vw,80px) 0 .5em}
.cols3 strong{font-size:18px;line-height:1.5}
.cols3 li>span:last-child{font-size:16px;color:var(--g4);margin-top:.4em}
.pays-lead{margin-top:1.4em;color:var(--g4)}
.nums{margin-top:clamp(24px,3vw,48px)}
.nums li{border-top:0;padding-top:0}
.nums .num{font-size:clamp(80px,10.4vw,150px);line-height:1.1;letter-spacing:-.02em;margin-bottom:.25em}
.nums li>span:last-child{font-size:17px;color:var(--black);font-weight:400}
.source{font-size:14px;color:var(--g4);margin-top:clamp(40px,5vw,72px)}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.4vw,40px);margin-top:clamp(40px,6vw,96px)}
.cols4>li{border-top:1px solid var(--black);padding-top:16px}
.cols4 h3{--fs:clamp(32px,3.3vw,48px);font-size:var(--fs);line-height:1.2;margin:clamp(32px,4vw,64px) 0 clamp(20px,2.4vw,40px)}
.cols4 ul li{font-size:16px;color:var(--g4);padding:10px 0;border-top:1px solid var(--g2)}

/* where we work */
.where{padding:clamp(72px,9vw,140px) 0}
.where-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.places{margin-top:clamp(32px,4vw,64px)}
.places li{--fs:clamp(32px,3.6vw,48px);font-size:var(--fs);line-height:1.2;padding:.28em 0}
.places .sup{color:var(--g2);font-weight:400}
.where-copy{padding-top:clamp(0px,1vw,16px)}
.where-copy p+p{margin-top:.8em}

/* section dividers */
.divider{padding:clamp(64px,9vw,140px) 0 clamp(56px,7vw,110px)}
.divider-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"no lead" "title title";column-gap:48px;align-items:end}
.div-no{grid-area:no;font-size:clamp(28px,3vw,40px);line-height:1.2;color:var(--g3);margin-bottom:clamp(48px,10vw,160px)}
.divider h2{grid-area:title}
.div-lead{grid-area:lead;align-self:start;padding-top:8px}
.div-lead p+p{margin-top:.4em}

/* work cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px clamp(16px,2vw,32px);padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(72px,8vw,128px)}
.card a{display:block;text-decoration:none;color:inherit}
.card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--g1)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card a:hover .card-img img{transform:scale(1.025)}
.card-no{display:block;font-size:14px;color:var(--g4);margin-top:16px;line-height:1.4}
.card-title{--fs:22px;display:block;font-size:22px;line-height:1.35;margin-top:4px}
.card a:hover .card-title span[lang=en]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.card-tags{display:block;font-size:14px;color:var(--g4);margin-top:6px;line-height:1.6}

/* project page */
.intro{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);max-width:1440px;margin:0 auto}
.intro-text{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3.3vw,48px) var(--gut) clamp(28px,3.3vw,48px)}
.intro-text .flip{top:clamp(28px,3.3vw,48px)}
.eyebrow{font-size:14px;line-height:1.4}
.eyebrow a{--fs:14px;text-decoration:none}
.eyebrow a:hover span[lang=en]{text-decoration:underline;text-underline-offset:4px}
.proj-no{font-size:clamp(72px,7vw,120px);line-height:1.1;margin-top:clamp(24px,3vw,48px)}
.proj-title{--fs:clamp(34px,3.2vw,52px);font-size:var(--fs);line-height:1.2;margin-top:clamp(32px,6vw,120px)}
.tagline{font-size:18px;font-weight:700;line-height:1.6;margin-top:1.6em}
.desc{font-size:16px;color:var(--g4);margin-top:.7em}
.tags{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:auto;padding-top:32px;font-size:14px;color:var(--g4)}
.tags li:not(:last-child)::after{content:"·";margin:0 .6em}
.web-count{font-size:14px;margin-top:1.2em;color:var(--g4)}
.facts{margin:24px 0 0}
.facts div{padding:10px 0;border-top:1px solid var(--g2)}
.facts div:last-child{border-bottom:1px solid var(--g2)}
.facts dt{font-size:14px;color:var(--g4)}
.facts dd{margin:0;font-size:16px;overflow-wrap:anywhere}
.facts a{text-underline-offset:4px}
.related{font-size:14px;margin-top:20px}
.related a{text-underline-offset:4px}
.intro-cover{margin:0;background:var(--g1)}
.intro-cover img{width:100%;height:100%;object-fit:cover}

/* plates — each slide recomposed */
.plate{max-width:1440px;margin:12px auto 0;background:var(--bg,transparent);content-visibility:auto;contain-intrinsic-size:auto 810px}
.canvas{position:relative;aspect-ratio:16/9}
.it{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);margin:0}
.it img{width:100%;height:100%;object-fit:cover}
.it figcaption{position:absolute;left:0;top:calc(100% + 8px);font-size:14px;line-height:1.4;white-space:nowrap}
.plate .it figcaption,.plate .plate-cap{color:var(--cap,var(--g4))}
.plate-cap{font-size:14px;padding:10px clamp(16px,3.33%,48px) 12px;line-height:1.5}
.bleed .plate-cap{padding-left:0;padding-right:0}
.stat{position:absolute;left:3.33%;top:var(--top);width:34%}
.stat-big{font-size:clamp(64px,10.4vw,150px);line-height:1.1}
.stat-text{font-size:17px;font-weight:700;line-height:1.7;margin-top:.6em;max-width:16em}

/* pager */
.pager{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:24px;max-width:1440px;margin:clamp(48px,6vw,96px) auto 0;padding:28px var(--gut) clamp(56px,7vw,110px);border-top:1px solid var(--black)}
.pager a{text-decoration:none;--fs:20px;font-size:20px;line-height:1.3}
.pager a:hover span[lang=en]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pager .lbl{display:block;font-size:14px;color:var(--g4);margin-bottom:6px}
.pager .next{text-align:right}
.pager .all{font-size:16px;text-decoration:underline;text-underline-offset:4px}

/* footer */
.site-foot{padding:clamp(80px,11vw,170px) 0 40px}
.site-foot .flip{top:0}
.foot-mail{margin-top:clamp(32px,4vw,56px);font-size:clamp(20px,2.4vw,32px);line-height:1.3}
.foot-mail a{text-underline-offset:6px;text-decoration-thickness:1px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:clamp(72px,10vw,150px);padding-top:24px;border-top:1px solid var(--g4);font-size:14px;color:var(--g2)}
.foot-logo{line-height:0;margin-right:auto}
.foot-logo svg{width:96px;height:auto;color:var(--white)}

/* ---- tablet ---- */
@media (max-width:999px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .hero-grid,.where-grid{grid-template-columns:minmax(0,1fr)}
  .intro{grid-template-columns:minmax(0,1fr)}
  .proj-title{margin-top:24px}
  .tags{margin-top:0}
  .divider-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"no" "title" "lead";row-gap:24px}
  .div-no{margin-bottom:24px}
}
/* ---- phone ---- */
@media (max-width:719px){
  .site-head{height:56px}
  .nb{white-space:normal}
  .brand svg{width:120px}
  .site-head nav a:not(.mob){display:none}
  .cols3{grid-template-columns:minmax(0,1fr);gap:40px}
  .cols3 .big{margin-top:24px}
  .rows li{grid-template-columns:minmax(0,1fr);gap:6px}
  .plate{margin-top:8px}
  .canvas{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:16px}
  .bleed .canvas{padding:0;gap:0}
  .m-grid2 .canvas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .it{position:static;width:auto;height:auto}
  .it img{height:auto}
  .it figcaption{position:static;margin-top:6px;white-space:normal}
  .stat{position:static;width:auto;grid-column:1/-1;padding:8px 0 16px}
  .plate-cap{padding:8px 16px 12px}
  .pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"prev next" "all all"}
  .pager .prev{grid-area:prev}.pager .next{grid-area:next}.pager .all{grid-area:all;text-align:center;margin-top:12px}
  .pager a{--fs:17px;font-size:17px}
}
@media (max-width:374px){
  .site-head nav .sup{display:none}
}
@media (max-width:599px){
  .cards{grid-template-columns:minmax(0,1fr);gap:44px}
  .cols4{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .card-img img{transition:none}
}