/* ===========================================================
   PARADOXICAL · shared stylesheet (v2)
   One stylesheet for the whole multi-page site.
   Type system per sitemap: Archivo (structure) · Fraunces italic (idea)
   · Noto Sans TC (中文內文) · IBM Plex Mono (labels & index)
   =========================================================== */
:root{
  --ink:#0E0E13; --ink-2:#15151C; --ink-3:#0A0A0D;
  --paper:#ECECE4; --paper-2:#DFDFD6;
  --graphite:#9A9AA3; --slate:#56565F; --signal:#5D5FF2;
  --brand-blue:#233F8F;   /* brand wordmark blue */
  --hair-dark:rgba(236,236,228,.16); --hair-light:rgba(14,14,19,.16);
  --maxw:1240px; --pad:clamp(20px,5vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo','Noto Sans TC',system-ui,sans-serif;background:var(--paper);color:var(--ink);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--signal);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--signal);outline-offset:3px}
img,svg,video{display:block}

/* ---------- type helpers ---------- */
.label{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.label--signal{color:var(--signal)}
.idx{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.1em;color:var(--signal)}
.display{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:700;letter-spacing:-.032em;line-height:.98}
.idea{font-family:'Fraunces','Noto Sans TC',serif;font-style:italic;font-weight:300;line-height:1.12}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- shared nav ---------- */
.px-nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;
        padding:14px var(--pad);background:rgba(236,236,228,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
        border-bottom:1px solid var(--hair-light)}
.px-nav__mark{display:flex;align-items:center;font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.46em;color:var(--brand-blue)}
.px-nav__mark img{height:19px;width:auto;display:block}
.px-footer__mark img{height:20px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.92}
.px-nav__right{display:flex;gap:26px;align-items:center}
.px-nav__links{display:flex;gap:26px;align-items:center}
.px-nav__links a{font-family:'Archivo';font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);transition:color .3s;padding-bottom:2px}
.px-nav__links a:hover{color:var(--ink)}
.px-nav__links a.is-active{color:var(--ink);border-bottom:1px solid var(--signal)}
.px-nav__sep{width:1px;height:15px;background:rgba(14,14,19,.2)}
.px-lang{display:flex;align-items:center;gap:4px}
.px-lang button{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.06em;padding:4px 6px;border:0;background:transparent;cursor:pointer;color:var(--graphite)}
.px-lang button[aria-current="true"]{color:var(--ink)}
.px-burger{display:none;background:transparent;border:0;cursor:pointer;flex-direction:column;gap:4px;padding:6px}
.px-burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
@media (max-width:780px){
  .px-nav__links{position:fixed;inset:54px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
                 background:rgba(236,236,228,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
                 border-bottom:1px solid var(--hair-light);padding:8px var(--pad) 18px;
                 transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
  .px-nav.is-open .px-nav__links{transform:none;opacity:1;pointer-events:auto}
  .px-nav__links a{padding:14px 0;font-size:13px;width:100%;border-bottom:1px solid var(--hair-light)}
  .px-nav__links a.is-active{border-bottom:1px solid var(--signal)}
  .px-nav__links .px-nav__sep{display:none}
  .px-burger{display:flex}
  .px-nav.is-open .px-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .px-nav.is-open .px-burger span:nth-child(2){opacity:0}
  .px-nav.is-open .px-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
}

/* ---------- buttons ---------- */
.btn{font-family:'Archivo';font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-radius:3px;
     padding:14px 28px;transition:background .3s,color .3s,border-color .3s,transform .12s;cursor:pointer;border:1px solid var(--ink);display:inline-flex;align-items:center;gap:10px}
.btn:active{transform:translateY(1px)}
.btn--solid{color:var(--paper);background:var(--ink)}
.btn--solid:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--ghost{color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--signal{color:#fff;background:var(--signal);border-color:var(--signal)}
.btn--signal:hover{background:#4a4cd6;border-color:#4a4cd6}

/* ---------- generic section ---------- */
section{position:relative}
.sec-pad{padding:104px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:46px}
h2.sec-title{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,54px);letter-spacing:-.03em;line-height:1}
.sec-more{font-family:'Archivo';font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid rgba(14,14,19,.3);padding-bottom:3px;transition:color .3s,border-color .3s}
.sec-more:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- inner-page header ---------- */
.page-head{padding:152px 0 56px;border-bottom:1px solid var(--hair-light)}
.page-head__row{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.page-head h1{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:700;font-size:clamp(40px,6.6vw,92px);letter-spacing:-.035em;line-height:.98;margin-top:16px}
.page-head__intro{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:#33333b;max-width:58ch;margin-top:26px}

/* ---------- hero (home) ---------- */
header.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--paper);display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;z-index:0;transform:scale(1.04);will-change:transform,opacity}
.hero__media video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.0)}
.hero__poster{background:var(--paper) center/cover no-repeat}
.hero__light{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46vmax circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.45),rgba(255,255,255,0) 56%),
             radial-gradient(24vmax circle at var(--mx,50%) var(--my,40%),rgba(93,95,242,.05),rgba(93,95,242,0) 60%)}
.hero__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(135% 120% at 50% 38%,transparent 54%,rgba(14,14,19,.10))}
.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:9vh;will-change:transform,opacity}
.hero__fig{position:absolute;right:var(--pad);top:96px;z-index:3;text-align:right;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.18em;line-height:2;color:var(--slate);text-transform:uppercase}
.hero__eyebrow{display:inline-flex;align-items:center;gap:13px;margin-bottom:22px}
.hero__eyebrow .tick{display:block;width:26px;height:1px;background:var(--signal)}
h1.hero__title{font-size:clamp(32px,6.6vw,88px);color:var(--ink);line-height:1.02;white-space:nowrap}
.hero__sub{font-weight:300;font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:#33333b;max-width:50ch;margin-top:22px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- logo marquee ---------- */
.clients{border-top:1px solid var(--hair-light);border-bottom:1px solid var(--hair-light);padding:34px 0;overflow:hidden}
.clients__title{margin:0 auto 18px;max-width:var(--maxw);padding:0 var(--pad)}
.marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:104px;padding:0 52px;align-items:center;animation:marquee 56s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo{position:relative;display:flex;align-items:center;justify-content:center;height:84px;width:200px}
.logo img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:72px;width:auto;max-width:200px;object-fit:contain;transition:opacity .35s ease}
.logo__mono{opacity:.55}
.logo__color{opacity:0}
.logo:hover .logo__mono{opacity:0}
.logo:hover .logo__color{opacity:1}

/* ---------- selected work cards ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:820px){.work-grid{grid-template-columns:1fr}}
.card{display:block;background:#F4F3ED;border:1px solid rgba(14,14,19,.14);border-radius:4px;overflow:hidden;transition:transform .4s cubic-bezier(.2,0,0,1),border-color .4s,box-shadow .4s}
.card:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:0 22px 48px -32px rgba(14,14,19,.5)}
.card__vis{position:relative;border-bottom:1px solid rgba(14,14,19,.12);aspect-ratio:16/10;background:#E2E1D8;overflow:hidden}
.card__vis .scan{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 11px,rgba(14,14,19,.04) 11px 12px);display:flex;align-items:center;justify-content:center}
.card__vis .scan span{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#b3b3aa}
.card__cat{position:absolute;left:16px;top:14px;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);background:rgba(236,236,228,.82);padding:4px 9px;border-radius:2px}
.card__body{padding:22px 24px 24px}
.card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card__client{font-family:'Archivo';font-weight:500;font-size:13px;color:var(--slate)}
.card__no{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--graphite)}
.card__title{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(19px,2vw,25px);letter-spacing:-.02em;line-height:1.12;margin-top:8px}
.spine{margin-top:18px;border-top:1px solid rgba(14,14,19,.1);padding-top:14px}
.spine__obv{opacity:0;transform:translateY(-3px);transition:opacity .4s,transform .4s}
.card:hover .spine__obv{opacity:1;transform:none}
.spine__obv .label,.spine__re .label{font-size:9.5px;letter-spacing:.16em}
.spine__obv .v{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:14px;color:var(--graphite);text-decoration:line-through;margin-left:10px}
.spine__re{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.spine__re .v{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink)}

/* ---------- idea band ---------- */
.idea-band{background:var(--paper-2);border-top:1px solid var(--hair-light);border-bottom:1px solid var(--hair-light);overflow:hidden}
.idea-band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:88px;padding-bottom:88px}
@media (max-width:820px){.idea-band .wrap{grid-template-columns:1fr;gap:24px}}
.idea-line{font-size:clamp(28px,4.2vw,50px);color:var(--ink);max-width:14ch}
.idea-cap{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:15px;line-height:1.6;color:var(--slate);margin-top:20px;max-width:42ch}
.mark-stage{display:flex;justify-content:center;align-items:center}
.mark-stage svg{width:min(100%,420px);height:auto}
.iso-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(30deg,rgba(14,14,19,.06) 0 1px,transparent 1px 64px),repeating-linear-gradient(-30deg,rgba(14,14,19,.06) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(120% 100% at 70% 50%,#000 20%,transparent 76%);mask-image:radial-gradient(120% 100% at 70% 50%,#000 20%,transparent 76%)}

/* ---------- dark band (method / cta) ---------- */
.dark{background:var(--ink);color:var(--paper);overflow:hidden}
.grid-tex{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(30deg,var(--hair-dark) 0 1px,transparent 1px 72px),repeating-linear-gradient(-30deg,var(--hair-dark) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(125% 100% at 50% 30%,#000 26%,transparent 78%);mask-image:radial-gradient(125% 100% at 50% 30%,#000 26%,transparent 78%)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-dark);border:1px solid var(--hair-dark);margin-top:52px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--ink);padding:34px 30px}
.step__n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--signal)}
.step__t{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:23px;letter-spacing:-.01em;margin-top:14px}
.step__d{font-weight:300;font-size:15px;line-height:1.6;color:var(--graphite);margin-top:12px;max-width:32ch}
.band-idea{font-family:'Fraunces','Noto Sans TC',serif;font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,30px);color:var(--paper);margin-top:54px;max-width:24ch}

/* ---------- disciplines index ---------- */
.disc-index{border-top:1px solid var(--hair-light);margin-top:8px}
.disc{display:grid;grid-template-columns:64px 1.1fr 1.4fr;gap:28px;align-items:baseline;padding:26px 6px;border-bottom:1px solid rgba(14,14,19,.1);transition:padding-left .4s ease,background .4s}
.disc:hover{padding-left:18px;background:rgba(14,14,19,.02)}
.disc__id{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--signal)}
.disc__name{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(18px,2.1vw,26px);letter-spacing:-.015em}
.disc__line{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:14.5px;line-height:1.55;color:var(--slate)}
@media (max-width:760px){.disc{grid-template-columns:48px 1fr;gap:6px 16px}.disc__line{grid-column:2/3}}

/* ---------- two-col prose (approach / about) ---------- */
.prose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
@media (max-width:820px){.prose-grid{grid-template-columns:1fr;gap:28px}}
.prose-block h3{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15}
.prose-block p{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:16px;line-height:1.66;color:var(--slate);margin-top:14px;max-width:50ch}
.principle-list{border-top:1px solid var(--hair-light)}
.principle{display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:baseline;padding:24px 6px;border-bottom:1px solid rgba(14,14,19,.1)}
.principle__n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;color:var(--signal)}
.principle__t{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(17px,2vw,22px);letter-spacing:-.01em}
.principle__d{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:15px;line-height:1.6;color:var(--slate);margin-top:6px;max-width:60ch}

/* ---------- stat / facts row (about) ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-light);border:1px solid var(--hair-light)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{background:var(--paper);padding:30px 26px}
.fact__n{font-family:'Archivo';font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em}
.fact__l{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:8px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.contact-info dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-top:26px}
.contact-info dd{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:400;font-size:17px;color:var(--ink);margin-top:6px}
.contact-info dd a{border-bottom:1px solid rgba(14,14,19,.25);transition:border-color .3s}
.contact-info dd a:hover{border-color:var(--signal)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.field input,.field textarea{font-family:'Archivo','Noto Sans TC',sans-serif;font-size:15px;color:var(--ink);background:#F4F3ED;border:1px solid var(--hair-light);border-radius:3px;padding:13px 14px;transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{color:#a9a9a1}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
.field textarea{resize:vertical;min-height:130px}
.field__err{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:#b23b3b;display:none}
.field.invalid input,.field.invalid textarea{border-color:#b23b3b}
.field.invalid .field__err{display:block}
.form-status{font-family:'Archivo','Noto Sans TC',sans-serif;font-size:14px;color:var(--signal);margin-top:6px;min-height:20px}

/* ---------- footer ---------- */
.px-footer{background:var(--ink-3);color:var(--graphite);padding:64px 0 40px;border-top:1px solid var(--hair-dark)}
.px-footer__top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px}
.px-footer__mark{font-family:'Archivo';font-weight:600;font-size:14px;letter-spacing:.46em;color:var(--paper)}
.px-footer__tag{font-family:'Fraunces','Noto Sans TC',serif;font-style:italic;font-weight:300;font-size:18px;color:var(--graphite);margin-top:12px}
.px-footer__contact{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--slate);margin-top:18px}
.px-footer__links{display:flex;flex-direction:column;gap:10px;font-family:'Archivo';font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.px-footer__links a{color:var(--graphite);transition:color .3s}
.px-footer__links a:hover{color:var(--paper)}
.px-footer__base{margin-top:48px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}

/* ---------- visual blocks (brand geometric system + real architectural asset) ---------- */
/* full-bleed architectural image band, uses the brand's own grayscale stairs photo */
.img-band{position:relative;height:clamp(300px,52vh,560px);overflow:hidden;background:var(--ink)}
.img-band img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.03) brightness(.99);transition:transform 1.4s cubic-bezier(.2,0,0,1)}
.img-band:hover img{transform:scale(1.03)}
.img-band__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(14,14,19,.6),rgba(14,14,19,0) 36%),radial-gradient(120% 120% at 50% 38%,transparent 52%,rgba(14,14,19,.26))}
.img-band__edge{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--signal) 50%,transparent)}
.img-band__line{position:absolute;left:var(--pad);bottom:30px;max-width:22ch;font-family:'Fraunces','Noto Sans TC',serif;font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,32px);line-height:1.12;color:var(--paper)}

/* inline architectural figure (sits beside prose) */
.media-figure{position:relative;border:1px solid var(--hair-light);border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:var(--ink)}
.media-figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.media-figure__tag{position:absolute;left:14px;top:13px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:rgba(14,14,19,.55);padding:4px 9px;border-radius:2px}
.split-media{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media (max-width:820px){.split-media{grid-template-columns:1fr;gap:30px}}

/* light-section iso texture (ambient geometric grammar) */
.iso-bg{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:repeating-linear-gradient(30deg,rgba(14,14,19,.05) 0 1px,transparent 1px 60px),repeating-linear-gradient(-30deg,rgba(14,14,19,.05) 0 1px,transparent 1px 60px);
  -webkit-mask-image:radial-gradient(120% 90% at 80% 20%,#000 12%,transparent 72%);mask-image:radial-gradient(120% 90% at 80% 20%,#000 12%,transparent 72%)}

/* oversized index numeral as a typographic visual */
.ghost-num{font-family:'Archivo';font-weight:700;font-size:clamp(120px,22vw,260px);letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(14,14,19,.16);text-stroke:1px rgba(14,14,19,.16);pointer-events:none;user-select:none}

/* ---------- work case list ---------- */
.case{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:56px 0;border-bottom:1px solid var(--hair-light)}
.case:first-child{border-top:1px solid var(--hair-light)}
@media (max-width:820px){.case{grid-template-columns:1fr;gap:26px;padding:40px 0}}
.case__vis{position:relative;aspect-ratio:4/3;border:1px solid var(--hair-light);border-radius:4px;overflow:hidden;background:var(--paper-2)}
.case__vis .iso-bg{opacity:.5}
.case__vis .case__no{position:absolute;left:18px;top:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink)}
.case__vis .case__cat{position:absolute;right:18px;top:16px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.case__meta{display:flex;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.case__title{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(24px,3vw,38px);letter-spacing:-.025em;line-height:1.08;margin-top:12px}
.case__bg{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:15px;line-height:1.6;color:var(--slate);margin-top:14px;max-width:46ch}
.case__spine{margin-top:22px;border-top:1px solid var(--hair-light)}
.case__row{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid rgba(14,14,19,.08);align-items:baseline}
.case__row .label{font-size:9.5px;letter-spacing:.16em}
.case__ov{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:15px;color:var(--graphite);text-decoration:line-through}
.case__rv{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.case__dv{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:400;font-size:15px;line-height:1.55;color:var(--slate)}
/* real-image + linked cases */
a.case,a.case--link{text-decoration:none;color:inherit}
.case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case--link:hover .case__img{transform:scale(1.04)}
.case__link{text-decoration:none;color:inherit;display:block}
.case__cta{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--signal);opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.case--link:hover .case__cta{opacity:1;transform:translateX(0)}
.case--link:hover .case__title{color:var(--signal)}

/* "more coming" card in the home work grid */
.card--more{display:flex;align-items:center;background:var(--paper-2);border-style:dashed}
.card--more .card__body{padding:34px 30px}

/* ---------- more work coming note ---------- */
.more-note{margin-top:56px;padding:44px 0 8px;border-top:1px solid var(--hair-light);max-width:62ch}
.more-note__t{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15;margin-top:14px}
.more-note__d{font-family:'Archivo','Noto Sans TC',sans-serif;font-weight:300;font-size:15.5px;line-height:1.65;color:var(--slate);margin:14px 0 22px;max-width:56ch}

/* ---------- scroll reveal ---------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,0,0,1),transform .7s cubic-bezier(.2,0,0,1)}
[data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  [data-rv]{opacity:1;transform:none}
}