/* ============================================================
   v7.css — "karesansui". Loaded by every page after mobile.css.

   Idea: the business card, as a website. One stone (the cono-cuneus)
   in raked sand; everything else is quiet ink on sand-white paper.
   Rules of the system:
   - One accent, murasaki, and only on the stone and the focus ring.
   - Two weights (300 display, 400 text). One mono register for small
     labels, letter-spaced like the card's role line. Nothing else.
   - Space does the grouping. No boxes, pills or stripes.
   - One idea per screen on the home page.
   Case pages take the header and status line from here, then load
   case-v9.css for their shared reading frame.
   ============================================================ */
:root {
  --sand: #f4f1ec;      /* ground: the card's sand-white paper */
  --sumi: #2a2825;      /* ink */
  --sumi-2: #5d5953;    /* secondary text, 6.2:1 on sand */
  --sumi-3: #69635c;    /* small labels, 5.27:1 on sand */
  --rake: #cfc7ba;      /* raked lines */
  --hair: #e2ddd4;      /* hairlines */
  --mura: #6f4a6f;      /* murasaki: the stone only */
  --gut: 48px;
  --wrap: 1120px;
}

/* ---------- ground and type for V7 pages ---------- */
body.v7 { background: var(--sand); color: var(--sumi); }
body.v7 main { overflow-wrap: break-word; }
.v7 a:focus-visible, .v7 button:focus-visible { outline: 1.5px solid var(--mura); outline-offset: 4px; border-radius: 1px; }
.w { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--sumi-3); font-weight: 400; }
html[data-lang="zh"] .k { letter-spacing: .32em; }
/* V7.1 · one link style everywhere (review 2026-09-23: links were drawn in the
   same hairline colour as the sand, so nothing read as clickable).
   Ink text, an ink-grey underline, murasaki on hover and focus. Murasaki means
   two things only: the stone, and "this is live". */
.quiet-link, .v7-foot a, .hero-actions a { color: var(--sumi); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--sumi-3); text-underline-offset: 6px; transition: color .2s ease, text-decoration-color .2s ease; }
.quiet-link { font-size: 15px; }
.quiet-link:hover, .v7-foot a:hover, .hero-actions a:hover { color: var(--mura); text-decoration-color: var(--mura); }
.arw { display: inline-block; transition: transform .2s ease; }
a:hover .arw { transform: translateX(3px); }
a:hover .arw-down { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .arw, a:hover .arw, a:hover .arw-down { transition: none; transform: none; } }

/* ---------- header (all pages) ---------- */
.site-header { background: #fff; }
body.v7 .site-header { background: rgb(244 241 236 / .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* 6px → 20px (2026-09-25): headings no longer read through the header */
  position: sticky; top: 0; border-bottom: 1px solid transparent; transition: border-color .3s ease; }
body.v7 .site-header.scrolled { border-bottom-color: var(--hair); }
body[data-discipline] .site-header { border-bottom: 1px solid var(--hair); }
.site-header .v7-name { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--sumi); }
.site-header nav a { color: var(--sumi); font-size: 15px; padding: 12px 0; }
.site-header nav a:hover { color: var(--mura); }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; border: 0; }
.site-header .hdr-right { display: flex; align-items: center; gap: 28px; }
.site-header .hdr-right nav a { margin-left: 28px; }
.site-header .hdr-right nav a:first-child { margin-left: 0; }
.site-header .lang-toggle { border: 1px solid var(--sumi-3); background: transparent; font-family: var(--font-sans); font-size: 13px; letter-spacing: .04em;
  color: var(--sumi-2); min-height: 44px; min-width: 52px; padding: 0 12px; border-radius: 22px; cursor: pointer;
  display: inline-grid; place-items: center; line-height: 1; margin-right: 0; }
.site-header .lang-toggle:hover { color: var(--mura); border-color: var(--mura); }
/* every page, V7 or case: the same header width and edges (no wandering) */
.site-header .container { max-width: var(--wrap); padding: 0 var(--gut); align-items: center; }

/* ---------- home: the garden ---------- */
.garden { position: relative; height: min(88vh, 820px); min-height: 560px; overflow: hidden; }
.garden > svg { position: absolute; inset: 0; width: 100%; height: 100%;
  /* the raked field fades into the paper instead of stopping at an edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%); }
.garden [data-part="sand"] path { fill: none; stroke: var(--rake); stroke-width: 1; }
.garden [data-part="hull"] { fill: none; stroke: var(--mura); stroke-width: 1.5; stroke-linejoin: round; }
.garden [data-part="base"], .garden [data-part="top"] { fill: none; stroke: var(--mura); stroke-width: 1; }
.garden [data-part="rules"] { fill: none; stroke: var(--mura); stroke-width: .8; }
.garden-text { position: absolute; left: 0; right: 0; bottom: 64px; }
.garden-text .w { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.name { font-size: 60px; font-weight: 300; line-height: 1.05; letter-spacing: -.005em; margin: 0; }
.name-zh { display: block; font-size: 24px; font-weight: 300; letter-spacing: .12em; margin-top: 14px; }
.role { margin-top: 30px; }
.lede { margin-top: 18px; font-size: 17px; line-height: 1.75; color: var(--sumi-2); max-width: 28em; }
html[data-lang="zh"] .lede { font-size: 16.5px; letter-spacing: .04em; line-height: 1.9; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 30px; font-size: 15.5px; }
.hero-actions a, .v7-foot a { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }

/* the seal: three projections, bottom right, where a painting is signed.
   A visible caption says what it is; it stays quieter than the hero links. */
.seal-wrap { display: grid; justify-items: end; gap: 6px; }
.seal-cap { font-size: 10.5px; }
.seal { display: flex; gap: 2px; }
.seal button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; position: relative; }
.seal button[aria-pressed="true"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; border-top: 1px solid var(--mura); }
.seal button:focus-visible { outline: 1.5px solid var(--mura); outline-offset: 2px; }
.seal svg { width: 20px; height: 20px; overflow: visible; }
.seal path { fill: none; stroke: var(--sumi-3); stroke-width: 5; stroke-linejoin: round; transition: stroke .3s ease; }
.seal button:hover path, .seal button[aria-pressed="true"] path { stroke: var(--mura); }

/* ---------- home: sections ---------- */
.stone-sec { padding-top: 168px; }   /* padding-top only: .w owns the side gutters */
.sec-k { margin-bottom: 72px; }
.work { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.work + .work { margin-top: 136px; }
.work .img { grid-column: 1 / span 7; aspect-ratio: 3 / 2; overflow: hidden; background: #ebe7e0; }
.work .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.work:hover .img img { transform: scale(1.015); }
.work .txt { grid-column: 9 / span 4; padding-bottom: 6px; }
.work.flip .img { grid-column: 6 / span 7; grid-row: 1; }
.work.flip .txt { grid-column: 1 / span 4; grid-row: 1; }
.work h3 { font-size: 30px; font-weight: 300; line-height: 1.25; margin: 18px 0 0; }
.work p { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--sumi-2); }
html[data-lang="zh"] .work p { letter-spacing: .03em; line-height: 1.9; }
.work .more { display: inline-block; margin-top: 22px; }
.all-work { margin-top: 128px; display: flex; justify-content: flex-end; }

.saying { padding-top: 200px; padding-bottom: 40px; }
.saying p { font-size: 34px; font-weight: 300; line-height: 1.55; max-width: 21em; margin: 0; }
html[data-lang="zh"] .saying p { font-size: 30px; letter-spacing: .06em; line-height: 1.8; }
.saying .k { margin-top: 36px; display: block; }
.saying .quiet-link { display: inline-block; margin-top: 40px; }

/* ---------- status: one quiet word with a drafting line ---------- */
.st { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sumi-3); white-space: nowrap; }
.st i { display: inline-block; width: 18px; height: 0; border-top: 1px solid currentColor; }
.st .ln-mp { border-top-width: 2px; }
.st .ln-cn { border-top-style: dashed; }
.st .ln-pe { border-top-style: dotted; border-top-width: 1.5px; }
.st .ln-or { border: 0; height: 1px; background: linear-gradient(90deg, currentColor 0 7px, transparent 7px 9px, currentColor 9px 11px, transparent 11px 13px, currentColor 13px); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.yr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--sumi-3); white-space: nowrap; }

/* project names: the Chinese name follows the English one, Chinese mode only */
html:not([data-lang="zh"]) .nm-zh { display: none; }
.st .ln-ft { border-top-width: 1.5px; }

/* ---------- open items: quiet, but never mistaken for content ---------- */
.todo { color: var(--sumi-3); font-style: italic; }
.todo::before { content: "※ "; font-style: normal; }

/* ---------- footer ---------- */
.v7-foot { margin-top: 176px; border-top: 1px solid var(--hair); }
.v7-foot .w { padding-top: 40px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 40px; font-size: 14px; color: var(--sumi-2); }
.v7-foot .row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.v7-foot a:hover { color: var(--sumi); }

/* Compact footer, shared by the homepage, Work and About (2026-09-25, Wenyu).
   Contact on the left (email + Copy), LinkedIn and copyright on the right. Header
   navigation already covers Work / About, so the footer repeats neither. */
.v7-foot.v7-foot--compact .w { align-items: center; gap: 12px 40px; padding-block: 28px; }
.v7-foot .home-contact, .v7-foot .home-meta { display: flex; align-items: center; }
.v7-foot .home-contact { gap: 12px; }
.v7-foot .home-contact > a { font-size: 16px; }
.v7-foot .home-contact .copy { border: 0; border-radius: 0; min-width: 44px; padding: 0 8px; }
/* Small confirmation after Copy or Contact: the address and the button turn plum for 2s. */
.v7-foot #email, .v7-foot .home-contact .copy { transition: color .35s ease, text-decoration-color .35s ease; }
.v7-foot.just-copied #email { color: var(--mura); text-decoration-color: var(--mura); }
.v7-foot.just-copied .home-contact .copy { color: var(--mura); }
.v7-foot .home-meta { gap: 32px; }
.v7-foot .home-copyright { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .v7-foot.v7-foot--compact .w { display: block; padding-block: 24px; }
  .v7-foot .home-contact { justify-content: space-between; gap: 8px; }
  .v7-foot .home-contact > a { font-size: 15px; }
  .v7-foot .home-meta { justify-content: space-between; gap: 20px; margin-top: 10px; }
}

.copy { font: inherit; font-size: 13px; color: var(--sumi-2); background: transparent; border: 1px solid var(--sumi-3); border-radius: 22px; min-height: 44px; padding: 0 14px; cursor: pointer; }
.copy:hover { color: var(--mura); border-color: var(--mura); }

/* ---------- entrance (2026-09-25) ----------
   V5's page entrance, brought back in a restrained form. One entrance per page, on the first
   screen only, on the site curve: text rises 10px and fades in with a short stagger, images
   only fade. Nothing below the fold animates, so reading and scrolling stay still. Case pages
   fade their hero image instead (case-v9.css). Works with the cross-document fade in
   page-transitions.css; reduced motion shows everything at once. */
@keyframes v7-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v7-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .v9-hero > .ch-glyph, .v9-hero > .name, .v9-hero > .role, .v9-hero > .lede, .v9-hero > .hero-actions,
  .page-head > .k, .page-head > h1, .page-head > p,
  .notfound > * { animation: v7-rise .8s cubic-bezier(.22, 1, .36, 1) both; }
  .v9-hero > .ch-glyph { animation-name: v7-fade; animation-delay: .02s; }
  .v9-hero > .name { animation-delay: .10s; }
  .v9-hero > .role { animation-delay: .20s; }
  .v9-hero > .lede { animation-delay: .30s; }
  .v9-hero > .hero-actions { animation-delay: .42s; }
  .page-head > .k, .notfound > :nth-child(1) { animation-delay: .06s; }
  .page-head > h1, .notfound > :nth-child(2) { animation-delay: .16s; }
  .page-head > p, .notfound > :nth-child(3) { animation-delay: .30s; }
  .about-grid > img { animation: v7-fade .9s ease .40s both; }
}

/* ---------- page heads (work, about) ---------- */
/* 72px at every width (2026-09-25, was 168px on desktop). Measured from the nav text the
   visible gap is 96px: more than the largest gap inside a page's opening (About's title to
   portrait, 88px), less than the 152px between sections, so the head still reads as the
   start of the page and not part of the header. Work shows its first projects above the fold. */
.page-head { padding-top: 72px; }
.page-head h1 { font-size: 44px; font-weight: 300; line-height: 1.2; margin: 22px 0 0; }
.v7-work .page-head h1 { text-wrap: balance; }
.page-head p { margin-top: 18px; font-size: 16px; line-height: 1.8; color: var(--sumi-2); max-width: 34em; }

/* ---------- work: a table of contents ---------- */
.order { margin-top: 56px; display: flex; gap: 28px; align-items: center; }
.order .k { margin-right: 4px; }
.order button { all: unset; cursor: pointer; font-size: 14px; color: var(--sumi-2); padding: 12px 0; }
.order button:hover { color: var(--mura); }
.order button[aria-pressed="true"] { color: var(--sumi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.order[hidden] { display: none; }
.toc { margin-top: 48px; }
.toc-group + .toc-group { margin-top: 88px; }
.toc-group > .k { display: block; margin-bottom: 18px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.toc li { border-bottom: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 112px 1fr 220px 88px 24px; gap: 28px; align-items: center; padding: 20px 0; }
.toc .go { color: var(--sumi-3); justify-self: end; transition: transform .2s ease, color .2s ease; }
.toc a:hover .go { color: var(--mura); transform: translateX(3px); }
.toc .th { aspect-ratio: 16 / 10; overflow: hidden; background: #ebe7e0; }
.toc .th img { width: 100%; height: 100%; object-fit: cover; }
.toc h3 { font-size: 20px; font-weight: 400; margin: 0; line-height: 1.35; }
.toc p { margin-top: 4px; font-size: 14px; color: var(--sumi-2); line-height: 1.6; }
.toc .yr { justify-self: end; }
.toc a:hover h3 { color: var(--mura); }
.toc-archive .th img { filter: grayscale(1); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; margin-top: 88px; align-items: start; }
.about-grid img { display: block; width: 100%; max-width: 360px; height: auto; }
.about-grid .body { display: grid; gap: 22px; font-size: 16.5px; line-height: 1.85; color: var(--sumi-2); max-width: 34em; }
html[data-lang="zh"] .about-grid .body { letter-spacing: .03em; line-height: 2; }
.about-sec { margin-top: 152px; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.about-sec dl { margin: 0; }
.about-sec dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--hair); }
.about-sec dl > div:last-child { border-bottom: 1px solid var(--hair); }
.about-sec dt { font-size: 16px; font-weight: 400; color: var(--sumi); }
.about-sec dd { margin: 0; font-size: 15px; line-height: 1.75; color: var(--sumi-2); }
.about-sec .yr { display: block; margin-bottom: 4px; }
/* How I work (2026-09-26): each stage carries its view of the stone — the glyph by the term, the
   verse as the first line of its description, the practice below in the quieter tone. */
#how dt { display: flex; align-items: center; align-self: start; gap: 10px; line-height: 1.75; }
#how dt .g { width: 16px; height: 16px; flex: 0 0 16px; overflow: visible; fill: none; stroke: var(--mura); stroke-width: 1.25; stroke-linejoin: round; }
#how dd .verse { display: block; margin-bottom: 6px; font-size: 16px; line-height: 1.75; color: var(--sumi); }
.about-sec dl > div.next { border-top-style: dashed; }

/* ---------- case pages ---------- */
.case-back { display: inline-block; margin: 0 0 22px; font-size: 14px; color: #444; text-decoration: underline; text-decoration-color: #b8b8b8; text-underline-offset: 6px; }
.case-back:hover { color: var(--mura); text-decoration-color: var(--mura); }
.case-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -4px 0 18px; }
.case-status .st { color: #6e6e6e; }

/* ---------- tablets: the drop-down menu is on sand, as on phones (was white from mobile.css) ---------- */
@media (min-width: 719px) and (max-width: 1023px) {
  body.v7 .site-header.mobile-menu-open, body.v7 .site-header.mobile-enhanced nav { background: var(--sand); }
  /* Stacked links share the header gutter; desktop spacing must not indent later rows. */
  .site-header.mobile-enhanced nav { padding-left: var(--gut); padding-right: var(--gut); }
  .site-header .hdr-right nav a { margin-left: 0; }
}

/* ---------- phones ---------- */
@media (max-width:719px), (max-width:1023px) and (max-height:520px) and (pointer:coarse) {
  :root { --gut: 22px; }
  body.v7 .site-header.mobile-menu-open, body.v7 .site-header.mobile-enhanced nav { background: var(--sand); }
  .site-header .hdr-right { gap: 8px; }
  .site-header .hdr-right nav a { margin-left: 0; }
  .seal-wrap { justify-items: start; }
  .garden { height: auto; min-height: 0; aspect-ratio: auto; }
  .garden > svg { position: relative; display: block; height: 420px; margin-top: 64px; }
  .garden-text { position: static; padding-bottom: 8px; }
  .garden-text .w { flex-direction: column; align-items: flex-start; gap: 36px; }
  .name { font-size: 44px; }
  .name-zh { font-size: 20px; }
  .role { margin-top: 24px; }
  .stone-sec { padding-top: 112px; }
  .sec-k { margin-bottom: 44px; }
  .work, .work.flip { display: block; }
  .work + .work { margin-top: 88px; }
  .work h3 { font-size: 26px; }
  .all-work { justify-content: flex-start; margin-top: 88px; }
  .saying { padding-top: 128px; }
  .saying p, html[data-lang="zh"] .saying p { font-size: 25px; }
  .v7-foot { margin-top: 112px; }
  .page-head h1 { font-size: 34px; }
  .toc a { grid-template-columns: 88px 1fr; gap: 6px 18px; align-items: start; }
  .toc .go { display: none; }
  .toc .th { grid-row: span 3; }
  .toc .yr { justify-self: start; }
  .about-grid, .about-sec { grid-template-columns: 1fr; gap: 36px; }
  .about-grid { margin-top: 56px; }
  .about-grid img { max-width: 200px; }
  .about-sec { margin-top: 104px; }
  .about-sec dl > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (min-width:720px) and (max-width:1023px) {
  :root { --gut: 36px; }
  .name { font-size: 50px; }
  /* 2026-10-04: the year column was 70px. Measured at 820px, that wrapped three rows
     (ARMASPEED 2021-2023, footwear 2017-2020, and D'apres Ravel's two-part "2024 / 2026",
     which needs 85.9px) and threw them out of line on iPad. 88px matches desktop and holds
     the longest string; .yr is now nowrap so this cannot come back silently. Do not use
     max-content here: each row is its own grid, so the status column would stop aligning. */
  .toc a { grid-template-columns: 96px 1fr 180px 88px 20px; gap: 20px; }
  .work .img { grid-column: 1 / span 7; }
  .work .txt { grid-column: 8 / span 5; }
  .work.flip .img { grid-column: 6 / span 7; }
  .work.flip .txt { grid-column: 1 / span 5; }
}
@media (prefers-reduced-motion: reduce) {
  .work .img img, .toc .th img { transition: none; }
}