/* VenturesLab 创业工场 — d13. Manuscript paper: one green, one ink, one paper; every
   heading written one character per square, the way the logo seals 創業工場 and L·A·B. */

/* The roman also maps the full-width ！ to its own "!", so English set with it reads "Companies!". */
@font-face { font-family: "VL Serif"; src: url(fonts/newsreader-roman.woff2) format("woff2"); font-weight: 400 650; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Serif"; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* The same face for Latin inside Chinese text, leaving curly quotes, dashes and ellipses to the
   Chinese face so they keep their full width. */
@font-face { font-family: "VL Latin"; src: url(fonts/newsreader-roman.woff2) format("woff2"); font-weight: 400 650; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "VL Kai"; src: url(fonts/kai.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --paper: #f7f5ee;
  --card: #fff;
  --ink: #1b1f1a;
  --ink-2: #4a4f47;
  --green: #46a629;      /* the logo's green */
  --green-ink: #2b6f18;  /* the green for words on paper */
  --green-deep: #1f4c17; /* a ground for white words and light logos */
  --line: rgb(70 166 41 / .62);
  --line-soft: rgb(70 166 41 / .26);
  --pad: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --f-serif: "VL Serif", Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  --f-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --f-kai: "VL Kai", "Kaiti SC", STKaiti, KaiTi, "楷体", "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  --f-kai-text: "VL Latin", var(--f-kai);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.lang-zh { font: 400 17px/1.85 var(--f-sans); text-autospace: normal; line-break: strict; }
.lang-en { font: 400 19px/1.55 var(--f-serif); font-optical-sizing: auto; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.sayings :focus-visible { outline-color: #fff; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden, .tile-logo--word + .tile-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 9; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- squares ---------- */

/* A string written one character per square (田字格). Every Chinese character and full-width
   mark is exactly 1em wide, so letter-spacing of (square − 1em) puts each in its own square.
   --n is the longest line in characters, --l the number of lines. */
.cells {
  --c: 64px;
  --cell-line: var(--line);
  --cell-cross: var(--line-soft);
  display: inline-block;
  vertical-align: top;
  inline-size: calc(var(--n) * var(--c));
  block-size: calc(var(--l, 1) * var(--c));
  padding-inline-start: calc(var(--c) * .13);
  font: 400 calc(var(--c) * .74) / var(--c) var(--f-kai);
  letter-spacing: calc(var(--c) * .26);
  text-spacing-trim: space-all;
  text-autospace: no-autospace;
  white-space: nowrap;
  color: var(--ink);
  background-image:
    linear-gradient(to right, var(--cell-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cell-line) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .5px), var(--cell-cross) 0 calc(50% + .5px), transparent 0),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--cell-cross) 0 calc(50% + .5px), transparent 0);
  background-size: var(--c) var(--c);
  box-shadow: inset -1px -1px 0 var(--cell-line);
}
.cells--vertical { writing-mode: vertical-rl; }
h1.cells { --c: clamp(56px, 8vw, 92px); }
h2.cells { --c: clamp(48px, 5.4vw, 68px); }
.cells--seal { --c: 34px; }

.heading--en { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.heading-words { font: 500 clamp(28px, 3.6vw, 46px) / 1.08 var(--f-serif); letter-spacing: .08em; text-transform: uppercase; }
h1 .heading-words { font-size: clamp(36px, 5.6vw, 72px); letter-spacing: .06em; }
.heading--en .heading-words { padding-bottom: .14em; border-bottom: 2px solid var(--green); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--line-soft); }
.masthead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; min-height: 88px; padding-block: 12px; }
.brand { display: block; line-height: 0; border-radius: 1px; }
.logo { display: block; height: 48px; aspect-ratio: var(--w) / var(--h); overflow: hidden; }
.logo img {
  display: block; max-width: none; height: auto;
  width: calc(var(--iw) / var(--w) * 100%);
  margin-left: calc(var(--x) / var(--w) * -100%);
  margin-top: calc(var(--y) / var(--w) * -100%);
  mix-blend-mode: multiply;
}
.nav { margin-left: auto; }
.nav ul, .colophon-nav ul { display: flex; flex-wrap: wrap; gap: 4px 30px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; color: var(--ink); text-decoration: none; letter-spacing: .08em; }
.lang-en .nav a { letter-spacing: .02em; font-size: 18px; }
.nav a::before { content: ""; width: 8px; height: 8px; border: 1px solid transparent; }
.nav a:hover { color: var(--green-ink); }
.nav a:hover::before { border-color: var(--line); }
.nav a[aria-current="page"] { color: var(--green-ink); }
.nav a[aria-current="page"]::before { background: var(--green); border-color: var(--green); }
.switch { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 15px/1.4 var(--f-serif); letter-spacing: .08em; }
.switch:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; text-decoration: none; }
.switch:lang(zh-CN) { font-family: var(--f-sans); }

/* ---------- home: hero ---------- */

.hero { padding-block: clamp(44px, 8vw, 112px) clamp(48px, 7vw, 96px); }
.hero .wrap { container-type: inline-size; }
.hero-cells {
  --c: min(128px, (100vw - 2 * var(--pad)) / var(--n));
  position: relative;
  inline-size: calc(var(--n) * var(--c));
  block-size: var(--c);
  font: 400 calc(var(--c) * .74) / var(--c) var(--f-kai);
  letter-spacing: calc(var(--c) * .26);
  text-spacing-trim: space-all;
  white-space: nowrap;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .5px), var(--line-soft) 0 calc(50% + .5px), transparent 0),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line-soft) 0 calc(50% + .5px), transparent 0);
  background-size: var(--c) var(--c);
  box-shadow: inset -1px -1px 0 var(--line);
}
@supports (width: 1cqi) { .hero-cells { --c: min(128px, 100cqi / var(--n)); } }
@supports (width: round(down, 10.5px, 1px)) { .hero-cells { --c: round(down, min(128px, 100cqi / var(--n)), 1px); } }
.hero-cells > span { position: relative; z-index: 1; display: inline-block; padding-inline-start: calc(var(--c) * .13); }
/* The emphasised word is stamped: its squares filled green like the logo's L·A·B, its
   characters white. */
.hero-cells.has-stamp > span {
  background: linear-gradient(to right, var(--ink) calc(var(--em-at) * var(--c)), #fff 0 calc((var(--em-at) + var(--em-n)) * var(--c)), var(--ink) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-cells.has-stamp::after { content: ""; position: absolute; top: 0; left: calc(var(--em-at) * var(--c)); width: calc(var(--em-n) * var(--c)); height: var(--c); background: var(--green); }

.hero-seal { margin: 0 0 clamp(20px, 3vw, 36px); }
.hero-seal .cells { --c: clamp(26px, 4.2vw, 46px); }
.hero-title { font: 500 clamp(46px, 8.6vw, 124px) / .98 var(--f-serif); letter-spacing: -.012em; max-width: 10.5em; }
.stamp { display: inline-block; padding: .18em .14em .02em; background: var(--green); color: #fff; letter-spacing: .05em; line-height: .8; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 40px); margin: clamp(44px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.facts li { padding-top: 16px; border-top: 2px solid var(--ink); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.lang-zh .facts li { font-weight: 500; letter-spacing: .02em; }
.facts li::before { content: ""; display: block; width: 10px; height: 10px; margin-bottom: 12px; background: var(--green); }

@media (prefers-reduced-motion: no-preference) {
  /* Written in one square at a time, then the stamp comes down. */
  .hero-cells > span { animation: write calc(var(--n) * 110ms) steps(var(--n), end) 200ms backwards; }
  .hero-cells.has-stamp::after { animation: stamp 320ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--n) * 110ms + 260ms) backwards; }
  .hero-title { animation: rise 700ms cubic-bezier(.2, .7, .2, 1) 120ms backwards; }
  .hero-title .stamp { animation: stamp 320ms cubic-bezier(.3, 1.6, .5, 1) 760ms backwards; }
}
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes write-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- home: the founder's letter ---------- */

.letter { padding-block: clamp(32px, 5vw, 72px) clamp(64px, 9vw, 128px); }
.letter-grid { display: grid; grid-template-columns: auto minmax(0, 820px); justify-content: center; align-items: start; gap: clamp(24px, 4vw, 64px); }
.letter-spine { position: sticky; top: 32px; }
.letter-spine .cells { --c: clamp(52px, 5vw, 68px); }
.sheet { padding: clamp(28px, 5vw, 72px) clamp(22px, 5vw, 80px); background: var(--card); box-shadow: 0 1px 2px rgb(27 31 26 / .06), 0 24px 48px -32px rgb(27 31 26 / .35); }
.sheet-title { margin-bottom: 28px; font: 500 clamp(26px, 3vw, 36px) / 1.1 var(--f-serif); letter-spacing: .08em; }
.sheet-title::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 16px; background: var(--green); }
/* Ruled like letter paper; a blank paragraph is one empty ruled line. */
.sheet-body {
  --lh: 40px;
  font: 400 21px / var(--lh) var(--f-kai-text);
  background: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--line-soft) 0) 0 0 / 100% var(--lh);
  text-align: justify;
}
.lang-en .sheet-body { --lh: 36px; font: italic 400 21px / var(--lh) var(--f-serif); text-align: left; }
.sheet-body p, .sheet-body ul { margin: 0; }
.sheet-body p:empty { height: var(--lh); }
.sheet-body ul { padding: 0; list-style: none; }
.sheet-body li { position: relative; padding-left: 1.6em; }
.sheet-body li::before { content: ""; position: absolute; left: .4em; top: calc(var(--lh) / 2 - .22em); width: .44em; height: .44em; background: var(--green); }
.sign { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin-top: 40px; }
.sign-photo { width: 92px; height: 92px; object-fit: cover; object-position: 50% 32%; filter: saturate(.92); }
.sign p { display: grid; margin: 0; text-align: right; font: 400 17px / 1.6 var(--f-kai-text); }
.lang-en .sign p { font: italic 400 18px / 1.5 var(--f-serif); }
.sign-0 { font-size: 30px; letter-spacing: .12em; line-height: 1.3; }
.lang-en .sign-0 { font-size: 30px; letter-spacing: 0; font-style: normal; font-weight: 500; }
.sign-3 { color: var(--ink-2); }

/* ---------- home: sayings ---------- */

.sayings { padding-block: clamp(64px, 9vw, 120px); background: var(--green-deep); color: #f4f7f1; }
.sayings .cells { --cell-line: rgb(255 255 255 / .5); --cell-cross: rgb(255 255 255 / .16); color: #fff; }
.sayings .heading-words { border-bottom-color: var(--green); }
.sayings-tabs { display: flex; margin: clamp(32px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.sayings-tabs button {
  display: grid; place-items: center; width: 54px; height: 54px; margin-left: -1px; padding: 0;
  border: 1px solid rgb(255 255 255 / .5); background: transparent; color: #fff; cursor: pointer;
  font: 400 26px / 1 var(--f-kai);
}
.lang-en .sayings-tabs button { font: 500 24px / 1 var(--f-serif); }
.sayings-tabs button:first-child { margin-left: 0; }
.sayings-tabs button:hover { background: rgb(255 255 255 / .1); }
.sayings-tabs button[aria-selected="true"] { position: relative; background: var(--green); border-color: var(--green); }
.sayings-list { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.saying { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 24px; padding-block: 24px; border-top: 1px solid rgb(255 255 255 / .2); }
.saying-no { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgb(255 255 255 / .5); font: 400 26px / 1 var(--f-kai); }
.lang-en .saying-no { font: 500 22px / 1 var(--f-serif); }
.saying blockquote { margin: 0; max-width: 34em; font: 400 clamp(21px, 2.3vw, 30px) / 1.75 var(--f-kai-text); }
.lang-en .saying blockquote { max-width: 36em; font: italic 400 clamp(21px, 2.3vw, 30px) / 1.45 var(--f-serif); }
.saying blockquote p { margin: 0; }
.saying blockquote::before { content: "“"; display: block; height: .5em; color: var(--green); font: 500 96px / .9 var(--f-serif); }
/* With the script the sayings become tabs, stacked in one cell so the band keeps the height of
   the longest. */
.is-tabbed .sayings-list { display: grid; margin: 0; }
.is-tabbed .saying { grid-area: 1 / 1; display: block; padding: 0; border: 0; }
.is-tabbed .saying-no { display: none; }
.is-tabbed .saying:not(.is-active) { visibility: hidden; }
@media (min-width: 960px) {
  /* The six squares become a margin column beside the saying. */
  .sayings .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .sayings .heading { grid-column: 1 / -1; margin-bottom: clamp(36px, 4vw, 56px); }
  .sayings-tabs { flex-direction: column; margin: 0; }
  .sayings-tabs button { margin: -1px 0 0; }
  .sayings-tabs button:first-child { margin: 0; }
  .sayings-list { grid-column: 1 / -1; margin: 0; }
  .is-tabbed .sayings-list { grid-column: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-tabbed .saying.is-active blockquote { animation: rise 420ms cubic-bezier(.2, .7, .2, 1) backwards; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .lang-zh .hero-cells > span { animation-name: write-down; }
}

/* ---------- home: strategy ---------- */

.strategy { padding-block: clamp(64px, 9vw, 128px); }
.slogan { max-width: 22em; margin: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); font: 400 clamp(26px, 3.4vw, 44px) / 1.45 var(--f-kai-text); letter-spacing: .02em; word-break: keep-all; text-wrap: balance; }
.lang-en .slogan { max-width: 24em; font: italic 400 clamp(26px, 3.2vw, 40px) / 1.25 var(--f-serif); letter-spacing: 0; }
.aims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.aim { padding: 28px clamp(16px, 2vw, 28px) 12px; border-left: 1px solid var(--line-soft); }
.aim:first-child { padding-left: 0; border-left: 0; }
.aim-no {
  --c: 52px;
  display: grid; place-items: center; width: var(--c); height: var(--c);
  border: 1px solid var(--line);
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--line-soft) 0 calc(50% + .5px), transparent 0),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line-soft) 0 calc(50% + .5px), transparent 0);
  font: 400 34px / 1 var(--f-kai); color: var(--green-ink);
}
.lang-en .aim-no { font: 500 26px / 1 var(--f-serif); }
.aim h3 { margin: 24px 0 12px; font: 400 clamp(22px, 2vw, 26px) / 1.4 var(--f-kai-text); }
.lang-en .aim h3 { font: 600 clamp(21px, 1.9vw, 24px) / 1.25 var(--f-serif); }
.aim p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.lang-en .aim p { font-size: 17px; line-height: 1.55; }

/* ---------- inner pages ---------- */

.intro { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); }
.intro-text { max-width: 30em; margin: clamp(28px, 4vw, 48px) 0 0; font: 400 clamp(20px, 2.1vw, 26px) / 1.8 var(--f-kai-text); text-align: justify; }
.lang-en .intro-text { max-width: 32em; font: italic 400 clamp(21px, 2.1vw, 27px) / 1.45 var(--f-serif); text-align: left; }

/* Portfolio: thirty squares — twenty-nine companies and one kept empty. */
.wall { padding-block: clamp(16px, 3vw, 40px) clamp(48px, 6vw, 80px); }
.wall-grid { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.tiles { display: contents; margin: 0; padding: 0; list-style: none; }
.tiles li { display: flex; }
.tile {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; aspect-ratio: 1;
  padding: 12px 14px 14px; margin: 0 -1px -1px 0;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none;
}
a.tile:hover, a.tile:focus-visible { z-index: 1; border-color: var(--green-deep); box-shadow: inset 0 0 0 2px var(--green-deep); color: var(--ink); text-decoration: none; outline: none; }
.tile--dark { background: var(--green-deep); color: #fff; }
a.tile--dark:hover, a.tile--dark:focus-visible { color: #fff; box-shadow: inset 0 0 0 3px var(--green); border-color: var(--green); }
.tile-no { font: 500 14px / 1 var(--f-serif); font-variant-numeric: tabular-nums; color: var(--green-ink); letter-spacing: .06em; }
.tile--dark .tile-no { color: #cfe8c4; }
.tile-logo { display: grid; place-items: center; min-height: 0; }
.tile-logo img { display: block; max-height: 64%; height: auto; object-fit: contain; }
.tile-logo--word, .entry-logo--word { font: 400 clamp(22px, 2.2vw, 28px) / 1.2 var(--f-kai-text); text-align: center; color: var(--ink); }
.tile-name { font-size: 14px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.lang-en .tile-name { font-size: 15px; }
.tile--dark .tile-name { color: #e3eedd; }
.tile--next { display: grid; align-content: space-between; justify-items: start; gap: 12px; background: transparent; border-style: dashed; }
.tile--next p { margin: 0; font: 400 clamp(17px, 1.6vw, 21px) / 1.55 var(--f-kai-text); color: var(--ink-2); }
.lang-en .tile--next p { font: italic 400 clamp(17px, 1.5vw, 20px) / 1.35 var(--f-serif); }

.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; background: var(--green-deep); color: #fff; text-decoration: none; letter-spacing: .1em; font-size: 16px; line-height: 1.4; }
.button:hover { background: var(--green-ink); color: #fff; text-decoration: none; }
.lang-en .button { letter-spacing: .04em; font-weight: 500; }

.ledger { padding-block: 0 clamp(64px, 8vw, 112px); }
.entry { display: grid; grid-template-columns: 240px minmax(0, 680px); justify-content: center; gap: 20px clamp(28px, 5vw, 64px); padding-block: 44px; border-top: 1px solid var(--line-soft); scroll-margin-top: 16px; }
.entry:target { background: linear-gradient(to right, var(--green) 0 4px, transparent 4px); }
.entry-mark { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
.entry-no { display: grid; place-items: center; height: 52px; border: 1px solid var(--line); border-right: 0; font: 500 19px / 1 var(--f-serif); font-variant-numeric: tabular-nums; color: var(--green-ink); }
.entry-logo { display: grid; place-items: center; aspect-ratio: 2 / 1; border: 1px solid var(--line); background: var(--card); }
.entry-logo--dark { background: var(--green-deep); border-color: var(--green-deep); }
.entry-logo img { display: block; max-height: 70%; height: auto; object-fit: contain; }
.entry-logo--word { font-size: 22px; padding: 8px; }
.entry h2 { margin: 6px 0 14px; font: 600 23px / 1.35 var(--f-sans); letter-spacing: .02em; }
.lang-en .entry h2 { font: 600 28px / 1.2 var(--f-serif); letter-spacing: 0; }
.entry-body { color: var(--ink); }
.entry-body p, .bio p { margin: 0 0 .85em; }
.entry-body p:empty, .bio p:empty { display: none; }
.entry-body ol { margin: 0 0 .85em; padding-left: 1.4em; }
.entry-body li p { margin: 0 0 .3em; }
.lang-zh .entry-body { text-align: justify; }
.entry-back { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.entry-back::after { content: " ↑"; }

/* Team */
.members { padding-block: 0 clamp(64px, 8vw, 112px); }
.member { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 700px); justify-content: center; gap: 32px clamp(32px, 6vw, 80px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-soft); }
.member-photo { position: sticky; top: 28px; align-self: start; margin: 10px; }
.member-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; outline: 1px solid var(--line); outline-offset: 10px; }
.member-name { margin-bottom: 24px; font: 400 clamp(40px, 5vw, 64px) / 1.1 var(--f-kai-text); letter-spacing: .06em; }
.lang-en .member-name { font: 500 clamp(40px, 5vw, 60px) / 1.05 var(--f-serif); letter-spacing: -.005em; }
.member-name::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 20px; background: var(--green); }
.lang-zh .bio { text-align: justify; }

/* Contact */
.reach { padding-block: 0 clamp(40px, 6vw, 72px); }
.reach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--card); }
.reach-card { display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: clamp(28px, 4vw, 48px); }
.reach-body { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.reach-body--mail { flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.reach-card + .reach-card { border-left: 1px solid var(--line); }
.label { font-size: 15px; letter-spacing: .24em; color: var(--ink-2); }
.lang-en .label { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.button--big { padding: 18px 40px; font: 400 clamp(26px, 3vw, 34px) / 1.2 var(--f-kai-text); letter-spacing: .12em; }
.lang-en .button--big { font: 500 clamp(24px, 2.6vw, 30px) / 1.2 var(--f-serif); letter-spacing: .04em; }
.button--big::after { content: "→"; margin-left: .5em; font-family: var(--f-serif); }
.reach-address { margin: 0; font: 400 20px / 1.4 var(--f-serif); }
.qr { padding: 10px; border: 1px solid var(--line-soft); line-height: 0; }
.qr img { width: 188px; }
.reach-account { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.account { font: 500 24px / 1.3 var(--f-serif); letter-spacing: .02em; }
.copy { padding: 5px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; cursor: pointer; }
.copy:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.copy-status { font-size: 15px; color: var(--green-ink); }
.offices { padding-block: clamp(32px, 5vw, 64px) clamp(64px, 9vw, 120px); }
.offices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); }
.heading--city.cells, .heading--city .cells { --c: 60px; }
.heading--city.heading--en { flex-direction: column; align-items: flex-start; }
.heading--city .heading-words { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .1em; }
.office ul { margin: 24px 0 0; padding: 0; list-style: none; }
.office li { padding-block: 8px; border-bottom: 1px solid var(--line-soft); font-size: 16px; line-height: 1.7; }
.lang-en .office li { font-size: 17px; }
.office a { color: var(--ink); }
.office a:hover { color: var(--green-ink); }

/* ---------- colophon ---------- */

.colophon { border-top: 3px solid var(--green); }
.colophon-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav switch" "mail mail line"; align-items: center; gap: 20px 40px; padding-block: 36px 40px; }
.colophon .brand { grid-area: logo; }
.colophon .logo { height: 40px; }
.colophon-nav { grid-area: nav; }
.colophon-nav a { color: var(--ink); text-decoration: none; }
.colophon-nav a:hover { color: var(--green-ink); text-decoration: underline; }
.colophon-switch { grid-area: switch; margin: 0; }
.colophon-mail { grid-area: mail; margin: 0; font: 400 17px / 1.4 var(--f-serif); }
.colophon-line { grid-area: line; margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- narrower screens ---------- */

@media (max-width: 1199px) { .wall-grid { --cols: 5; } }
@media (max-width: 959px) {
  .wall-grid { --cols: 3; }
  .aims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aim:nth-child(3) { padding-left: 0; border-left: 0; }
  .aim:nth-child(n + 3) { border-top: 1px solid var(--line-soft); margin-top: 16px; }
  .entry { grid-template-columns: 200px minmax(0, 1fr); }
  .member { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sheet-body, .intro-text, .lang-zh .entry-body, .lang-zh .bio { text-align: start; }
  .masthead-row { gap: 6px 16px; min-height: 0; padding-block: 14px 6px; }
  .logo { height: 40px; }
  .nav { order: 3; width: 100%; margin: 0; }
  .nav ul { justify-content: space-between; gap: 4px 12px; }
  .switch { margin-left: auto; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .letter-grid { grid-template-columns: minmax(0, 1fr); }
  .letter-spine { position: static; }
  .cells--vertical { writing-mode: horizontal-tb; }
  .letter-spine .cells { --c: 46px; }
  .sheet { margin-inline: calc(var(--pad) * -1); }
  .sheet-body { --lh: 36px; font-size: 19px; }
  .lang-en .sheet-body { --lh: 32px; font-size: 19px; }
  .sign-photo { width: 76px; height: 76px; }
  .member { grid-template-columns: minmax(0, 1fr); }
  .member-photo { position: static; max-width: 300px; }
  .entry { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  .entry-mark { max-width: 260px; }
  .reach-grid { grid-template-columns: minmax(0, 1fr); }
  .reach-card + .reach-card { border-left: 0; border-top: 1px solid var(--line); }
  .offices-grid { grid-template-columns: minmax(0, 1fr); }
  .colophon-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo switch" "nav nav" "mail mail" "line line"; }
}
@media (max-width: 599px) {
  /* The Chinese hero stands as one vertical column of squares beside the three lines. */
  .lang-zh .hero .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .lang-zh .hero-cells { --c: 58px; writing-mode: vertical-rl; }
  .lang-zh .hero-cells.has-stamp > span { background-image: linear-gradient(to bottom, var(--ink) calc(var(--em-at) * var(--c)), #fff 0 calc((var(--em-at) + var(--em-n)) * var(--c)), var(--ink) 0); }
  .lang-zh .hero-cells.has-stamp::after { top: calc(var(--em-at) * var(--c)); left: 0; width: var(--c); height: calc(var(--em-n) * var(--c)); }
  .lang-zh .facts { align-content: space-between; margin: 0; }
  .wall-grid { --cols: 2; }
  .aims { grid-template-columns: minmax(0, 1fr); }
  .aim, .aim:nth-child(3) { padding-left: 0; border-left: 0; }
  .aim + .aim { border-top: 1px solid var(--line-soft); margin-top: 16px; }
  .saying { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sayings-tabs button, .saying-no { width: 46px; height: 46px; font-size: 24px; }
  h1.cells { --c: 60px; }
  h2.cells { --c: 50px; }
}