@font-face {
  font-family: "Noto Sans TC Self";
  src: url("/assets/fonts/NotoSansTC-subset.a638a6edfa.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Self";
  src: url("/assets/fonts/Archivo-latin.5809d68c68.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif Self";
  src: url("/assets/fonts/InstrumentSerif-Regular.6feff4b779.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif Self";
  src: url("/assets/fonts/InstrumentSerif-Italic.09ec03aa26.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f0ede5;
  --ink: #11100e;
  --night: #0b0b0a;
  --white: #f4f1e9;
  --rust: #c6683d;
  --rule: rgba(17, 16, 14, .18);
  --space-copy: 1.15rem;
  --space-heading-copy: clamp(20px, 3vw, 32px);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Archivo Self", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans-cjk: "Noto Sans TC Self", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --serif-accent: "Instrument Serif Self", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--paper); scroll-behavior: auto; }
html.menu-scroll-locked { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans-cjk); font-weight: 400; line-height: 1.8; }
body.is-loading, body.menu-open { overflow: hidden; }
body.is-loading { animation: body-failsafe .01s 3s forwards; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.image-window picture, .inner-window picture, .film-frame picture { display: block; width: 100%; height: 100%; }
button, input, select, textarea { font: inherit; }
p { text-align: start; text-wrap: pretty; }
p + p { margin-top: var(--space-copy); }
.brand-dot { display: inline-block; flex: 0 0 auto; width: .13em; aspect-ratio: 1; border-radius: 50%; background: var(--rust); transform-origin: 50% 50%; }
.skip-link { position: fixed; z-index: 250; top: 12px; inset-inline-start: 12px; transform: translateY(-180%); background: #fff; color: #000; padding: 12px 16px; font: 700 12px/1 var(--mono); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 80; top: 0; width: 100%; display: flex; align-items: center; gap: 26px; padding: max(18px, env(safe-area-inset-top)) 24px 18px; color: var(--ink); background: rgba(240,237,229,.94); border-bottom: 1px solid rgba(17,16,14,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: color .25s ease, background-color .25s ease, border-color .25s ease; pointer-events: none; }
.site-header.is-dark, body.menu-open .site-header { color: var(--white); background: rgba(11,11,10,.94); border-color: rgba(244,241,233,.12); }
.site-header a, .site-header button { pointer-events: auto; }
.wordmark { display: inline-flex; align-items: flex-end; margin-inline-end: auto; color: inherit; font-family: var(--display); font-size: 1rem; font-stretch: 70%; font-weight: 900; line-height: .8; letter-spacing: -.055em; text-decoration: none; }
.wordmark .brand-dot { width: .14em; margin-inline-start: .06em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(13px, 1.7vw, 27px); }
.desktop-nav a { position: relative; padding-block: 5px; color: inherit; text-decoration: none; font: 700 9px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.desktop-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; border: 0; padding: 8px 0; background: none; color: inherit; font: 800 10px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.mobile-panel { position: fixed; z-index: 75; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; background: var(--night); color: var(--white); padding: max(92px, calc(env(safe-area-inset-top) + 76px)) 22px max(30px, env(safe-area-inset-bottom)); }
.mobile-panel[aria-hidden="false"] { display: grid; }
.mobile-panel nav { display: flex; flex-direction: column; justify-content: center; align-self: center; width: 100%; min-height: min-content; }
.mobile-panel a { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #393835; padding: clamp(12px,1.8svh,16px) 0; text-decoration: none; font-size: clamp(1.5rem,6.7vw,1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.mobile-panel a:last-child { border-bottom: 1px solid #393835; }
.mobile-panel a::after { content: "↗"; color: var(--rust); font: 700 12px/1 var(--mono); }
.mobile-panel a[aria-current="page"]::after { content: "●"; }
html[lang="en"] .mobile-panel a { font-family: var(--display); font-stretch: 70%; letter-spacing: -.01em; }
.is-loading .site-header { opacity: 0; animation: header-failsafe .01s 3s forwards; }

.opening { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; overflow: clip; background: var(--paper); color: var(--ink); cursor: pointer; animation: opening-failsafe .01s 3s forwards; }
@keyframes opening-failsafe { to { visibility: hidden; pointer-events: none; } }
@keyframes header-failsafe { to { opacity: 1; } }
@keyframes body-failsafe { to { overflow: auto; } }
.opening-mark { display: flex; align-items: flex-end; font-family: var(--display); font-size: clamp(2.5rem, 7vw, 7rem); font-stretch: 70%; font-weight: 900; line-height: .8; letter-spacing: -.075em; }
.opening-mark .brand-dot, .end-logo .brand-dot { margin-inline-start: .06em; }
.opening-count { position: absolute; top: max(22px, env(safe-area-inset-top)); inset-inline-end: 24px; font: 800 10px/1 var(--mono); letter-spacing: .06em; }
.opening small { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); font: 700 9px/1 var(--mono); letter-spacing: .08em; }

/* Homepage: the approved design-e/n composition. */
.home { background: var(--night); }
.aperture { height: 260svh; background: var(--paper); }
.aperture-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--paper); isolation: isolate; }
.draft-grid, .inner-grid { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: clamp(48px, 8vw, 112px) clamp(48px, 8vw, 112px); }
.draft-grid { position: absolute; inset: 0; opacity: .46; mask-image: linear-gradient(to bottom, transparent 3%, #000 18%, #000 82%, transparent 97%); }
.register { position: absolute; z-index: 2; width: 17px; height: 17px; opacity: .75; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(90deg, var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
.register-nw { inset-block-start: 18%; inset-inline-start: 8%; }.register-ne { inset-block-start: 18%; inset-inline-end: 8%; }.register-sw { inset-block-end: 18%; inset-inline-start: 8%; }.register-se { inset-block-end: 18%; inset-inline-end: 8%; }
.window-wrap { position: absolute; z-index: 3; top: 8svh; width: 100%; display: flex; justify-content: flex-end; padding-inline-end: 17vw; pointer-events: none; }
.image-window { position: relative; width: clamp(190px, 23vmin, 330px); aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px; background: #211713; clip-path: inset(0); transform: scale(1); transform-origin: 58% 42%; will-change: transform, clip-path; }
.image-window img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.92); }
.image-window span { position: absolute; inset: 0; background: #000; opacity: 0; }
.hero-copy { position: absolute; z-index: 5; bottom: 9svh; width: min(100%, 1180px); inset-inline: 0; margin-inline: auto; padding: 12px clamp(22px, 6vw, 78px); background: var(--paper); text-align: center; }
.hero-copy h1, .statement h2, .finale h2 { margin: 0; font-weight: 900; line-height: .91; letter-spacing: -.07em; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; }
.hero-copy h1 { font-size: clamp(3rem, 7.2vw, 8.3rem); }
.hero-copy h1 span, .statement h2 span, .finale h2 span { display: block; }
.hero-description { max-width: 26em; margin: var(--space-heading-copy) auto 0; font-size: clamp(15px,1vw,16px); font-weight: 500; line-height: 1.8; }
.scroll-note { position: absolute; z-index: 5; inset-inline-end: 24px; bottom: 28px; display: flex; align-items: center; gap: 9px; font: 800 8px/1 var(--mono); letter-spacing: .08em; }
.scroll-note span { width: 34px; height: 1px; background: currentColor; }
.statement { height: 190svh; background: var(--night); color: var(--white); }
.statement-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; padding: 10svh clamp(22px, 7vw, 110px); }
.statement h2 { max-width: 1180px; font-size: clamp(4.2rem, 10.5vw, 11.5rem); color: transparent; background: linear-gradient(90deg, var(--white) 0 var(--lit, 0%), #363532 var(--lit, 0%) 100%); background-clip: text; -webkit-background-clip: text; }
.statement-description { max-width: 26em; margin: var(--space-heading-copy) 0 0 auto; font-size: clamp(15px,1vw,16px); font-weight: 500; line-height: 1.8; color: #9f9b93; }
.film { height: 230svh; background: var(--night); color: var(--white); }.film-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; border-top: 1px solid #2e2d2a; }
.film-head { position: absolute; z-index: 4; top: 76px; width: 100%; display: flex; justify-content: flex-end; padding-inline: clamp(22px, 5vw, 74px); font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.film-track { position: absolute; top: 18svh; inset-inline-start: 50%; height: 64svh; display: flex; align-items: center; gap: clamp(24px, 5vw, 84px); will-change: transform; }
.film-frame { flex: 0 0 auto; width: min(58vw, 620px); height: min(58svh, 690px); margin: 0; overflow: hidden; background: #171614; }.film-frame.is-wide { width: min(72vw, 820px); height: min(52svh, 620px); }
.film-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.1) brightness(.82); }
.scan-line { position: absolute; z-index: 3; top: 13svh; bottom: 13svh; inset-inline-start: 50%; width: 1px; background: rgba(244, 241, 233, .18); }
.scan-line::before,.scan-line::after { content: ""; position: absolute; inset-inline-start: 50%; width: 9px; height: 9px; border: 1px solid var(--white); transform: translateX(-50%); }.scan-line::before { top: 0; }.scan-line::after { bottom: 0; }
.scan-line i { display: block; height: 18%; background: var(--rust); box-shadow: 0 0 22px rgba(198,104,61,.5); }
.film-caption { position: absolute; z-index: 4; bottom: 6svh; inset-inline-start: 50%; display: flex; align-items: baseline; gap: 16px; transform: translateX(-50%); white-space: nowrap; }
.film-caption span { font: 700 9px/1 var(--mono); color: var(--rust); }.film-caption strong { font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.fields { height: 260svh; background: var(--night); color: var(--white); }.fields-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; grid-template-rows: auto 1fr auto; padding-block: 9svh 5svh; }
.fields-head { display: flex; align-items: end; justify-content: flex-end; padding-inline: clamp(22px, 5vw, 74px); }.fields-head h2 { margin: 0; text-align: end; font-size: clamp(1.45rem, 2.8vw, 3rem); line-height: 1.05; letter-spacing: -.045em; word-break: keep-all; }
.field-lines { display: flex; flex-direction: column; justify-content: center; padding-block: 4svh; }.field-line { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); width: 100%; padding: 1.4svh clamp(22px, 5vw, 74px); border-top: 1px solid #383733; color: #45443f; will-change: transform, color; }.field-line:last-child { border-bottom: 1px solid #383733; }
.field-line > span { flex: 0 0 auto; font: 700 9px/1 var(--mono); color: var(--rust); }.field-line h3 { display: flex; align-items: baseline; gap: 22px; margin: 0; font-size: clamp(3rem, 8vw, 8.4rem); line-height: .92; letter-spacing: -.07em; white-space: nowrap; }.field-line small { font: 700 clamp(.43rem,.75vw,.7rem)/1 var(--mono); letter-spacing: .1em; }.field-line.is-active { color: var(--white); }
.fields-thread { margin: 0; padding-inline: clamp(22px, 5vw, 74px); text-align: start; font-size: clamp(15px,1vw,16px); font-weight: 500; line-height: 1.8; color: #8e8a82; }
.lss-home { position: relative; padding: clamp(110px,16vw,220px) clamp(22px,7vw,110px); background: var(--paper); color: var(--ink); }
.lss-home-head { display: grid; grid-template-columns: minmax(210px,.72fr) 1.28fr; gap: 7vw; align-items: end; margin-bottom: clamp(65px,9vw,130px); }
.lss-home h2 { margin: 0; font-size: clamp(3.8rem,9vw,9rem); line-height: .86; letter-spacing: -.015em; }
.lss-home h2 span { display: block; margin-top: .2em; font-size: .34em; line-height: 1.05; }
.lss-home-head > p { max-width: 36em; margin: 0; }
.lss-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--ink); }
.lss-grid article { padding: 34px clamp(0px,2vw,30px) 20px; border-bottom: 1px solid var(--ink); }
.lss-grid article + article { border-inline-start: 1px solid var(--ink); }
.lss-grid h3 { margin: 0 0 var(--space-copy); font-size: clamp(1.65rem,2.8vw,3.1rem); line-height: 1; }
.lss-grid p:last-child { max-width: 29em; }
.cases { height: 250svh; background: var(--night); color: var(--white); }
.cases-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; padding-top: clamp(78px,10svh,110px); border-top: 1px solid #2e2d2a; }
.cases-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-inline: clamp(22px,5vw,74px); }
.cases-head h2 { margin: 0; font-size: clamp(2.5rem,6vw,6.6rem); line-height: .92; letter-spacing: -.015em; }
.cases-head p { max-width: 26em; margin: 0; color: #aaa69d; }
.cases-track { position: absolute; top: 32svh; inset-inline-start: 50%; display: flex; gap: clamp(18px,3vw,46px); will-change: transform; }
.case-card { position: relative; flex: 0 0 auto; width: min(43vw,520px); color: var(--white); text-decoration: none; }
.case-card figure { position: relative; height: 43svh; min-height: 290px; max-height: 500px; margin: 0; overflow: hidden; background: #181715; }
.case-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.06) brightness(.78); transition: transform .55s cubic-bezier(.2,.7,.1,1), filter .4s ease; }
.case-card:hover img,.case-card:focus-visible img { transform: scale(1.035); filter: saturate(.9) contrast(1.05) brightness(.9); }
.case-card small { display: block; margin-top: 15px; color: var(--rust); font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.case-card h3 { margin: 9px 0 0; font-size: clamp(1.8rem,3vw,3.4rem); line-height: .95; letter-spacing: -.015em; }
.cases-counter { position: absolute; inset-inline-end: clamp(22px,5vw,74px); bottom: 5svh; font: 700 9px/1 var(--mono); letter-spacing: .09em; }
.finale { height: 220svh; background: var(--paper); color: var(--ink); }.finale-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; padding: 12svh 22px 10svh; }
.end-logo { position: absolute; z-index: 1; top: 30%; display: flex; align-items: flex-end; font-family: var(--display); font-size: clamp(3.2rem,10vw,10rem); font-stretch: 70%; font-weight: 900; line-height: .8; letter-spacing: -.075em; }.end-logo span { opacity: 0; }
.finale-copy { position: relative; z-index: 2; align-self: end; width: min(100%,1150px); text-align: center; }.finale h2 { font-size: clamp(3.7rem,8.4vw,9.4rem); }.finale-copy > p { max-width: 26em; margin: var(--space-heading-copy) auto 0; font-size: clamp(15px,1vw,16px); font-weight: 500; line-height: 1.8; }.finale-copy a { display: inline-block; margin-top: 28px; border-bottom: 1px solid; padding-bottom: 5px; text-decoration: none; font: 800 10px/1 var(--mono); letter-spacing: .06em; }
.home-footer { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); width: 100%; display: flex; justify-content: space-between; padding-inline: clamp(22px,5vw,74px); font: 700 8px/1 var(--mono); letter-spacing: .05em; }

/* Shared inner pages. */
.inner { background: var(--paper); }
.inner-hero { position: relative; min-height: 92svh; display: grid; align-content: end; overflow: hidden; padding: 22svh clamp(22px,7vw,110px) 10svh; }
.inner-grid { position: absolute; inset: 0; opacity: .42; mask-image: linear-gradient(to bottom,#000,transparent 92%); }
.inner-hero > *:not(.inner-grid) { position: relative; z-index: 1; }
.kicker { margin: 0 0 clamp(24px,5vh,55px); color: var(--rust); font: 800 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.inner h1, .inner h2 { word-break: keep-all; overflow-wrap: normal; }
.inner-hero h1 { max-width: 1200px; margin: 0; font-size: clamp(3.5rem,10vw,10rem); font-weight: 900; line-height: .86; letter-spacing: -.045em; text-wrap: balance; }
.title-lines > span { display: block; }
.zh-title > span { white-space: nowrap; }
.inner-window { position: absolute !important; z-index: 0 !important; top: 10%; inset-inline-end: 8%; width: clamp(170px,22vw,320px); aspect-ratio: 2 / 3; margin: 0; overflow: hidden; border-radius: 4px; background: #c9c2b5; }
.inner-window img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0,var(--window-y,0),0) scale(var(--window-scale,1.055)); transform-origin: var(--window-origin,50% 50%); filter: saturate(.72) contrast(1.08) brightness(.92); will-change: transform; }
.page-about { --title-chars: 7; }.page-about .inner-window { top: 9%; inset-inline-end: 9%; width: clamp(180px,23vw,330px); --window-origin: 58% 44%; }
.page-solutions { --title-chars: 5; }.page-solutions .inner-window { top: 8%; inset-inline-end: 16%; width: clamp(160px,20vw,290px); --window-origin: 42% 52%; }
.page-contact { --title-chars: 8; }.page-contact .inner-window { top: 13%; inset-inline-end: 5%; width: clamp(190px,25vw,360px); --window-origin: 62% 50%; }
.page-experience { --title-chars: 6; }.page-experience .inner-window { top: 7%; inset-inline-end: 20%; width: clamp(170px,21vw,300px); --window-origin: 45% 42%; }
.page-portal { --title-chars: 6; }.page-portal .inner-window { top: 15%; inset-inline-end: 8%; width: clamp(155px,19vw,270px); --window-origin: 54% 50%; }
.page-en { --title-chars: 12; }.page-en .inner-window { top: 8%; inset-inline-end: 6%; width: clamp(190px,24vw,350px); --window-origin: 48% 40%; }
.page-en .inner-hero h1, .study-hero h1 { letter-spacing: -.03em; }
.page-en h1, .page-en h2, .page-en h3 { letter-spacing: -.025em; word-spacing: .055em; }
.page-not-found { --title-chars: 5; }.page-not-found .inner-window { top: 13%; inset-inline-end: 13%; width: clamp(145px,18vw,250px); --window-origin: 50% 50%; }
.page-privacy { --title-chars: 6; }.page-privacy .inner-hero::after { content: ""; position: absolute; top: 22%; inset-inline-end: clamp(28px,10vw,150px); width: clamp(10px,1.2vw,18px); aspect-ratio: 1; border-radius: 50%; background: var(--rust); }
.inner-hero .lead { max-width: 26em; margin: var(--space-heading-copy) 0 0 auto; font-size: clamp(15px,1.5vw,19px); font-weight: 500; line-height: 1.8; }
.content-band { padding: clamp(90px,14vw,200px) clamp(22px,7vw,110px); }
.content-band.dark { background: var(--night); color: var(--white); }.content-band.paper { background: var(--paper); color: var(--ink); }
.section-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); align-items: end; gap: clamp(32px,6vw,96px); margin-bottom: clamp(60px,9vw,130px); }
.section-intro > * { min-width: 0; }.section-intro h2 { margin: 0; font-size: clamp(2.8rem,5.5vw,6.4rem); font-weight: 900; line-height: .98; letter-spacing: -.065em; text-wrap: balance; }.section-intro p { justify-self: end; align-self: end; max-width: 26em; margin: 0; font-size: clamp(15px,1vw,16px); line-height: 1.8; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid currentColor; }
.card { position: relative; padding: 34px clamp(0px,2vw,30px) 54px; border-bottom: 1px solid currentColor; }.card + .card { border-inline-start: 1px solid currentColor; }.card .index { display: block; margin-bottom: var(--space-heading-copy); color: var(--rust); font: 800 9px/1 var(--mono); }.card h3 { margin: 0 0 var(--space-copy); font-size: clamp(1.7rem,3vw,3.4rem); line-height: .96; letter-spacing: -.05em; }.card p,.card li,.copy-block p { max-width: 26em; font-size: clamp(15px,1vw,16px); line-height: 1.8; }.card ul { padding-inline-start: 1.1em; }
.copy-stack { border-top: 1px solid currentColor; }.copy-block { display: grid; grid-template-columns: minmax(190px,.65fr) minmax(0,1.35fr); gap: 6vw; padding: clamp(38px,6vw,80px) 0; border-bottom: 1px solid currentColor; }.copy-block h2,.copy-block h3 { margin: 0; font-size: clamp(2rem,4vw,4.7rem); line-height: .98; letter-spacing: -.055em; }.copy-block .copy { max-width: 760px; }.copy-block .copy > :first-child { margin-top: 0; }
.text-link,.button-link { display: inline-block; margin-top: 22px; border-bottom: 1px solid; padding-bottom: 5px; text-decoration: none; font: 800 10px/1 var(--mono); letter-spacing: .06em; }.button-link { border: 1px solid; padding: 14px 18px; }.button-link:hover,.button-link:focus-visible { background: var(--rust); color: #fff; border-color: var(--rust); }
.portal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 1px; background: var(--ink); border: 1px solid var(--ink); }.portal-card { min-width: 0; min-height: 460px; display: flex; flex-direction: column; padding: clamp(30px,5vw,70px); background: var(--paper); }.portal-card h2 { margin: 0; font-size: clamp(3rem,6.2vw,7rem); line-height: 1; letter-spacing: -.055em; }.portal-card .button-link { margin-top: auto; align-self: flex-start; }
.legal { max-width: 920px; margin-inline: auto; counter-reset: legal; }.legal article { padding: 42px 0; border-top: 1px solid var(--rule); }.legal article:last-child { border-bottom: 1px solid var(--rule); }.legal h2,.legal h3 { font-size: clamp(1.5rem,3vw,2.6rem); letter-spacing: -.04em; }.legal p { max-width: 26em; font-size: clamp(15px,1vw,16px); line-height: 1.8; }
.study-hero { min-height: 100svh; display: grid; align-content: end; }.study-hero .study-copy { position: relative; z-index: 1; }.study-hero .study-image { position: absolute; min-height: 0; }.study-hero h1 { font-size: clamp(4rem,9vw,9rem); }.study-hero .lead { margin-inline-start: 0; }.page-atelier { --title-chars: 7; }.page-atelier .inner-window { top: 10%; inset-inline-end: 8%; width: clamp(190px,25vw,360px); --window-origin: 48% 52%; }.page-coffee { --title-chars: 8; }.page-coffee .inner-window { top: 7%; inset-inline-end: 14%; width: clamp(180px,22vw,320px); --window-origin: 58% 48%; }.page-sharpening { --title-chars: 7; }.page-sharpening .inner-window { top: 8%; inset-inline-end: 7%; width: clamp(185px,24vw,350px); --window-origin: 52% 48%; }.page-interior { --title-chars: 7; }.page-interior .inner-window { top: 11%; inset-inline-end: 14%; width: clamp(175px,22vw,325px); --window-origin: 50% 44%; }.page-objects { --title-chars: 5; }.page-objects .inner-window { top: 8%; inset-inline-end: 8%; width: clamp(190px,24vw,350px); --window-origin: 54% 48%; }
.study-feature { position: relative; height: min(78svh,820px); overflow: hidden; background: var(--night); }
.study-feature img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08) brightness(.84); }
.study-feature span { position: absolute; inset-inline-end: clamp(22px,5vw,74px); bottom: 24px; color: var(--white); font: 700 9px/1 var(--mono); letter-spacing: .1em; }
.definition-list div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; border-top: 1px solid currentColor; padding: 12px 0; }.definition-list dt { font: 700 10px/1.5 var(--mono); }.definition-list dd { margin: 0; }
.study-links { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid currentColor; }
.study-links a { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 20px; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; font-size: clamp(1.2rem,2vw,2rem); line-height: 1.15; }
.study-links a + a { border-inline-start: 1px solid currentColor; }
.study-links span { color: var(--rust); font: 700 9px/1 var(--mono); }
.site-footer { display: grid; grid-template-columns: 1fr 2fr; gap: 9vw; padding: 70px clamp(22px,7vw,110px); background: var(--night); color: var(--white); }.site-footer .footer-brand { display: inline-flex; align-items: flex-end; justify-self: start; font-family: var(--display); font-size: clamp(2rem,4vw,4rem); font-stretch: 70%; font-weight: 900; line-height: .8; letter-spacing: -.06em; text-decoration: none; }.footer-brand .brand-dot { margin-inline-start: .06em; }.footer-nav { display: flex; flex-wrap: wrap; gap: 18px 32px; align-content: start; }.footer-nav a { font: 700 10px/1.3 var(--mono); }.footer-meta { grid-column: 1/-1; display: flex; justify-content: space-between; padding-top: 40px; border-top: 1px solid #383733; color: #aaa69d; font: 700 9px/1.6 var(--mono); }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.1,1); }.reveal.is-visible { opacity: 1; transform: none; }

/* Chinese headings use the approved compact spacing; Latin display type stays narrowly set. */
html[lang="zh-Hant"] h1,
html[lang="zh-Hant"] h2,
html[lang="zh-Hant"] h3 { font-weight: 700; letter-spacing: -.015em; }
html[lang="zh-Hant"] .inner-hero .zh-title,
html[lang="zh-Hant"] .section-intro .zh-title,
html[lang="zh-Hant"] .copy-block .zh-title { line-height: 1.02; }
html[lang="zh-Hant"] .desktop-nav a,
html[lang="zh-Hant"] .menu-toggle,
html[lang="zh-Hant"] .footer-nav a { font-family: var(--sans-cjk); }
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
.title-lines:not(.zh-title),
.film-caption strong { font-family: var(--display); font-stretch: 70%; font-weight: 700; letter-spacing: -.01em; }
html[lang="en"] .zh-title > span { white-space: normal; }
html[lang="en"] .section-intro h2 { line-height: .98; }
html[lang] .serif-accent { font-family: var(--serif-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }.menu-toggle { display: block; }.site-header { padding-inline: 18px; }
  .section-intro,.copy-block,.lss-home-head { grid-template-columns: minmax(0,1fr); }.section-intro p { justify-self: start; }.cards,.lss-grid { grid-template-columns: minmax(0,1fr); }.card + .card,.lss-grid article + article { border-inline-start: 0; }.study-links { grid-template-columns: repeat(2,minmax(0,1fr)); }.study-links a:nth-child(odd) { border-inline-start: 0; }.portal-grid { grid-template-columns: minmax(0,1fr); }.site-footer { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  .opening-count { inset-inline-end: 17px; }.opening-mark { font-size: clamp(2.7rem,13vw,4.2rem); }.aperture { height: 235svh; }.window-wrap { top: 10svh; padding-inline-end: 11vw; }.image-window { width: min(42vw,190px); }.hero-copy { bottom: 10svh; padding-inline: 20px; }.hero-copy h1 { font-size: clamp(2.45rem,10.5vw,4.8rem); line-height: .93; }.hero-description { max-width: 26em; margin-top: var(--space-heading-copy); font-size: 15px; }.scroll-note { inset-inline-end: 17px; bottom: 18px; }.statement { height: 165svh; }.statement-sticky { justify-content: flex-start; padding: 18svh 20px 10svh; }.statement h2 { font-size: clamp(2.45rem,10.5vw,5.4rem); }.statement-description { margin-top: var(--space-heading-copy); font-size: 15px; }.film { height: 210svh; }.film-head { top: 70px; padding-inline: 18px; }.film-track { top: 20svh; height: 60svh; gap: 22px; }.film-frame,.film-frame.is-wide { width: min(74vw,320px); height: 52svh; }.scan-line { top: 16svh; bottom: 16svh; }.fields { height: 225svh; }.fields-sticky { padding-block: 10svh 4svh; }.fields-head { display: block; padding-inline: 18px; }.fields-head h2 { text-align: start; font-size: 1.7rem; }.field-line { gap: 12px; padding: 2.1svh 18px; }.field-line h3 { display: block; font-size: clamp(3.45rem,16vw,5.2rem); }.field-line small { display: block; margin-top: 7px; font-size: .44rem; }.fields-thread { padding-inline: 18px; text-align: start; font-size: 15px; line-height: 1.8; }.lss-home { padding-inline: 20px; }.lss-home h2 { font-size: clamp(3.6rem,18vw,5.2rem); }.lss-home h2 span { font-size: .31em; }.cases { height: 220svh; }.cases-sticky { padding-top: 12svh; }.cases-head { display: block; padding-inline: 20px; }.cases-head h2 { font-size: clamp(2.25rem,10vw,3.7rem); }.cases-head p { margin-top: 16px; }.cases-track { top: 34svh; gap: 20px; }.case-card { width: min(76vw,310px); }.case-card figure { height: 43svh; min-height: 270px; }.cases-counter { inset-inline-end: 20px; }.finale { height: 195svh; }.finale-sticky { padding-inline: 18px; }.end-logo { top: 27%; font-size: clamp(3.4rem,15vw,5rem); }.finale-copy { padding-bottom: 7svh; }.finale h2 { font-size: clamp(2.45rem,10.5vw,5rem); }.finale-copy > p { font-size: 15px; }.home-footer { display: block; padding-inline: 18px; line-height: 1.7; }.home-footer span,.home-footer a { display: block; }
  .inner-hero { min-height: 82svh; padding-inline: 20px; }.inner-hero h1 { font-size: min(16vw,calc((100vw - 40px) / var(--title-chars,7) * .98)); line-height: .94; }html[lang="en"] .inner-hero h1 { font-size: clamp(2.7rem,11.2vw,4.5rem); }.inner-window { top: 10%; inset-inline-end: 8%; width: clamp(130px,35vw,155px); }.page-solutions .inner-window { top: 9%; inset-inline-end: 12%; width: 32vw; }.page-contact .inner-window { top: 12%; inset-inline-end: 5%; width: 38vw; }.page-experience .inner-window { top: 8%; inset-inline-end: 17%; width: 33vw; }.page-portal .inner-window { top: 13%; inset-inline-end: 7%; width: 31vw; }html[lang="en"] .inner-window { top: 8%; inset-inline-end: 6%; width: 37vw; }.page-not-found .inner-window { top: 12%; inset-inline-end: 10%; width: 31vw; }.page-atelier .inner-window { top: 9%; inset-inline-end: 5%; width: 39vw; }.page-coffee .inner-window { top: 8%; inset-inline-end: 12%; width: 35vw; }.page-sharpening .inner-window { top: 8%; inset-inline-end: 5%; width: 38vw; }.page-interior .inner-window { top: 10%; inset-inline-end: 12%; width: 35vw; }.page-objects .inner-window { top: 8%; inset-inline-end: 6%; width: 39vw; }.page-privacy .inner-hero::after { top: 20%; inset-inline-end: 24px; }.content-band { padding-inline: 20px; }.section-intro h2 { font-size: clamp(2rem,9vw,4rem); }.study-hero { padding-top: 15svh; }.study-feature { height: 58svh; }.portal-card { min-height: 360px; }.card p,.card li,.copy-block p,.section-intro p,.inner-hero .lead,.legal p,.portal-card p,.content-band > p { font-size: 15px; line-height: 1.8; }.footer-meta { display: block; }.footer-meta span { display: block; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }.reveal { opacity: 1; transform: none; } }
.simple-mode .opening { display: none; }.simple-mode .site-header { opacity: 1; }.simple-mode .aperture,.simple-mode .statement,.simple-mode .film,.simple-mode .fields,.simple-mode .cases,.simple-mode .finale { height: auto; min-height: 100svh; }.simple-mode .aperture-sticky,.simple-mode .statement-sticky,.simple-mode .film-sticky,.simple-mode .fields-sticky,.simple-mode .cases-sticky,.simple-mode .finale-sticky { position: relative; min-height: 100svh; height: auto; }.simple-mode .aperture-sticky { display: flex; flex-direction: column; justify-content: space-between; padding-block: 16svh 9svh; }.simple-mode .window-wrap { position: relative; top: auto; }.simple-mode .image-window { clip-path: inset(0); transform: none; }.simple-mode .hero-copy { position: relative; bottom: auto; margin-top: 8svh; }.simple-mode .scroll-note { display: none; }.simple-mode .statement h2 { color: var(--white); background: none; }.simple-mode .film-sticky { padding: 15svh 0 10svh; }.simple-mode .film-track { position: relative; top: auto; inset-inline-start: auto; height: auto; overflow: clip; transform: none !important; padding-inline: 18px; }.simple-mode .film-frame { width: min(76vw,520px); height: 54svh; }.simple-mode .scan-line { display: none; }.simple-mode .film-caption { position: relative; bottom: auto; margin-top: 28px; }.simple-mode .fields-sticky { padding-block: 12svh 8svh; }.simple-mode .field-line { color: var(--white); transform: none !important; }.simple-mode .cases-sticky { padding-bottom: 10svh; }.simple-mode .cases-track { position: relative; top: auto; inset-inline-start: auto; margin-top: 8svh; overflow-x: auto; padding-inline: 20px; transform: none !important; }.simple-mode .finale-sticky { min-height: 110svh; }.simple-mode .end-logo span { opacity: 1; }.simple-mode .end-logo i { transform: none !important; }